drawimage несколько раз на холсте

Question

Как бы я начал размножаться у врагов, когда текущие враги попали в х-положение 900?

он должен быть как

if(enemy.x<=900){  
    //spawn enemies 
} 

здесь является jsfiddle, чтобы показать вам, что я имею в виду, блоки перемещения влево я хочу иметь кратные им http://jsfiddle.net/h8u1n3fj/ мне нужно текущие враги, чтобы остаться на плата в то время как они порождаются, как хорошо, и просто так, что есть несколько групп врагов, которые остаются на борту после того, как каждый раз, когда человек попадает 900.

var requestAnimFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; 

window.requestAnimationFrame = requestAnimFrame 
var place = [74,111,148,185,222,259,296,333,370]; 
var rand = place[Math.floor(Math.random()*place.length)]; 
var rand2 = place[Math.floor(Math.random()*place.length)]; 
var rand3 = place[Math.floor(Math.random()*place.length)]; 
var rand4 = place[Math.floor(Math.random()*place.length)]; 
var rand5 = place[Math.floor(Math.random()*place.length)]; 
var rand6 = place[Math.floor(Math.random()*place.length)]; 
var rand7 = place[Math.floor(Math.random()*place.length)]; 
var rand8 = place[Math.floor(Math.random()*place.length)]; 
var rand9 = place[Math.floor(Math.random()*place.length)]; 

console.log(rand); 

var move = setInterval(function() { 
    enemy.x -= 45; 
}, 500); 
//drawing the character 

function drawChar(x,y){ 
    enemy.y = rand; 
    enemy.y2 = rand2; 
    enemy.y3 = rand3; 
    enemy.y4 = rand4; 
    enemy.y5 = rand5; 
    enemy.y6 = rand6; 
    enemy.y7 = rand7; 
    enemy.y8 = rand8; 
    enemy.y9 = rand9; 

    context.drawImage(tile3,enemy.x,enemy.y,tileWidth,tileHeight); 
    context.drawImage(tile3,enemy.x,enemy.y2,tileWidth,tileHeight); 
    context.drawImage(tile3,enemy.x,enemy.y3,tileWidth,tileHeight); 
    context.drawImage(tile3,enemy.x,enemy.y4,tileWidth,tileHeight); 
    context.drawImage(tile3,enemy.x,enemy.y5,tileWidth,tileHeight); 
    context.drawImage(tile3,enemy.x,enemy.y6,tileWidth,tileHeight); 
    context.drawImage(tile3,enemy.x,enemy.y7,tileWidth,tileHeight); 
    context.drawImage(tile3,enemy.x,enemy.y8,tileWidth,tileHeight); 
    context.drawImage(tile3,enemy.x,enemy.y9,tileWidth,tileHeight); 

    requestAnimFrame(drawChar); 
    if(enemy.x<=0){ 
     enemy.x=990; 
     rand = place[Math.floor(Math.random()*place.length)]; 
    } 

    else { 

     return true; 
    } 

} 

Кроме того, если у вас есть какие-либо предложения о том, как сделать код чище, не стесняйтесь, но я в основном хочу, чтобы у вас появлялись эти враги каждый раз, когда x равно 900, и удерживайте текущих врагов на доске.

Answer 1

В настоящее время ваш список врагов (rand to rand9) используется до тех пор, пока он не доберется туда, где enemy.x равно нулю. Теперь, вместо того, чтобы использовать один список врагов, было бы неплохо, если бы мы могли просто создавать вражеские списки один за другим, не переписывая переменные, а затем отбрасывать списки врагов, когда они достигают нуля? Чтобы решить вашу проблему, вам необходимо использовать объектное программирование. Хорошо документированный учебник можно найти здесь: http://eloquentjavascript.net/1st_edition/chapter8.html. Изучив небольшое объектно-ориентированное программирование (ООП), вы сможете составить «план» для своих списков врагов, что позволит вам создавать и позиционировать их, сохраняя их независимо друг от друга.