JavaScript实现多球运动效果


Posted in Javascript onSeptember 07, 2020

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

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 相关文章推荐
JQuery对表单元素的基本操作使用总结
Jul 18 Javascript
javascript使用call调用微信API
Dec 15 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 Javascript
原生js实现轮播图
Feb 27 Javascript
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
layui form表单提交之后重新加载数据表格的方法
Sep 11 Javascript
Vue中rem与postcss-pxtorem的应用详解
Nov 20 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 Javascript
在Vue中使用HOC模式的实现
Aug 23 Javascript
vue监听滚动事件的方法
Dec 21 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
JavaScript实现世界各地时间显示
Sep 07 #Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
Sep 07 #Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 #Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 #Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 #Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 #Javascript
vue单应用在ios系统中实现微信分享功能操作
Sep 07 #Javascript
You might like
php将csv文件导入到mysql数据库的方法
2014/12/24 PHP
php实现的二分查找算法示例
2017/06/20 PHP
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
2015/06/08 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
2016/09/09 Javascript
JavaScript禁止微信浏览器下拉回弹效果
2017/05/16 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
js实现列表向上无限滚动
2020/01/13 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
Python类的用法实例浅析
2015/05/27 Python
python目录与文件名操作例子
2016/08/28 Python
Python实现的中国剩余定理算法示例
2017/08/05 Python
Python3实现发送QQ邮件功能(文本)
2017/12/15 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
一份python入门应该看的学习资料
2018/04/11 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
时尚孕妇装:Ingrid & Isabel
2019/05/08 全球购物
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
高一生物教学反思
2014/01/17 职场文书
2015年组织部工作总结
2015/04/03 职场文书
行政司机岗位职责
2015/04/10 职场文书
利用 JavaScript 构建命令行应用
2021/11/17 Javascript
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript