如何使用HTML和JavaScript製作一個彈跳球？

我們將首先在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速度，使其反彈。

  • 最後，我們將球的left和top CSS屬性設定為新的x和y位置，並使用requestAnimationFrame(animate)連續呼叫animate函式，從而建立彈跳球的動畫效果。

這只是一個基本的示例，您可以新增更多功能，例如更改球的大小、顏色、設定球的初始位置或新增更多球。

更新於：2023年2月16日

5K+ 次瀏覽

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告