HTML5+JavaScript-ES6移动端2D飞行射击游戏

Posted 2022-02-26 刻刻帝丶

tip：有问题或者需要大厂内推的+我脉脉哦：丛培森 ٩( ‘ω’ )و

【本文源址：http://blog.csdn.net/q1056843325/article/details/70242292 】

前一段时间用javascript写了一个飞机游戏的小项目作为练习
js不到2000行
借用了曾经微信飞机大战的资源
画风大概是这个样子的

• 主UI界面：
  
  
  

• 游戏界面：
  
  
  

• Boss系统：
  
  
  

• 结束界面：
  
  
  

（ps：关于这个boss图片我在网上找的感觉都很违和，最后还是决定使用滑稽作为Boss精灵）

给大家简单介绍一下
感兴趣的同学可以去我的github上查看或下载源码

github传送门：（https://github.com/paysonTsung/Fighter）

游戏项目传送门：（http://seraphspace.com/Fighter/）

（如果在未来某一天这个域名过期了，就直接用这个吧 https://paysontsung.github.io/Fighter/）

PC端Chrome浏览器需要F12切换为移动端查看方式

移动端使用chrome或者qq浏览器（android微信内置）等都是没什么问题的

（如果手机玩这个游戏非常卡，就说明是时候换手机了 ￣O￣)ノ）

---

这个游戏项目有如下特点：

• 分数记录
• 武器升级
• 炸弹清屏
• 音乐、音效
• 游戏难度晋升
• 语言环境选项
• 间隔发射弹幕的boss
• 普通敌机精灵与智能敌机精灵
• 暂停游戏、重新游戏等控制

---

技术栈：

• 面向对象
  • 舍弃一点点性能来让代码更容易管理维护
• webpack 搭建环境
  • babel等解析ES6语法，模块化开发
• 移动端touch事件
  • 移动端touch触摸飞机来移动
• ES6 类、模块、解构赋值、模板字符串…
  • 没有使用任何库而是选择了原生ES6
• html5 画布 Canvas
  • 操作DOM代价太大，canvas绘制精灵必不可少
• HTML5 媒体 Media
  • 游戏的音乐、音效播放
• HTML5 动画 requestAnimationFrame
  • 流畅的Web动画，同样游戏项目必备
• HTML5 客户端本地存储 sessionStorage
  • 选择使用sessionStorage来存储游戏分数记录
• 装饰者模式：面向切面AOP
  • 将改变状态的逻辑从核心逻辑剥离开
• 状态模式：状态机
  • 将不同UI界面看成不同的状态
• 发布-订阅模式/观察者模式
  • 自定义事件
• 策略模式
  • 函数解耦，便于维护
• 资源预加载
  • 图片资源、音效资源预加载
• 对象池技术
  • 垃圾对象重复利用，避免频繁的实例化对象

日后如果有时间，抽出一点代码来谈一谈o(￣▽￣)d