ES6面向对象--实现绚丽小球（跟随鼠标）

来源：互联网发布：unity3d模型下载编辑：程序博客网时间：2024/06/05 03:08

本文主要实现一个随鼠标移动随机产生颜色不一的小球并逐渐消失的效果。
主要使用了canvas画布和ES6中的class语法糖（构造函数）。
还封装了一个MyRandom用于随机取n到m之间的随机数，包括n和m。
详细请见JS实现使用Math.random()函数生成n到m间的随机数字

实现代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        body{            margin: 150px;        }        #canvas{           box-shadow: 0 0 10px #000;        }    </style></head><body><canvas id="canvas">当前的浏览器不支持该版本!</canvas><script>    //封装Math.random()函数    function MyRandom(n, m) {        //取n到m的随机数, [n, m]        return Math.round(Math.random()*(m-n)+n);    }    // 1. 获取当前的画布    const canvas = document.getElementById('canvas');    const ctx = canvas.getContext('2d');    canvas.width = 1000;    canvas.height = 600;    canvas.style.backgroundColor = '#000';    // 2.小球类    class Ball{        /**         * 构造器         */        constructor(x, y, color){            this.x = x;            this.y = y;            this.color = color;            this.r = 40;        }        /**         * 绘制小球         */        render(){           ctx.save();           ctx.beginPath();           ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);           ctx.fillStyle = this.color;           ctx.fill();           ctx.restore();        }    }    // 3.会移动的小球类    class MoveBall extends Ball{        constructor(x, y, color){            super(x, y, color);            // 量的变化            this.dX = MyRandom(-5,5);            this.dY = MyRandom(-5,5);;            this.dR = MyRandom(1,3);        }        upDate(){            this.x += this.dX;            this.y += this.dY;            this.r -= this.dR;            if(this.r < 0){                this.r = 0;            }        }    }    // 4. 实例化小球    let ballArr = [];    let colorArr = ['red', 'green', 'blue', 'yellow', 'purple', 'pink', 'orange'];    // 5. 监听鼠标的移动    canvas.addEventListener('mousemove', function (e) {         ballArr.push( new MoveBall(e.offsetX, e.offsetY, colorArr[MyRandom(0,colorArr.length-1)]));        // console.log(ballArr);    });    // 6.开启定时器    setInterval(function () {        // 清屏        ctx.clearRect(0, 0, canvas.width, canvas.height);        // 绘制        for(let i=0; i<ballArr.length; i++){            ballArr[i].render();            ballArr[i].upDate();        }    }, 50);</script></body></html>

效果图：

效果图

阅读全文

0 0