使用HTML5 canvas实现一个简单的粒子引擎代码实例

define(function(require, exports, module) {    var Util = require('./Util');    var Launcher = require('./Launcher');    /**     * 世界构造函数     * @param config     *          backgroundImage     背景图片     *          canvas              canvas引用     *          context             canvas的context     *     *          time                世界时间     *     *          gravity             重力加速度     *     *          heat                热力     *          heatEnable          热力开关     *          minHeat             随机最小热力     *          maxHeat             随机最大热力     *     *          wind                风力     *          windEnable          风力开关     *          minWind             随机最小风力     *          maxWind             随机最大风力     *     *          timeProgress        时间进步单位，用于控制时间速度     *          launchers           属于这个世界的发射器队列     * @constructor     */    function World(config){        //太长了，略去细节    }    World.prototype.updateStatus = function(){};    World.prototype.timeTick = function(){};    World.prototype.createLauncher = function(config){};    World.prototype.drawBackground = function(){};    module.exports = World;});

/** * 循环触发函数 * 在满足条件的时候触发 * 比如RequestAnimationFrame回调，或者setTimeout回调之后循环触发的 * 用于维持World的生命 */ World.prototype.timeTick = function(){    //更新世界各种状态    this.updateStatus();    this.context.clearRect(0,0,this.canvas.width,this.canvas.height);    this.drawBackground();    //触发所有发射器的循环调用函数    for(var i = 0;i<this.launchers.length;i++){        this.launchers[i].updateLauncherStatus();        this.launchers[i].createGrain(1);        this.launchers[i].paintGrain();    }};

World.prototype.updateStatus = function(){    this.time+=this.timeProgress;    this.wind = Util.randomFloat(this.minWind,this.maxWind);    this.heat = Util.randomFloat(this.minHeat,this.maxHeat);};

World.prototype.createLauncher = function(config){    var _launcher = new Launcher(config);    this.launchers.push(_launcher);};

define(function (require, exports, module) {    var Util = require('./Util');    var Grain = require('./Grain');    /**     * 发射器构造函数     * @param config     *          id              身份标识用于后续可视化编辑器的维护     *          world           这个launcher的宿主     *     *          grainImage      粒子图片     *          grainList       粒子队列     *          grainLife       产生的粒子的生命     *          grainLifeRange  粒子生命波动范围     *          maxAliveCount   最大存活粒子数量     *     *          x               发射器位置x     *          y               发射器位置y     *          rangeX          发射器位置x波动范围     *          rangeY          发射器位置y波动范围     *     *          sizeX           粒子横向大小     *          sizeY           粒子纵向大小     *          sizeRange       粒子大小波动范围     *     *          mass            粒子质量（暂时没什么用）     *          massRange       粒子质量波动范围     *     *          heat            发射器自身体系的热气     *          heatEnable      发射器自身体系的热气生效开关     *          minHeat         随机热气最小值     *          maxHeat         随机热气最小值     *     *          wind            发射器自身体系的风力     *          windEnable      发射器自身体系的风力生效开关     *          minWind         随机风力最小值     *          maxWind         随机风力最小值     *     *          grainInfluencedByWorldWind      粒子受到世界风力影响开关     *          grainInfluencedByWorldHeat      粒子受到世界热气影响开关     *          grainInfluencedByWorldGravity   粒子受到世界重力影响开关     *     *          grainInfluencedByLauncherWind   粒子受到发射器风力影响开关     *          grainInfluencedByLauncherHeat   粒子受到发射器热气影响开关     *     * @constructor     */    function Launcher(config) {        //太长了，略去细节    }    Launcher.prototype.updateLauncherStatus = function () {};    Launcher.prototype.swipeDeadGrain = function (grain_id) {};    Launcher.prototype.createGrain = function (count) {};    Launcher.prototype.paintGrain = function () {};    module.exports = Launcher;});

 Launcher.prototype.createGrain = function (count) {        if (count + this.grainList.length <= this.maxAliveCount) {            //新建了count个加上旧的还没达到最大数额限制        } else if (this.grainList.length >= this.maxAliveCount &&            count + this.grainList.length > this.maxAliveCount) {            //光是旧的粒子数量还没能达到最大限制            //新建了count个加上旧的超过了最大数额限制            count = this.maxAliveCount - this.grainList.length;        } else {            count = 0;        }        for (var i = 0; i < count; i++) {            var _rd = Util.randomFloat(0, Math.PI * 2);            var _grain = new Grain({/*粒子配置*/});            this.grainList.push(_grain);        }    };

Launcher.prototype.swipeDeadGrain = function (grain_id) {    for (var i = 0; i < this.grainList.length; i++) {        if (grain_id == this.grainList[i].id) {            this.grainList = this.grainList.remove(i);//remove是自己定义的一个Array方法            this.createGrain(1);            break;        }    }};

Launcher.prototype.paintGrain = function () {    for (var i = 0; i < this.grainList.length; i++) {        this.grainList[i].paint();    }};

Launcher.prototype.updateLauncherStatus = function () {    if (this.grainInfluencedByLauncherWind) {        this.wind = Util.randomFloat(this.minWind, this.maxWind);    }    if(this.grainInfluencedByLauncherHeat){        this.heat = Util.randomFloat(this.minHeat, this.maxHeat);    }};

define(function (require, exports, module) {    var Util = require('./Util');    /**     * 粒子构造函数     * @param config     *          id              唯一标识     *          world           世界宿主     *          launcher        发射器宿主     *     *          x               位置x     *          y               位置y     *          vx              水平速度     *          vy              垂直速度     *     *          sizeX           横向大小     *          sizeY           纵向大小     *     *          mass            质量     *          life            生命长度     *          birthTime       出生时间     *     *          color_r     *          color_g     *          color_b     *          alpha           透明度     *          initAlpha       初始化时的透明度     *     *          influencedByWorldWind     *          influencedByWorldHeat     *          influencedByWorldGravity     *          influencedByLauncherWind     *          influencedByLauncherHeat     *     * @constructor     */    function Grain(config) {        //太长了，略去细节    }    Grain.prototype.isDead = function () {};    Grain.prototype.calculate = function () {};    Grain.prototype.paint = function () {};    module.exports = Grain;});

Grain.prototype.calculate = function () {    //计算位置    if (this.influencedByWorldGravity) {        this.vy += this.world.gravity+Util.randomFloat(0,0.3*this.world.gravity);    }    if (this.influencedByWorldHeat && this.world.heatEnable) {        this.vy -= this.world.heat+Util.randomFloat(0,0.3*this.world.heat);    }    if (this.influencedByLauncherHeat && this.launcher.heatEnable) {        this.vy -= this.launcher.heat+Util.randomFloat(0,0.3*this.launcher.heat);    }    if (this.influencedByWorldWind && this.world.windEnable) {        this.vx += this.world.wind+Util.randomFloat(0,0.3*this.world.wind);    }    if (this.influencedByLauncherWind && this.launcher.windEnable) {        this.vx += this.launcher.wind+Util.randomFloat(0,0.3*this.launcher.wind);    }    this.y += this.vy;    this.x += this.vx;    this.alpha = this.initAlpha * (1 - (this.world.time - this.birthTime) / this.life);    //TODO 计算颜色 和 其他};

Grain.prototype.isDead = function () {    return Math.abs(this.world.time - this.birthTime)>this.life;};

Grain.prototype.paint = function () {    if (this.isDead()) {        this.launcher.swipeDeadGrain(this.id);    } else {        this.calculate();        this.world.context.save();        this.world.context.globalCompositeOperation = 'lighter';        this.world.context.globalAlpha = this.alpha;        this.world.context.drawImage(this.launcher.grainImage, this.x-(this.sizeX)/2, this.y-(this.sizeY)/2, this.sizeX, this.sizeY);        this.world.context.restore();    }};