原生js 貪吃蛇 詳細版加功能實現

2021-09-26 01:41:42 字數 2189 閱讀 6451



**js**塊


var div_map; //創造地圖的物件


var div_food; //創造食物的物件


var div_foodf;


var div_foodo;


var div_snake; //建立蛇的物件


var sum=0; //初始化的分數


var time; //接收定時器的變數


var div_eye; //建立眼睛的變數 


var div_an1; //建立暫停繼續


var sort; //分數的div


var sor; 


var div;


var btn;


var bgm;


var bgm1;


window.onload=function()


id2.onclick=function()


id3.onclick=function()


bgm=document.getelementbyid('bgm1') ;


bgm.autoplay='autoplay';


function shili(m,n)


}}//創造地圖物件


function map()


}//建立食物物件


function food()


this.x=math.round(math.random()*39);


this.y=math.round(math.random()*29);


this.food.style.left=this.x*this.width+'px';


this.food.style.top=this.y*this.height+'px'; }}


function foodf()


this.x1=math.round(math.random()*39);


this.y1=math.round(math.random()*29);


this.food.style.left=this.x1*this.width+'px';


this.food.style.top=this.y1*this.height+'px'; }}


function foodo()


this.x2=math.round(math.random()*19);


this.y2=math.round(math.random()*14);


this.food.style.left=this.x2*this.width+'px';


this.food.style.top=this.y2*this.height+'px'; }}


//建立蛇的物件 n傳遞速度的引數


function snake(n)


switch(this.direct)


if(this.snakearr[0][0]==div_foodf.x1&&this.snakearr[0][1]==div_foodf.y1)


//蛇吃到食物增加身體;


if(this.snakearr[0][0]==div_food.x &&this.snakearr[0][1]==div_food.y)


if(math.pow(math.abs(div_foodo.x2*div_foodo.width)-div_snake.snakearr[0][0]*div_snake.width,2)+math.pow(math.abs(div_foodo.y2*div_foodo.height)-div_snake.snakearr[0][1]*div_snake.height,2)<625)


//撞到牆壁死亡


if(this.snakearr[0][0]==40||this.snakearr[0][1]==30||this.snakearr[0][0]==-1||this.snakearr[0][1]==-1)else


}} //撞到自己後死亡


for(var i=1;i}}


div_snake.display();


time=settimeout('div_snake.move()',n);


}}//建立蛇的眼睛


function eye()


} }//按鈕的暫停和繼續


function stop()else


} }}**

貪吃蛇 js版 分享

在學習和總結n多前人的分享後，終於完成了js版 貪吃蛇的小遊戲，邏輯還算清楚 簡單。此版主要是js編寫，稍用了canvas。功能說明 鍵盤方向鍵控制，滑鼠控制，計分制，加速 減速，重置遊戲 簡要分析 1.貪吃蛇本身是乙個 物件陣列 snake array 陣列中的每乙個物件代表了構成貪吃蛇的每乙個小...

js貪吃蛇的詳細介紹

模擬貪吃蛇遊戲,做的專案 地圖 寬，高，背景顏色，因為小蛇和食物都是相對於地圖顯示的,這裡小蛇和食物都是地圖的子元素,隨機位置顯示,脫離文件流的,地圖也需要脫離文件流 css需要設定 寬,高,背景顏色,脫標 食物 div元素 elements 儲存div的陣列 將來刪除的食物div時候,先從map中...

js 實現貪吃蛇專案

近來在學習js高階，便學習著做個網頁版貪吃蛇專案。map tools.js function window.tools tools food.js function game.prototype.start function function runsnake if heady 0 heady ma...