캔버스에 여러 번 drawimage

현재 적들이 900의 x 위치에 도달하면 어떻게 생성합니까?캔버스에 여러 번 drawimage

가 여기

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 일 때마다 이러한 적을 스폰하고 보드에 현재의 적을 유지할 수 있기를 원합니다.

출처

2014-09-14 user3843041

현재 enemy.x가 0이 될 때까지 적의 목록 (rand에서 rand9까지)이 사용 중입니다. 이제는 적의 목록 하나를 사용하는 것보다 변수를 덮어 쓰지 않고 차례로 적 목록을 생성하고 적 목록이 0에 이르면 버릴 수 있다면 좋지 않을까요? 문제를 해결하려면 객체 프로그래밍을 사용해야합니다. 문서화 된 자습서는 http://eloquentjavascript.net/1st_edition/chapter8.html에서 확인할 수 있습니다. 작은 객체 지향 프로그래밍 (OOP)을 배우고 나면 적 목록에 대해 "청사진"을 만들 수 있으므로 서로를 독립적으로 유지하면서 만들고 만들 수 있습니다.

출처

2014-09-14 07:17:58 Frumples

당신이나 누군가가 context.drawImage (tile3, enemy.x, enemy.y2, tileWidth, tileHeight)를 어떻게 돌릴 지 자세히 설명해 줄 수 있습니다. ? 객체 지향 프로그래밍에 대해 알고 있지만 객체에 이미지를 붙이는 방법을 모르겠습니다. – user3843041

캔버스에 여러 번 drawimage

답변

관련 문제