使用phaser打僵尸游戏
Phaser介绍
Phaser是一个用于开发2D视频游戏的开源框架，使用JavaScript和HTML5编写。它被设计为跨平台，可以在桌面和移动浏览器上运行，并且支持Canvas和WebGL渲染。Phaser因其易用性和强大的功能而受到广大游戏开发者的欢迎。
Phaser提供了许多特性来帮助开发者创建游戏，包括但不限于：
- 精灵（Sprites）：管理游戏中的角色和其他图像元素。
- 物理引擎：内置了Arcade Physics、Ninja Physics和P2.js等物理引擎，用于处理碰撞检测和物体间的互动。
- 动画：支持创建和管理复杂的动画序列。
- 音效和音乐：添加背景音乐和音效效果。
- 输入处理：处理用户的键盘、鼠标、触摸屏和游戏手柄输入。
- 粒子系统：创建视觉上吸引人的粒子效果。
- 加载资源：简单地加载图像、音频和其他游戏资产。
- 状态管理：管理不同游戏状态，如菜单、关卡和结束画面。
从模版项目开始
template-vue-ts
简单的小游戏
phaser使用起来很简单，步骤大概就是下面这些
- 配置游戏实例，开启物理引擎
- 创建游戏场景
- 加载资源
- 使用加载的资源创建游戏对象
- 为游戏对象创建动作、绑定事件等
我照着官方的示例，也弄了个小游戏，上下移动，空格发射子弹
有个卡点就是，不知道怎么播放gif动画，搜了半天，是需要把gif转成精灵图。精灵图是一种图像文件，它包含多个小图像，这些小图像通常是游戏或动画中角色的不同姿态或者物体的不同状态。通过在软件中快速顺序显示这些小图像，可以创建出动画效果。
比如这个gif
转成精灵图就是
就是把gif里的每一帧取出来，做成一张图
可以用这个工具gif-to-sprite
其他的卡点没有，基本按照文档就能很好的使用