캔버스에서 키를 눌렀을 때 이미지가 변경되지 않을 수 있습니다.

Question

왼쪽을 누르면 왼쪽으로 설정 한 이미지가 표시됩니다. RPG 게임을 만들고 있습니다. 스프라이트 시트를 사용하는 방법을 알 수 없으므로 각 이미지를 개별적으로로드하여 작업을 쉽게 처리했습니다.

는 여기에 지금까지이 작업은 다음과 같습니다

<script> 
     function initCanvas(){ 
     var canvas = document.getElementById('my_canvas') 
     var ctx = canvas.getContext('2d'); 

      //Variables 
      var cw = canvas.width; 
      var ch = canvas.height; 
      var x = 20; 
      var y = 20; 
      var width = 40; 
      var height = 40; 


       //---------------- 
       //Char (Spritesheet soon) 
       //---------------- 
        var charup = new Image(); 
        charup.src = "up.png"; 

        var chardown = new Image(); 
        chardown.src = "down.png"; 

        var charleft = new Image(); 
        charleft.src = "left.png"; 

        var charright = new Image(); 
        charright.src = "right.png"; 


       // 
       draw(); //Executes the Draw Function 
       // 

       //------------- 
       //WASD Controls 
       //------------- 
       document.addEventListener("keydown", move, false); 

       function move(event){ 

         if(event.keyCode == 87){ //w 

         ctx.drawImage(charup, x, y, width, height); 
           if(y >= 20){ 
             y-=20; 

           } 
           else if(y < 20){ 
             y = 460; 
           } 
         } 
         if(event.keyCode == 65){ //a 

         ctx.drawImage(charleft, x, y, width, height); 
           if(x >= 20){ 
             x-=20; 
           } 
           else if(x < 20){ 
             x = 460; 
           } 
         } 
         if(event.keyCode == 83){ //s 
         ctx.drawImage(chardown, x, y, width, height); 
           if(y+height <= 490){ 
             y+=20; 
           } 
           else if(y+height > 460){ 
             y = 0; 
           } 
         } 
         if(event.keyCode == 68){ //d 
         ctx.drawImage(charright, x, y, width, height); 
           if(x+width <= 490){ 
             x+=20; 
           } 
           else if(x+width > 490){ 
             x = 0; 
           } 
         } 

        draw(); 

        //Idea for sprite: If press right it goes right and loads a gif while going right... 
        //And when "keyup" or keyrelease or whatever, it stops the animation 
        //Or loads a neutral one facing the same direction. 

      } 

      //-------------- 
      //Draw Function 
      //-------------- 
       function draw(){ 
       //Clears rect for animation purposes 
       ctx.clearRect(0, 0, cw, ch); 

       ctx.fillStyle = "green"; 
         //ctx.fillRect(x, y, 20, 20); 
       ctx.drawImage(chardown, x, y, width, height); 
       } 

     } 

     //------------ 
     //Game Loop 
     //------------ 
    window.addEventListener('load', function(event){ 
     initCanvas(); 
    }); 
    </script> 

Answer 1

문제는 각 무승부에 문자 이미지를 reserts 그리기 기능에있다.

이 솔루션은 캐릭터의 현재 사진을 호스팅 할 새로운 변수를 선언하는 것입니다 :

var imgPlayer = new Image(); 
imgPlayer.src = "down.png"; //This is your default image. 

플레이어 이미지의 소스가 변경되도록

다음 단계는 모든 KeyListener 기능을 변경하는 것입니다 (또한이 기능에서 캐릭터의 모든 그림을 제거합니다). 그래서 같이 : 드로우 기능에

if(event.keyCode == 87){ //w 
    imgPlayer.src = charup.src; 
    //the rest of your code... 
} 

마지막으로, 다음은 대답을 종료 -----

ctx.drawImage(imgPlayer, x, y, width, height); 

을, 아래 다도는 -------를 그냥 재미위한 것입니다

재미있게 놀아 라, 내가 잠시 뒤로 시작했던 미완성의 게임이 여기에있다. http://home.niddro.com/HTML5/supergoose/SuperGoose.html 캐릭터의 발에는 플레이어가 움직일 때 반복되는 3 개의 이미지가 있습니다. 나는 슈퍼 마리오 브라더스 개념에 그 아이디어를 기반으로합니다. 나는 흐린 피트의 두 이미지를 반복하여 정말 빠른 토끼 달렸 another game에서 :

재미있는 사실이