文章地址：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. tyvj 1864 守卫者的挑战

    传送门 解题思路 dp[i][j][k]表示前i个挑战,赢了j场,现在还有k个包的获胜概率. 转移方程: dp[i+1][j+1][k+a[i]] += p[i+1]*dp[i][j][k] (k+a ...

  2. css Position 上下左中右布局

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  3. C#截取字符串的方法小结（转）

    1.单个字符分隔用split截取 string str = "GT123_1"; string[] strArray = str.Split('_'); //输出:sArray[0 ...

  4. Loadrunner常用分析点

    Loadrunner常用的分析点 一.在Vuser(虚拟用户状态)中 1.Running Vusers:提供了生产负载的虚拟用户运行状态的相关信息,可以帮助我们了解负载生成的结果.(即用户在几分钟左右 ...

  5. iOS开发中WiFi相关功能总结

    http://www.cocoachina.com/ios/20160715/17022.html 投稿文章,作者:Haley_Wong(简书) 查漏补缺集是自己曾经做过相关的功能,但是重做相关功能或 ...

  6. 利用IE浏览器查看元素绑定的JS代码

  7. Python之其他数据类型

    1.可命名元组:namedtuple 由nametuple可创建一个包含tuple所有功能以及其他功能的类型 class Mytuple(__builtin__.tuple) | Mytuple(x, ...

  8. SPSS和Mplus如何做非线性中介调节效应分析？如倒U形曲线

    SPSS和Mplus如何做非线性中介调节效应分析?如倒U形曲线 传统的线性回归模型用的比较多,但有时候变量之间的关系更符合非线性关系,此时使用非线性模型其拟合度会更好,模型预测效果更佳.在非线性关系中 ...

  9. U盘安装win7 raid设置

    需要先安装驱动!  大白菜U盘安装界面有一个选择驱动的选项,选择驱动即可.Intel_ESRT2_Windows_signed_DRV_v16.03.2014.1127

  10. JavaScript —— 常用数据类型隐式转换

    公用方法: let checkType = (data) => { if(data){ console.log(true); }else{ console.log(false); } } 一.字 ...