js小球碰撞游戏，碰到下方移动木板反弹

Dd530503

已于 2023-07-07 10:41:48 修改

阅读量251

点赞数

文章标签：游戏 javascript 前端

于 2023-07-06 17:32:42 首次发布

本文链接：https://blog.csdn.net/Dd530503/article/details/131581843

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .p1{
        position: absolute;
      border-radius: 50%;
      border: sienna 1px solid;
      background-color: sienna;
      width: 50px;
      height: 50px;
        left: 200px;
        top: 200px;
    }
    .p2{
        position: absolute;
        border: sienna 3px solid;
        width: 150px;
        height:3px;
        left: 0px;
        top: 480px;
    }
    .div1{
        border: greenyellow 1px solid;
        width: 500px;
        height: 500px;
        position: relative;
        left: 300px;
        top: 0px;
    }
  </style>
</head>
<body>

<button onclick="f1()">开始移动</button> <!--移动按钮，绑定小球运动事件-->
<div class="div1">
    <p class="p1" id="p1"> </p> <!--运动的小球-->
    <p class="p2" id="p2"></p> <!--移动的木板-->
</div>

<script>
    var x=0;
    var y=0;
    var X=0;
    var Y=480;
    var arr=[1,2,0.5,4,2.5,0.25,0.25,0.5,1,2,4]     //定义数组，通过随机的索引决定小球x轴，y轴单位时间内移动的距离

    let du1 = document.getElementById("p1"); //获取对象
    let du2=document.getElementById("p2");  //获取对象
    var interval
  onkeydown=function (e){  //键盘值事件，通过该方法获取操作者键盘移动的数值
      key0=e.keyCode;
      if(key0==37&&X>0){
          X-=35;
      }
      if(key0==39&&X<350){
          X+=35;
      }
      du2.style.left=X+"px"
  }
  function f1() {
      let r1=arr[Math.floor(Math.random()*10)] //获取随机索引
      let r2=arr[Math.floor(Math.random()*10)] //获取随机索引

      // x=500+r;
      // y=500+r;
      x=200 ;
      y=200 ;
       interval = setInterval(() => {  //小球动画效果，计时器单位时间内方法内代码执行的次数

          if(x>=450||x<=0){ //碰壁x轴则小球移动方法 反向
              r2=-r2
          }
              if(y<=0){   //碰壁y轴则小球移动方法 反向
                  r1=-r1
              }
              if(y>=430){  //决定小球是否碰到木板之后的处理
                  if (X>=x-125&&X<=x){ //碰到则反向 ，通过计算得出木板和小球接触的必要条件
                      r1=-r1
                  }else {
                      return  //没碰到则return，让计时器方法不执行
                  }

              }


              x=x+r2
              y=y+r1
              du1.style.left=x+"px"

              du1.style.top=y+"px"
      }, 10);
  }

</script>
</body>
</html>