粒子的代碼不起作用。繪圖時出錯？

Question

嗨，你好:)只是試圖用粒子完成這個小測試，但是我得到了一些“額外的”行為。 我將為您提供代碼的兩個“版本”。 它的工作方式如下：-我創建一個粒子，並傳遞“粒子設置”，它表示生命率，顏色，生成類型等的粒子配置。目前，我只有一個粒子類型“ AcidQuads”。 它們旨在用作rect（正常工作），但如果將“ rndiColor”值設置為true，則具有隨機的初始顏色。 如果是，則通過將包含在“ iRed”，“ iGreen”和“ iBlue”（與iAlpha相同的意思）上的列表傳遞給函數（rndbtw）來生成顏色。 它工作正常（或者就是我所看到的）。 具有“列表”作為值的PARTICLES_SETTINGS屬性意味着粒子值將由rndbtw（）生成，該值返回屬性1到0之間的值（iRed：[255，0]將返回介於0和255）。 我發出了警報，以查看為每個粒子生成的值，它們還可以。 顏色值是正確的（0到255之間），一切看起來都很好...但是，我可以繪制顆粒的唯一方法是將iRed / iGreen / iBlue設置為[0，255]，該顏色始終生成白色顆粒，並且具有不同的alpha 。 下一個“有效”代碼：

    </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，random）。 為了更改它並生成介於0到255之間的隨機值，代碼將對此進行更改：

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

為此：rndiColor：true，iRed：[255，0]，iGreen：[255，0]，iBlue：[255，0]，

在警報中，您將看到值可以，R，G，B在0到255之間，而alpha在0.1到1之間...但是，如果我更改此設置，則看不到任何粒子。 幾天前，我通過設置iRed來制作具有隨機顏色的粒子，例如，設置iRed：function（）{return Math.random（）* 255 + 0}，然后調用“ settings.iRed（）;”。 以獲得紅色的隨機值，但是以這種方式制作新粒子有點繁瑣...我更喜歡只列出一系列值。 為什么如果生成的值確定（0到255之間），而我放置[min，max]卻不繪制，則每個粒子只有一種顏色？ 所有其他東西都工作正常（速度，壽命，alpha和大小）。

非常感謝您的幫助，請原諒我的英語不好。

順便說一句...我將為RequestAnimation替換setInterval，如果我有另一個打開xD的網頁，它將凍結我的瀏覽器

謝謝！ :)

Answer 1

首先：在閱讀本文之前，請先將頭移開牆壁；-)

您正在使用廣告DOM'rgb（,,）'字符串定義顏色：它期望整數 R，G，B為0..255。

因此，只需將rndbtw更改為：

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

應該帶回顏色！

粒子的代碼不起作用。繪圖時出錯？

問題描述

1 個解決方案

解決方案1
0 已采納 2014-08-19 12:19:07

粒子的代碼不起作用。 繪圖時出錯？

問題描述

1 個解決方案

解決方案1 0 已采納 2014-08-19 12:19:07

粒子的代碼不起作用。繪圖時出錯？

解決方案1
0 已采納 2014-08-19 12:19:07