Одновременные циклы с упражнением массива javascript

Question

Я хочу, чтобы ключ запускал движение блока, а затем с другим нажатием клавиши, добавил еще один движущийся блок. И если я снова запустил ключ, появится еще один движущийся блок. Как и сейчас, остановка ключа останавливает движение первого блока. Я хотел бы, чтобы все блоки двигались одновременно. Вот код. Он также доступен на 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.

Я обновил скрипку: 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