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

个人感觉。方块的碰撞检测比圆形麻烦~~

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
background-color: lightyellow;
} .wrap {
width: 50px;
height: 50px;
background-color: red;
position: fixed;
top: 0;
left: 0;
} .box {
position: fixed;
width: 50px;
height: 50px;
}
</style>
</head> <body>
<div class="wrap"></div>
<div class="box box1">11</div>
<div class="box box2">22</div>
<div class="box box3">33</div>
<div class="box box4">44</div>
<div class="box box5"></div>
<div class="box box6"></div>
<div class="box box7"></div>
<div class="box box8"></div>
<div class="box box9"></div>
<div class="box box10"></div>
<div class="box box11"></div>
<div class="box box12"></div>
<div class="box box13"></div>
<div class="box box14"></div>
<div class="box box15"></div>
<div class="box box16"></div>
<div class="box box17"></div>
<div class="box box18"></div>
<div class="box box19"></div>
<div class="box box20"></div>
<script>
let wrap = document.querySelector('.wrap');
let box = document.querySelectorAll('.box');
// 封装随机数函数
function rn(a, b) {
return Math.round(Math.random() * (a - b) + b);
} // 循环遍历要被检测的盒子(被检测的盒子也可以用js生成)给他们设置位置和颜色
for (let i = 0; i < box.length; i++) {
// 随机生成box的位置
box[i].style.left = rn(0, 1200) + 'px';
box[i].style.top = rn(0, 500) + 'px';
// 设置随机颜色
let opc = Math.random().toFixed(1);
// 要用box[i].color接受颜色,本来用变量接受,但是在后面每碰撞成功的元素恢复原有颜色时,所以box都会变成相同的颜色
box[i].color = 'rgba(' + rn(0, 254) + ',' + rn(0, 254) + ',' + rn(0, 254) + ',' + opc + ')';
box[i].style.backgroundColor = box[i].color;
}
// 文档注册鼠标移动事件
document.onmousemove = function (ev) {
let e = ev || window.event;
// 获取移动盒子的宽高(相等
// 用变量long接受wrap的宽高,(正方形)
let long = wrap.offsetWidth;
// x y 当前窗口宽高-盒子宽高/2
let x = e.clientX - long / 2;
let y = e.clientY - long / 2;
wrap.style.left = x + 'px';
wrap.style.top = y + 'px';
// 判断上下左右四个方向是否碰撞
for (let j = 0; j < box.length; j++) {
// 顶部:wrap高度 + wrap top值 >= 检测盒子top
let t = long + wrap.offsetTop >= box[j].offsetTop;
let b = wrap.offsetTop <= box[j].offsetHeight + box[j].offsetTop;
let l = long + wrap.offsetLeft >= box[j].offsetLeft;
let r = wrap.offsetLeft <= box[j].offsetLeft + box[j].offsetWidth;
// 如果在四个方向任意方向碰撞成功,变色
if (l && t && r && b) {
box[j].style.backgroundColor = 'red';
} else {
box[j].style.backgroundColor = box[j].color;
}
}
}
</script>
</body> </html>

js实现方块的碰撞检测的更多相关文章

  1. js实现方块弹珠游戏

    下载地址:https://files.cnblogs.com/files/liumaowu/%E5%BC%B9%E4%B8%80%E5%BC%B9%E6%89%93%E6%96%B9%E5%9D%97 ...

  2. js实现圆形的碰撞检测

    文章地址:https://www.cnblogs.com/sandraryan/ 碰撞检测这个东西写小游戏挺有用der~~~ 注释写的还挺全,所以就不多说了,看注释 这是页面结构.wrap存放生成的小 ...

  3. (原)用pixi.js 实现 方块阵点击后原地自转效果

    源码 各位,请教一个问题,我这个还有BUG,我是想实现,点击一下可以 停止转动,然后再点一下重新转动.而不是一直加速,有没有什么好办法?  PS:问题已经解决,谢谢评论的大神@Antineutrino ...

  4. 用JS实现方块碰撞

    首先我们应用上次的内容--方块拖拽,利用方块拖拽来让两个方块进行碰撞. 我们可以先定义两个正方形方块,红色的div1,绿色的div2,我们来实现当div1碰撞div2时div2的颜色变为黄色 HTML ...

  5. 前端学习:JS面向对象知识学习(图解)

    前端学习:JS面向对象知识学习(图解) 前端学习:JS(面向对象)代码笔记 JS面向对象图解知识全览 创建类和对象 方式1:使用Object()函数 方式2:使用自变量 方式3:使用工厂函数 创建多个 ...

  6. three.js的一些介绍

    什么是 WebGL? WebGL(Web 图形库)是一种 JavaScript API,用于在任何兼容的 Web 浏览器中呈现交互式 3D 和 2D 图形,而无需使用插件.WebGL 通过引入一个与 ...

  7. 【javascript小案例】从0开始实现一个俄罗斯方块

    写在前面得话: 这篇文章主要记录了我是怎么一步一步写出俄罗斯方块,整个代码用的函数编程,主要是为了让一些不熟悉es6, 面向对象写法得 新手能更容易看明白,全部得代码中都是一些js的基础知识,很容易理 ...

  8. [经验] Cocos Creator使用笔记 --- 俄罗斯方块 (1)

    一:  实现 物体匀速掉落 这是我在做俄罗斯方块的时候遇到的一个问题,  因为原来的方块的掉落是每秒掉落一个像素点, 但是这样看起来的话会是一卡一卡的, 为了让方块在掉落的过程中看起来更加的流畅, 于 ...

  9. Javascript写俄罗斯方块游戏

    俄罗斯方块这个游戏也做了移动端的兼容, 这个游戏难点是怎么翻转方块, 自己实现的方式是把方块放到一个二维数组, 然后逆时针旋转二维数组. 也有别的方法,比如直接用一个全局变量代表一个方向, 翻转的时候 ...

随机推荐

  1. 【洛谷P1632】点的移动

    P1632 点的移动 题目描述 平面上有N个整数坐标点.如果将点(x0,y0)移动到(x1,y1),则需要的代价为|x0-x1|+|y0-y1|.求使得K(K=1,-,N)个点在同一位置上最少需要的代 ...

  2. JavaScript模式:字面量和构造函数

    本篇主要讨论了通过字面量以构造对象的方法,比如对象.数组以及正则表达式等字面量的构造方法,同时还讨论了与类似Object()和Array()等内置构造函数相比,为什么基于字面量表示法是更为可取. 对象 ...

  3. Django用户登陆以及跳转后台管理页面3

    Django用户登陆以及跳转后台管理页面1http://www.cnblogs.com/ujq3/p/7891774.html Django用户登陆以及跳转后台管理页面2http://www.cnbl ...

  4. docker.[6] 数据卷

    docker.[6] 数据卷 操作指令: # docker run -v /data1:/data2 -i -t centos /bin/bash 参数说明: data1 : 这里指的是宿主机的目录( ...

  5. 第二周<导学/分类>

    分类学习 分类算法各有不同 knn naivebyes regression dnn sklearn.linear_modlel 线性函数 sklearn.preprocessing 非线性函数 分类 ...

  6. 2019-5-13-WPF-从触摸消息转触摸事件

    title author date CreateTime categories WPF 从触摸消息转触摸事件 lindexi 2019-05-13 09:43:48 +0800 2019-05-12 ...

  7. SDUT-3402_数据结构实验之排序五:归并求逆序数

    数据结构实验之排序五:归并求逆序数 Time Limit: 50 ms Memory Limit: 65536 KiB Problem Description 对于数列a1,a2,a3-中的任意两个数 ...

  8. 【水滴石穿】react-native-aze

    说个题外话,早上打开电脑的时候,电脑变成彩色的了,锅是我曾经安装的一个chrome扩展,没有经过我的同意开启了 (也许是昨天迷迷糊糊开启了) 上午运行项目都不成功,还以为被黑客攻击了---然后下午就排 ...

  9. LeetCode191 Number of 1 Bits. LeetCode231 Power of Two. LeetCode342 Power of Four

    位运算相关 三道题 231. Power of Two Given an integer, write a function to determine if it is a power of two. ...

  10. BZOJ5259/洛谷P4747: [Cerc2017]区间

    BZOJ5259/洛谷P4747: [Cerc2017]区间 2019.8.5 [HZOI]NOIP模拟测试13 C.优美序列 思维好题,然而当成NOIP模拟题↑真的好吗... 洛谷和BZOJ都有,就 ...