小球碰壁回弹--- 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