JS写的不咋地的碰撞检测
最近在学习碰撞检测相关的知识,但说实话,写的不咋地。但是因为鄙人学识浅薄,所以觉得基本上还行,但是挺追求我完美的,所以想拿出来让大神们批评批评。
先来看一下效果
感觉哇,真卡,真难受。因为本来是正方形所以检测的不是很准确。
下面来批评一下这个的代码。
- 碰撞检测的代码
if((mover.offsetLeft + mover.offsetWidth >= target.offsetLeft) && (mover.offsetTop + mover.offsetHeight >= target.offsetTop) && (target.offsetLeft + target.offsetWidth >= mover.offsetLeft) && (target.offsetTop + target.offsetHeight >= mover.offsetTop) )
复制代码
因为碰撞可以分为这四个角度。
1.左上角
2.右上角 3.左下角 4.右下角 5.整体图示 只要在那个区域之内就行。
- 碰撞区域边缘的代码
setInterval(function move(e) {boll.style.left = boll.offsetLeft + (this.N * 10) + 'px'; //改变小球的位置boll.style.top = boll.offsetTop + (this.T * 10) + 'px';if(boll.offsetLeft >= sq.offsetWidth - boll.offsetWidth || boll.offsetLeft <= 0 ){ //碰撞左右两边this.N *= -1; //改变方向(依自己喜好定义)}if(boll.offsetTop >= sq.offsetHeight - boll.offsetHeight || boll.offsetTop <= 0 ){ //碰撞上下两边this.T *= -1; //改变方向(依自己喜好定义)}
}.bind(this), 50);
复制代码
- 检测每一个小球与其他小球是否碰撞
bollArr = [], //存放小球DOM元素,改变方向用
boll = []; //存放小球,检测是否碰撞用
复制代码
setInterval(function move(e) {for (var i = 0; i < bollArr.length; i ++) {for (var j = i + 1; j < bollArr.length; j ++) {collisionDetection(bollArr[i], bollArr[j], fes[i], fes[j]);}}
}, 50);
复制代码
- 小球构造函数
function Boll() {this.backgroundColor = 'rgba(35, 215, 65, .3)'; //小球颜色this.left = getRandom(400); //小球位置this.top = getRandom(400);this.N = 1; //改变小球方向的数(自己可以精确定义,我就随便定义了)this.T = 1;boll.push(this);
}
复制代码
- 整体代码
let sq = document.getElementById('square'), //获取最外面的框bollArr = [], //小球DOM元素集合boll = []; //小球实例集合
function Boll() { //构造函数this.backgroundColor = 'rgba(35, 215, 65, .3)';this.left = getRandom(400);this.top = getRandom(400);this.N = 1;this.T = 1;boll.push(this);
}
let boll0 = new Boll(),boll1 = new Boll(),boll2 = new Boll();
Boll.prototype.createBoll = function() { //创建小球let boll = document.createElement('div');boll.style.display = 'none';boll.style.width = '60px';boll.style.height = '60px';boll.style.backgroundColor = this.backgroundColor;boll.style.borderRadius = '50%';boll.style.position = 'absolute';boll.style.left = this.left + 'px';boll.style.top = this.top + 'px';boll.style.display = 'block';sq.appendChild(boll);bollArr.push(boll);setInterval(function move(e) { //检测是否和外面的框碰撞boll.style.left = boll.offsetLeft + (this.N * 10) + 'px';boll.style.top = boll.offsetTop + (this.T * 10) + 'px';if(boll.offsetLeft >= sq.offsetWidth - boll.offsetWidth || boll.offsetLeft <= 0 ){this.N *= -1;}if(boll.offsetTop >= sq.offsetHeight - boll.offsetHeight || boll.offsetTop <= 0 ){this.T *= -1;} }.bind(this), 50);
}
// 碰撞检测
function collisionDetection(mover, target, boll, boll2) {if((mover.offsetLeft + mover.offsetWidth >= target.offsetLeft) && (mover.offsetTop + mover.offsetHeight >= target.offsetTop) && (target.offsetLeft + target.offsetWidth >= mover.offsetLeft) && (target.offsetTop + target.offsetHeight >= mover.offsetTop) ){boll.N *= -1;boll.T *= -1;boll2.N *= -1;boll2.T *= -1;}
}
boll0.createBoll();
boll1.createBoll();
boll2.createBoll();
// 为每两个小球检测是否碰撞
setInterval(function move(e) {for (var i = 0; i < bollArr.length; i ++) {for (var j = i + 1; j < bollArr.length; j ++) {collisionDetection(bollArr[i], bollArr[j], boll[i], boll[j]);}}
}, 50);
复制代码
上面其实有很多不好和bug,希望看到的大神能批评几句。 因为使用了offset...几乎一直在重排,所以性能不是最好的,但效果基本上实现了。
转载于:https://juejin.im/post/5c3c857df265da615705b2a6
JS写的不咋地的碰撞检测相关推荐
- dotnet调用node.js写的socket服务(websocket/socket/socket.io)
https://github.com/jstott/socketio4net/tree/develop socket.io服务端node.js,.里面有js写的客户端:http://socket.io ...
- 用Three.js写h5小游戏-3d飞机大战
用Three.js写h5小游戏-飞机大战 博主的话 运行图片 目录路径![在这里插入图片描述](https://img-blog.csdnimg.cn/20190829103702978.jpg?x- ...
- 【Part2】用JS写一个Blog (node + vue + mongoDB)
[Part1]用JS写一个Blog (node + vue + mongoDB) 上一节前后端项目分别初始化完成,这一小节我就从后端项目开始写.实现mongoDB数据库的连接. 整理后端目录 下面是通 ...
- 如何上传图片到fileupload空间_如何用原生js写图片上传组件v2.0(还有新版本)?...
js图片上传组件: 基本要求: 1.上传的图片可预览,可删除,可被覆盖更新 2.要求图片格式为jpg和png,大小不能超过2M 新加需求: 1.模拟回显,可用本地存储(实际上的回显是通过后台传过来的u ...
- .NET获取不到js写的cookie解决方法
今晚使用javascript设置一个来路的cookie,之后使用ASP.NET获取这个cookie值,发现ASP.NET获取不到JS设置的cookie值,真郁闷中,以下是JS写Cookie的代码: C ...
- 玩转Javascript 给JS写测试
给js写测试已经不是什么稀奇的事情了,最近项目里用了jasmine和JsTestDriver两种js测试框架.JsTestDriver易于与持续构建系统相集成并能够在多个浏览器上运行测试轻松实现TDD ...
- [html] 一般习惯把js写在</body>前,但有例外的情况吗?说说看
[html] 一般习惯把js写在前,但有例外的情况吗?说说看 js的放置位置有三种: (1)放在head标签内 (2)放在body标签内 (3)外部script 个人简介 我是歌谣,欢迎和大家一起交流 ...
- [js] 用js写一个方法检测浏览器是否支持css3的属性
[js] 用js写一个方法检测浏览器是否支持css3的属性 var div = document.createElement('div'); console.log(div.style.transit ...
- [js] 写一个方法获取图片的方向
[js] 写一个方法获取图片的方向 <!DOCTYPE html> <html> <head><meta charset="utf-8"& ...
最新文章
- Facebook最新对抗学习研究:无需「平行语料库」完成「无监督」机器翻译
- RTL Schematic 与 Technology Schematic的区别?
- opc服务器自动更新,ZOPC Server(OPC服务器软件)
- 实事求实来看综合布线网络
- JS双向数据绑定的原理介绍
- 10 | 案例篇:系统的软中断CPU使用率升高,我该怎么办?
- vi编辑器的学习使用(十三)
- 【C语言】(数组方式)求n名同学的平均成绩
- 如何隐藏地址栏中的真实地址_如何删除Chrome地址栏记录?
- python三角网格代码_三角剖分算法(delaunay)
- mac安装正在计算机,出现“无法在计算机上安装macOS”错误时该怎么办?
- 【机器学习】机器学习泛泛之谈
- solidworks渲染材质库_solidworks渲染材质参数
- 上海出租车电话一览表
- 『WPF』TextBox元素过滤键盘输入
- 计算机的英文怎么说不是computer,【英语写作】“开电脑”可不是“open the computer”,说错了很尴尬!...
- 漂流瓶php源码,微信小程序之仿微信漂流瓶
- setting文件配置
- Python C/S 网络编程(二)之 UDP 实现英汉词典查询小程序
- 移动导入表/导入表注入(注入导入表后EXE无法运行的BUG解决方案)