分享一个面试题

最新推荐文章于 2022-12-12 13:47:50 发布
在远方流浪
最新推荐文章于 2022-12-12 13:47:50 发布
阅读量143
点赞数
文章标签： css3 html css
本文链接：https://blog.csdn.net/qq_53256635/article/details/121156275
版权
是一家月入1w的面试题，有幸做过，功能有随机位置，随机颜色，随机数，随机方向，碰撞函数，面向对象没写出来！

<!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>
      * {
        margin: 0;

        padding: 0;
      }

      #wrap {
        height: 800px;

        width: 1300px;

        border: 1px solid red;

        /*小球设置相对定位*/

        position: relative;

        margin: 0 auto;

        overflow: hidden;
      }

      p {
        width: 40px;

        height: 40px;

        border-radius: 50%;

        background-color: red;

        position: absolute;

        top: 0;

        left: 0;

        color: white;

        font-size: 25px;

        text-align: center;

        line-height: 40px;
      }
    </style>
  </head>
  <body>
    <div id="wrap"></div>
  </body>
  <script>
    function randomNum(m, n) {
      return Math.floor(Math.random() * (n - m + 1) + m);
    }

    /**

* 生成一个随机颜色，并返回rgb字符串值

*/

    function randomColor() {
      var r = randomNum(0, 255);

      var g = randomNum(0, 255);

      var b = randomNum(0, 255);

      return "rgb(" + r + "," + g + "," + b + ")";
    }

    //获得wrapp

    var wrapp = document.getElementById("wrap");

    //定义数组存储所有的小球

    var balls = [];

    //生成小球函数

    function createBalls() {
      for (var i = 0; i < 10; i++) {
        var ball = document.createElement("p");

        //随机小球起始的X坐标和小球的Y坐标

        ball.x = randomNum(0, 1200);

        ball.y = randomNum(0, 1000);

        //随机小球的移动速度

        ball.speed = randomNum(2, 5);

        //随机小球移动的方向

        if (Math.random() - 0.5 > 0) {
          ball.xflag = true;
        } else {
          ball.xflag = false;
        }

        if (Math.random() - 0.5 > 0) {
          ball.yflag = true;
        } else {
          ball.yflag = false;
        }

        //随机小球的背景颜色

        ball.style.backgroundColor = randomColor();

        ball.innerHTML = i + 1;

        //将小球插入当wrapp中

        wrapp.appendChild(ball);

        //将所有的小球存储到数组中

        balls.push(ball);
      }
    }

    createBalls();

    //小球移动函数，判断小球的位置

    function moveBalls(ballObj) {
      setInterval(function () {
        ballObj.style.top = ballObj.y + "px";

        ballObj.style.left = ballObj.x + "px";

        //判断小球的标志量，对小球作出相应操作

        if (ballObj.yflag) {
          //小球向下移动

          ballObj.y += ballObj.speed;

          if (ballObj.y >= 800 - ballObj.offsetWidth) {
            ballObj.y = 800 - ballObj.offsetWidth;

            ballObj.yflag = false;
          }
        } else {
          //小球向上移动

          ballObj.y -= ballObj.speed;

          if (ballObj.y <= 0) {
            ballObj.y = 0;

            ballObj.yflag = true;
          }
        }

        if (ballObj.xflag) {
          //小球向右移动

          ballObj.x += ballObj.speed;

          if (ballObj.x >= 1300 - ballObj.offsetHeight) {
            ballObj.x = 1300 - ballObj.offsetHeight;

            ballObj.xflag = false;
          }
        } else {
          //小球向左移动

          ballObj.x -= ballObj.speed;

          if (ballObj.x <= 0) {
            ballObj.x = 0;

            ballObj.xflag = true;
          }
        }

        crash(ballObj);
      }, 10);
    }

    var x1, y1, x2, y2;

    //碰撞函数

    function crash(ballObj) {
      //通过传过来的小球对象来获取小球的X坐标和Y坐标

      x1 = ballObj.x;

      y1 = ballObj.y;

      for (var i = 0; i < balls.length; i++) {
        //确保不和自己对比

        if (ballObj != balls[i]) {
          x2 = balls[i].x;

          y2 = balls[i].y;

          //判断位置的平方和小球的圆心坐标的关系

          if (
            Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2) + 800 <=
            Math.pow(ballObj.offsetWidth + balls[i].offsetWidth, 2)
          ) {
            //判断传过来的小球对象，相对于碰撞小球的哪个方位

            if (ballObj.x < balls[i].x) {
              if (ballObj.y < balls[i].y) {
                //小球对象在被碰小球的左上角

                ballObj.yflag = false;

                ballObj.xflag = false;
              } else if (ballObj.y > balls[i].y) {
                //小球对象在被碰小球的左下角

                ballObj.xflag = false;

                ballObj.yflag = true;
              } else {
                //小球对象在被撞小球的正左方

                ballObj.xflag = false;
              }
            } else if (ballObj.x > balls[i].x) {
              if (ballObj.y < balls[i].y) {
                //小球对象在被碰撞小球的右上方

                ballObj.yflag = false;

                ballObj.xflag = true;
              } else if (ballObj.y > balls[i].y) {
                //小球对象在被碰撞小球的右下方

                ballObj.xflag = true;

                ballObj.yflag = true;
              } else {
                //小球对象在被撞小球的正右方

                ballObj.xflag = true;
              }
            } else if (ballObj.y > balls[i].y) {
              //小球对象在被撞小球的正下方

              ballObj.yflag = true;
            } else if (ballObj.y < balls[i].y) {
              //小球对象在被撞小球的正上方

              ballObj.yflag = false;
            }
          }
        }
      }
    }

    for (var i = 0; i < balls.length; i++) {
      //将所有的小球传到函数中,来实现对小球的移动

      moveBalls(balls[i]);
    }
  </script>
</html>