[英]How do I make my array objects move randomly?
據我的教授說,我需要使dotArray中的點隨機移動。 我創建了一個繪制函數,根據xrate和yrate在dotArray中分配點的xpos和ypos。 但是,當我加載html頁面時,控制台窗口會顯示一條錯誤消息,內容為“無法讀取未定義的屬性'xpos'”。 點不動。 誰能告訴我這段代碼有什么問題嗎?
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);
在繪圖函數中, i的值始終為100。應將繪圖函數移出while循環,並使用參數調用它以達到單個點編輯; 改變你的畫圖功能;
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次。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.