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

2019年8月24日 282次阅读 来源: verysao

基础引见

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

这是一个邻近 deadline 的课设项目，为了方便地运用TS，我直接运用angular-cli天生了TypeScript的项目构造。假如你有好用的TS项目天生器（请引荐给我），运用TypeScript + ES6即可，不引荐运用angular，体积过于巨大。

源码：https://github.com/suyingtao/…

在几天时候内开辟出了单人版和多人版，代码不那么雅观，请谅解~
运用node完成的多人游戏源码不忍直视，故不开源。假如你有足够的时候和精神，迎接扩展出多人游戏版本~

弄法

游戏的弄法和贪吃蛇大作战基础一致。左侧摇杆掌握方向，右边按钮加快。当你掌握的贪吃蛇头部碰撞到墙壁或其他贪吃蛇时，Gameover。

每一段时候会自动天生傻瓜式的AI，它只能随机转向和隐匿墙壁。

Demo

运用了touch事宜，不支撑PC端。
请运用挪动装备接见 http://verysao.com/dragon

游戏截图

《运用TypeScript和Canvas编写挪动端贪吃蛇大作战游戏》

当地运转

    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/…

    原文作者：verysao
    原文地址: https://segmentfault.com/a/1190000013840826
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞