本文實例講述了JS學習筆記之貪吃蛇小游戲demo實例。分享給大家供大家參考，具體如下：
最近跟著視頻教程打了一個貪吃蛇,
來記錄一下實現思路,
先上代碼
靜態頁
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>貪吃蛇</title></head><style>*{ margin: 0; padding: 0;} .map{ width:800px; height: 600px; background-color: #ccc; position:relative; }</style><body><!-- 畫出地圖,設置樣式 --> <div class="map"> </div></body><script src="food.js"></script><script src="snake.js"></script><script src="game.js"></script></html>food.js
//食物就是一個對象,寬高橫縱坐標,先定義構造函數，然后創建對象(function (){ var elements=[];//用來保存每個小方塊食物 function Food(x,y,width,height,color){ //橫縱坐標 this.x=x||0; this.y=y||0; this.width=width||20; this.height=height||20; //背景顏色 this.color=color||"green"; } //為原型添加初始化的方法(作用:在頁面上取顯示這個食物) //因為食物要在地圖上顯示，所以，需要地圖這個參數 Food.prototype.init=function(map){ //先刪除這個食物 //外部無法訪問的函數 remove() var div=document.createElement("div"); //把這個div加到map中 map.appendChild(div); //設置div的樣式 div.style.width=this.width+"px"; div.style.height=this.height+"px"; div.style.backgroundColor=this.color; // div.style.left=this.x+"px"; //先脫離文檔流 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"; // Food.prototype.init=function(map){ // } //把div加入到數組elements中 elements.push(div); } function remove(){ //elements數組中有這個食物 for(var i=0;i<elements.length;i++){ var ele=elements[i] //找到這個子元素的父級元素,然后刪除這個子元素 ele.parentNode.removeChild(ele); //再次把elements中的這個子元素也要刪除 elements.splice(i,1) } } //把Food暴露給Window,外部可以使用 window.Food=Food;}());snake.js
//蛇(function(){ var elements=[];//存放小蛇的每個身體部分 //蛇的構造函數 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() //循環遍歷創建div for(var i=0;i<this.body.length;i++){ var obj=this.body[i]; //創建div var div=document.createElement("div"); //把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) } } //蛇的移動 Snake.prototype.move=function(food,map){ //改變蛇身體位置 var i=this.body.length-1; //2 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; //食物的橫縱坐標 var foodX=food.x; var foodY=food.y; if(headX==foodX&&headY==foodY){ //獲取蛇的最后尾巴 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]; //從map地圖上刪除這個子元素div ele.parentNode.removeChild(ele); elements.splice(i,1); } } window.Snake=Snake;}());//蛇(function(){ var elements=[];//存放小蛇的每個身體部分 //蛇的構造函數 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() //循環遍歷創建div for(var i=0;i<this.body.length;i++){ var obj=this.body[i]; //創建div var div=document.createElement("div"); //把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) } } //蛇的移動 Snake.prototype.move=function(food,map){ //改變蛇身體位置 var i=this.body.length-1; //2 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; //食物的橫縱坐標 var foodX=food.x; var foodY=food.y; if(headX==foodX&&headY==foodY){ //獲取蛇的最后尾巴 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]; //從map地圖上刪除這個子元素div ele.parentNode.removeChild(ele); elements.splice(i,1); } } window.Snake=Snake;}());
新聞熱點
疑難解答
圖片精選
