本文例項為大家分享了js實現簡單貪吃蛇遊戲的具體程式碼，供大家參考，具體內容如下

上下左右鍵控制方向使貪吃蛇吃葡萄
吃5個葡萄，遊戲結束時左上角為總得分。

執行結果：

介面和css程式碼這裡就不加贅述了，主要貼js程式碼（加了註釋）：

var config = {
 width: 20,//一個格子的寬度
 height: 20,//一個格子的高度
 tr: 30,//行數
 td: 30 //列數
}
var snake = null,//Snake的例項
 food = null,//Food的例項
 game = null; //遊戲的例項

//我們把蛇移動的整個區域設定成一個具有30列30行的網格座標
//方塊(格子)座標位置
/**
0,0 (0,0)
20,0 (1,0)
40,0 (2,0)
*/
function Square(x,y,className) {
 this.x = x*config.width;
 this.y = y*config.height;
 this.className = className;
 this.contentDom = document.createElement('div');//該位置的方塊對應的DOM元素
 this.contentDom.className = this.className;
 this.parent = document.getElementsByClassName("innerSnake")[0];

}
Square.prototype.create = function() { //建立方塊並新增到頁面
 this.contentDom.style.position = 'absolute';
 this.contentDom.style.width = config.width + 'px';
 this.contentDom.style.height = config.height + 'px';
 this.contentDom.style.left = this.x + 'px';
 this.contentDom.style.top = this.y + 'px';

 this.parent.appendChild(this.contentDom);
};
Square.prototype.remove = function() { //移除方塊
 this.parent.removeChild(this.contentDom);
};

//蛇
function Snake() {
 this.head = null; //蛇頭
 this.tail = null; //蛇尾
 this.pos = []; //二維陣列，儲存蛇身上每個節點（方塊）
 this.directionKey = { //儲存蛇走的方向
 left: { //往左走
 x: -1,//橫座標減1，一個座標表示一個格子
 y: 0,//縱座標不變
 rotate: 90
 },right: { //往右走
 x: 1,y: 0,rotate: -90
 },up: { //往上走
 x: 0,y: -1,rotate: 180
 },down: { //往下走
 x: 0,y: 1,rotate: 0 //蛇頭圖片方向，順時針為正
 }
 }
}
Snake.prototype.init = function() { //初始化蛇
 //蛇頭
 var snakeHead = new Square(2,"head");
 snakeHead.create(); //將蛇頭新增到介面
 this.head = snakeHead; //儲存蛇頭資訊
 this.pos.push([2,0]); //儲存蛇頭座標

 //蛇的第1節身體
 var snakeBody1 = new Square(1,"body");
 snakeBody1.create(); //將蛇的第一節身體新增到介面
 this.pos.push([1,0]);

 //蛇的尾巴
 var snakeTail = new Square(0,"body");
 snakeTail.create(); //將蛇尾新增到介面
 this.tail = snakeTail; //儲存蛇尾資訊
 this.pos.push([0,0]);

 //形成連結串列關係
 snakeHead.prev = null; //蛇頭的前面沒有元素，指向null
 snakeHead.next = snakeBody1; //蛇頭的後面有一節身體，其.next指標指向後面那節身體

 snakeBody1.prev = snakeHead; //蛇的第一節身體，.prev指向前面的蛇頭snakeHead
 snakeBody1.next = snakeTail; //蛇的第一節身體，.next指向後面的身體，此時是蛇尾snakeTail

 snakeTail.prev = snakeBody1; //蛇尾，.prev指向前面的蛇身體snakeBody1
 snakeTail.next = null; //蛇尾後面沒有元素，指向Null

 //初始蛇的走向，後面想改變蛇的走向即改變this.direction
 this.direction = this.directionKey.right; //預設向右走

};

//獲取蛇頭下一個位置對應的元素,根據元素做下一個動作
Snake.prototype.getNextPos = function() {
 var nextPos = [ //獲取蛇頭走的下一個點的座標
  this.head.x / config.width + this.direction.x,this.head.y / config.height + this.direction.y
 ];

 //判斷下一個點是自己or食物or圍牆or無障礙?
 var self = false; //設定下一個點是否是自己
 this.pos.forEach(function(val) { //val即二位陣列中的一個座標
 if(val.toString() === nextPos.toString()) { //下一個座標等於蛇全部身體的一個，即下一個點是自己
    self = true;
  }
 });
 if(self) {
 // console.log('撞到自己了！');
 this.collide.end.call(this); //game over

 return;
 } else if(nextPos[0] < 0 || nextPos[1] < 0 || nextPos[0] > config.td-1 || nextPos[1] > config.tr-1) {
 // console.log('撞到牆壁了！');
 this.collide.end.call(this); //game over

 return;
 } else if (food && food.pos[0] === nextPos[0] && food.pos[1] === nextPos[1]) {
 console.log('撞到食物了！');
 this.collide.eat.call(this);
 } else {
 // console.log('啥都沒遇到！');
 this.collide.move.call(this,false); //注意：.call(this)重新設定this指向,使其指向當前例項物件Snake
 }
 

};

//處理碰撞後的事件
Snake.prototype.collide = {
 /*
 碰到自己or牆壁,遊戲結束end();
 碰到食物,eat();
 啥都沒遇到,move();
 */
 move: function(isEat) { //isEat 是否吃了食物，不是則刪除蛇尾
 /*
 掐頭去尾:
 create新蛇頭,remove舊蛇頭;
 create一個新身體,放在(替代)舊蛇頭的位置;
 remove蛇尾,蛇尾prev的元素變成新蛇尾
 */
 var x = this.head.x / config.width + this.direction.x,y = this.head.y / config.height + this.direction.y;
 //宣告一個新身體
 var newBody = new Square(this.head.x/config.width,this.head.y/config.height,"body");
 //更新連結串列關係
 newBody.next = this.head.next;
 newBody.next.prev = newBody;
 newBody.prev = null;

 this.head.remove(); //刪除舊蛇頭
 newBody.create(); //新增蛇身體,替代在舊蛇頭位置

 //宣告一個新蛇頭(下一個走的點)
  var newHead = new Square(x,"head");
  //更新連結串列關係
  newHead.prev = null;
  newHead.next = newBody;
  newBody.prev = newHead;

  this.pos.unshift([x,y]); //更新蛇節點的座標this.pos
  this.head = newHead; //更新this.head的資訊
  
  newHead.contentDom.style.transform = `rotate(${this.direction.rotate}deg)`
  newHead.create(); //新增蛇頭

  //刪除蛇尾：吃食物則不刪
  if(!isEat) { //沒有吃食物,刪除蛇尾
  this.tail.remove();
  this.tail = this.tail.prev;

  this.pos.pop(); //更新蛇節點座標
  }
  // console.log(this.pos); //列印陣列,驗證
 },eat: function() {
 this.collide.move.call(this,true); //傳參true,表示此時為吃操作
 food.remove(); //刪除被吃掉的食物
 game.score ++; //記錄分數
 createFood(); //此時再隨機產生一個食物
 },end: function() {
 console.log('end');
 game.gameOver();
 }

}

snake = new Snake();

//建立食物
function createFood() {
 var x = null,y = null;
 var include = true; //表示食物的位置是否在蛇身上
 var random = function(max,min) { //產生一個隨機數
 return Math.floor(Math.random()*(max - min + 1))
 };
 while(include) {
 x = random(config.tr - 1,0);
 y = random(config.td - 1,0);

 snake.pos.forEach(function(val) {
 if(x != val[0] && y != val[1]) {
 include = false;
 }
 });
 }

 //生成食物
 food = new Square(x,"food");
 food.pos = [x,y]; //記錄食物座標
 food.create();
}

//遊戲邏輯
function Game() {
 this.score = 0; //分數
 this.timer = null; //計時器
}
Game.prototype.init = function() {
 snake.init();
 // snake.getNextPos(); //獲取下一個點座標
 createFood();

 document.onkeydown = function(event) {
 if(event.which == 37 && snake.direction != snake.directionKey.right) { 
  //滑鼠左鍵,蛇不能是正在往右走
 snake.direction = snake.directionKey.left;
 } else if (event.which == 38 && snake.direction != snake.directionKey.down) { 
 //滑鼠上鍵
 snake.direction = snake.directionKey.up;
 } else if (event.which == 39 && snake.direction != snake.directionKey.left) { 
 //滑鼠右鍵
 snake.direction = snake.directionKey.right;
 } else if (event.which == 40 && snake.direction != snake.directionKey.up) { 
 //滑鼠下鍵
 snake.direction = snake.directionKey.down;
 }
 }
 this.start();
};
game = new Game();
//開始遊戲
Game.prototype.start = function() {
 this.timer = setInterval(function() {
 snake.getNextPos(); //獲取下一個座標點，做下一步動作
 },200);
};
//遊戲結束
Game.prototype.gameOver = function() {
 console.log("gameOver");
 clearInterval(this.timer);
 var gameOver = document.querySelector('.gameOver');
 var gameScore = document.querySelector('.gameOver .score');
 gameOver.style.display = 'block'; //顯示遊戲結束介面
 gameScore.innerHTML = `${this.score}`; //將分數記入該介面
};

//開啟遊戲
function startGame() {
 var startBtn = document.querySelector('.btn button');
 var snakeWrap = document.querySelector('.snakeWrap');
 startBtn.onclick = function() {
 startBtn.parentNode.style.display = 'none'; //隱藏開始遊戲介面
  snakeWrap.style.display = 'block'; //顯示進入遊戲的介面
  game.init();

 }
}
startGame();

主要用到連結串列資料結構

更多有趣的經典小遊戲實現專題，也分享給大家：

C++經典小遊戲彙總

python經典小遊戲彙總

python俄羅斯方塊遊戲集合

JavaScript經典遊戲 玩不停

java經典小遊戲彙總

javascript經典小遊戲彙總

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。