JS实战面向对象贪吃蛇小游戏示例

btnstart.addEventListener('click', function() {
     btnstart.style.display = 'none';
     //调用中介类
     game = new Game();
     var table = document.querySelector('table');
     table.addEventListener('click', function() {
        //清除定时器
        clearInterval(game.timer);
        btnstop.style.display = 'block';
     })
});

//当前的direction接受willDirection   ！！！
this.direction = this.willDirection;
 
//蛇的不同方向的运动
switch (this.direction) {
     case "R":
            //向右移动
            this.body.unshift({ "row": this.body[0].row, "col": this.body[0].col + 1 });
            break;
     case "D":
            //向下移动
            this.body.unshift({ "row": this.body[0].row + 1, "col": this.body[0].col });
            break;
     case "L":
            //向左移动
            this.body.unshift({ "row": this.body[0].row, "col": this.body[0].col - 1 });
            break;
     case "T":
            //向上移动
            this.body.unshift({ "row": this.body[0].row - 1, "col": this.body[0].col });
            break;
}

Game.prototype.bindEvent = function() {
    var self = this;
    //键盘事件
    document.onkeydown = function(e) {
        switch (e.keyCode) {
            //按左键
            case 37:
                //先进行判断（如果当前的方向是向右移动，此时我们不能按左键）
                if (self.snake.direction == 'R') return;
                // self.snake.direction = 'L';
                self.snake.changeDirection('L');
                self.d = "L";
                break;
                //按上键
            case 38:
                if (self.snake.direction == 'D') return;
                self.snake.changeDirection('T');
                self.d = "T";
                break;
                //按右键
            case 39:
                if (self.snake.direction == 'L') return;
                self.snake.changeDirection('R');
                self.d = "R";
                break;
                //按下键
            case 40:
                if (self.snake.direction == 'T') return;
                self.snake.changeDirection('D');
                self.d = "D";
 
                break;
        }
 
    }
 
};

var self = this; //指的是window
    //下面的do-while循环语句作用是先创建一个row和col，在判断这个是否在蛇身上
    do {
        //食物的位置
        this.row = parseInt(Math.random() * gameSnake.row);
        this.col = parseInt(Math.random() * gameSnake.col);
    } while ((function() {
        //遍历蛇的row和col，然后和随机生成的row和col进行判断，是否重合
        for (var i = 0; i < gameSnake.snake.body.length; i++) {
        if (gameSnake.snake.body[i].row == self.row && gameSnake.snake.body[i].col == self.col) {
             return true;
          }
       }
       return false;
})());

//如果当前蛇的头部没有和食物重合就代表没有吃到食物，此时进行尾部删除；
if (this.body[0].row == game.food.row && this.body[0].col == game.food.col) {
      //如果重合了就代表吃到了，不进行尾部删除，只有头部增加了
      //创建新的食物
      game.food = new Food(game);
      //让帧编号归0，因为蛇会蹿一下
      //吃到食物，加分数
      game.score++;
      game.f = 0;
} else {
      this.body.pop();
}

if (this.body[0].col > game.col - 1 || this.body[0].row > game.row - 1 || this.body[0].col < 0 || this.body[0].row < 0) {
        //右下左上
        alert('游戏结束，您当前的总分为：' + game.score + '分');
        this.body.unshift();
        clearInterval(game.timer);
}

for (var i = 1; i < this.body.length; i++) {
    if (this.body[0].col == this.body[i].col && this.body[0].row == this.body[i].row) {
        alert('游戏结束，您当前的总分为：' + game.score + '分');
        clearInterval(game.timer);
    }
}

btnstop.addEventListener('click', function() {
    btnstop.style.display = 'none';
    game.timer = setInterval(function() {
    // 定时器里面的核心就是游戏的渲染本质，清屏-更新-渲染
    game.f++;
    // 清屏
    game.clear();
    // 蛇的运动/更新
    // 蛇的更新速度  当蛇边长的时候，速度加快
    var during = game.snake.body.length < 30 ? 30 - game.snake.body.length : 1;
    // 蛇的更新
    game.f % during == 0 && game.snake.update();
    // 渲染蛇
    game.snake.render();
    // 渲染食物
    game.food.render();
    }, 20);
})