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

栏目: Html5 · 发布时间: 4年前

内容简介:在效果如下

前言

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,这样 canvas数字时钟之Ball对象及如何模拟物理效果

就可以实现匀速运动了

加速运动

同理,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对象的构建。

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


以上所述就是小编给大家介绍的《canvas数字时钟之Ball对象及如何模拟物理效果》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

程序员面试宝典

程序员面试宝典

欧立奇、刘洋、段韬 / 电子工业出版社 / 2006-7 / 39.00元

本书取材于各大IT公司历年面试真题(包括笔试题、口试题、电话面试、英语面试,以及逻辑测试和智商测试)。通过精确详细的分类,把在应聘程序员(含网络、测试等)过程中所遇见的常见考点分为21章。不仅对传统的C系语言考点做了详尽的解说,包括面向对象问题、sizeof问题、const问题、数据结构问题等。还根据外企出题最新特点,针对设计模式问题、C#问题、网络问题、数据库问题、NET问题等,做了深入的说明。......一起来看看 《程序员面试宝典》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

SHA 加密
SHA 加密

SHA 加密工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具