如何用ES6新属性写“躁动的小球”

       提到“躁动的小球”对于前端爱好者来说并不陌生,其书写的方式有很多种,其核心思想不过为针对浏览器的left和top值、定时器控制物体多长时间移动多长距离,怎么移动,多大的物体等等...
       为了防止低版本浏览器版本兼容性差,所以我也准备了两个版本,一个普通版本,一个改写ES6写法,其大致写法如下:
<h2>一:普通版本</h2>
<b>结构部分</b>
<div id="box"></div>
注:先设置一个包围小球的盒子,当然不设置可以,那以浏览器可视窗口为基准。
<b>样式部分</b>

*{
            margin:0;
            padding:0;
        }
        #box{
            height:500px;
            width:600px;
            margin:20px auto;
            box-shadow: 0 0 3px #000;
            position: relative;
        }
        .ball{
            position: absolute;
            border-radius:50%;

        }

注:简单设置一下样式,盒子设置相对定位,小球相对于其设置绝对定位就可以了,小球不需要设置宽高,用JS控制随机大小和小球的颜色。下面是JS代码。

function Ball(){
            //小球的宽高
            this.wh = random(10,50);
            //小球的横向速度
            this.sx = random(-10,10,0);
            //小球的纵向速度
            this.sy = random(-10,10,0);
            //小球的颜色
            this.bg = 'rgb('+random(0,255)+','+random(0,255)+','+random(0,255)+')';
            //小球的位置 x轴
            this.left = random(10,600-50);
            //小球的位置 y轴
            this.top = random(10,500-50);
            this.box = null;
        }
        //小球出现的位置
        Ball.prototype.create = function(){
            //创建一个小球
            this.box = document.createElement('div');
            //获取创建的小球
            var box = document.getElementById('box');
            //小球距离和盒子左边的距离
            this.box.style.left = this.left+'px';
            //小球距离和盒子上边的距离
            this.box.style.top = this.top+'px';
            //小球的宽度
            this.box.style.width = this.wh+'px';
            //小球的高度
            this.box.style.height = this.wh+'px';
            //小球的背景颜色
            this.box.style.background = this.bg;
            //小球的样式
            this.box.className = 'ball';
            //把小球添加到div盒子上
            box.appendChild(this.box);
        }

        //小球移动
        Ball.prototype.move = function(){
            //小球撞到x轴左右两边设置反向移动,防止溢出
            if(this.left < 0 || this.left > 600 - this.wh){
                this.sx *= -1;
            }
            //小球撞到x轴上下两边设置反向移动,防止溢出
            if(this.top < 0 || this.top > 500 -this.wh){
                this.sy *= -1;
            }
            //左右移动
            this.left += this.sx;
            //上下移动
            this.top += this.sy;
            //设置盒子左边的距离
            this.box.style.left = this.left+'px';
            //设置盒子上边的距离
            this.box.style.top = this.top+'px';
        }

        // 随机函数,传入最大值,最小值和不想出现的值
        function random(min,max,not){
            //设置随机方法
            var result = Math.ceil(Math.random()*(max-min)+min);
            //跳过不想粗现的值
            if(result == not){
                result++;
            }
            //返回随机值
            return result;
        }

        //多个球
        var balls = [];
        //这里是设置20个球,想出现几个写几个
        for(var i = 0; i < 20;i++){
            //实例化一个要出现的小球对象
            var ball = new Ball();
            //调创建小球方法
            ball.create();
            balls[i] = ball;
        }
        // console.log(balls);
        //设置定时器,这里给了10毫秒
        var timer = setInterval(function(){
            for(var j = 0; j < balls.length; j++){
                balls[j].move();
            }
        },10)

注:在设置多个小球的时候不要给太多,否则很可能会卡的,当然你觉得你GPU足够强大可以试试,当然你如果非要给很多小球的话,四五千上万个话,建议用canvas做吧。强大的canvas哈哈。话入正题!上面时普通写法,基本没什么难度,写几个方法,控制边缘,调用方法就可以了。下面是改写的ES6新属性写法。
<h2>二:ES6版本</h2>
<h5>样式和结构不变,使用上面同一个</h5>

class Ball{
            constructor(){
                //球的宽高
                this.wh = random(10,50);
                //球的横向速度
                this.sx = random(-10,10,0);
                //球的纵向速度
                this.sy = random(-10,10,0);
                //球的颜色
                this.bg = `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`;
                //球的位置 x轴
                this.left = random(10,600-50);
                //球的位置 y轴
                this.top = random(10,500-50);
                this.box = null;
                }
        

            create(){
                this.box = document.createElement('div');
                let box = document.querySelector('#box');
                this.box.style.cssText = `
                left:${this.left}px;
                top:${this.top}px;
                width:${this.wh}px;
                height:${this.wh}px;
                background:${this.bg};`;

                this.box.className = 'ball';
                box.appendChild(this.box);
            }

        //小球移动
        move(){
            if(this.left < 0 || this.left > 600 - this.wh){
                this.sx *= -1;
            }
            if(this.top < 0 || this.top > 500 -this.wh){
                this.sy *= -1;
            }
            this.left += this.sx;
            this.top += this.sy;
            this.box.style.left = this.left+'px';
            this.box.style.top = this.top+'px';
        }
    }
        // 随机函数,传入最大值,最小值和不想出现的值
        function random(min,max,not){
            let result = Math.ceil(Math.random()*(max-min)+min);
            if(result == not){
                result++;
            }
            return result;
        }

        //多个球
        let balls = [];
        for(let i = 0; i < 10;i++){
            let ball = new Ball();
            ball.create();
            balls[i] = ball;
        }
        // console.log(balls);

        const timer = setInterval(function(){
            for(let j = 0; j < balls.length; j++){
                balls[j].move();
            }
        },10)

附:注释和上面普通写法一样,这里不多写了,喜欢的朋友留个赞吧,感谢支持!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法。 上面代码检查函数l...
    呼呼哥阅读 3,476评论 0 1
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,991评论 19 139
  • 一、ES6简介 ​ 历时将近6年的时间来制定的新 ECMAScript 标准 ECMAScript 6(亦称 ...
    一岁一枯荣_阅读 6,126评论 8 25
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,255评论 4 61
  • 当未来还未来 你永远不知道,期待未来的喜悦和困守于现实的痛苦哪个会先到来!所以当未来还没来,当现实还无法逃开,那就...
    santanolife阅读 339评论 0 1