簡單的js練手小程式貪吃蛇

程式設計分為：html&css部分和kjs部分：

在html中設定兩個div，乙個作為專案的背景，另乙個記錄得分

定義一些初始的引數，比如蛇的長度，大小，食物的大小，蛇的位置，初始得分

構造啟動函式，建立食物和蛇，設定定時器，讓蛇動起來

定義邏輯結構，觸碰邊界彈出遊戲結束，清除蛇和食物，觸屏身體遊戲結束，吃到食物長度加1

設定背景

//記錄得分

0

可以給2個div標籤設定乙個邊框，背景，來美化。

定義初始值

init()
//用this就可以直接將值傳入本函式中的所有函式中，相當於向函式中加入引數，只是為了簡便
function init()

建構函式

啟動函式裡分為蛇函式，食物函式，定時器

function startgame()

食物函式

function food()

蛇函式

function snakecreate() )
$snake.addclass('snake')
if(this.snake[i][2] == 'head')
}

邏輯函式

如何讓蛇動起來，只要依次將蛇陣列中的每乙個前面的橫縱座標賦值給後乙個，再加上定時器，就可以實現蛇的運動。判斷邏輯也寫在move函式中，全部通過蛇頭來進行判斷，當蛇頭的橫縱座標和邊框以及食物的橫縱座標進行比較，建立迴圈，讓蛇頭每次都和蛇身體的橫縱座標對比，如果蛇頭碰到身體也結束。當然也要在函式中增加監聽鍵盤事件，當按下鍵盤的上下左右鍵時，要做出對應的操作。吃到食物後的增加蛇身體邏輯也值得考究。

每次想要創造蛇身體時，就必須清除上一次的蛇的身體，所以在構造蛇函式時，給蛇加上類名，方便jquery選擇器選到蛇進行清除。

function move() 
switch(this.direct)
//繫結鍵盤事件
//keycode 37 = left
// keycode 38 = up
// keycode 39 = right
// keycode 40 = down
document.onkeydown = function(event) 
$('.snake').remove()
snakecreate()
if(this.snake[0][0] < 0 || this.snake[0][1] < 0 || this.snake[0][0] >= this.backx/20 || this.snake[0][1] >= this.backy/20)if(this.snake[0][0] == this.foodx && this.snake[0][1] == this.foody)
for(var j = 1; j < this.snake.length; j++)
}}

判斷蛇的方向的函式我們單獨拿出來寫，當按下左方向鍵時，我們要讓下次事件不再接收左右的按鍵，只接受上下，通過初始設定來實現這個操作。

unction direction(keycode);
break;
case 38:
if(this.up);
break;
case 39:
if(this.right);
break;
case 40:
if(this.up);
break;
default:break;
}}

吃到食物的增加邏輯確實值得深思，不同的情況要考慮周全，這裡只做了簡單的一些邏輯判斷，根據蛇頭的方向，來進行簡單新增下乙個蛇身體。

var i = this.snake.length

switch (this.direct)else;

break;

case 'left':

if(this.snake[i-1][0] <= this.backx/20-1 && this.snake[i-1][0]+1 != this.snake[i-2][0])else;

break;

case 'up':

if(this.snake[i-1][1] <= this.backy/20-1 && this.snake[i-1][1]+1 != this.snake[i-2][1])else;

break;

case 'down':

if(this.snake[i-1][1] >= 1 && this.snake[i-1][1]-1 != this.snake[i-2][1])else;

break;

default:break;}}

這樣乙個簡單的貪吃蛇就完成了。當然可以在裡面新增，按鈕使得畫面更生動。

簡單的js練手小程式貪吃蛇

前端練手小專案貪吃蛇

簡單的「貪吃蛇」

程式設計實現貪吃蛇小程式

簡單的js練手小程式 貪吃蛇

前端練手小專案 貪吃蛇

簡單的「貪吃蛇」

程式設計實現貪吃蛇小程式

相關推薦

簡單的js練手小程式貪吃蛇

前端練手小專案貪吃蛇