ES6飞机大战篇-敌机自动移动发射子弹

想要游戏变得有点难度的话就得让敌机自己动起来（移动轨迹提前设置好）那么就得单独的来进行控制敌机上下左右发射

首先制作数据：

/*** health：生命值* width：宽度* height：高度* image：图片* enemyMoveFunc：function 返回自动移动的数据* timer：ms 执行时间间隔时间* moveDirection：移动方向、按下的键位 可以设置多个 , 作为分隔符 将会同时按下* distance：一次性移动多少距离* isHideHealth：是否不显示血量*/
planeLeftRight: {type: "enemy",health: 100,width: 80,height: 60,distance: 2,delayX: 100,image: "enemy-1",bulletNumber: 1,canvasImage: enemyImage_1,enemyMoveFunc() {return [{timer: 500,moveDirection: "button",distance: 3,},{timer: 500,moveDirection: "left,shoot",distance: 3,},{timer: 2000,moveDirection: "button,right",distance: 4,},{timer: 3000,moveDirection: "top,left,shoot",distance: 3,},{timer: 3000,moveDirection: "right",distance: 3,},{timer: 6000,moveDirection: "button",distance: 3,},];},},

可以看到我添加一堆移动预设有发射有上下左右等等接下来就是解析

// 移动映射函数 对应函数名字
this.moveDirectionMap = {top: "enemyForward",button: "enemyBackOff",left: "enemyLeftTranslation",right: "enemyRightTranslation",shoot: "enemyShoot",};
// 飞机移动enemyMove() {// 获取移动的数据const autoMoveList = this.autoMoveList;// 按键映射const moveDirectionMap = this.moveDirectionMap;if (Array.isArray(autoMoveList) && autoMoveList.length !== 0) {// 如果当前没有正在移动的数据则进行重新判断let operationIndex = 0;// 使用自定义移动方法const moveFunc = async () => {// 检测并运行const singleMove = autoMoveList[operationIndex];if (singleMove === undefined) return;// 配置当前操作const operationOptions = {operationIndex: operationIndex,operationTimer: null,moveNumber: 1,moveTimer: null,operationStop() {if (this.operationTimer) {clearTimeout(this.operationTimer);this.operationTimer = null;}if (this.moveTimer) {clearInterval(this.moveTimer);this.moveTimer = null;}},};// 将操作表进行分割 进行多个按键同时生效const directionList = singleMove.moveDirection.split(",");for (const index in directionList) {if (Object.hasOwnProperty.call(directionList, index)) {const element = directionList[index];// 调用移动方法this[moveDirectionMap[element]] &&this[moveDirectionMap[element]]();}}// 添加相对应的速度this.enemyFlySpeed = (singleMove.distance || this.enemyFlySpeed) * this.speedUp;// 进行移动时间记录 按照 60hz/1(具体取决于配置的飞机移动间隔) 的记录规则operationOptions.moveTimer = interval(() => {operationOptions.moveNumber += 1;}, allMoveSpeed);// 等待上一个执行完后执行下一个operationOptions.operationTimer = setTimeout(() => {// 停止移动this.enemyStop();operationIndex += 1;operationOptions.operationIndex += 1;operationOptions.moveNumber = 1;if (operationIndex < autoMoveList.length) {moveFunc();} else {if (typeStore[this.type].hasOwnProperty(this.id)) {this.enemyBackOff();}}}, singleMove.timer);// 保存typeStore[this.type].setId(this.id, { operationOptions });};// 如果 当前在移动 （暂停后继续执行const operationTarget = typeStore[this.type].getId(this.id);if (operationTarget &&operationTarget.hasOwnProperty("operationOptions")) {// 获取操作对象const operationOptions = operationTarget.operationOptions;// 获取上一次正在操作的数据operationIndex = operationOptions.operationIndex;const singleMove = autoMoveList[operationIndex];if (singleMove === undefined) return;// 将上一次执行的时间 进行合并if (singleMove) {singleMove.timer =singleMove.timer - allMoveSpeed * operationOptions.moveNumber;}moveFunc();} else {// 使用方法moveFunc();}} else {// 类型是往上移动if (this.moveType === "top") {this.enemyForward();// 如果类型是往下移动} else if (this.moveType === "buttom") {this.enemyBackOff();}}}// 前进（往上enemyForward() {// 清除重复定时器intervalStore.add(() => {// 判断范围if (this.positionY <= containerInfo.offsetTop) return;this.positionY -= this.enemyFlySpeed// 更新位置信息this.updatePosition();if (!rende2Canvas) {this.enemyDom.style.top =this.enemyDom.offsetTop - this.enemyFlySpeed + "px";}}, this.id + "enemyForwardTimer");}// 后退（往下enemyBackOff() {intervalStore.add(() => {// 限制范围if (this.positionY >= containerInfo.height) {this.enemyMoveStop("enemyBackOffTimer");this.clearEnemy();return;}this.positionY += this.enemyFlySpeed// 更新位置信息this.updatePosition();if (!rende2Canvas) {// 移动元素this.enemyDom.style.top =this.enemyDom.offsetTop + this.enemyFlySpeed + "px";}}, this.id + "enemyBackOffTimer");}// 左平移enemyLeftTranslation() {intervalStore.add(() => {// 限制范围if (this.positionX <= 0) return;this.positionX -= this.enemyFlySpeed// 更新位置信息this.updatePosition();if (!rende2Canvas) {// 移动元素this.enemyDom.style.left = this.positionX + "px";}}, this.id + "enemyLeftTranslationTimer");}// 右平移enemyRightTranslation() {intervalStore.add(() => {// 限制范围if (this.positionX >= containerInfo.height - this.width) return;this.positionX += this.enemyFlySpeed// 更新位置信息this.updatePosition();if (!rende2Canvas) {// 移动元素this.enemyDom.style.left = this.positionX + "px";}}, this.id + "enemyRightTranslationTimer");}// 发射子弹enemyShoot() {this.stopEnemyShoot();this.shootTimer = setInterval(() => {const positionX = this.positionX + containerInfo.offsetLeft;const positionY = this.positionY + (this.height / 2);// 循环发射子弹for (let i = 0; i < this.bulletNumber; i++) {// 宽度进行取平均分布子弹const average = this.width / (this.bulletNumber + 1);// 依次分布子弹位置let bulletPositionX = positionX + average * (i + 1);const bullet = new Bullet(shootDistance,bulletPositionX,positionY,"buttom",this.id,this.hurt,"enemy");bullet.createBullet();bullet.bulletMove();}}, this.shootInterval);}stopEnemyShoot() {if (this.shootTimer) {clearInterval(this.shootTimer);this.shootTimer = null;}}// 更新位置updatePosition() {const saveObject = {positionX: this.positionX,positionY: this.positionY,};typeStore[this.type].setId(this.id, saveObject);}// 清除相对应的移动定时器enemyMoveStop(key) {if (this[key]) {intervalStore.remove(this.id + this[key]);this[key] = null;}}// 停止所有移动定时器enemyStop() {const timerList = ["enemyForwardTimer","enemyBackOffTimer","enemyLeftTranslationTimer","enemyRightTranslationTimer",];for (const index in timerList) {const key = timerList[index];intervalStore.remove(this.id + key);}// 暂停发射this.stopEnemyShoot();}

那么这样子敌机就可以自己移动起来了设定好移动位置然后进行移动

当中添加了一堆代码是为了之前所得暂停功能所记录的
添加暂停功能后当前移动的位置需要记录继续游戏就需要还原已经移动过的路径避免当前动作没有走完直接进行下一个移动动作

完整项目地址：https://github.com/SDSGK/plane-ES6

ES6飞机大战篇-敌机自动移动发射子弹相关推荐

ES6飞机大战篇-添加子弹追踪功能
既然是飞机大战那必定少不了子弹追踪那么添加子弹追踪功能的实现如下: // 原文链接:https://blog.csdn.net/erweimac/article/details/82256087 ...
Python“飞机大战”上下左右移动空格发射子弹
下载点此去最后面有运行视频一.项目背景作为一名学习计算机的学生,在以往,我认为学习计算机要么就是无所不能的黑客,要么就是能制作出各种软件程序的大神.我选择pygame板块,制作一款能随意更改游戏 ...
ES6飞机大战篇-封装全局定时器
最近在编写飞机大战,开发到一半想到是否可以选择暂停游戏常见的清理就是用 clearTimerout 或者 clearInterval 那么如果数量多了就会出现有些定时器没有清理的问题为了避免 ...
ES6飞机大战篇-github托管游戏
研究了一下github 发现居然可以托管网页, 我这个页面也没啥东西所以就设置了一下代理了一下这样就可以直接在线玩了. 如果出现报错可以等待所有资源加载完毕毕竟是免费的托管避免不了的请求慢 ...
Unity游戏开发官方入门教程：飞机大战（六）——创建子弹
Unity版本:Unity 2018.2.14f1 原视频链接:https://unity3d.com/cn/learn/tutorials/s/space-shooter-tutorial 教程目录 ...
（七）通过pygame来设置飞机大战中敌机的速度、位置等
python飞机大战系列文章(按顺序) (一)通过pygame 将自己的图像添加到游戏中 (二)通过pygame让游戏人物动起来 (三)通过pygame处理用户的鼠标键盘操作(事件和监听 (四)详解 ...
从零开始飞机大战（五）实现子弹定位和动画
实现目标首先判断什么时候需要发射炮弹,我们设置在摁下空格的时候发射炮弹,我们下载键盘监控事件中所以在键盘检测到我们摁下空格的时候,一个炮弹就自动加载到舞台中, //键盘的监控事件 document ...
Python学习日记-第二十四天-飞机大战（敌机出场设计）
系列文章目录 ·使用定时器添加敌机 ·设计Enemy 类前言昨天因为有事,所以没有及时更新一.使用定时器添加敌机游戏启动后,每隔一秒会出现一架敌机每架敌机向屏幕下方飞行,飞行速度各不相同每 ...
QT飞机大战六(敌机血条的添加以及特殊子弹道具)
可能有点丑但其实是没有好的资源图片比如这个血条太生硬了,这个子弹道具怎么真的就和子弹一样?? 不过没事,功能对了就行首先考虑这个血条怎么搞. 那么首先我们的敌机需要有个属性sum_hp(总血量), ...

ES6飞机大战篇-敌机自动移动发射子弹

ES6飞机大战篇-敌机自动移动发射子弹相关推荐

最新文章

热门文章