弹弹弹，多彩小球弹跳

最新推荐文章于 2023-02-26 11:10:12 发布

Boriska1996

最新推荐文章于 2023-02-26 11:10:12 发布

阅读量243

点赞数 2

分类专栏： JS 文章标签： javascript js html es6

本文链接：https://blog.csdn.net/RequesToGod/article/details/112780797

版权

JS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

JavaScript小球掉落弹起

效果图:

在这里插入图片描述

小球对象类:

export default class Ball{
    elem;
    speed=1;
    y=-50;
    constructor(){
        this.elem=this.createElem();
    }
    // 单例模式，确保只有一个元素
    createElem(){
        if(this.elem) return this.elem;
        let div=document.createElement("div");
        Object.assign(div.style,{
            width:"50px",
            height:"50px",
            backgroundColor:Ball.randomColor(),
            borderRadius:"50%",
            position:"absolute",
            top:"-50px"
        });
        return div;
    }
    // 随机颜色
    static randomColor(){
        var col="#";
        for(var i=0;i<6;i++){
            col+=Math.floor(Math.random()*16).toString(16);
        }
        return col;
    }
    appendTo(select){
        // 对象的构造函数就是该对象的类别
        if(select.constructor===String)document.querySelector(select).appendChild(this.elem);
        else if(select instanceof HTMLElement) select.appendChild(this.elem);
    }
    setX(x){
        this.elem.style.left=x+"px";
    }
    // 控制小球的上下跳跃， 当小球遇到边界（上下），就重新设定参数回到最顶上，循环往下落。
    update(){
        if(this.y>400) this.speed=-this.speed;
        this.speed+=0.2;
        this.y+=this.speed;
        this.elem.style.top=this.y+"px";
    }
}

Utils方法库使用的随机数方法：

    static random(min,max){
        return Math.floor(Math.random()*(max-min))+min;
    }

html实例化小球对象代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script type="module">
      import Ball from "./js/Ball.js";
      import Utils from "./js/Utils.js";
      // 判断某个对象是不是HTML标签元素： console.log(document.body instanceof HTMLElement)
      // fps 帧频  60fps  1000
      var ids,
        arr = [],
        time = 30;
      init();
      function init() {
        createBall();
        animation();
      }

      function createBall() {
        var ball = new Ball();
        ball.appendTo("body");
        //工具类中的随机数控制小球的落点的横坐标
        ball.setX(Utils.random(0, 1440));
        arr.push(ball);
      }

      function animation() {
        requestAnimationFrame(animation);
        // window.requestAnimationFrame()方法告诉浏览器执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画，
        // 该方法使用一个回调函数，作为参数，这个回调函数会在浏览器重绘之前调用。
        allUpdate();
        intervalCreate();
      }
      //   随机控制小球数量
      function intervalCreate() {
        time--;
        if (time > 0) return;
        time = Utils.random(20, 40);
        for (var i = 0; i < Utils.random(1, 4); i++) {
          createBall();
        }
      }
      //   遍历所有的小球，开始移动
       
      function allUpdate() {
        for (var i = 0; i < arr.length; i++) {
          arr[i].update();
        }
      }
    </script>
  </body>
</html>

Boriska1996

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
弹弹弹，多彩小球弹跳

JavaScript小球掉落弹起效果图:小球对象类:export default class Ball{ elem; speed=1; y=-50; constructor(){ this.elem=this.createElem(); } // 单例模式，确保只有一个元素 createElem(){ if(this.elem) return this.elem; let div=document
复制链接

扫一扫

专栏目录