캔버스 삭제 이미지 충돌시

Question

충돌이 성공하지 못하면 이미지를 제거하려고하는데, 헬기와 파워 업이라는 보조 이미지가 기본 이미지입니다. 기본적으로 두 충돌이 게임이 실행되는 것을 멈추게 할 때 대신 전원 복구 이미지 (gemList)를 삭제하거나 제거하고 싶습니다. 나는 객체를 얻고있다. [객체 배열]에는 콘솔에서 '삭제'할 방법이 없다.

내 코드 :

function animateGems() { 
gemCount++; 
for(var i=0; i<gemList.length; i++) { 
    if(gemList[i].x < 0-gemWidth) { 
     gemList.splice(i, 1); //remove gem once its outside of the canvas 
    } else { 
     gemList[i].x = gemList[i].x - gemV 
     ctx.drawImage(gemList[i].image, gemList[i].x, gemList[i].y, gemWidth, gemHeight) 

     if(gemCount >= gemInterval) { 
      addGem(); 
      gemCount = 0; 
     } 
    } 
} 
} 

function gemCollision() { 
var collideCount = 0; 
for(var i=0; i<gemList.length;) { 
    var thisGem = gemList[i]; 
    //collision detection if the xposition of the chopper offset by its width 
    // and comparing it against the xposition of the gem then the collision detection 
    // check Y values also 
    if((chopperX + chopperWidth) >= thisGem.x && chopperX <= (thisGem.x + gemWidth) && 
     (chopperY + chopperHeight) >= thisGem.y && chopperY <= (thisGem.y + gemHeight)) { 
      collideCount++; 
      gemList.splice(i,1);//removes the current collided gem 
     score += 5; 
    } else i++; //close if 
}//close for on gemList 
if (collidedCount !=0) collidedCount == gemList[i]-1; 

}//close function 

Answer 1

당신은 당신이 그것을 반복하는 동시에 목록을 수정. 당신은 할 수 있지만 배열이 단순하게 줄어들지 않는 경우에만 인덱스를 증가시키면서 sligthly 다른 방식으로해야만합니다. :.

function gemCollision() { 
    var collidedCount = 0; 
    for(var i=0; i<gemList.length;) { 
     var thisGem = gemList[i]; 
     //collision detection if the xposition of the chopper offset by its width 
     // and comparing it against the xposition of the gem then the collision detection 
     // check Y values also 
     if((chopperX + chopperWidth) >= thisGem.x && chopperX <= (thisGem.x + gemWidth) && 
      (chopperY + chopperHeight) >= thisGem.y && chopperY <= (thisGem.y + gemHeight)) { 
       collidedCount++; 
       gemList.splice(i,1); 
       score += 5; 
     } else i++; //close if 
    }//close for on gemList 
    if (collidedCount > 0) powerUpSound.play(); 
}//close function*/ 

는
(난 당신이 여러 번 발생하면 연주 한 소리도 수정 (난 그냥 i 번째 요소를 제거했다) 제거 (내가 가정하지만, 필요하다면이 문제를 해결) 같은 시간에 여러 번 소리를내는 대신 소리를 높이고 싶을 수도 있습니다.)

편집 : 당신이 한 animateGems 코드에서 같은 실수를하는 것처럼 보입니다. 충돌 코드 : 목록 (배열)을 반복하고 동시에 변경합니다.
그런 모든 패턴의 경우 : 인덱스를 처리하거나 이후에 사용할 별도의 defferedRemove 목록을 작성하십시오.

코드가 약간 변경되었으므로 하나의 표식이 사라지 자마자 정교한 좌절감을 피하기 위해 무작위로 (500 ~ 3500 ms) 임의의 시간에 보석을 만듭니다.

var wantedGemCount = 20; 

function animateGems() { 
    // gemCount++; // i commented. gemCount is gemList.length, that's all. 
    for(var i=0; i<gemList.length; /* i++ nope !! */) { 
     var thisGem = gemList[i] ; 
     if (thisGem.x < 0-gemWidth) { 
      gemList.splice(i, 1); //remove gem once its outside of the canvas 
     } else { 
      thisGem.x = thisGem.x - gemV 
      ctx.drawImage(thisGem.image, thisGem.x, thisGem.y, gemWidth, gemHeight)  
      i++; // here !! 
     }   
    } 
    // add gems only after the for loop if need be 
    // i did not understood the logic, and changed it a bit 
    if(gemList.length < wantedGemCount) { 
       addGemLater(); 
    } 
    handleGemCreation(); 
} 

var gemAddTime = []; 
function addGemLater() { 
    gemAddTime.push(Date.now() + 500 + Math.random()*3000); 
} 

function handleGemCreation() { 
    var now = Date.now(); 
    for (var i=0; i<gemAddTime?length;) { 
     var thisTime = gemAddTime[i]; 
     if (thisTime > now) { 
      // push a new gem 
      gemList.push(???? ); 
      // remove add request 
      gemAddTime.splice(i,1); 
     } else i++; 
    } 
}