簡單的貪吃蛇小遊戲

2021-10-01 23:21:04 字數 2159 閱讀 7530

食物的建立

蛇頭吃食物

遊戲結束

原始碼乙個基於原生js可由鍵盤上下左右控制的貪吃蛇遊戲,主要開發思路分為以下幾個部分:

基本的html頁面(地圖區域,開始按鈕,計分板)

地圖網格的建立(這裡為方便修改,用js建立可控大小的網格)

蛇頭的建立

蛇的移動

食物的建立,隨機刷位置(排除刷在蛇身上的情況)

蛇頭和食物碰撞可增加長度

蛇頭碰邊界或自身則遊戲結束

這部分很簡單,主要包含1個列表(用來建立網格)、乙個開始按鈕、乙個計分板的div、乙個蛇頭的div,如果需要更華麗的效果,可再新增css樣式

"container"

>

"uls"

>

<

/ul>

"btn"

>start<

/button>

"score"

>score:

0<

/div>

"snake"

>

<

/div>

<

/div>首先宣告乙個物件,定義網格的長寬及每乙個格仔的尺寸

data =

,

給定 ul 的寬度,在預留的 ul 中新增 li ,給li乙個浮動,根據溢位會換行則可以建立出x列y行的網格,li 數量和大小由data確定

function

creatmap()

start()

;}

這裡需要注意,給列表加邊框時,會出現 li 邊框重疊以及和 ul 邊框重疊的情況,可以給 ul 只加左邊框和上邊框,li 只加下邊框和右邊框來解決,下面為圖示

建立完畢為這樣的效果

跟上方類似,不過只有乙個格仔的大小

這裡使用定時器自動移動,當按下對應的按鍵時改變方向

以右鍵舉例:乙個簡單的按鍵函式,當按下右鍵時,蛇頭離地圖左側的左邊距變為原來左邊距+乙個格仔的寬度,即向右移動一格,其他方向同理。

因為蛇身為乙個陣列,移動即為這乙個方塊的左邊距和上邊距變為上乙個方塊的左邊距和上邊距

for

(var i = odiv.length-

1; i >

0; i--

)

首先給蛇身和列表給乙個格仔乙個索引值,當索引值不相等時,則可把這個格仔加入陣列中

/*排除豆豆重新整理在蛇身體上的情況*/

var hrr =

;for

(var i =

0; i < lis.length ; i++)}

function

isfilter

(li)

}return

true

;}

在排除重疊可能後,則建立陣列中乙個隨機索引值的方塊,效果如下,綠色為蛇頭黃色為食物

碰撞的臨界值有四種情況,即物體1的右邊距=物體2的左邊距,物體1的左邊距=物體2的右邊距,上下同理(邊距為物體邊框和ul邊框之間的距離)

}

/*吃豆豆加蛇身*/if(

eat(odiv[0]

,food)

)

當蛇頭不與 li 相撞時則為出界,當蛇頭與任何一截蛇身上下左右邊距都相等時則為撞到自己,此時提示遊戲結束

貪吃蛇小遊戲

1 doctype html 2 html 3 head 4 title snake title 5head 6 body style text align center margih 100px background color aaaaaa 7 canvas id canv width 400 ...

C 貪吃蛇小遊戲

自學了幾天c 嘗試寫了乙個貪吃蛇小遊戲,比較詳細地做了注釋,實現 1 貪吃蛇基本功能 2 長按加速 3 計分板 xaml 及介面 namespace 貪吃蛇 新食物生成 public void newfoodgenerate 計時器每乙個計時週期內的時間處理程式 void timer tick ob...

貪吃蛇小遊戲實現

index.html style.css mapindex.js tools.js 自呼叫函式傳入window的目的,是讓變數可以被壓縮 防止undefined重新命名,也可以被壓縮 function window,undefined 暴露tools給window window.tools tool...