# PlaneGame **Repository Path**: pacezhong/PlaneGame ## Basic Information - **Project Name**: PlaneGame - **Description**: 打飞机小游戏，主要用于培养前端工程师面向对象编程思维，基于ES6类的概念实现 - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-08-17 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # PlaneGame 打飞机小游戏，主要用于培养前端工程师面向对象编程思维，基于ES6类的概念实现。 请使用chrome移动设备模拟窗口查看。 本游戏除了加载es6必要的babel运行时，不依赖第三方功能性库。 ---------- ### 开发： 1. 安装依赖：yarn 或者 npm i 1. 启动服务：yarn dev 或者 npm run dev 执行完，会自动打开浏览器进入开发预览页，具体基本的热更新能力。 ---------- ### 构建： 1. 构建命令：yarn build 或者 npm run build 构建完，会在根目录下生成用于生产环境的dist目录。 ---------- ### 思考步骤： #### STEP 1： 将打飞机游戏，抽象对象概念 1. 抽象类：游戏本身。 1. 实体类：飞机，子弹。 1. 基于飞机的扩展类： 敌机，玩家飞机 #### STEP 2： 对象行为抽象思考 1. 游戏： 初始化时，生产一架玩家飞机，通过定时器生产敌机；在敌机被摧毁时，修改游戏分值，杀敌数据；在玩家飞机被催毁时，修改游戏状态为失败。 1. 玩家飞机： 具备火控能力，具备可控移动能力。 1. 敌机飞机： 接收攻击目标——玩家飞机（target）, 与target做碰撞检测，判断target是否被摧毁，被摧毁，执行destory回调，改为游戏状态为失败； 从target可以获取发射的子弹实体队列，通过对子弹实体做碰撞检测，可以判断是否被击毁，被击毁提供destory回调，可以在游戏类中，设置分值，杀敌数据； #### STEP 3： 思考对象大概的属性与方法实现，思考逻辑关联。 1. 游戏类：游戏数据（杀敌数，总得分，游戏状态）， 状态管理：操作数据，停止生产敌机， 2. 子弹类：创建子弹，设置并缓存子弹基本属性（位置 ，尺寸），具备设置子弹位置，销毁方法。 3. 飞机类：创建飞机，设置并缓存飞机基本属性（位置 ，尺寸），具备设置飞机位置，开火，停火，销毁方法。 开火，停火能力，通过创建子弹实例实现。 4. 玩家飞机：基于飞机类扩展，具备飞机类所有能力与属性，私有方法：控制飞机方向方法实现，火控方法（开火、停火触发方法）, 5. 敌机飞机：基于飞机类扩展，具备飞机类所有能力与属性，私有属性：敌机类型，私有方法：碰撞检测（检测撞毁玩家飞机，检测被玩家飞机子弹击中）， ---------- * 该游戏仅实现了打飞机主流程。 未完善细节：比如成功闯关，失败后重置，成绩单等，留给感兴的小伙伴自己动手开发，灵活运用思维模式。 * 基本思路，具体细节实现，需要大家多思考。 源码注释不够或有无法理解的地方，可以提issues给我。