使用原生 js 實現貪吃蛇小遊戲，首先這個 小遊戲的目錄結構如下： 有 貪吃蛇 ， 食物 ，地圖 ，還有 遊戲

當我們在瀏覽器開啟 index.html 的時候，會出現 移動的小蛇 ，隨機生成的食物（這裡只有一個，當前食物被吃掉，才會初始化下一個），使用者通過鍵盤上的方向鍵控制小蛇移動的方向

當小蛇觸碰到了牆，即畫布邊緣的時候，遊戲結束!

接下來就是程式碼實現啦 ~

食物模組

//食物的自呼叫函式
 (function(){

 //建立一個數組 來存放元素
 var elements=[];

 //食物就是一個物件 有寬 有高 有顏色 有橫縱座標 先有建構函式 然後建立物件
 function Food(width,height,color,x,y){
 //元素的寬和高 預設20
 this.width=width||20;
 this.height=height||20;
 //元素的顏色 預設綠色
 this.color=color||"green";
 //元素的橫縱座標 預設為0 
 this.x=x||0;
 this.y=y||0;
 }
 
 //為元素新增初始化的方法 最好放原型裡 公用 在頁面上顯示 所以需要map
 Food.prototype.init=function(map) {
 //先刪除食物
 //外部無法訪問的函式
 remove();
 // 建立元素
 var div=document.createElement("div");
 // 把元素追加到map中
 map.appendChild(div);
 // 設定元素的樣式 寬 高 顏色 
 div.style.width=this.width+"px";
 div.style.height=this.height+"px";
 div.style.backgroundColor=this.color;
 //先脫離文件流
 div.style.position="absolute";
 //橫縱座標隨機產生的
 this.x=parseInt(Math.random()*(map.offsetWidth/this.width))*this.width;
 this.y=parseInt(Math.random()*(map.offsetHeight/this.height))*this.height;
 //元素的橫縱座標
 div.style.left=this.x+"px";
 div.style.top=this.y+"px";

 //把div元素追加到elements陣列中
 elements.push(div);
 }; 

 //私有的函式 刪除食物的
 function remove(){
 //elements陣列中有這個食物
 for(var i=0;i<elements.length;i++){
  var ele=elements[i];
  //找到這個食物的父級元素 從地圖上刪除食物
  ele.parentNode.removeChild(ele);
  //刪除陣列的div元素 在i處刪除一項
  elements.splice(i,1);
 }
 }

 //把Food暴露給window
 window.Food=Food;
 }());

小蛇模組

//小蛇的自呼叫函式
 (function(){

 //定義一個數組 存放小蛇
 var elements=[];

 // 小蛇的建構函式
 function Snake(width,direction){
 //每個部分的寬和高
 this.width=width||20;
 this.height=height||20;
 //小蛇的身體部分
 this.body=[
  {x:3,y:2,color:"red"},//小蛇的頭部
  {x:2,color:"orange"},//小蛇的身體
  {x:1,color:"orange"}//小蛇的身體
 ];
 //方向
 this.direction=direction||"right";
 }

 //通過原型新增方法，給小蛇新增初始化方法
 Snake.prototype.init=function(map){
 remove();
 //迴圈遍歷
 for(var i=0;i<this.body.length;i++){
  //每一個數組元素都是一個物件
  var obj=this.body[i];
  //建立div 
  var div=document.createElement("div");
  //追加到map中
  map.appendChild(div);
  //設定div的樣式
  div.style.position="absolute";
  div.style.width=this.width+"px";
  div.style.height=this.height+"px";
  //橫縱座標
  div.style.left=obj.x*this.width+"px";
  div.style.top=obj.y*this.height+"px";
  //背景顏色
  div.style.backgroundColor=obj.color;
  //方向暫定
  //把div追加到elements陣列中 目的是為了刪除
  elements.push(div);
 }
 };

 //通過原型新增move方法 
 Snake.prototype.move=function(food,map) {
 //小蛇的身體部分 把前一個的橫縱座標給下一個
 var i=this.body.length-1;
 //逆序迴圈
 for(;i>0;i--){
  this.body[i].x=this.body[i-1].x;
  this.body[i].y=this.body[i-1].y;
 }

 // 判斷方向 改變小蛇的頭部的座標
 switch(this.direction){
  case "right":
  this.body[0].x+=1;
  break;
  case "left":
  this.body[0].x-=1;
  break;
  case "top":
  this.body[0].y-=1;
  break;
  case "bottom":
  this.body[0].y+=1;
  break;
 }

 //判斷有沒有吃到食物
 //小蛇的頭的座標和食物的座標一致
 var headX=this.body[0].x*this.width;
 var headY=this.body[0].y*this.height;
 //判斷小蛇的頭部座標和食物的座標是否相同
 if(headX==food.x&&headY==food.y){
  //獲取小蛇的最後的尾巴
  var last=this.body[this.body.length-1];
  //加入到陣列中 以物件的方式加入
  this.body.push({
  x:last.x,y:last.y,color:last.color
  });
  //把食物刪除 初始化食物
  food.init(map);
 }
 };

 //新增私有的刪除函式
 function remove(){
 var i=elements.length-1;
 //逆序 找到這個元素的父元素 刪除
 for(;i>=0;i--){
  var ele=elements[i];
  //從地圖上刪除元素
  ele.parentNode.removeChild(ele);
  //從陣列中刪除
  elements.splice(i,1);
 }
 }

 //把Snake暴露給window
 window.Snake=Snake;
 }());

遊戲模組

//遊戲的自呼叫函式
 (function(){

 var that=null;
 //遊戲的建構函式
 function Game(map){
 this.food=new Food();//食物物件
 this.snake=new Snake();//小蛇物件
 this.map=map;//地圖
 that=this;//保留當前的例項物件到that變數中 此時that 就是this
 }

 //遊戲初始化
 Game.prototype.init=function(){
 //食物初始化
 this.food.init(this.map);
 //小蛇初始化
 this.snake.init(this.map);//先讓小蛇顯示
 //呼叫設定小蛇移動的方法
 this.runSnake(this.food,this.map);
 //呼叫按鍵的方法
 this.bindKey();
 };

 //新增原型函式 設定小蛇可以自由移動
 Game.prototype.runSnake=function(food,map){
 //此時的this是例項物件
 //setInterval 方法是通過window呼叫的 this指向改變了
 var timeId=setInterval(function(){
  this.snake.move(food,map);
  this.snake.init(map);
  //橫座標的最大值 map的屬性在style標籤中
  var maxX=map.offsetWidth/this.snake.width;
  //縱座標的最大值
  var maxY=map.offsetHeight/this.snake.height;
  var headX=this.snake.body[0].x;
  var headY=this.snake.body[0].y;
  // 橫座標方向的檢測
  if(headX<0||headX>=maxX){
  //撞牆了 停止定時器
  clearInterval(timeId);
  alert("遊戲結束");
  }
  //縱座標方向的檢測
  if(headY<0||headY>=maxY){
  //撞牆了 停止定時器
  clearInterval(timeId);
  alert("遊戲結束");
  }
 }.bind(that),200);//繫結到that中 即例項物件
 };

 //獲取使用者的按鍵 改變小蛇的方向
 Game.prototype.bindKey=function(){
 //這裡的this 應該是觸發keydown事件的物件 --document
 //所以這裡的this就是document
 //獲取使用者的按鍵
 document.addEventListener("keydown",function(e){
  switch(e.keyCode){
  case 37: 
  this.snake.direction="left";
  break;
  case 38: 
  this.snake.direction="top";
  break;
  case 39: 
  this.snake.direction="right";
  break;
  case 40: 
  this.snake.direction="bottom";
  break;
  }
 }.bind(that),false);//繫結例項物件
 };

 //暴露給window
 window.Game=Game;
 }());

主頁面

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>貪吃蛇</title>
 <style>
 .map {
 width: 1800px;
 height: 800px;
 background-color: gray;
 position: relative;
 margin: 0 auto;
 }
 </style>
</head>
<body>
 <!-- 畫出地圖 設定樣式 -->
 <div class="map"></div>
 <script src="../js/food.js"></script>
 <script src="../js/snake.js"></script>
 <script src="../js/game.js"></script>
 <script>

 //初始化遊戲物件
 var game=new Game(document.querySelector(".map"));
 //初始化遊戲
 game.init();
 </script>
</body>
</html>

小編還為大家準備了精彩的專題：javascript經典小遊戲彙總

以上就是本文的全部內容，希望對大家學習javascript程式設計有所幫助。