JS实战面向对象贪吃蛇小游戏示例-前端问题

JS实战面向对象贪吃蛇小游戏示例目录思考一.贪吃蛇效果图二.贪吃蛇分析 2.1 开始游戏功能 2.2 运动功能 2.2.1 蛇的不同方向的运动 2.2.2 键盘控制方向运动功能 2.3 吃食物功能 2.3.1 食物的产生 2.3.2 吃食物的过程 2.4 死亡判定功能 2.4.1 触边死亡判

思考

第一步思考蛇分为几个部分，蛇头和蛇身体是怎么形成的。

第二步思考蛇是怎么运动的；如何通过键盘控制蛇的走向。

第三步思考游戏在什么情况下会结束。

第四步思考食物是怎么产生的，产生的位置和蛇的位置有什么需要注意的点。

第五步思考蛇是怎么吃到食物的；吃到后蛇的身体会变长，食物又会产生新的。

第六步做完以后多玩几次，享受一下自己的劳动成果。！！！

一、贪吃蛇效果图

二、贪吃蛇分析

2.1 开始游戏功能

当用户进入游戏主界面时，可在界面中下方显眼的位置找到“start”按钮，点击后用户可进行新游戏。获取button变量，给它添加一个addEventListener('click', function() {})点击事件。


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';
     })
});

2.2 运动功能

2.2.1 蛇的不同方向的运动

当用户点击”开始游戏“按钮后，蛇的方向默认从左到右方向移动。


//当前的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;
}

2.2.2 键盘控制方向运动功能

用户可通过使用键盘上的上下左右方位键控制蛇的移动方向，蛇在控制的方向上进行直线前进。


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;
        }

    }

};

2.3 吃食物功能

2.3.1 食物的产生

食物的位置：遍历蛇的row和col，然后和随机生成的row和col进行判断是否重合。


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;
})());

2.3.2 吃食物的过程

当界面任意位置出现食物，用户使用方位键控制蛇移动到食物周围，当蛇头碰到食物时则表示贪吃蛇吃到此食物，界面上会在任意位置出现下一个食物，用户再次控制蛇去吃这一食物。


//如果当前蛇的头部没有和食物重合就代表没有吃到食物，此时进行尾部删除；
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();
}

2.4 死亡判定功能

当蛇头在前进方向上撞到墙壁或蛇头吃到蛇身时，给出死亡判定，并弹框给出用户本次游戏得分。

2.4.1 触边死亡判断（撞墙了）


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);
}

2.4.2 自己撞到自己


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);
    }
}

2.5 暂停/继续游戏功能


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);
})