小球碰壁回彈--- html(JavaScript)

時間 2019-11-18

原文原文鏈接

這兩天解除了下 html 看到想起來 iOS 上有個遊戲感受挺好的,因而想着用 js 寫寫試試, 結果實現了, 多餘的也不說了, 直接上代碼主要地方都有註釋javascript

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>碰壁反彈</title>
       <style type="text/css">
           * {
              margin: 0;
              padding: 0;
           }
           body {
              background: lightblue;
           }
           .wrap {
              width: 500px;
              height: 300px;
              background: limegreen;
              position: relative;
              margin: 20% auto; /*水平居中*/

           }
           .wrap .box {
              width: 50px;
              height: 50px;
              background: cyan;
              border-radius: 50%;
              position: absolute;
           }
       </style>
   </head>
   <body>
       
       <div class="wrap">
           
           <div class="box"></div>
       </div>
   </body>
   <script type="text/javascript">
       var wrap = document.querySelector(".wrap");
       var box = document.querySelector(".wrap .box");
       var speedX = 5; // 速度
       var speedY = 2;
       // wrap 不帶邊線的寬度減去 box 帶邊線的寬度獲得最大的運動寬度
       var maxWidth = wrap.clientWidth - box.offsetWidth;
       // wrap 不帶邊線的高度減去 box 帶邊線的高度獲得最大的運動高度
       var maxHeight = wrap.clientHeight - box.offsetHeight;
       // 獲取小球的距離(位置)
       var top1 = 0; // Y
       var left1 = 0; // X
       // 小球移動的方法
       function move() {
           left1 += speedX;
           top1 += speedY;
           box.style.top = top1 + "px";
           box.style.left = left1 + "px";
           // 判斷左右邊界若是 box 邊緣到 wrap 左右邊界速度取反改變方向
           if (left1 <= 0 || left1 >= maxWidth) {
              speedX *= -1;
           // 判斷上下邊界若是 box 邊緣到 wrap 上下邊界速度取反改變方向
           } else if (top1 <= 0 || top1 >= maxHeight) {
              speedY *= -1;
           }
       }
       // 添加定時器並調用移動的方法
       var timer = setInterval(function() {
           move();
       }, 35);
   </script>
</html>
整體上感受 html 要比 iOS 方便的多, 代碼簡化了好多, 並且應用範圍更廣,之後更要多多的學習css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。