수많은 인스턴스를 반환하는 캔버스에 마우스를 올려 놓은 것

Question

그래서 저는 자바 스크립트 게임 튜토리얼을 따로 뜯어보고 ​​내 자신을 만들려고 노력했지만 어떻게 처리해야할지 모르겠습니다. . 기본적으로 플레이어는 클릭으로 캔버스 내부로 위쪽으로 쏠 수 있으며, 업데이트 기능 중 하나에서 mousedown 이벤트를 사용하고 있습니다. 이런 일이 발생할 때마다 작은 미로 미사일을 만들어야합니다 (새로운 미사일이 만들어지고 배열에 올려집니다, lazers). 테스트 목적으로,이 배열에 얼마나 많은 lazer가 인쇄되어 있고, 마우스를 클릭 할 때마다 (또는 아래로 오히려), 약 20 개의 lazer가 추가됩니다 (때로는 훨씬 더 많은 것보다 훨씬 많은 것 같습니다). 그). 이것은 특정 기능입니다 :

canvas.addEventListener('mousedown', function (e) { 
     lazers.push(makeProjectile(position.x + width/2, position.y - height/2)); 
}); 

내가뿐만 아니라 jsfiddle에 모든 것을 넣어 :

http://jsfiddle.net/cgC2z/3/이 코드가 약간 지저분 있음을 유의하십시오 거기 주위 비트를 걸려 할 수있다. (게임을 만드는 방식에 대해 자유롭게 의견을 말하지만, 나는 모든 건설적인 비판을 좋아할 것이다.)

Answer 1

update 함수에 이벤트 수신기를 추가하려고합니다. 따라서 모든 다른 이벤트 리스너가 업데이트됩니다. 그런 다음 그들은 클릭 할 때 모두 즉시 트리거됩니다.

단순히 이벤트 리스너를 이사 : 물론 http://jsfiddle.net/cgC2z/4/

canvas.addEventListener('mousemove', function (e) { 
    var mousePos = getMousePos(canvas, e); 
    position.x = mousePos.x; 
    position.y = mousePos.y; 
}, false); 

canvas.addEventListener('mousedown', function (e) { 
    lazers.push(makeProjectile(position.x + width/2, position.y - height/2)); 
}); 

function update(elapsed) { 
    for (var i = 0; i < lazers.length; i++) { 
     lazers[i].update(elapsed); 
    } 
}