目錄

• 思考
• 一、貪吃蛇效果圖
• 二、貪吃蛇分析
• 2.1 開始遊戲功能
• 2.2 運動功能
• 2.2.1 蛇的不同方向的運動
• 2.2.2 鍵盤控制方向運動功能
• 2.3 吃食物功能
• 2.3.1 食物的產生
• 2.3.2 吃食物的過程
• 2.4 死亡判定功能
• 2.4.1 觸邊死亡判斷（撞牆了）
• 2.4.2自己撞到自己
• 2.5 暫停/繼續遊戲功能
• 總結

思考

第一步思考蛇分為幾個部分，蛇頭和蛇身體是怎麼形成的。

第二步思考蛇是怎麼運動的；如何通過鍵盤控制蛇的走向。

第三步思考遊戲在什麼情況下會結束。

第四步思考食物是怎麼產生的，產生的位置和蛇的位置有什麼需要注意的點。

第五步思考蛇是怎麼吃到食物的；吃到後蛇的身體會變長，食物又會產生新的。

第六步做完以後多玩幾次，享受一下自己的勞動成果。！！！

一、貪吃蛇效果圖

二、貪吃蛇分析

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(www.cppcns.com'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";
                bFvMCVnkaYreak;
                //按下鍵
            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 trueFvMCVnkaY;
          }
       }
       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();
http://www.cppcns.com    },20);
})

總結

貪吃蛇小遊戲專案，需要理清楚思路。

到此這篇關於實戰面向物件貪吃蛇小遊戲示例的文章就介紹到這了,更多相關JS貪吃蛇小遊戲內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！