開(kāi)始之前大家最好掌握前端最基本的一些語(yǔ)法如：html、css、JAVAscript等課程知識(shí)點(diǎn)。
好吧！！！因?yàn)殚_(kāi)發(fā)前端的東西無(wú)須安裝任何開(kāi)發(fā)工具，就算啥也不懂也沒(méi)關(guān)系，那么趕緊瓜子花生板凳準(zhǔn)備好快跟著老師來(lái)體驗(yàn)一下編程的魅力吧！:)
真實(shí)效果圖如下：
程序思維
開(kāi)發(fā)的大概思路是首先在Body中定義一個(gè)div作為容器，然后使用樣式定義界面游戲場(chǎng)景，角色（貪吃蛇）以及食物，然后編寫JavaScript腳本對(duì)游戲地圖，角色以及食物進(jìn)行初始化的渲染，再編寫move函數(shù)完成蛇身移動(dòng)，蛇身在移動(dòng)的過(guò)程當(dāng)中判斷蛇頭和蛇身是否重疊，促使蛇身增長(zhǎng)，假如蛇頭在移動(dòng)的過(guò)程當(dāng)中碰到身體的其它部位，或者超出地圖編寫視作游戲結(jié)束Game Over,當(dāng)蛇身長(zhǎng)度達(dá)到某個(gè)長(zhǎng)度值我們可以設(shè)置通關(guān)條件可以增加移動(dòng)速度。
廢話不多說(shuō)直接按步驟擼代碼！！！
第一步：編寫游戲地圖/貪吃蛇/食物樣式
第二步：定義初始化數(shù)據(jù)（并定義功能函數(shù)）
第三步：創(chuàng)建地圖(函數(shù))
第四步：創(chuàng)建/擦除蛇身(函數(shù))
第五步：蛇身移動(dòng)(函數(shù))
第五步中調(diào)用的函數(shù)：吃到食物（函數(shù)）
由于是否吃到食物和控制方向函數(shù)都是蛇身移動(dòng)過(guò)程當(dāng)中需要反復(fù)調(diào)用，所以最后單獨(dú)寫成了獨(dú)立函數(shù)在蛇身移動(dòng)函數(shù)中調(diào)用，好了代碼到此結(jié)束！最后大家可以來(lái)試試?yán)玻?/p>
如果有小伙伴在編寫代碼過(guò)程當(dāng)中碰到問(wèn)題歡迎大家添加關(guān)注私信我來(lái)咨詢，或找我獲取錄制的經(jīng)典小游戲之貪吃蛇游戲錄制的視頻和代碼。
