plane-war

Vue3+canvas 实现飞机大战小游戏

启动

1. 构建

npm run build

2. 启动服务

npm run serve

3. 访问 http://localhost:8080 线上地址 github飞机大战 / gitee飞机大战

目标: 在canvas上实现飞机大战

1. 基于canvas的Custom Renderer实现
2. canvas 使用 pixi.js

目标具体化: Vue3结合pixi.js实现把图形绘制到canvas上

tasking

• 页面跳转
  • 开始界面 StartPage
  • 游戏界面 GamePage
  • 重新开始界面 RestartPage
• 背景滚动
• 我方飞机
  • 键盘控制移动
  • 发射子弹
  • 控制子弹数量 最多20
  • 优化: 丝滑移动
  • 优化: 缓动出场
  • 优化: 顺滑出子弹 按住空格键不断出子弹
• 敌方飞机
  • 随机位置出现
  • 每秒出现一辆
  • 控制数量 最多 20 辆
  • 控制子弹数量 最多 100
  • 每秒发射一颗子弹
  • 优化: 随机小步移动
    • 起始向下移动
    • 左右方向随机
    • 不允许飞出游戏界面 碰到边缘反方向移动
  • 优化: 被击中三次才销毁
• 碰撞检测
  • 敌方子弹离开屏幕边缘
  • 我方子弹离开屏幕边缘
  • 敌方子弹碰撞我方飞机
  • 敌方子弹碰撞我方子弹
  • 我方飞机碰撞敌方飞机
  • 我方子弹碰撞敌方飞机
• 高级功能
  • 计数积分
    • 计算 消灭敌方战机数量 3 分/辆
    • 计算 消灭敌方子弹数量 1 分/颗
  • 历史游戏排行
• 重构
  • 提出键盘事件逻辑
  • 提出帧事件逻辑 addTicer
  • 提出子弹移动逻辑
  • 提出敌机移动逻辑
  • 提出键盘控制本机移动逻辑
• 测试
• 部署到git pages 参考文章

游戏界面