Question

所以我已经确定了我认为这里的问题。虽然，我很难理解为什么console.log（粒子[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>

Answer 1

似乎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。

Answer 2

您为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;

v.x和v.y都未定义。

> 1 + undefined
Nan

数字加上undefined不是数字。

console.log中的神秘NaN。尝试短暂的物理实验

2 个答案: