貪吃蛇小遊戲(原始碼加注釋),看完你還想玩嗎

2021-10-03 14:23:38 字數 2672 閱讀 5686

簡單的貪吃蛇小遊戲,看完**保證你對這個遊戲沒有興趣哈哈

// 貪吃蛇:

// 鍵盤的方向鍵,控制蛇的方向,碰撞食物,實現增加長度的效果,撞到牆壁或自身,遊戲結束

// 分析:

// 地圖:提供邊界

// 食物:隨機出現,可以被碰撞(座標重複)

// 蛇:初始的固定長度,移動,改變方向,碰撞食物,碰撞牆,碰撞自己(座標重複)

class

mapcreateele()

px;height:

$px;background:

$;margin:0 auto;position:relative;border:solid 10px black;`

; document.body.

(this

.mapele);}

}class

food

createele()

px;height:

$px;background:

$;position:absolute;left:

$px;top:

$px;`

;// console.log(m.mapele);

m.mapele.

(this

.foodele);}

randompos()

}// 至少得有多個元素(蛇節)組成

// 每個元素都要有自己的標籤,位置,寬高,顏色

// 單個元素,使用物件包含所有資訊

// 所有元素怎麼辦?來個陣列,包裹起來

class

snake,,

];// 7-1.提前設定預設方向

this

.d =

"right"

;// 3.開始建立蛇節元素,設定樣式

this

.createele()

;}createele()

this

.body[i]

.ele.style.csstext =

`width:

$px;height:

$px;background:

$;position:absolute;left:

$px;top:

$px;`;}

// 找到蛇頭

this

.body[0]

.ele.innerhtml =

"0";

// 5.延遲之後,開始移動

settimeout((

)=>

,300);

}move()

// 7.第乙個元素根據預設方向,決定想哪走

switch

(this

.d)// 8.移動過程中,判斷是否撞到邊界,任意乙個邊界都不行if(

this

.body[0]

.x <0||

this

.body[0]

.y <0||

this

.body[0]

.x >

((m.w-

this

.w)/

this

.w)||

this

.body[0]

.y >

((m.h-

this

.h)/

this

.h))

// 9.移動過程中,判斷是否與食物的座標重複,如果重複if(

this

.body[0]

.x === f.x &&

this

.body[0]

.y === f.y)

)// 重新整理食物的座標

f.randompos()

;}// 10.移動過程中,判斷蛇頭的座標是否與某個任意乙個蛇節的座標重複

for(

var i=

1;i<

this

.body.length;i++)}

// 以上只是在修改座標,生效了麼?設定回去了麼?

// 走的過程中有可能吃到食物,增加乙個蛇節(元素),建立元素

// 11.所以,使用建立蛇節方法,重新設定蛇節的位置以及判斷是否需要建立新元素

this

.createele()

;}direct

(type)}}

function

random

(a,b)

function

randomcolor()

,$,$

)` }

var m =

newmap()

;var f =

newfood()

;// 為了測試,先用計時器,重複執行,看一看隨機效果

// setinterval(() => , 500);

var s =

newsnake()

;// 13.當按下鍵盤時,將按下的鍵盤的code值,傳給蛇的專屬處理方法

document.

onkeydown

=function

(eve)

效果:等一下哦,上一局的馬上重新整理完!!!

貪吃蛇小遊戲

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

JS小遊戲貪吃蛇 詳細注釋

執行 框 貪吃蛇綠色食物 灰色毒品 藍色滑板 紅色剎車 最高分 0 tips ie element.innertext ff element.textcontent setattribute cellpadding 0 在ie中無效,正確寫法cellpadding 一不小心就犯錯了 ff中,使用繫結...

貪吃蛇遊戲(附原始碼)

貪吃蛇遊戲,現在還有很多bug。等待大家挑錯。難度 1最難,500最簡單。吃夠20個食物就可以過關了 呵呵。無聊時候玩玩吧 include include include include const int maxn 100 const int n 20 struct node int map ma...