png 파일을 사용하는 캔버스 애니메이션

캔버스를 사용하여 경주 용 게임을 만들고 자동차 배경이 투명한 png 파일을 만들려고합니다.png 파일을 사용하는 캔버스 애니메이션

화살표 중 하나를 길게 누르면 문제가 있습니다. 운동의 반대 방향으로 그것은 차의 오래된 위치 인 하얀 그림자처럼 보입니다.

<!DOCTYPE html> 
<html> 
    <head> 
     <script type="text/javascript"> 

      var canvas; 
      var ctx; 
      var car = new Image(); 
      var x = 0; 
      var y = 0; 


      function startUp(){ 
       canvas = document.getElementById('myCanvas'); 
       ctx = canvas.getContext('2d'); 

       loadImages(); 
       startGameLoop(); 
      } 


      function startGameLoop() { 

       setInterval(function() { 
        drawScreen(); 
        drawCar(); 
       }, 16); 
       window.addEventListener('keydown', whatKey, true); 

      } 

      function drawScreen(){ 

       ctx.clearRect(0, 0, canvas.width, canvas.height); 

       ctx.fillStyle = '#aaaaaa'; 
       ctx.rect(0, 0, canvas.width, canvas.height); 
       ctx.fill(); 
      } 

      function drawCar(){ 

       ctx.drawImage(car, x ,y, 200, 103); 
      } 

      function whatKey(evt) { 

       switch (evt.keyCode) { 

        // Left arrow. 
        case 37: { 
         x -= 15; 
        } 
         break; 

        // Right arrow. 
        case 39:{ 
         x += 15; 
        } 
         break; 

        // Down arrow 
        case 40:{ 
         y += 15; 
        } 
         break; 

        // Up arrow 
        case 38: { 
         y -= 15; 
        } 
         break; 
       } 

      } 

      function loadImages() { 
       car.src = 'http://sammywasem.com/images/f3-top.png'; 
      } 
     </script> 
    </head> 

    <body onload="startUp()"> 
     <canvas id="myCanvas" width="1050" height="620"> 
     </canvas> 
    </body> 
</html>

출처

2014-04-19 user3549461

자동차 이동은 실제로 올바른 방법입니다.
오른쪽 키를 누르면 문이 창으로 전송되고 코드에 갇히게됩니다. 차가 오른쪽으로 이동합니다. 그러나이 이벤트는 전체 창에 의해 처리됩니다. 여기서 창은 오른쪽으로 이동합니다.
결국 창문이 차보다 더 움직이기 때문에 결국 보는 것은 차의 왼쪽으로 이동하는 것입니다.

은 무엇 당신이해야 할 것은 당신이 그것을 처리하면 더 버블 링에서 키 이벤트를 방지하는 것입니다 : preventDefault의 사양을 볼 수

event.preventDefault();

및

event.stopPropagation();

보기 mdn 이루어집니다 또는 stopPropagation.

내가 당신의 코드에서 바이올린을 수행하고 업데이트했습니다

http://jsbin.com/joboxuvu/1/edit?js,output

출처

2014-04-19 10:39:21 GameAlchemist

감사 답변을 위해, 내 문제 중 하나였다. 위에서 작성한 코드를 내 레프럽에서 시험해 보았는데 정상적으로 작동합니다. – user3549461

반갑습니다. 문제가 남아 있다는 뜻입니까? Chrome 또는 Firefox (Mac OS)에서 설명하는 흰색 그림자를 볼 수 없습니다. – GameAlchemist

문제는 내 PC에 있으며, 나는 그것을 볼 수 없다고 생각합니다. 화살표 중 하나를 누르고 있으면 루프가 실행될 때마다 화면이 지워지고 새 x 또는 y에 차가 그려지고 차 x의 흰색 그림자가 이전 x 또는 y에 그려집니다. 그것은 모든 중요한 브라우저에서 발생합니다. 나도 몰라, 내 비디오 카드 설정에서 온거야? – user3549461

png 파일을 사용하는 캔버스 애니메이션

답변

관련 문제