js实现小球随机运动

爱被打了一巴掌 2023-08-17 16:31 124阅读 0赞

**效果图：**  
![在这里插入图片描述][20190929000852158.gif]

**HTML**

<div class='box'>
        <div class='ball'></div>
      </div>

**style:**

.box{
      width:300px;
      height:400px;
      background-color:green;
      opacity:0.5;
      margin:auto;
      position:relative;
    }
    .ball{
      width:20px;
      height:20px;
      border-radius:50%;
      background-color:yellow;
      position:absolute;
    }

**javascript:**

window.onload = function() {
           var ball = document.getElementsByClassName('ball')[0];
           var box = document.getElementsByClassName('box')[0];
        function ballMove() {
          var speed = 2;//定义总体速度
          //随机设置小球的初始位置
          var ballX = (box.offsetWidth - ball.offsetWidth) * Math.random();
          var ballY = (box.offsetHeight - ball.offsetHeight) * Math.random();
          ball.style.left = ballX + 'px';
          ball.style.top = ballY + 'px';
          //随机设置小球在x和y方向的速度
          var theta = 2 * Math.PI * Math.random();
          var speedX = speed * Math.cos(theta);
          var speedY = speed * Math.sin(theta);
          setInterval(function() {
            //随机控制小球在X和Y方向上的位置
            ballX += speedX;
            ballY += speedY;
            ball.style.left = ballX + 'px';
            ball.style.top = ballY + 'px';
            //如果小球弹出边框时改变它的方向
            if(ballX + ball.offsetWidth >= box.offsetWidth || ballX <= 0) {
              speedX = -speedX;
            }
            if(ballY + ball.offsetHeight >= box.offsetHeight || ballY <= 0) {
              speedY = -speedY;
            }
          },10)
        }
        ballMove();
        }

[20190929000852158.gif]: /images/20230810/1aa60981e6e14c519fc2f20c2c736f38.png

发表评论取消回复

表情：

评论列表（有 0 条评论，124人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现小球随机运动

效果图： ![在这里插入图片描述][20190929000852158.gif] HTML <div class='box'> <div cla

爱被打了一巴掌/ 2023年08月17日 16:31/ 0 赞/ 125 阅读

相关 canvas绘制七彩随机小球！

canvas绘制七彩随机小球 1、题目 > 拿到一个案例，需要在画布上实现不同大小颜色位置的七彩小球，并且要运动起来！ 2、思路 > （1）、第一步需要在页

柔光的暖阳◎/ 2022年10月15日 04:00/ 0 赞/ 201 阅读

相关 AEJoy —— 随机运动表达式之球面上的随机运动（四）

效果图 ![0.gif][] 原理与代码现在我们已经掌握了产生随机运动的技巧，让我们做一些有趣的事情。我们的目标是看看我们是否能在球面上创造随机运动。我们会

女爷i/ 2022年09月12日 04:45/ 0 赞/ 147 阅读

相关 java swing实现小球沿正弦曲线运动的代码

代码下载地址：[http://www.zuidaima.com/share/1852345677564928.htm][http_www.zuidaima.com_share_

悠悠/ 2022年08月27日 13:46/ 0 赞/ 154 阅读

相关 java swing实现小球沿正弦曲线运动的代码

原文：[java swing实现小球沿正弦曲线运动的代码][java swing] 源代码下载地址： [http://www.zuidaima.com/share/18523

桃扇骨/ 2022年07月15日 03:43/ 0 赞/ 159 阅读

相关小球运动

> 两个小球运动,如果把他们的速度,方向都设置成一样的话,需要给两个小球不同的起始位置,否则两个会重合,只能看到一个 > 如果只是仅仅给大小改变的话,两个小球运动的轨迹是一

蔚落/ 2022年06月05日 08:19/ 0 赞/ 269 阅读

相关 java swing实现小球沿正弦曲线运动的代码

代码下载地址：[http://www.zuidaima.com/share/1852345677564928.htm][http_www.zuidaima.com_share_

小鱼儿/ 2022年04月13日 10:35/ 0 赞/ 212 阅读

相关 canvas小球运动的例子

这是慕课网用canvas写的一个比较简单的2d小球运动的例子 <!DOCTYPE html> <html lang="en"> <head>

小灰灰/ 2022年03月17日 05:08/ 0 赞/ 264 阅读

相关 canvas的运用,面向对象的思想(小球运动)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

悠悠/ 2021年09月15日 08:40/ 0 赞/ 366 阅读

相关 js运动小球碰壁反弹

js运动小球碰壁反弹 1、触碰窗口壁沿反弹，同时改变颜色 <!DOCTYPE html> <html lang="en"> <head

约定不等于承诺〃/ 2021年07月25日 12:51/ 0 赞/ 436 阅读