Question

据我的教授说，我需要让dotArray中的点随机移动。我创建了一个绘图函数，根据xrate和yrate在dotArray中分配点的xpos和ypos。但是当我加载html页面时，控制台窗口会显示一条错误消息，上面写着＆＃34;无法读取属性＆＃39; xpos＆＃39;未定义＆＃34;。点不动。谁能告诉我这段代码有什么问题？

    var randInt = function (lim){
        return Math.floor(lim*Math.random());
    };

    // Generate random hsl color
    var color = "hsl("+[0,0,0].map(function(){  
        return Math.round(100*Math.random())+"%"; }).join(',')+")";

    // Qn1. Create array of dots
    var dotArray = [1,100]
    var i = 0;  //initialize array

    // Qn3 Create map function
    var x = randInt(2)  // x is a random number between 0 & 1
    var map = function(x,a,b,n,m){
        // String to link x,a,b,n,m
        return n + (m-n)*(x-a)/(b-a); 
    };        

    // Creates 100 dots
    while (i < 100){
        dotArray[i] = paper.circle(randInt(pWidth), randInt(pWidth), 20)
        dotArray[i].attr({
            "fill": color, // Qn5 Initialize color to a random hue
            "opacity": 0.5,// Qn6 Made the dots semi-transparent by changing its opacity attribute 
        });

        // Initialize position of dots
        dotArray[i].xpos = randInt(pWidth);
        dotArray[i].ypos = randInt(pHeight);

        // Initialize rate
        dotArray[i].xrate = 5;
        dotArray[i].yrate = 5;

        // Draw function to change xpos and ypos of dots according to xrate and yrate.
        var draw = function(){
            dotArray[i].xpos += dotArray[i].xrate;
            dotArray[i].ypos += dotArray[i].yrate;

            dotArray[i].attr({'cx': dotArray[i].xpos, 'cy': dotArray[i].ypos});

            if (dotArray[i].xpos > pWidth) {dotArray[i].xrate = -dotArray[i].xrate;}
            if (dotArray[i].ypos > pHeight) {dotArray[i].yrate = - dotArray[i].yrate};
            if (dotArray[i].xpos < 0) {dotArray[i].xrate = -dotArray[i].xrate;}
            if (dotArray[i].ypos < 0) (dotArray[i].yrate = - dotArray[i].yrate);
        };

        console.log("dotArray is " + dotArray[i]);  // Console msg to keep track of dots in the array
        i++;    // Increment of i at end of loop.

    };
        // Calls draw function
        setInterval(draw, 20);

Answer 1

在您的绘图功能中， i 的值始终为100.您应该将绘制功能移出 while 循环并使用参数调用它以达到个人 dot 编辑; 将您的绘图功能更改为此;

var draw = function(){
    for (i = 0; i < dotArray.length; ++i) {
    dotArray[i].xpos += dotArray[i].xrate;
    dotArray[i].ypos += dotArray[i].yrate;

    dotArray[i].attr({'cx': dotArray[i].xpos, 'cy': dotArray[i].ypos});

    if (dotArray[i].xpos > pWidth) {dotArray[i].xrate = -dotArray[i].xrate;}
    if (dotArray[i].ypos > pHeight) {dotArray[i].yrate = - dotArray[i].yrate};
    if (dotArray[i].xpos < 0) {dotArray[i].xrate = -dotArray[i].xrate;}
    if (dotArray[i].ypos < 0) (dotArray[i].yrate = - dotArray[i].yrate);
    }
}

这只适用于你的情况，只需复制粘贴，但你也应该从while循环中取出该功能。这样，在while循环的每次迭代中，相同的函数都不会被重新定义100次。

如何让我的数组对象随机移动？

1 个答案: