JavaScript实现多球运动效果

2024-08-10 00:53:19

本文实例为大家分享了JavaScript实现多球运动的具体代码，供大家参考，具体内容如下

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>多球运动</title>
  <style>
    *{margin:0;padding:0;}
    body{background-color: #90f;}
    .ball{position: absolute;left:0;top:0;width:100px;height:100px;background: #f0f;border-radius: 50%;}
  </style>
</head>
<body>
  <script>
    run(22)//封装
    //定义速度
    var speed;
    function run(num){
      //创建出num个div
      for(var i=0;i<num;i++){
        //[2,11) 随机速度
        speed = Math.floor(Math.random()*9+2);
        //创建生成节点
        var div = document.createElement("div");
        //添加类名
        div.className = 'ball'
        //自定义属性保存值
        div.speedX = Math.floor(Math.random()*9+2)
        div.speedY = Math.floor(Math.random()*9+2)
        //将div放置到body中
        document.body.appendChild(div)
      }
      //获取元素
      var box = document.getElementsByClassName( "ball" )
      //获取文档可视区域的宽高
      var maxX = document.documentElement.clientWidth - box[0].offsetWidth;
      var maxY = document.documentElement.clientHeight - box[0].offsetHeight;
      //自适应窗口
      window.onresize = function(){
        maxX = document.documentElement.clientWidth - box[0].offsetWidth;
        maxY = document.documentElement.clientHeight - box[0].offsetHeight;
      }
      play()
      function play(){
        for(var i=0;i<num;i++){
          //获取
          var ball = box[i];
          var startTop = ball.offsetTop;
          var startLift = ball.offsetLeft;
          //startTop都为零；
          var top = startTop + ball.speedY;
          var left = startLift + ball.speedX;
          //判断小球是否出左右边界
          if(left <= 0 || left >= maxX){
            //改变方向
            ball.speedX = -ball.speedX;
            ball.style.background=randomColor()
            //判断
            if(left <= 0){
              left = 0;
            }else if(left >= maxX){
              left = maxX;
            }
          }
          //判断小球是否出上下边界
          if(top <= 0 || top >= maxY ){
            // 改变方向；
            ball.speedY = -ball.speedY;
            ball.style.background=randomColor()
            //判断
            if( top <= 0 ){
              top = 0;
            }else if( top >= maxY ){
              top = maxY;
            }
          }
          ball.style.top = top + "px";
          ball.style.left = left + "px";
        }
        //执行动画帧
        requestAnimationFrame(play);
      }
      //颜色随机
      function randomColor() {
        var r = Math.floor(Math.random() * 256),
          g = Math.floor(Math.random() * 256),
          b = Math.floor(Math.random() * 256);
          return "rgb(" + r + "," + g + "," + b + ")";
      }
    }
  </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

javascript动画之圆形运动,环绕鼠标运动作小球

代码如下: 复制代码代码如下: <script type="text/javascript"> var ball; var mouseX = 100; var mouseY = 100; var angle = 0; var radius = 50; function run(){ if(ball === undefined){ ball = document.createElement("span"); ball.style.position = &
JavaScript实现小球沿正弦曲线运动

本文实例为大家分享了js实现小球沿正弦曲线运动的具体代码,供大家参考,具体内容如下效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .dot{ margin-top: 300px; position: absolute; width
JS小球抛物线轨迹运动的两种实现方法详解

本文实例讲述了JS小球抛物线轨迹运动的两种实现方法.分享给大家供大家参考,具体如下: js实现小球抛物轨迹运动的大致思路: 1.用setInterval()方法,进行间隔性刷新,更新小球位置,以实现动态效果 2.绘制小球和运动区域,运动区域可通过flex布局实现垂直居中 3.用物理公式S(y)=1/2*g*t*t,S(x)=V(x)t来计算路径现确定V(x)=4m/s,刷新的时间间隔设置为0.1s.原本px和米之间的转换,不同尺寸转换不同,本例采用17寸显示器,大约1px=0.4mm.但浏览器
js实现小球在页面规定的区域运动

本文实例为大家分享了js控制小球在规定范围运动的具体代码,供大家参考,具体内容如下小球在页面规定的区域运动,碰到边界就改变运动方向. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小球运动</title> <style type="text/css"> #box { width: 600px; height:
Js实现简单的小球运动特效

废话不多说了,直接给大家贴js代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html;charset=utf-"/> </head> <body style="background:pink;"
javascript实现10个球随机运动、碰撞实例详解

本文实例讲述了javascript实现10个球随机运动.碰撞的方法.分享给大家供大家参考.具体如下: 学了一段时间的javascript了,做过一些小案例,目前最有难度的就是10个小球随机碰撞效果,这不,把它上上来与大家分享一下,相信不少和我一样的菜鸟在开始上手编程时都会有不少的困惑,希望它能给一些人带来帮助. 效果要求:10个小球在页面随机移动,碰到窗口边界或其他小球都会反弹思路: 1.10个小球是10个div; 2.碰窗口反弹,定义vx vy为小球的移动变量,以及一个弹力变量bounce(
javascript鼠标跟随运动3种效果（眼球效果，苹果菜单，方向跟随）

运动除了直线运动和曲线运动两种运动形式外,还有一种运动形式是鼠标跟随运动,而这种跟随运动需要用到三角函数的相关内容或者需要进行比例运算.本文将以几个小实例来介绍角度运动的相关内容眼球转动在很多网页中,都存在着跟随运动,比如眼球转动.鼠标在网页中移动时,眼球也会跟着朝相应方向转动上面是眼球转动的示意图,(x0,y0)是眼球的位置,而(x,y)是鼠标的位置.设直线与垂直方向的夹角为a,假设圆心点坐标为(0,0),可以得到以下公式 tan(a) = x/y = x0/y0 x0 = r*sin(
JavaScript实现多球运动效果

本文实例为大家分享了JavaScript实现多球运动的具体代码,供大家参考,具体内容如下代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)

本文实例总结了javascript运动效果实现与用法.分享给大家供大家参考,具体如下: 一.图片放大缩小效果: <!doctype html> <html> <head> <meta charset="utf-8"> <title>图片放大缩小</title> <style> *{ margin:0; padding:0; list-style:none;} #ulList{ margin:50px;}
javascript弹性运动效果简单实现方法

本文实例讲述了javascript弹性运动效果简单实现方法.分享给大家供大家参考,具体如下: 弹性运动实现原理:加速运动+减速运动+摩擦运动运行效果截图如下: 实例代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1{ width:100px; height:100px
JS实现的简单轮播图运动效果示例

本文实例讲述了JS实现的简单轮播图运动效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <meta http-equiv="content-type" content="text/html" /> <title&
js实现交换运动效果的方法

本文实例讲述了js实现交换运动效果的方法.分享给大家供大家参考.具体分析如下: 实现后的效果,点击互相交换位置和距离左边和上角的信息. 要点一: var now = s_pic_li[0]; for(var i=0; i<s_pic_li.length; i++){ s_pic_li[i].onclick = function(){ if(this == now) return false; var w = now.offsetWidth; var h = now.offsetHeight; v
js实现同一页面多个运动效果的方法

本文实例讲述了js实现同一页面多个运动效果的方法.分享给大家供大家参考.具体分析如下: 实现原理,就是在调用的时候,给这五个元素,循环加上事件.需要注意的是,每个元素的定时器需要分开. 要点一: var speed = (target - obj.offsetWidth)/8; 缓冲运动效果,一开始速度很快,然后越来越慢,直到停止 speed = speed>0?Math.ceil(speed):Math.floor(speed); 如果速度大于0,则向上取整,如果速度小于0,则向下取整. 要点
js实现缓冲运动效果的方法

本文实例讲述了js实现缓冲运动效果的方法.分享给大家供大家参考.具体分析如下: 该实例可实现一开始速度很快,然后慢下来,直到停止的效果. 要点: var speed = (target-box.offsetLeft)/8; 目标点减去元素的当前位置的值除以8,因为offsetleft的值是一直在变大,所以速度的值也是一直的变小 speed = speed>0?Math.ceil(speed):Math.floor(speed); 正向速度的时候向上取整,反向速度的时候向下取整代码: <!DO
原生JavaScript制作微博发布面板效果

javaScript实现微博发布面板效果.采用的js知识有: 正则表达式区分中英文字节.随机数生成等函数淡入淡出.缓冲运动.闪动等动画函数 onfocus.onblur.oninput.onpropertychange等事件动态添加元素,获取设置动态属性基本思路: 当内容为空时,发布按钮为灰色,点击时候文本框会闪动,输入文字会提示还可以输入多少文字,超出会提示,且不能发布,要注意的是,判断文本框内容的长度,不能直接来,因为英文属于一个字节,中文占两个,要用正则处理一下! 获取到所有头像的s
JS多物体实现缓冲运动效果示例

本文实例讲述了JS多物体实现缓冲运动效果的方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <meta http-equiv="content-type" content="text/html" /> <titl
js实现同一页面多个不同运动效果的方法

本文实例讲述了js实现同一页面多个不同运动效果的方法.分享给大家供大家参考.具体分析如下: 要点一: function getstyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; } } 从样式表中根据id和属性名取值. 要点二: if(attr == "opacity"){ cur = Math.rou

JavaScript实现多球运动效果

相关推荐

随机推荐