使用TypeScript和Canvas編寫移動端貪吃蛇大做戰遊戲

基本介紹

一款移動端貪吃蛇大做戰遊戲。(只支持移動端)

這是一個臨近 deadline 的課設項目，爲了方便地使用TS，我直接使用angular-cli生成了TypeScript的項目結構。若是你有好用的TS項目生成器（請推薦給我），使用TypeScript + ES6便可，不推薦使用angular，體積過於龐大。

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

在幾天時間內開發出了單人版和多人版，代碼不那麼美觀，請諒解~
使用node實現的多人遊戲源碼不忍直視，故不開源。若是你有充足的時間和精力，歡迎擴展出多人遊戲版本~

玩法

遊戲的玩法和貪吃蛇大做戰基本一致。左側搖桿控制方向，右側按鈕加速。當你控制的貪吃蛇頭部碰撞到牆壁或其餘貪吃蛇時，Gameover。

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

Demo

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

遊戲截圖

本地運行

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

Build

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

文件結構

主要代碼都位於src/app內，如下是src/app文件夾內的目錄結構及文件說明。

.
|____app.component.html
|____gameover
| |____gameover.component.scss
| |____gameover.component.html
| |____gameover.component.ts        遊戲結束彈窗
| |____gameover.component.spec.ts
|____room
| |____room.component.scss
| |____room.component.ts        多人模式下的房間（未開發）
| |____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服務（用於多人遊戲）

遊戲邏輯

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

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

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

碰撞檢測就是對 貪吃蛇、食物 循環遍歷。

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

渲染原理

使用canvas繪製遊戲畫面。

在app.component.ts的ngOnInit中渲染搖桿及加速按鈕，由於這兩部分是不變的，不須要不斷地從新繪製。

渲染的主要函數爲app.component.ts內的render函數，依次繪製出地圖、食物、貪吃蛇，當重疊時，先繪製的會位於底層。

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

Q&A

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

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

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

  須要分爲兩種狀況，在單位時間內貪吃蛇移動一單位長度 和 貪吃蛇移動多單位長度。

1. 一單位長度時比較簡單，只需將舊的頭部左邊unshift進body數組，body數組pop掉最後一個，而後給頭部賦新值。
2. 多單位長度時，須要計算出舊頭部移動到新頭部可能出現的座標，而後依次unshift進body數組內，body再pop掉多餘的座標。

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

  貪吃蛇的頭部和身體都是一個一個點，光圈可以隨着貪吃蛇形態的變化而變化。
  這實際上是一個最小覆蓋圓算法。TypeScript實現最小覆蓋圓的增量算法

Thanks

若是有所收穫，請點個贊~ https://github.com/suyingtao/...