這篇文章主要介紹了如何基于javascript實現貪吃蛇游戲,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

html代碼：

<div class="content">  <div class="btn startBtn">       <!-- 開始按鈕 -->      <button type="button"></button>  </div>  <div class="btn stopBtn">        <!-- 暫停按鈕 -->    <button type="button"></button>  </div>  <div id="snakeWrap"></div>     <!-- 主題內容 --></div>

css代碼：

* {  margin: 0;  padding: 0;}body {  background-color: #565F65;  width: 100%;  height: 10vh;  overflow: hidden;}.content {  width: 500px;  height: 500px;  position: absolute;  top: 50%;  left: 50%;   margin-top: -250px;  margin-left: -250px;  background-color: #565F65;  border: 10px solid #E7E7E7;  box-shadow: inset 0px 0px 5px 2px #000;}.btn {  width: 100%;  height: 100%;  position: absolute;  top: 0;  left: 0;  background-color: rgba(0, 0, 0, .3);  /*游戲未開始時和暫停時的遮罩*/  z-index: 2;}.btn button {  background: none;  border: none;  background-size: 100% 100%;  cursor: pointer;  outline: none;  position: absolute;  left: 50%;  top: 50%;}.startBtn button{  width: 170px;  height: 80px;  background-image: url(img/startbtn.png);  margin-top: -40px;  margin-left: -85px;}.stopBtn {  display: none;}.stopBtn button{  width: 70px;  height: 70px;  background-image: url(img/stopbtn.png);  margin-top: -35px;  margin-left: -35px;}#snakeWrap {  width: 500px;  height: 500px;  position: relative;}.snakeHead { /*蛇頭樣式*/  background-color: aqua;  border-radius: 50%;}.snakeBody { /*蛇身樣式*/        background-color: navajowhite;  border-radius: 50%;}.food {  /*食物樣式*/  background-image: url(img/food.png);  background-size: cover;}

javascript 代碼：

var sw = 20,  //一個方塊的寬 　 sh = 20,  //一個方塊的高    tr = 25,  //行數    td = 25;  //列數var snake = null,  //蛇的實例    food = null,  //食物的實例    game = null;  //游戲的實例function Square(x, y, classname) {  this.x = x * sw;     //方塊實際的位置  this.y = y * sh;     //方塊實際的位置  this.class = classname;    this.viewContent = document.createElement('div');  //方塊對應的DOM元素  this.viewContent.className = this.class;  this.parent = document.getElementById('snakeWrap'); //方塊的父級}Square.prototype.create = function() {  //創建方塊 DOM,并添加到頁面里  this.viewContent.style.position = 'absolute';  this.viewContent.style.width = sw + 'px';  this.viewContent.style.height = sh + 'px';  this.viewContent.style.left = this.x + 'px';  this.viewContent.style.top = this.y + 'px';    this.parent.appendChild(this.viewContent);};Square.prototype.remove = function() {  this.parent.removeChild(this.viewContent);}//蛇function Snake() {  this.head = null;  //存一下蛇頭的信息  this.tail = null;  //存一下蛇尾的信息  this.pos = [];   //存儲蛇身上的每一個方塊的位置,二維數組    this.directionNum = {  //存儲蛇走的方向,用一個對象來表示    left : {      x : -1,      y : 0,      rotate : 180    },    right : {      x : 1,      y : 0,      rotate : 0    },    up : {      x : 0,      y : -1,      rotate : -90    },    down : {      x : 0,      y : 1,      rotate : 90    }  }}Snake.prototype.init = function() {  //創建蛇頭  var snakeHead = new Square(2, 0, 'snakeHead');  snakeHead.create();  this.head = snakeHead;    // 存儲蛇頭信息  this.pos.push([2, 0]);    //把蛇頭的位置存起來    //創建蛇身體  var snakeBody1 = new Square(1, 0, 'snakeBody');  snakeBody1.create();  this.pos.push([1, 0]);    //把蛇身1的位置存起來    var snakeBody2 = new Square(0, 0, 'snakeBody');  snakeBody2.create();  this.tail = snakeBody2;    //把蛇尾的信息存起來  this.pos.push([0, 0]);    //把蛇身1的位置存起來    //讓蛇頭蛇身形成鏈表關系  snakeHead.last = null;  snakeHead.next = snakeBody1;    snakeBody1.last = snakeHead;  snakeBody1.next = snakeBody2;    snakeBody2.last = snakeBody1;  snakeBody2.next = null;    //給蛇添加一條屬性,用來表示蛇走的方向  this.direction = this.directionNum.right; //默認讓蛇往右走  }//這個方法用來獲取蛇頭的下一個位置對應的元素, 要根據元素做不同的事情Snake.prototype.getNextPos = function() {  var nextPos = [             //蛇頭要走的下一個點的坐標    this.head.x/sw + this.direction.x,    this.head.y/sh + this.direction.y  ];    //下一個點是自己,代表撞到了自己,游戲結束  var selfCollind = false;   //是否撞到自己  this.pos.forEach(function(value) {    if(value[0] == nextPos[0] && value[1] == nextPos[1]) {      //如果數組中的兩個數據都相等,就說明下一個點在蛇身上里面能找到,代表撞到自己了      selfCollind = true;    }  });  if(selfCollind) {    console.log('撞到自己了!');        this.strategies.die.call(this);        return;  }    //下一個點是墻,游戲結束  if(nextPos[0] < 0 || nextPos[1] < 0 || nextPos[0] > td - 1 || nextPos[1] > tr - 1) {    console.log('撞墻了!');        this.strategies.die.call(this);        return;  }  //下一個點是食物,吃  if(food && food.pos[0] == nextPos[0] && food.pos[1] == nextPos[1]) {    //如果這個條件成立說明現在蛇頭要走的下一個點是食物的那個點    console.log('撞到食物了了!');    this.strategies.eat.call(this);    return;  }  //下一個點什么都不是,走  this.strategies.move.call(this);};//處理碰撞后要做的事 Snake.prototype.strategies = {  move : function(format) {  //這個參數用于決定要不要刪除最后一個方塊(蛇尾), 當傳了這個參數后就表示要做的事情是吃    //創建新身體(在蛇頭位置)    var newBody = new Square(this.head.x/sw, this.head.y/sh, 'snakeBody');    //更新鏈表關系    newBody.next = this.head.next;    newBody.next.last = newBody;    newBody.last = null;            this.head.remove();  //舊舌頭從原來的位置刪除    newBody.create();        //創建一個新蛇頭(蛇頭下一個要走到的點)    var newHead = new Square(this.head.x/sw + this.direction.x, this.head.y/sh + this.direction.y, 'snakeHead')    //更新鏈表關系    newHead.next = newBody;    newHead.last = null;    newBody.last = newHead;    newHead.viewContent.style.transform = 'rotate('+this.direction.rotate+'deg)';    newHead.create();            //蛇身上每一個方塊的坐標也要更新    this.pos.splice(0,0, [this.head.x/sw + this.direction.x, this.head.y/sh + this.direction.y]);    this.head = newHead;   //還要把this.head的信息更新一下        if(!format) {  //如何format 的值為 false, 表示需要刪除(除了吃之外的操作)      this.tail.remove();      this.tail = this.tail.last;            this.pos.pop();    }      },  eat : function() {    this.strategies.move.call(this, true);    createFood();    game.score ++;  },  die : function() {    game.over();  }}snake = new Snake();//創建食物function createFood() {  //食物小方塊的隨機坐標  var x = null;  var y = null;    var include = true;  //循環跳出的條件, true表示食物的坐標在蛇身上(需要繼續循環),false表示食物坐標不在蛇身上(不循環了)  while(include) {    x = Math.round(Math.random() * (td - 1)); //0-29    y = Math.round(Math.random() * (tr - 1));        snake.pos.forEach(function(value) {      if(x != value[0] && y != value[1]) {        //這個條件成立說明現在隨機出來的這個坐標,在蛇身上并沒有找到        include = false;      }    });      }  //生成食物  food = new Square(x, y, 'food');  food.pos = [x,y]; //存儲一下生成食物的坐標,用于跟蛇頭要走的下一個點作對比  var foodDom = document.querySelector('.food');  if(foodDom) {    foodDom.style.left = x*sw + 'px';    foodDom.style.top = y*sh + 'px';  }else {    food.create();  }}//創建游戲邏輯function Game() {  this.timer = null;  this.score = 0;  this.speed = 200;}Game.prototype.init = function() {  snake.init();  snake.getNextPos();  createFood();    document.onkeydown = function(ev) {  //用戶按下方向鍵觸發事件    if(ev.which == 37 && snake.direction != snake.directionNum.right) {       //用戶按下左鍵是,蛇不能是往右走      snake.direction = snake.directionNum.left;    }else if(ev.which == 38 && snake.direction != snake.directionNum.dowm) {      snake.direction = snake.directionNum.up;    }else if(ev.which == 39 && snake.direction != snake.directionNum.left) {      snake.direction = snake.directionNum.right;    }else if(ev.which == 40 && snake.direction != snake.directionNum.up) {      snake.direction = snake.directionNum.down;    }  }    this.start();}Game.prototype.start = function() { //開始游戲  this.timer = setInterval(function() {    snake.getNextPos();      }, this.speed);}Game.prototype.pause = function() {  clearInterval(this.timer);}Game.prototype.over = function() { //開始游戲  clearInterval(this.timer);  alert('你的得分為' + this.score);    //游戲回到最初的狀態  var snakeWrap = document.getElementById('snakeWrap');  snakeWrap.innerHTML = '';  snake = new Snake();  game = new Game();  var startBtnWrap = document.querySelector('.startBtn');  startBtnWrap.style.display = 'block'; }//開啟游戲game = new Game();var startBtn = document.querySelector('.startBtn button');startBtn.onclick = function() {  startBtn.parentNode.style.display = 'none';  game.init();};//暫停var snakeWrap = document.getElementById('snakeWrap');var puseBtn = document.querySelector('.stopBtn button')snakeWrap.onclick = function() {  game.pause();  puseBtn.parentNode.style.display = 'block';}puseBtn.onclick =function() {  game.start();  puseBtn.parentNode.style.display = 'none';}