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

AlphaWallet 發布于2019-08-22 15:31 / 513人閱讀

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

基本介紹

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

這是一個臨近 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

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

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

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

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

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

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

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

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

Thanks

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

GPU云服務器云服務器 php貪吃蛇游戲開發貪吃蛇游戲php代碼貪吃蛇小游戲js代碼貪吃蛇

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93509.html

爆款游戲《貪吃蛇大作戰》的 Python 實現

摘要：感覺游戲審核新政實施后，國內手游市場略冷清，是不是各家的新游戲都在排隊等審核。不過現在微信已經悍然屏蔽了它的分享這個游戲就是現在免費榜排名第一的貪吃蛇大作戰。不過這實在是一個挺好實現的游戲，于是一時技癢，拿做了一個實現。感覺游戲審核新政實施后，國內手游市場略冷清，是不是各家的新游戲都在排隊等審核。媒體們除了之前競相追捧《Pokemon Go》熱鬧了一把，似乎也聽不到什么聲音了。直到最...

chaos_G 2019-07-31 10:11 評論0 收藏0
Canvas 實現一個簡單的貪吃蛇

摘要：點擊預覽在之前的代碼風格，和樣式上做了大調整，如下圖，主要是美化了移動端移動端中間的圓點按鈕是重新開始，周圍的方向按鈕和游戲手柄操作一樣端鍵盤方向鍵控制本次得分歷史最高分移動端端適配蛇的樣式美化游戲設置障礙物源碼關注我 Intro 點擊預覽在之前的代碼風格，和樣式上做了大調整，如下圖，主要是美化了移動端 Before showImg(https://segmentfault.com...

Jochen 2019-08-26 12:25 評論0 收藏0
python完成簡單的貪吃蛇小游戲附編號

　　此篇文章主要是詳細介紹了python完成簡單的貪吃蛇小游戲附編號，文章內容緊扣主題進行詳盡的基本介紹，具有很強的參考意義，需用的朋友可以學習一下　　序言：　　不知道有沒有同學們和我一樣，最開始觸碰程序編程的動機就是為了做一個游戲打？　　接下來要跟大家分享是指一個pygame所寫的貪食蛇手機游戲：　　貪食蛇這一個手機游戲在編程設計里的熟客，由于：　　簡易，最基本游戲情節你只需要蛇和食物2個就可以...

89542767 2022-12-28 13:46 評論0 收藏0