js点击按钮发射小球

最新推荐文章于 2022-11-04 18:56:36 发布

最新推荐文章于 2022-11-04 18:56:36 发布

阅读量625

点赞数

本文链接：https://blog.csdn.net/Vue1024/article/details/122282716

版权

html css js jq 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

此博客介绍如何使用JavaScript实现点击按钮后，动态创建并控制小球在页面上做随机移动。通过addEventListener为按钮添加点击事件，每次点击都会生成新的小球，并利用定时器控制小球的移动，颜色随机变化。

摘要由CSDN通过智能技术生成

js点击按钮发射小球

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .game {
        position: relative;
        width: 800px;
        height: 600px;
        border: 1px solid rgb(0, 0, 0);
        background-color: rgb(224, 255, 255);
        margin: 0 auto;
      }

      .ball {
        position: absolute;
        border-radius: 50%;
      }
      body {
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <button class="fire_but">爱国者导弹</button>
  </body>
  <script>
    var game = document.body;
    var fire_but = document.getElementsByClassName("fire_but")[0];
    //保存每一个生成的div
    var arr = [];

    // 创建小球
    function createBall() {
      // 创建一个元素
      var ball = document.createElement("div");
      ball.className = "ball";
      game.appendChild(ball);
      arr.push(ball);
      ball.leftVal = 3;
      ball.topVal = 3;
      ball.style.width = "80px";
      ball.style.height = "80px";
      ball.style.backgroundColor = runcolor();
    }

    // 为发射小球按钮设置点击事件
    fire_but.onclick = function () {
      createBall();
    };

    // 小球移动
    function ballMove() {
      for (var i = 0; i < arr.length; i++) {
        maxTop = document.body.clientHeight - arr[0].clientHeight; //获取top的最大值
        maxLeft = document.body.clientWidth - arr[0].clientWidth; //获取left的最大值

        var Ball = arr[i],
          startL = Ball.offsetLeft, //取每个球的初始left和TOP值
          startT = Ball.offsetTop, //取每个球的初始left和TOP值
          Left = startL + Ball.leftVal, //改变，每个球的left和top值
          Top = startT + Ball.topVal; //改变，每个球的left和top值

        if (Left >= maxLeft || Left <= 0) {
          Ball.leftVal = -Ball.leftVal;
          Ball.style.backgroundColor = runcolor();
        }
        if (Top >= maxTop || Top <= 0) {
          Ball.topVal = -Ball.topVal;
          Ball.style.backgroundColor = runcolor();
        }
        Ball.style.top = Top + "px";
        Ball.style.left = Left + "px";
      }
      window.onresize = function () {
        maxTop = document.body.clientHeight - arr[0].clientHeight; //获取top的最大值
        maxLeft = document.body.clientWidth - arr[0].clientWidth; //
        console.log(maxTop);
      };
      setTimeout(function () {
        ballMove();
      }, 1);
    }
    ballMove();

    function runcolor() {
      var r = Math.floor(Math.random() * 256),
        g = Math.floor(Math.random() * 256),
        b = Math.floor(Math.random() * 256);
      return "rgb(" + r + "," + g + "," + b + ")";
    }
  </script>
</html>