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

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

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

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

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

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

每一段時(shí)間會(huì)自動(dòng)生成傻瓜式的AI，它只能隨機(jī)轉(zhuǎn)向和躲避墻壁。

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

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

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

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

.
|____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        多人模式下的房間（未開(kāi)發(fā)）
| |____room.component.html
| |____room.component.spec.ts
|____app.component.scss
|____app.component.spec.ts
|____app.module.ts
|____app.component.ts       游戲核心邏輯、渲染主畫(huà)面
|____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        類(lèi)
| |____speedUp.ts       加速類(lèi)
| |____food.ts      食物類(lèi)
| |____joystick.ts      搖桿類(lèi)
| |____dragon.ts        貪吃蛇類(lèi)
|____ws
| |____ws.service.ts        websocket服務(wù)（用于多人游戲）

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

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

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

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

邏輯都比較簡(jiǎn)單，就不細(xì)說(shuō)。

使用canvas繪制游戲畫(huà)面。

在app.component.ts的ngOnInit中渲染搖桿及加速按鈕，因?yàn)檫@兩部分是不變的，不需要不斷地重新繪制。

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

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

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

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

貪吃蛇的身體如何跟隨頭部移動(dòng)？

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

一單位長(zhǎng)度時(shí)比較簡(jiǎn)單，只需將舊的頭部左邊unshift進(jìn)body數(shù)組，body數(shù)組pop掉最后一個(gè)，然后給頭部賦新值。

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

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

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

如果有所收獲，請(qǐng)點(diǎn)個(gè)贊~ https://github.com/suyingtao/...