js貪吃蛇（建構函式）

給大家分享一下這幾天我研究的乙個貪吃蛇，挺簡單的，但是實現起來其實有點繞的，我給大家附上完整**，一起分析學習一下，主要用的是建構函式。

思想：

1

、設計蛇：屬性有寬、高、方向、狀態（有多少節），方法：顯示，跑
2、設計食物：屬性寬、高
3、顯示蛇：根據狀態向地圖裡加元素
4、蛇跑起來：下一節到前一節的位置，蛇頭根據方向變，刪除原來的蛇，新建蛇；當出界時，死亡，初始化；當蛇頭吃到自己的時候，死亡，初始化
5、食物被吃掉，蛇加一節，去掉原來的食物，生成新的食物
6、新增定時器，繫結按鍵

建構函式 ，是一種特殊的方法。主要用來在建立物件時初始化物件， 即為物件成員變數賦初始值，總與new運算子一起使用在建立物件的語句中。特別的乙個類可以有多個建構函式 ，可根據其引數個數的不同或引數型別的不同來區分它們 即建構函式的過載。

new data（）；

然後開始我們的貪吃蛇之旅：1.設定變數，定義蛇的初始狀態

1

//設定蛇的寬、高、預設走的方向
2this.width = 10;
3this.height = 10;
4this.direction = 'right';56
//記住蛇的狀態，當吃完食物的時候，就要加乙個，初始為3個小點為乙個蛇，
7this.body =[
8 , //
蛇頭，第乙個點
9 , //
蛇脖子，第二個點
10 , //
蛇尾，第三個點
11 ];

這裡面我會在**裡做詳細的解釋，大家注意看！！！！

2.顯示蛇

1

for (var i=0; i
18 }

這裡使用到for迴圈，為每乙個物件建立乙個flag物件，也就是蛇身。

3.讓蛇動起來

我的想法就是讓後乙個元素到前乙個元素來，然後這樣蛇就動起來了，

1

//後乙個元素到前乙個元素的位置
2for (var i=this.body.length-1; i>0; i--) 

4.調整蛇頭方向

1

//根據方向處理蛇頭
2switch(this
.direction)
3

5.判斷吃到食物和吃到自己和撞牆的事件這裡提醒一下呢就是，不管你是吃到食物了還是撞牆了還是吃到自己了你到要重新建立蛇。然後呢我會在**裡標註清楚每乙個**的作用。

1

//判斷是否出界,一蛇頭判斷,出界的話，
2if (this.body[0].x < 0 || this.body[0].x > 79 || this.body[0].y < 0 || this.body[0].y > 39) 10}
11//
這裡呢一定要刪除 之後 初始化一下 因為上邊的this.display() 為每乙個body物件都新增了乙個flag 所以這裡刪除原本的蛇 重新初始化一下蛇
12this.body = [ //
回到初始狀態，
13 ,
14 ,
15 
16];
17this.direction = 'right';
18this.display(); //
顯示初始狀態
19return
false; //
結束20}21
22//
判斷蛇頭吃到食物，xy座標重合，
23if (this.body[0].x == food.x && this.body[0].y ==food.y) );
2627
//在這裡 看了上邊的小夥伴可能會有疑惑 this.display 函式裡面生成小蛇的判斷是x！=null 那我吃到實物以後push進去的都是null 為什麼還會建立出來？？？？
28//
這裡呢大家就注意看 this.run() 這個方法 他讓後乙個元素到前乙個元素來 然後你新新增的這一截蛇它會被替換為蛇頭 然後進入 下邊的switch語句 x,y都會變為-1 或者是1 那麼這個時候在走上邊的 this.display() 就可以生成乙個新的小蛇。
2930
31//
清除食物,重新生成食物
32map.removechild(food.flag);
33food.display();34}
35//
吃到自己死亡，從第五個開始與頭判斷，因為前四個永遠撞不到
36for (var i=4; i
46this.body = [ //
回到初始狀態，
47 ,
48 ,
49 
50];
51this.direction = 'right';
52this.display(); //
顯示初始狀態
53return
false; //
結束54}55
}5657//
先刪掉初始的蛇，在顯示新蛇
58for (var i=0; i
63//
重新顯示蛇
64this.display();

6.構造食物食物呢，我們就是建立乙個，當蛇吃到食物，也就是蛇頭與食物的xy座標一樣後刪除食物，然後隨機新建乙個食物

1

this.width = 10;
2this.height = 10;34
this.display = function
() 11
break;12
case 40:
13if (snake.direction != "up") 
16break;17
case 37:
18if (snake.direction != "right") 
21break;22
case 39:
23if (snake.direction != "left") 
26break;27
}28 };

9.設定定時器，讓小蛇自己動起來

1

//點選開始時，動起來
2var begin = document.getelementbyid('begin');
3var
timer;
4 begin.onclick = function
() ;

最後一定要記住，呼叫定時器前一定要先清除定時器！！！！給大家附上完整**：

1

2332
3334
開始遊戲
3536
37244
245246

詳細的解釋我已經在**中注釋，大家把**複製下來就可以直接檢視效果！！！

js 實現貪吃蛇專案

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

貪吃蛇 js版 分享

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

貪吃蛇遊戲

貪吃蛇遊戲 結構化程式設計 c語言程式設計 重要的的是結構化的程式設計思想 include include include include include include define field width 300 就做20個格仔的 define field height 300 define f...