Question

嗨那里:)只是试图用粒子完成这个小测试，但我得到了一些＆＃34;外推＆＃34;行为。我会告诉你两个＆＃34;版本＆＃34;的代码。它的工作原理如下： - 我创建一个粒子，传递一个＆＃34;粒子设置＆＃34;，它意味着生命体，颜色，spawntype等的粒子配置。现在，我只有一个粒子类型＆＃34; AcidQuads＆＃34;。它们的意图是它们的工作（它工作正常）但是随机的初始颜色如果＆＃34; rndiColor＆＃34; value设置为true。如果是，则通过传递＆＃34; iRed＆＃34;，＆＃34; iGreen＆＃34;中包含的列表来生成颜色。和＆＃34; iBlue＆＃34; （同样代表iAlpha）到一个函数（rndbtw）。它工作正常（或者我所看到的）。具有＆＃34;列表＆＃34;的PARTICLES_SETTINGS属性作为一个值，意味着粒子值将由rndbtw（）生成，它返回属性的1个元素和0之间的值（iRed：[255,0]将返回0到255之间的数字）。我已经发出警报，看看为每个粒子生成的值，它们都没问题。颜色值是正确的（在0到255之间）并且一切看起来都很好......但是，我可以获得粒子的唯一方法是通过设置iRed / iGreen / iBlue来设置[0,255]，它会始终生成白色粒子，具有不同的alpha值。＆＃34;工作＆＃34;代码是下一个：

    </head>
<body>
    <canvas ID="test" width="640" height="480"></canvas>
    <script>

var QUAD    = 1,
    GRAVITY = 0.3;  

var mouse;
    mouse = {x: 0, y: 0};
document.addEventListener('mousemove', function(e){ 
                           mouse.x = e.clientX - 12; 
                           mouse.y = e.clientY - 23 //Fix poco decente! no hagan esto en casa.
                         }, false);

function rndbtw(range)       { return (Math.random()*range[0])+range[1] }
function getRGBA(R, G, B, A) { return 'rgba('+R+','+G+','+B+','+A+')' }




var PARTICLES_SETTINGS = {
    'AcidQuads': {
        //Shape and size related
        shape: QUAD,
        rndSize: true,
        size: {width:  [10, 2],
               height: [10, 2]
              },
        //Color related
        rndiColor: true,
        iRed:   [0, 255], //Here are the color values
        iGreen: [0, 255],
        iBlue:  [0, 255],
        // Alpha
        rndiAlpha: true,
        iAlpha: [1, 0.1],
        // Velocity related
        rndVelocityX: true,
        rndVelocityY: true,
        iVelx: [10, -5],
        iVely: [10, -5],
        // Position related
        xfollowMouse: true,
        yfollowMouse: true,
        // Life related
        rndLiferate: true,
        liferate: [100, 30]
    }
}

var Particle = function(settings, spawnPosition) {
    this.settings = PARTICLES_SETTINGS[settings]
    if (this.settings.rndiColor) {
        //Get random initial color
        //If the color must be random, call rndbtw() passing the two-values list
        this.R = rndbtw(this.settings.iRed);
        this.G = rndbtw(this.settings.iGreen);
        this.B = rndbtw(this.settings.iBlue);
    } else {
        //Or get the specified initial color
        this.R = this.settings.iRed;
        this.G = this.settings.iGreen;
        this.B = this.settings.iBlue;
    }
    this.A = (this.settings.rndiAlpha) ? rndbtw(this.settings.iAlpha):this.settings.iAlpha;
    this.color = getRGBA(this.R, this.G, this.B, this.A); //rgba string for canvas.
    //
    this.velx = (this.settings.rndVelocityX) ? rndbtw(this.settings.iVelx):this.settings.iVelx;
    this.vely = (this.settings.rndVelocityY) ? rndbtw(this.settings.iVely):this.settings.iVely;
    //
    this.x = (this.settings.xfollowMouse) ? mouse.x:spawnPosition[0];
    this.y = (this.settings.yfollowMouse) ? mouse.y:spawnPosition[1];
    //
    this.maxLife = (this.settings.rndLiferate) ? rndbtw(this.settings.liferate):this.settings.liferate;
    //-
    this.shape = this.settings.shape;
    this.size = (this.settings.shape == QUAD) ? {
                                                     width:  (this.settings.rndSize) ? rndbtw(this.settings.size.width):this.settings.size.width,
                                                     height: (this.settings.rndSize) ? rndbtw(this.settings.size.height):this.settings.size.height
                                                  }:(this.settings.shape.POINT)  ? 
                                                    {radius: (this.settings.rndSize) ? rndbtw(this.settings.size.radius):this.settings.size.radius}:'Another shapetype';
    //-
    this.life = 0;
    //
    this.id = particleIndex;
    particles[particleIndex] = this;
    particleIndex++;
    test = 'Color: '+this.color+' /vel(x,y) '+this.velx+','+this.vely+' /type '+this.shape+' /size '+this.size+' /settings '+this.settings+' /id '+this.id;
    alert(test);
}
Particle.prototype.live = function() {
    //Kill?
    if (this.life == this.maxLife) {
        delete particles[this.id];
    }
    //Draw
    ctx.fillStyle = this.color;
    alert(this.color);
    switch (this.shape) {
        case QUAD:
            ctx.fillRect(this.x, this.y, this.size.width, this.size.height);
            break;
    }

    //Update
    this.x += this.velx;
    this.y += this.vely;
    this.vely += GRAVITY;
    this.life++;
    return
}


//--------------------------------------------------//
var particles,
    particleIndex,
    canvas,
    ctx;

canvas = document.getElementById('test');
ctx    = canvas.getContext('2d');
particles = [];
particleIndex = 0;

setInterval(function() {
    for (var i=0; i<=10; i++) {
        new Particle('AcidQuads');
    }
    ctx.fillStyle = '#000000';
    ctx.fillRect(0, 0, 640, 480);
    for (var i in particles) {
        particles[i].live();
    }
}, 30)

    </script>


</body>
</html>

仅绘制具有随机alpha的白色粒子。您可以在警报中看到，值仅为（255,255,255，随机）。为了更改它，并生成0到255之间的随机值，代码将改变它：

rndiColor: true,
iRed:   [0, 255],
iGreen: [0, 255],
iBlue:  [0, 255],

到此： rndiColor：是的， iRed：[255,0]， iGreen：[255,0]， iBlue：[255,0]，

在警报中，您将看到值正常，R，G，B介于0到255之间，而alpha介于0.1和1之间......但如果我改变了这一点，我就不会看到任何粒子绘制。几天前，我通过设置例如iRed：function（）{return Math.random（）* 255 + 0}并调用＆＃34; settings.iRed（）;＆＃34来制作具有随机颜色的粒子;获得红色的随机值，但制作新粒子的方式有点乏味......我更喜欢只列出一系列值的列表。为什么，如果生成值ok（0到255之间）没有绘制，而如果我放[min，max]它们只是每个粒子的一种颜色？所有其他东西都工作得很好（速度，寿命，alpha和大小）。

高级感谢您的帮助，请原谅我的英语不好。

顺便说一句......我将替换RequestAnimation的setInterval，如果我打开另一个网页，它会冻结我的浏览器xD

谢谢！：）

Answer 1

首先：在阅读之前，让你的头远离任何墙壁;-)

您正在使用广告DOM＆＃39; rgb（,,）＆＃39;用于定义颜色的字符串：它需要整数 R，G，B在0..255中。

所以只需将rndbtw改为：

function rndbtw(range) { return  Math.floor((Math.random()*range[0])+range[1]) ; }

应该带回颜色!!

粒子的代码不起作用。绘图时出错？

1 个答案: