如何用HTML和JavaScript建立一个弹跳球

我们将首先使用canvas标签在我们的HTML文档中创建一个canvas元素。接下来，我们将使用JavaScript在画布上画一个圆，并设置其初始位置和速度。最后，我们可以使用JavaScript根据圆的速度持续更新其位置，并添加碰撞检测，以便在圆撞到画布边缘时改变其速度。

方法

要使用HTML和JavaScript建立一个弹跳球，你需要做的是

创建一个带有画布元素的HTML文件，画布上将会画出球。
使用JavaScript在画布上将球创建为一个形状（例如一个圆）。
使用JavaScript在画布上移动小球，当它到达边缘时将其弹开。
使用JavaScript来检测球何时击中边缘并相应地改变其方向。
使用CSS来为球和画布设置所需的样式。

例子

下面是一个使用HTML+CSS和普通JavaScript构建的弹跳球的工作实例—-。

<!DOCTYPE html>
<html>
<head>
   <title>Bouncing Ball with JavaScript</title>
   <style>
      #ball {
         width: 50px;
         height: 50px;
         background-color: red;
         border-radius: 25px;
         position: absolute;
      }
   </style>
</head>
   <body>
      <div id="ball"></div>
      <script>
            const ball = document.getElementById("ball");
            let x = 0;
            let y = 0;
            let xSpeed = 5;
            let ySpeed = 5;
            function animate() {
            x += xSpeed;
            y += ySpeed;
            if (x + 50 > window.innerWidth || x < 0) {
               xSpeed = -xSpeed;
            }
            if (y + 50 > window.innerHeight || y < 0) {
               ySpeed = -ySpeed;
            }
            ball.style.left = x + "px";
            ball.style.top = y + "px";
            requestAnimationFrame(animate);
         }
        animate();
      </script>
   </body>
</html>

解释

HTML文件创建了一个id为 “ball “的div元素，它将被用作弹跳球。
CSS文件将球的样式设定为红色的圆形，宽度和高度均为50px。
在JavaScript文件中，我们首先使用document.getElementById(“ball”)从HTML中抓取球元素。
然后，我们为球的X和Y位置以及X和Y速度设置了一些变量。
在animate()函数中，我们通过添加x和y速度来更新球的x和y位置。
我们还检查球是否撞到了屏幕的边缘，如果是的话，我们扭转x或y速度，使它反弹回来。
最后，我们将球的左边和上面的CSS属性设置为新的x和y位置，并使用requestAnimationFrame(animate)连续调用animate函数，创建弹跳球的动画效果。