canvas数字时钟之Ball对象及如何模拟物理效果

前言

在 Canvas案例-炫酷的数字时钟 中，展示了案例的最终效果，并简单介绍了案例用到的知识点和案例中的对象，现在先介绍Ball对象，代码有什么问题欢迎大家指出。

效果如下

Ball的属性

跟个前面的效果，下面是我列举的关键属性

• posX, posY, vx, vy, gravity, bounce, canMove 对象位置、运动参数

• alive, birth, life 对象生命参数

• light, color, radius 对象状态参数

// 给出代码
function Ball(data) {
  this.posX = data.posX || 0;
  this.posY = data.posY || 0;
  this.radius = data.radius || 10;
  this.vx = data.vx || Math.random() - 0.5;
  this.vy = data.vy || Math.random() - 0.5;
  this.alive = true;
  this.canMove = false;
  this.birth = null;
  this.light = false;
  this.color = data.color || `#${Math.random().toString(16).substr(3, 6)}`;
}
Ball.prototype = {
  init(data) {
    this.initData(data);
    this.blender();
    return this;
  },
  initData(data) {
    this.WIDTH = data.WIDTH;
    this.HEIGHT = data.HEIGHT;
    this.ctx = data.ctx;
    this.life = 1000 * 15;
    this.gravity = 0.08;
    this.bounce = -0.7;
  },
}
复制代码

先说说几个简单的

这里说一下为什么把参数分两部分，initData里的属性所有Ball实例都一样，没有必要单独设置，放到原型上，算是优化吧，减少不必要的开销。

值得注意的是颜色的随机使用了截取Math.random()的16进制串，想当年还是傻傻的用

Math.ceil(Math.random() * 255)复制代码

这里的canMove用了控制Ball是否可以移动，light控制是否启用颜色，还记得数字时钟的数字前后没有改变的时候是固定不动的吗，而且还是没有颜色

关于为啥设置生命参数

当然是清除无用的对象，释放内存了。比如那些小球出了画布已经没有作用了，就可以清除了，这里使用alive标记，这样可以很方便的清除这些无用对象。其实这里面还有一些对象的vx可能特别小，如果等这些对象移出画布等待的事件会很长，所以这里设置了life来记录小球的生命，生命到期就会被标记

具体实现如下：

// 标记生命到期的对象
if (new Date() - this.birth > this.life) {
	this.alive = false;
}
// 标记移出画布的对象
if (this.posX - this.radius <= 0 || this.posX >= WIDTH) {
	this.alive = false;
}复制代码

下面是模拟物理属性

回想高中我们学习的物理知识—抛物线运动

v = at v = v0 + at h = 1/2 * at^2

然而实际却无法用这些，因为这里我们拿不到时间t，那么我们就要换个思路了

匀速运动

比如x方向做匀速运动，那么vx势必是 定值 ，然后每次跟新把当前的posX = posX + vx，这样

就可以实现匀速运动了

加速运动

同理，y方向做加速运动，那么vy势必是 变值 ，不仅每次跟新把当前的posY = posY + vy，还要把这个重力加速度vy = gravity + vy ,这样就可以实现加速运动了

阻力呢？

为了达到每次弹跳有衰减，这里引入bounce参数，通过把这个参数设置一个（-1~0）即可实现反弹和衰减，一举两得。

// collide函数中
if (this.posY - this.radius <= 0 || this.posY + this.radius >= HEIGHT) {
    // 这里的min max是碰撞检测一个经典的做法
    this.posY = Math.min(this.posY, HEIGHT - this.radius);
    this.posY = Math.max(this.posY, 0);
    this.vy *= this.bounce;
}
// update函数中
if (this.canMove) {
    this.posX += this.vx;
    this.posY += this.vy;
    this.collide();
    this.vy += this.gravity;
}复制代码

小结

好了，至此我们已经完成了Ball对象的构建，使用这个对象已经可以完成一些基本效果，比如下图这些。有什么问题可以留言交流，下期是Tile对象的构建。