使用TypeScript和Canvas编写移动端贪吃蛇大作战游戏

AlphaWallet 发布于2019-08-22 15:31 / 485人阅读

摘要：基本介绍一款移动端贪吃蛇大作战游戏。主要的游戏逻辑有贪吃蛇移动碰撞检测贪吃蛇碰撞碰撞墙壁和吃食物。贪吃蛇的身体如何跟随头部移动需要分为两种情况，在单位时间内贪吃蛇移动一单位长度和贪吃蛇移动多单位长度。

基本介绍

一款移动端贪吃蛇大作战游戏。(只支持移动端)

这是一个临近 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代码贪吃蛇

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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