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让控件左右移动的三种实现方法
Sep 08 Javascript
js中window.open打开一个新的页面
Aug 10 Javascript
JQuery中上下文选择器实现方法
May 18 Javascript
JavaScript中setUTCFullYear()方法的使用简介
Jun 12 Javascript
JS实现闭包中的沙箱模式示例
Sep 07 Javascript
JS写谷歌浏览器chrome的外挂实例
Jan 11 Javascript
基于vue2.0动态组件及render详解
Mar 17 Javascript
vue实现动态按钮功能
May 13 Javascript
对layui数据表格动态cols(字段)动态变化详解
Oct 25 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 Javascript
JavaScript 接口原理与用法实例详解
May 12 Javascript
vue addRoutes路由动态加载操作
Aug 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 cookie 登录验证示例代码
2009/03/16 PHP
用PHP的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
一个简单且很好用的php分页类
2013/10/26 PHP
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
php框架CI(codeigniter)自动加载与自主创建对象操作实例分析
2020/06/06 PHP
window.onload和$(function(){})的区别介绍
2013/10/30 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
jquery实现瀑布流效果分享
2014/03/26 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
JS实现回到页面顶部动画效果的简单实例
2016/05/24 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
使用jQuery实现简单的tab框实例
2017/08/22 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
简单了解vue.js数组的常用操作
2019/06/17 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
python中根据字符串调用函数的实现方法
2016/06/12 Python
详解python的数字类型变量与其方法
2016/11/20 Python
python对日志进行处理的实例代码
2018/10/06 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
python flask安装和命令详解
2019/04/02 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
Django密码系统实现过程详解
2019/07/19 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
找到不普通的东西:Bonanza
2016/10/20 全球购物
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
介绍一下Ruby的特点
2013/01/20 面试题
专科毕业生自我鉴定
2013/12/01 职场文书
自我推荐信范文
2014/05/09 职场文书