原生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...