開始之前大家最好掌握前端最基本的一些語法如:html、css、JAVAscript等課程知識點。
好吧!!!因為開發前端的東西無須安裝任何開發工具,就算啥也不懂也沒關系,那么趕緊瓜子花生板凳準備好快跟著老師來體驗一下編程的魅力吧!:)
真實效果圖如下:

程序思維
開發的大概思路是首先在Body中定義一個div作為容器,然后使用樣式定義界面游戲場景,角色(貪吃蛇)以及食物,然后編寫JavaScript腳本對游戲地圖,角色以及食物進行初始化的渲染,再編寫move函數完成蛇身移動,蛇身在移動的過程當中判斷蛇頭和蛇身是否重疊,促使蛇身增長,假如蛇頭在移動的過程當中碰到身體的其它部位,或者超出地圖編寫視作游戲結束Game Over,當蛇身長度達到某個長度值我們可以設置通關條件可以增加移動速度。
廢話不多說直接按步驟擼代碼!!!
第一步:編寫游戲地圖/貪吃蛇/食物樣式


第二步:定義初始化數據(并定義功能函數)

第三步:創建地圖(函數)

第四步:創建/擦除蛇身(函數)


第五步:蛇身移動(函數)



第五步中調用的函數:吃到食物(函數)


由于是否吃到食物和控制方向函數都是蛇身移動過程當中需要反復調用,所以最后單獨寫成了獨立函數在蛇身移動函數中調用,好了代碼到此結束!最后大家可以來試試啦!
如果有小伙伴在編寫代碼過程當中碰到問題歡迎大家添加關注私信我來咨詢,或找我獲取錄制的經典小游戲之貪吃蛇游戲錄制的視頻和代碼。