js实现圆形的碰撞检测
时间:2019-10-22
本文章向大家介绍js实现圆形的碰撞检测,主要包括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
原文地址:https://www.cnblogs.com/sandraryan/p/11719475.html
- 红黑树算法
- dedecms如何调用当前栏目的子栏目及子栏目文章
- HTML之marquee(文字滚动)详解
- Tarjan算法
- Jquery闪烁提示特效
- mstsc 远程序桌面登录的 c#开发
- 突然顿悟的Javascript中的this
- 解决Electron加载带jquery的项目报错问题
- dedecms利用addfields body在首页调用文章内容
- 如何设置dedecms自定义表单必填项?
- 如何用<dl>标签做表格而不用table标签
- Gulp使用指南
- Gulp Error: Cannot find module 'jshint/src/cli'
- 自学如何使用Python和Keras构建你自己专属的AlphaZero系统
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 直播系统定制,判断数据连接是否可用
- VS Code 编辑器入门指南上篇-核心概念与组件
- Python turtle库实现基本剖析
- python thinker canvas create_arc 使用详解
- Python3 实现单例设计模式
- Python3 实现建造者模式
- python 实现原型设计模式
- python 最简单的实现适配器设计模式
- python3 最基本且简单的实现组合设计模式
- python 实现装饰器设计模式
- 看得懂的外观设计模式 python3 实现
- 看得懂的设计模式 享元模式python3 最基本(简单)实现
- python3 最简单的实现 模版设计模式
- Qt 第二步 槽与信号(一) 实现点击按钮并弹窗
- python3 爬虫第一步 简单获取网页基本信息