這篇文章將為大家詳細講解有關js如何實現(xiàn)網頁版貪吃蛇游戲，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)服務項目包括黑河網站建設、黑河網站制作、黑河網頁制作以及黑河網絡營銷策劃等。多年來，我們專注于互聯(lián)網行業(yè)，利用自身積累的技術優(yōu)勢、行業(yè)經驗、深度合作伙伴關系等，向廣大中小型企業(yè)、政府機構等提供互聯(lián)網行業(yè)的解決方案，黑河網站推廣取得了明顯的社會效益與經濟效益。目前，我們服務的客戶以成都為中心已經輻射到黑河省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

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

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

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

接下來就是代碼實現(xiàn)啦 ~

食物模塊

//食物的自調用函數(shù)
 (function(){

 //創(chuàng)建一個數(shù)組 來存放元素
 var elements=[];

 //食物就是一個對象 有寬 有高 有顏色 有橫縱坐標 先有構造函數(shù) 然后創(chuàng)建對象
 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) {
 //先刪除食物
 //外部無法訪問的函數(shù)
 remove();
 // 創(chuàng)建元素
 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數(shù)組中
 elements.push(div);
 }; 

 //私有的函數(shù) 刪除食物的
 function remove(){
 //elements數(shù)組中有這個食物
 for(var i=0;i
小蛇模塊
//小蛇的自調用函數(shù)
 (function(){

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

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

 //通過原型添加方法，給小蛇添加初始化方法
 Snake.prototype.init=function(map){
 remove();
 //循環(huán)遍歷
 for(var i=0;i0;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];
 //加入到數(shù)組中 以對象的方式加入
 this.body.push({
 x:last.x,
 y:last.y,
 color:last.color
 });
 //把食物刪除 初始化食物
 food.init(map);
 }
 };

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

 //把Snake暴露給window
 window.Snake=Snake;
 }());
游戲模塊
//游戲的自調用函數(shù)
 (function(){

 var that=null;
 //游戲的構造函數(shù)
 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();
 };

 //添加原型函數(shù) 設置小蛇可以自由移動
 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 應該是觸發(fā)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;
 }());
主頁面