使用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
- 如何贪吃蛇始终位于屏幕中心?
原理是当贪吃蛇移动时,让地图随着贪吃蛇相反的方向偏移,这样就使得贪吃蛇一直位于屏幕中心了。
- 贪吃蛇的身体如何跟随头部移动?
需要分为两种情况,在单位时间内贪吃蛇移动一单位长度 和 贪吃蛇移动多单位长度。
- 一单位长度时比较简单,只需将旧的头部左边unshift进body数组,body数组pop掉最后一个,然后给头部赋新值。
- 多单位长度时,需要计算出旧头部移动到新头部可能出现的坐标,然后依次unshift进body数组内,body再pop掉多余的坐标。
- 贪吃蛇出生的光圈大小和位置如何计算?
贪吃蛇的头部和身体都是一个一个点,光圈能够随着贪吃蛇形态的变化而变化。
这其实是一个最小覆盖圆算法
。TypeScript实现最小覆盖圆的增量算法
Thanks
如果有所收获,请点个赞~ https://github.com/suyingtao/...