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 相关文章推荐
js 页面执行时间计算代码
Mar 04 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
Jul 17 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 Javascript
jQuery each函数源码分析
May 25 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 Javascript
bootstrap vue.js实现tab效果
Feb 07 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
Aug 19 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 22 Javascript
Openlayers实现点闪烁扩散效果
Sep 24 Javascript
ES5和ES6中类的区别总结
Dec 21 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中神奇的fastcgi_finish_request
2011/05/02 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
高性能JavaScript 重排与重绘(2)
2015/08/11 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
Python 26进制计算实现方法
2015/05/28 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
django query模块
2019/04/20 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
Linux的主要特性
2016/09/03 面试题
如何理解transaction事务的概念
2015/05/27 面试题
给酒店员工的表扬信
2014/01/11 职场文书
教育技术职业规划范文
2014/03/04 职场文书
小学生开学第一课活动方案
2014/03/27 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
保密工作目标责任书
2014/07/28 职场文书
合同意向书范本
2014/07/30 职场文书
环保宣传语大全
2015/07/13 职场文书
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python