引用JavaScript html css 实现圆的碰撞

我们要实现的效果是当红球碰到黄球时，黄球变黑色。

 

第一：先通过html 和头部css实现两个球，一个是红球，一个是黄球。

代码效果如下：

<style>
        #div1 {
          width: 100px;
          height: 100px;
          background: red;
          position: absolute;
          left:400px;
          top: 50px;
          border-radius: 50%;
        }
        #div2{
          width: 100px;
          height: 100px;
          background: yellow;
          position: absolute;
          left: 500px;
          top: 200px;      border-radius: 50%;
      
        }
        </style>
</head>
<body>
    <div id="div1"></div>
<div id="div2"></div>
</body>

 

 

第二：通过JavaScript实现效果。

 1.定义一下div1 与div2

 var div1 = document.getElementById('div1')
  const div2=document.getElementById('div2')

2.定义一个当鼠标按下与不点击红球所能实现的函数。

div1.onmousedown = function (event) {//点击时实现的效果

     document.onmouseup = function () {//不点击时的效果
      document.onmousemove = null;
    };

}

3.在函数内实现点击移动红球显示红球相对于黄球当前的top left 和半径的值

 console.log(event.clientX);
    console.log(div1.offsetLeft); 
    var chaX = event.clientX - div1.offsetLeft;
    var chaY = event.clientY - div1.offsetTop;
    document.onmousemove = function (event) {
      div1.style.left = event.clientX - chaX + "px";
      div1.style.top = event.clientY - chaY + "px";
      console.log(div1.offsetWidth / 2, div2.offsetWidth / 2, "半径");
      console.log(div2.offsetLeft - div1.offsetLeft, "left");
      console.log(div2.offsetTop - div1.offsetTop, "top");}

 

4.通过if语句实现如果红球碰到黄球，黄球变黑要实现的效果。

if (
        (div1.offsetWidth / 2 + div2.offsetWidth / 2) *
          (div1.offsetWidth / 2 + div2.offsetWidth / 2) >
        (div2.offsetLeft - div1.offsetLeft) *
          (div2.offsetLeft - div1.offsetLeft) +
          (div2.offsetTop - div1.offsetTop) * (div2.offsetTop - div1.offsetTop)
      ) {
        div2.style.background = "black";
      } else {
        div2.style.background = "";
      }

最终如下图：

 

posted @ 2021-12-05 15:37  四水呐  阅读(211)  评论(0)    收藏  举报