ES6飞机大战篇-添加子弹追踪功能

既然是飞机大战那必定少不了子弹追踪

那么添加子弹追踪功能的实现如下：


// 原文链接：https://blog.csdn.net/erweimac/article/details/82256087
// https://blog.csdn.net/weixin_30756499/article/details/97551805
// https://blog.csdn.net/looffer/article/details/8846159
// https://github.com/processing/p5.js
/*** @description: 追踪目标* @param {number} x1 追踪目标x轴* @param {number} y1 追踪目标y轴* @param {number} x2 追踪者x轴* @param {number} y2 追踪者y轴* @param {number} speed 追踪者速度* @return {Object} {x, y} 返回下一次要移动的位置*/
function FollowUpBullet(x1, y1, x2, y2, speed) {// 向量const deltaX = x1 - x2;const deltaY = y1 - y2;// 微小偏移if (deltaX == 0) {if (y1 >= y2) {deltaX = 0.0000001;} else {deltaX = -0.0000001;}}if (deltaY == 0) {if (x1 >= x2) {deltaY = 0.0000001;} else {deltaY = -0.0000001;}}let angle = 0;let π = Math.PI;// 右下角if (deltaX > 0 && deltaY > 0) {angle = Math.atan(Math.abs(deltaY / deltaX)); // 第一项限// 左下角} else if (deltaX < 0 && deltaY > 0) {angle = π - Math.atan(Math.abs(deltaY / deltaX)); // 第二项限// 左上角} else if (deltaX < 0 && deltaY < 0) {angle = π + Math.atan(Math.abs(deltaY / deltaX)); // 第三项限// 右上角} else {angle = 2 * π - Math.atan(Math.abs(deltaY / deltaX)); // 第四项限}let x = speed * Math.cos(angle);let y = speed * Math.sin(angle);return { x, y, angle: calAngle(x2, y2, x1, y1) };
}
// 参考：https://juejin.cn/post/6844903880493367304
// 计算角度
function calAngle(cx, cy, x, y) {const radian = getCosBy2pt(x, y, cx, cy);let angle = (Math.acos(radian) * 180) / Math.PI;if (x < cx) angle = -angle;return angle;// 计算 点1指点2形成 的向量function getCosBy2pt(x, y, cx, cy) {let a = [x - cx, y - cy];let b = [0, -1];return calCos(a, b);}function calCos(a, b) {// 点积let dotProduct = a[0] * b[0] + a[1] * b[1];let d =Math.sqrt(a[0] * a[0] + a[1] * a[1]) *Math.sqrt(b[0] * b[0] + b[1] * b[1]);return dotProduct / d;}
}

当然做之前肯定百度了一下既然可以CV就尽量不自己写代码
跟踪代码有了那么就是实装了

// 跟踪子弹// 获取敌机的数据const enemyStoreList = enemyStore.getStore();const keys = Object.keys(enemyStoreList);// 找到第一个幸运儿const enemy = enemyStoreList[keys[0]];// 如果没有敌机 子弹往前飞if (enemy === undefined) {// 数据移动this.positionY -= this.bulletFlySpeed;} else {// 调用子弹追踪const { x, y, angle } = FollowUpBullet(enemy.positionX + containerInfo.offsetLeft + enemy.width / 2,enemy.positionY + containerInfo.offsetTop + enemy.height / 2,this.positionX,this.positionY,this.bulletFlySpeed);// 保存位置this.positionY += y;this.positionX += x;// 子弹旋转this.angle = angle;

那么就有了追踪效果了方便的很

这只是当中一个方法完整飞机大战项目可以查看：https://github.com/SDSGK/plane-ES6

ES6飞机大战篇-添加子弹追踪功能相关推荐

ES6飞机大战篇-封装全局定时器
最近在编写飞机大战,开发到一半想到是否可以选择暂停游戏常见的清理就是用 clearTimerout 或者 clearInterval 那么如果数量多了就会出现有些定时器没有清理的问题为了避免 ...
飞机大战之-添加子弹
现在添加字段对象,子弹,敌机,玩家,都是属于modle包中的对象,所以我们新建一个类Bullet 1/定义子弹需要的一些常量,子弹图片的长宽,子弹的坐标. 然后使用Tooklit.getDefault ...
ES6飞机大战篇-敌机自动移动发射子弹
想要游戏变得有点难度的话就得让敌机自己动起来(移动轨迹提前设置好)那么就得单独的来进行控制敌机上下左右发射首先制作数据: /*** health:生命值* width:宽度* height:高度* ...
ES6飞机大战篇-github托管游戏
研究了一下github 发现居然可以托管网页, 我这个页面也没啥东西所以就设置了一下代理了一下这样就可以直接在线玩了. 如果出现报错可以等待所有资源加载完毕毕竟是免费的托管避免不了的请求慢 ...
奋斗的小孩系列 FPGA学习altera系列: 第七篇添加激励及功能仿真操作
奋斗的小孩系列 FPGA学习altera系列: 第七篇添加激励及功能仿真操作作者:奋斗的小孩郝旭帅(转载请注明出处) 大侠好,欢迎来到FPGA技术江湖,江湖偌大,相见即是缘分.大侠可以关注FPG ...
python-pygame实现飞机大战-3-发射子弹以及击中敌机
承接上两步: 1.python-pygame实现飞机大战-添加背景以及飞机运动 2.python-pygame实现飞机大战-2-添加敌机以及碰撞爆炸在完成玩家飞机运动,生成敌机飞机以及两者碰撞爆炸后 ...
Python学习日记-第二十六天-飞机大战（发射子弹和碰撞检测）
系列文章目录 1.发射子弹 2.碰撞检测一.发射子弹 1.1 添加发射子弹事件 Pygame的定时器使用套路非常固定: 定义定时器常量--eventtid 在初始化方法中,调用set_timer ...
飞机大战之-添加背景
之前我们已经生成了一个空白的窗口,接下来我们要在这个窗口上添加背景. 我们新建一个MyPanel的类用来单独设置面板. MyPanel是继承于JPanel的一个子类.导入所需的包. package v ...
java 中飞机大战碰撞检测,飞机大战开发04子弹与敌机的碰撞检测
先是敌机与玩家子弹的碰撞检测: 代码: GameLayer.h void GameLayer::update(float dt) { for (int i = 0 ;i < m_pEnermyV ...

ES6飞机大战篇-添加子弹追踪功能

ES6飞机大战篇-添加子弹追踪功能相关推荐

最新文章

热门文章