js canvas實現簡易版貪吃蛇

2021-10-12 04:25:18 字數 1362 閱讀 6884

lang

="en"

>

>

charset

="utf-8"

>

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

>

貪吃蛇title

>

>

canvas

style

>

head

>

>

"snake"

width

="600"

height

="600"

>

canvas

>

>

// 食物

class

food

// 生成隨機座標

getrandowloc()

// 通過座標生成食物並將食物放在容器(畫布)grid中

render

(drawtools)

}class

snake,,

]}// 渲染蛇

render

(drawtools))}

// 蛇移動

move

(xdistance, ydistance, drawtools)

else)if

(grid.food.x ===

this

.body[0]

.x *

30&& grid.food.y ===

this

.body[0]

.y *30)

else}}

}// 網格

class

grid

this

.redraw()

},1000/3

)}// 渲染網格

render()

this

.drawtools.strokestyle =

"#fff"

this

.drawtools.

stroke()

}// 重繪

redraw()

// 監聽鍵盤事件

listenkeydown()

})}}

let grid =

newgrid

(document.

getelementbyid

("snake"))

script

>

body

>

html

>

簡易版redux實現

redux其實只有幾個重要的api,getstate,subscribe和dispatch,getstate用來獲取狀態,subscribe監聽狀態的改變,dispatch派發事件改變狀態,下面就來看下。首先是createstore,它接收三個引數,分別是reducer函式,初始狀態值,還有就是中介...

簡易版貪吃蛇小遊戲。

以上就是我測試的結果,能完成基本的功能。ifndef game h define gamae h include include include include define rows 20 define cols 20 define snake length 20 20 define sleep ...

JS簡易版網頁貪吃蛇(16)

通過鏈結乙個js檔案js檔案 1,建立地圖物件 div var map var snake var food var map function var map function map 2,建立食物 物件 function food this.x math.round math.random 39 ...