js实现圆形的碰撞检测

文章地址:https://www.cnblogs.com/sandraryan/

碰撞检测这个东西写小游戏挺有用der~~~

注释写的还挺全,所以就不多说了,看注释

这是页面结构。wrap存放生成的小球

box是用来检测的元素

<div class="wrap"> <!-- 用于做碰撞检测的一个元素 --> <div class="box"></div> </div>

css:

 body { margin: 0; padding: 0; } .wrap { width: 100vw; height: 100vh; background-color: rgb(228, 243, 248); } .box { width: 70px; height: 70px; background-color: green; border-radius: 50%; position: fixed; top: 0; left: 0; } .wrap .item { position: fixed; border-radius: 50%; }

js

let wrap = document.querySelector(‘.wrap‘); let box = document.querySelector(‘.box‘); // 随机数函数 function rn(a, b) { return Math.round(Math.random() * (a - b) + b); } // 创建其他小球的函数 function create() { // 创建div let el = document.createElement(‘div‘); // 从20-100之间随机一个数作为小球的宽高(要是圆形,所以宽高相同) let w = rn(20, 80); el.style.width = w + ‘px‘; el.style.height = w + ‘px‘; // 设置top left值 该元素css有固定定位 //可以选择把最大值设置为当前屏幕/父级宽高,然后减去元素最大随即宽度(80) el.style.top = rn(0, 500) + ‘px‘; el.style.left = rn(0, 1200) + ‘px‘; // 追加item作为类名 el.className = ‘item‘; // 获取0-1之间的随机数并取小数点后一位 let opa = Math.random().toFixed(1); // 设置随机颜色 // 不能先给一个变量随机0-254,然后拼接变量,拼接出来red green blue颜色都一样 el.color = ‘rgba(‘ + rn(0, 254) + ‘,‘ + rn(0, 254) + ‘,‘ + rn(0, 254) + ‘,‘ + opa + ‘)‘; el.style.background = el.color; // 元素追加给wrap wrap.appendChild(el); } // 利用循环创建20个小球 function balls() { for (let i = 0; i < 20; i++) { create(); } } balls(); // box半径(理论上写一个就好,是个正方形画出来的圆嘛~) let r1 = box.offsetWidth / 2; // 获取创建的小球们 let item = document.querySelectorAll(‘.item‘); // console.log(item); // 文档注册鼠标移动事件 document.onmousemove = function (ev) { let e = ev || event; // 获取浏览器宽度/高度,减去要检测的盒子宽高一半 let x = e.clientX - r1; let y = e.clientY - r1; // 设为要拿去做检测的盒子左边,上边 // 鼠标移动的时候改变要拿去做碰撞检测的元素的top left值(改变位置,让他动起来,动的范围是整个可视页面-自己宽高,不会卡一半在外面) box.style.left = x + ‘px‘; box.style.top = y + ‘px‘; for (let i = 0; i < item.length; i++) { // item的半径 let r2 = item[i].offsetHeight / 2; // 生成的小球的左边+半径,减用来检测的元素的左边+半径(两个球圆心距) let leftC = item[i].offsetLeft + r2 - (box.offsetLeft + r1); // 生成的小球上边加半径-检测小球的上边加半径 let topC = item[i].offsetTop + r2 - (box.offsetTop + r1); // pow() 方法可返回 x 的 y 次幂的值。 // sqrt() 方法可返回一个数的平方根。 // 水平方向圆心距的2次幂 + 垂直方向的圆心距2次幂,的平方根(勾股定理?) let dis = Math.sqrt(Math.pow(leftC, 2) + Math.pow(topC, 2)); // 求出来的值小于检测的两个球的半径的和,碰撞上了,生成的小球变色 if (dis < r1 + r2) { item[i].style.background = ‘red‘; } else { item[i].style.background = item[i].color; } } };

over

相关文章