小球运动

蔚落 2022-06-05 08:19 267阅读 0赞

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

![这里写图片描述][SouthEast]

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css"> #container{ width: 400px; height: 400px; border: 2px solid green; position: relative; } .ball{ width: 10px; height: 10px; background: red; border-radius: 5px; position: absolute; } .ball02{ width: 10px; height: 10px; background: blue; border-radius: 5px; position: absolute; } </style>
    
            <script type="text/javascript"> onload = function () { var ball = document.getElementsByClassName('ball')[0]; var ball02 = document.getElementsByClassName('ball02')[0]; var speedX = Math.ceil(Math.random() * 5) + 1; var speedY = Math.ceil(Math.random() * 5) + 1; var left = 0; var top_ball = 0; setInterval(function () { left += speedX; top_ball += speedY; if(left >= 390 || left <= 0){ //到达边框,反方向移动,负号代表方向相反 speedX = -speedX; } if(top_ball >= 390 || top_ball <= 0){ speedY = -speedY; } //两个小球 ball.style.left = left + "px"; ball.style.top = top_ball + "px"; ball02.style.right = left + "px"; ball02.style.bottom = top_ball + "px"; },10) } </script>
    
        </head>
        <body>      
            <div id="container">
                <div class="ball"></div>
                <div class="ball02"></div>
            </div>      
        </body>
    </html>

[SouthEast]: /images/20220605/022f7e70c0b549cb915b95911c81d12b.png

发表评论取消回复

表情：

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

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

相关阅读

相关 js实现小球随机运动

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

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

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

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

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

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

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

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

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

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

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

相关小球运动

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

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

相关 Python大球吃小球

本小游戏采用了pygame模块 1.产生随机颜色的小球。2.小球具有移动、吃别的小球、绘制这3个方法。3.鼠标点击事件上源码 // 大球吃小球

分手后的思念是犯贱/ 2022年04月25日 10:44/ 0 赞/ 399 阅读

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

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

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

相关 canvas小球运动的例子

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

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

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

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

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

相关 js运动小球碰壁反弹

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

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