javascript - 数组练习javascript的同时循环

Question

我想按键触发 block 的移动，然后用另一个按键，添加另一个移动 block 。如果我再次按下，则会出现另一个移动 block 。就像现在一样，按下按键会停止第一个 block 的移动。我想让所有的积木同时移动。这是代码。它也可以在 jsfiddle http://jsfiddle.net/7eUEE/ 上找到

谢谢!

var canvas = document.getElementById("canvas"); 
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext("2d");
var w = canvas.width;
var h = canvas.height;
window.addEventListener("keydown", addnew, true);
window.addEventListener("keydown", move, true);
var list = [];
var id = 0;
var color = 'blue';
var x = 0;
var y = 0;

window.onkeydown = function(s){
    s.preventDefault();
    if(!s){
        s = window.event;
    }

    var keycode;
    if(s.which){
        keycode = s.which;
    }else{
        keycode = s.keyCode;
    }

}
function box(id, color, x ,y){
    box.id = id;
    box.color = color;
    box.x = x;
    box.y = y;
}   

function addnew(e){
    e.preventDefault();
    if(!e){
        e = window.event;
    }                   

    //space
    if(e.keyCode == 32){
        list[id] = new box(id, color, x, y);
        id++;
        y = y + 100;
        box.y = y;
        box.color = 'red';
        console.log(box.y);
    }
}

list[0] = box(id, color, x ,y);

function move(e){
    e.preventDefault();
    if(!e){
        e = window.event;
    }                   

    //right
    if(e.keyCode == 39){
        list[id];
        setInterval(loopdraw);
    }
}

var loopdraw = function draw(){
    box.x = box.x + 1;
    console.log(box.x);
    ctx.beginPath();
    ctx.fillStyle = box.color;
    ctx.fillRect(box.x, box.y, 50, 50);
    ctx.closePath();
}

Answer 1

您的 Box 对象不像对象，因为您以 3 种方式使用它们:

• 类:list[id] = new box(id, color, x, y);
• 函数:list[0] = box(id, color, x ,y);
• 对象:box.y = y;, box.color = 'red'; 等

list 部分是正确的:保留一组(移动的)框。循环部分不是，因为您不使用列表。您只需“循环”1 个框。

我已经更新了 fiddle :http://jsfiddle.net/rudiedirkx/7eUEE/1/并且我已将 box 类重命名为 Box，因为可能存在名为 box 的 Box 对象。

重要部分:

// Create initial box
list[id++] = new Box(id, color, x ,y);

// Create more boxes
list[id++] = new Box(id, 'red', x, y);

// Loop through existing boxes animation
function loopdraw() {
  list.forEach(function(box) {
    // Draw