摘要：基本介紹一款移動端貪吃蛇大作戰(zhàn)游戲。主要的游戲邏輯有貪吃蛇移動碰撞檢測貪吃蛇碰撞碰撞墻壁和吃食物。貪吃蛇的身體如何跟隨頭部移動需要分為兩種情況，在單位時間內(nèi)貪吃蛇移動一單位長度和貪吃蛇移動多單位長度。

一款移動端貪吃蛇大作戰(zhàn)游戲。(只支持移動端)

這是一個臨近 deadline 的課設(shè)項目，為了方便地使用TS，我直接使用angular-cli生成了TypeScript的項目結(jié)構(gòu)。如果你有好用的TS項目生成器（請推薦給我），使用TypeScript + ES6即可，不推薦使用angular，體積過于龐大。

源碼：https://github.com/suyingtao/...

在幾天時間內(nèi)開發(fā)出了單人版和多人版，代碼不那么美觀，請諒解~
使用node實現(xiàn)的多人游戲源碼不忍直視，故不開源。如果你有充足的時間和精力，歡迎擴展出多人游戲版本~

游戲的玩法和貪吃蛇大作戰(zhàn)基本一致。左側(cè)搖桿控制方向，右側(cè)按鈕加速。當你控制的貪吃蛇頭部碰撞到墻壁或其他貪吃蛇時，Gameover。

每一段時間會自動生成傻瓜式的AI，它只能隨機轉(zhuǎn)向和躲避墻壁。

使用了touch事件，不支持PC端。
請使用移動設(shè)備訪問 http://verysao.com/dragon

    npm i // 安裝依賴
    ng serve -p 0 // 本地啟動

ng build –-prod –-aot --env=prod

主要代碼都位于src/app內(nèi)，以下是src/app文件夾內(nèi)的目錄結(jié)構(gòu)及文件說明。  

.
|____app.component.html
|____gameover
| |____gameover.component.scss
| |____gameover.component.html
| |____gameover.component.ts        游戲結(jié)束彈窗
| |____gameover.component.spec.ts
|____room
| |____room.component.scss
| |____room.component.ts        多人模式下的房間（未開發(fā)）
| |____room.component.html
| |____room.component.spec.ts
|____app.component.scss
|____app.component.spec.ts
|____app.module.ts
|____app.component.ts       游戲核心邏輯、渲染主畫面
|____speed-up
| |____speed-up.component.html
| |____speed-up.component.scss
| |____speed-up.component.ts        加速按鈕
| |____speed-up.component.spec.ts
|____menu
| |____menu.component.ts        主菜單
| |____menu.component.spec.ts
| |____menu.component.html
| |____menu.component.scss
|____joystick
| |____joystick.component.spec.ts
| |____joystick.component.scss
| |____joystick.component.html
| |____joystick.component.ts        搖桿按鈕
|____rank
| |____rank.component.html
| |____rank.component.spec.ts
| |____rank.component.scss
| |____rank.component.ts        積分榜
|____factory        類
| |____speedUp.ts       加速類
| |____food.ts      食物類
| |____joystick.ts      搖桿類
| |____dragon.ts        貪吃蛇類
|____ws
| |____ws.service.ts        websocket服務(wù)（用于多人游戲）

貪吃蛇是由一連串的位置坐標和半徑描述而成。

主要的游戲邏輯有： 貪吃蛇移動 、 碰撞檢測（貪吃蛇碰撞、碰撞墻壁和吃食物）、 AI。

貪吃蛇的移動距離根據(jù) 方向 + 速度 + 時間 求出，而方向又由 搖桿方向 + 角速度 + 時間 求出。

碰撞檢測就是對 貪吃蛇、食物 循環(huán)遍歷。

邏輯都比較簡單，就不細說。

使用canvas繪制游戲畫面。

在app.component.ts的ngOnInit中渲染搖桿及加速按鈕，因為這兩部分是不變的，不需要不斷地重新繪制。

渲染的主要函數(shù)為app.component.ts內(nèi)的render函數(shù)，依次繪制出地圖、食物、貪吃蛇，當重疊時，先繪制的會位于底層。

在render函數(shù)內(nèi)使用了 clearRect(0, 0, this.width, this.height) 和 requestAnimationFrame(this.render.bind(this)) 不斷地清空、繪制、清空、繪制，從而達到了動態(tài)的效果。

如何貪吃蛇始終位于屏幕中心？

原理是當貪吃蛇移動時，讓地圖隨著貪吃蛇相反的方向偏移，這樣就使得貪吃蛇一直位于屏幕中心了。

貪吃蛇的身體如何跟隨頭部移動？

需要分為兩種情況，在單位時間內(nèi)貪吃蛇移動一單位長度 和 貪吃蛇移動多單位長度。

一單位長度時比較簡單，只需將舊的頭部左邊unshift進body數(shù)組，body數(shù)組pop掉最后一個，然后給頭部賦新值。

多單位長度時，需要計算出舊頭部移動到新頭部可能出現(xiàn)的坐標，然后依次unshift進body數(shù)組內(nèi)，body再pop掉多余的坐標。

貪吃蛇出生的光圈大小和位置如何計算?

貪吃蛇的頭部和身體都是一個一個點，光圈能夠隨著貪吃蛇形態(tài)的變化而變化。
這其實是一個最小覆蓋圓算法。TypeScript實現(xiàn)最小覆蓋圓的增量算法

如果有所收獲，請點個贊~ https://github.com/suyingtao/...