1

所以我已经确定了我认为是这里的问题。不过，我很难理解为什么 console.log(particles[index].x); 调用输出“NaN”。它应该是一个数字。那么，为什么不是呢？不知道为什么这是值得投票的，有人可以向我解释一下吗？

<html>
<head>
</head>
<body>
<canvas id='c'></canvas>
<script type="text/javascript">
var width = window.innerWidth,
height = window.innerHeight,
c = document.getElementById('c'),
ctx = c.getContext('2d');
c.width = width;
c.height = height;
var center = {x:width/2, y:height/2};


var particles = [];
var totalParticles = width/50;
var size = 20;

function init(){
    for (var i = 0; i < totalParticles; i++) {
        addParticle(i);
    }
    drawParticle(center.x, center.y, 20, particles[1].c);

    setInterval(update, 40);
}

function update(){

    for (var i = 0; i < particles.length; i++) {
        applyForce(i);
    }
}

function applyForce(index){

    console.log(particles[index].x);
    var rx = Math.abs(particles[index].x - center.x);
    var ry = Math.abs(particles[index].y - center.y);

    var sign = {x:1, y:1};
    if (particles[index].x > center.x) {
        sign.x = -sign.x;
    } else {
        sign.x = sign.x;
    }

    if (particles[index].y > center.y) {
        sign.y = -sign.y;
    } else {
        sign.y = sign.y;
    }   

    //just use size for mass, center has mass 1
    var force = {
        x:(sign.x*particles[index].s)/Math.pow(rx, 2),
        y:(sign.y*particles[index].s)/Math.pow(ry, 2)
    };



    addForce(index, force);

}

function addForce(index, force){

    particles[index].v.x += force.x;
    particles[index].v.y += force.y;

    particles[index].x = particles[index].x + particles[index].v.x;
    particles[index].y = particles[index].y + particles[index].v.y;

    drawParticle(particles[index].x, particles[index].y, particles[index].s, particles[index].c);

}

function drawParticle(x,y,size,color){

    ctx.beginPath();
    ctx.arc(x, y, size, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fillStyle=color;
    ctx.fill();
}

function addParticle(index){

        size = Math.random() * size + 10;
        var y = Math.random() * height;
        var x = width - 10;
        if (index%2) {
            x = 10;
            console.log("even");
        }

        particles.push({s:size, 
                        x:x, 
                        y:y, 
                        v:(Math.random() * 2) + 4, 
                        c:'#' + (Math.random() * 0x313131 + 0xaaaaaa | 0).toString(16)});

        return;

}

init();

</script>
</body>
</html>
4

2 回答 2

2

似乎particles[index].v.x总是particles[index].v.y如此undefined。因此，当您对这些undefined值求和时：

particles[index].x = particles[index].x + particles[index].v.x;
particles[index].y = particles[index].y + particles[index].v.y;

particles[index].x也particles[index].y成为undefined.

于 2013-01-23T23:04:34.810 回答
0

您为 v 属性分配一个数字...

particles.push({s:size, 
                x:x, 
                y:y, 
                v:(Math.random() * 2) + 4, 
                c:'#' + (Math.random() * 0x313131 + 0xaaaaaa | 0).toString(16)});

稍后您可以像这样访问它...

 particles[index].v.x += force.x;
 particles[index].v.y += force.y;

vx 和 vy 都未定义。

> 1 + undefined
Nan

一个数字加上 undefined 不是一个数字。

于 2013-01-23T23:19:07.887 回答