ES6面向对象:绚丽小球

2019-03-19
有一段时间没有更新了,前几天学习ES6的时候跟着教程做了个绚丽小球,这里是项目地址, 演示地址.
这个项目蛮简单的,主要思路就是创建一个小球类class Ball{}以及子类class MoveBall{},通过监听鼠标移动在canvas上绘制随机颜色的小球,并向随机方向移动.

一.创建小球类

在这里我们创建一个小球类Ball,拥有位置,颜色,半径三个属性以及一个绘制方法render()

//创建类
class Ball {
  // 构造器
  constructor(posX, posY, color) {
    this.x = posX;
    this.y = posY;
    this.color = color;
    this.r = 40; //半径radius
  }
  // 绘制
  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();
  }
}

二.创建移动的小球

创建一个类MoveBall{}继承于Ball{},这样它就拥有了小球的属性以及方法,接下来添加移动方向的属性使其可以随即方向移动以及方法upDate()用来更新属性.

class MoveBall extends Ball {
  constructor(posX, posY, color) {
    super(posX, posY, color); //调用父类属性
    //量的变化
    this.dX = Math.random() * 10 - 5 // dX:deltaX,x的增量
    this.dY = Math.random() * 10 - 5
    this.dR = Math.random() * 2 + 1
  }

  upDate() {
    this.x += this.dX;
    this.y += this.dY;
    this.r -= this.dR;
    if (this.r < 0) {
      this.r = 0;
    }
  }
}

三.监听事件及实例化

通过eventListener来监听鼠标移动事件mousemove,在鼠标移动时创建小球,通过一个数组ballArr存放小球的数据,以及在颜色数组colorArr中随机抽取颜色作为小球的颜色.

let ballArr = [];
let colorArr = ['red', 'green', 'yellow', 'purple', 'blue', 'pink', 'orange'];
//监听鼠标移动
canvas.addEventListener('mousemove', function (e) {
  ballArr.push(
    new MoveBall(e.offsetX, e.offsetY, colorArr[Math.floor(Math.random() * (colorArr.length - 1))])
  );
});

四.刷新canvas及清理冗余

创建一个计数器来刷新画布以及绘制小球,否则所有生成的小球会黏在一起并且不会有动作.

setInterval(function () {
  //清屏
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  //绘制
  for (let i = 0; i < ballArr.length; i++) {
    ballArr[i].render();  //渲染
    ballArr[i].upDate();  //更新
    if (ballArr[i].r === 0) {
      ballArr.splice(i, 1);
    }
  }
},50);

这里注意如果不进行冗余处理的话小球数组ballArr会越来越大,所以在这里我会删掉半径为0的项.
这样,一个通过ES6面向对象的方式制作的绚丽小球就完成了.