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实现用户名无刷新验证的小例子
Mar 22 Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
JavaScript类的写法
Sep 17 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
使用vue构建移动应用实战代码
Aug 02 Javascript
原生js实现淘宝放大镜效果
Oct 28 Javascript
详解vue中axios请求的封装
Apr 08 Javascript
详解如何运行vue项目
Apr 15 Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 Javascript
js实现浏览器打印功能的示例代码
Jul 15 Javascript
vant 时间选择器--开始时间和结束时间实例
Nov 04 Javascript
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伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
php 购物车完整实现代码
2014/06/05 PHP
jQuery 处理表单元素的代码
2010/02/15 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
对Vue beforeRouteEnter 的next执行时机详解
2018/08/25 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
javascript的惯性运动实现代码实例
2019/09/07 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
python 获取本机ip地址的两个方法
2013/02/25 Python
Python中input和raw_input的一点区别
2014/10/21 Python
python操作gmail实例
2015/01/14 Python
Python复制文件操作实例详解
2015/11/10 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
python3 enum模块的应用实例详解
2019/08/12 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
Python 虚拟环境工作原理解析
2020/12/24 Python
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
李维斯法国官网:Levi’s法国
2019/07/13 全球购物
Oracle快照(snapshot)
2015/03/13 面试题
打架检讨书500字
2014/01/29 职场文书
普罗米修斯教学反思
2014/02/06 职场文书
小露珠教学反思
2014/04/30 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
和谐社区口号
2014/06/19 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
上课说话检讨书
2015/01/27 职场文书
2015年三年级班主任工作总结
2015/05/21 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏