onShow(){ // 第一次初始化
        this.conH = this.$refs["con"].getBoundingClientRect().height ;
        this.conW = this.$refs["con"].getBoundingClientRect().width ;
        this.h = Math.floor(this.conH / this.snakeBody);
        this.w = Math.floor(this.conW / this.snakeBody);
        for (var i = 0; i < this.w; i++) { //繪制網格
            this.grid.push([])
            for (var j = 0; j < this.h; j++) {
                this.grid[i].push({
                    x: i,
                    y: j
                });
            }
        }
        this.init(); //初始化函數


}

 init(){
        const snakePos = [ //蛇的初始化的身體
            {
                x : 0,
                y : 0,
                flag : 'b',
                id : Math.random()
            },
            {
                x : 1,
                y : 0,
                flag : 'b',
                id : Math.random()
            },
            {
                x : 2,
                y : 0,
                flag : 'h',
                id : Math.random()
            }
        ];
        this.snake.snakePos = snakePos; //把初始化的身體賦給蛇
        this.randomFood(); //隨機生成食物
}

 randomFood(){ //隨機生成食物
        while(true){
            let x = Math.floor(Math.random() * this.conW);
            let y = Math.floor(Math.random() * this.conH);
            x = x - (x % this.snakeBody); //x，y化為和蛇身體倍數的坐標
            y = y - (y % this.snakeBody);
            let is = this.snake.snakePos.find((item)=>{
                return item.x == x && item.y == y;
            })
            this.food.x = x;
            this.food.y = y;
            if(!is) { //當食物的位置不為蛇不和蛇的位置重疊就跳出結束死循環
                break;
            }
        }
    }

des:{//蛇的方向
          "-20":{ // 向上移動一位
              x:0,
              y:-1,
              flag: ''
          },
          "20":{//向下
              x:0,
              y:1,
              flag: ''
          },
          "10":{ //右
              x:1,
              y:0,
              flag: ''
          },
          "-10":{ //左
              x:-1,
              y:0,
              flag: ''
          }
        },
 addHead(des){ 
       //添加蛇頭 des為蛇的方向，一共有四個方向上下左右，每次移動是都會傳一個方向過來
        const oHead = this.snake.snakePos[this.snake.snakePos.length -1];
        const newHead ={
            x : oHead.x + des.x,
            y : oHead.y + des.y,
            flag : 'h',
            id : Math.random()
        }
        this.isEnd(newHead);
        this.snake.snakePos.push(newHead);


        oHead.flag = 'b';
    },
    move(des){ // 蛇移動時，原頭變身體，原尾巴去掉，也就是push一個頭，shift一個尾巴
        this.addHead(des);
        this.snake.snakePos.shift();


    },

isEnd(newHead){//判定蛇是是否死亡
        if(newHead.x >= this.w || newHead.x < 0 || newHead.y >= this.h || newHead.y < 0){
            this.setIsEnd();
        }


        let is = this.snake.snakePos.find((item)=>{ //循環查詢是否撞到自己
            return item.x == newHead.x && item.y == newHead.y;
        })
        if(is){
            this.setIsEnd(); //結束游戲
        }
    },
setIsEnd(){
        clearInterval(this.timeId); //清除蛇的移動定時器
        this.isEndP = true; //這個屬性是用來是否顯示游戲結果界面
    }

    intervalMove(d){ // 自動跑
        if(!this.isStart) return;//判定是否開始
        clearInterval(this.timeId); //清除以前的定時時器
        this.timeId = setInterval(()=>{
            const head = this.snake.snakePos[this.snake.snakePos.length - 1];
            this.move(d);
            if(this.snakeBody * head.x == this.food.x && this.food.y == this.snakeBody * head.y ){ //蛇吃到食物
               this.addHead(d); //新增蛇頭，這個不去除尾巴
               this.randomFood(); //再次重新生成食物
                this.result++; //分數
            }
        },1000/this.level); //this.level級別，決定蛇移動的速度
    },
    isCuurDes(value = '',x1,x2){
        // 判斷當前蛇的方向,x1 為新方向，x2為以前的方向，主要是判斷點擊的按鈕是否左右，上下沖突
        if((+x1 + +x2) == 0 ) return false; //這里+x1，+x2 是用來把字符串轉成數字
        if(this.isEndP) return;//當游戲結束無法再修改方向 
        this.currDes = value; //存下方向
        return true;
    },
clickBut(m){// 點擊按鈕
        const value = m.target.dataSet.value;
        switch(value){
            case "-20":{ //上
              //判斷方向是否相反，如果相反則不切換方向
              this.isCuurDes(this.des[value],this.des[value].y,this.currDes.y)
                && this.intervalMove(this.des[value]);
              break;
            }
            case "20":{// 下
                this.isCuurDes(this.des[value],this.des[value].y,this.currDes.y)
                  && this.intervalMove(this.des[value]);
                break;
            }
            case "-10":{ //左
                this.isCuurDes(this.des[value],this.des[value].x,this.currDes.x)
                  && this.intervalMove(this.des[value]);
                break;
            }
            case "10":{ // 右
                this.isCuurDes(this.des[value],this.des[value].x,this.currDes.x)
                  && this.intervalMove(this.des[value]);
                break;
            }
            case "1": { //開始或暫停
                if(this.isEndP) return
                this.isStart = !this.isStart;
                if(this.isStart && !this.isEndP){
                    this.intervalMove(this.currDes);
                }else{
                    clearInterval(this.timeId);
                }
                break;
            }
        }
    }