Javascript Can'；无法在画布上的按键上更改图像

我想这样，当我按下左键时，它会显示为向左移动而设置的图像。（我正在制作一个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>

函数initCanvas（）{
var canvas=document.getElementById（'my_canvas'）
var ctx=canvas.getContext（'2d'）；
//变数
var cw=画布宽度；
var ch=画布高度；
var x=20；
变量y=20；
var宽度=40；
var高度=40；
//----------------
//Char（Spritesheet soon）
//----------------
var charup=新图像（）；
charup.src=“up.png”；
var chardown=新图像（）；
chardown.src=“down.png”；
var charleft=新图像（）；
charleft.src=“left.png”；
var charright=新图像（）；
charright.src=“right.png”；
// 
draw（）；//执行draw函数
//
//-------------
//WASD控制
//-------------
文档。addEventListener（“向下键”，移动，假）；
功能移动（事件）{
如果（event.keyCode==87）{//w
ctx.drawImage（charup、x、y、宽度、高度）；
如果（y>=20）{
y-=20；
}
否则，如果（y<20）{
y=460；
}
}
如果（event.keyCode==65）{//a
ctx.drawImage（字符左、x、y、宽度、高度）；
如果（x>=20）{
x-=20；
}
否则如果（x<20）{
x=460；
}
}
如果（event.keyCode==83）{//s
ctx.drawImage（焦比、x、y、宽度、高度）；
如果（y+高度460）{
y=0；
}
}
如果（event.keyCode==68）{//d
ctx.drawImage（字符右、x、y、宽度、高度）；
如果（x+宽度490）{
x=0；
}
}
draw（）；
//sprite的想法：如果按right，它会向右移动并在向右移动时加载gif。。。
//当“keyup”或“keyrelease”或其他什么的时候，它会停止动画
//或加载一个面向同一方向的中性点。
}
//--------------
//绘图函数
//--------------
函数绘图（）{
//为动画目的清除rect
ctx.clearRect（0，0，cw，ch）；
ctx.fillStyle=“绿色”；
//ctx.fillRect（x，y，20，20）；
ctx.drawImage（焦比、x、y、宽度、高度）；
}
}
//------------
//游戏循环
//------------
window.addEventListener（'load'，函数（事件）{
initCanvas（）；
});

问题在于每次绘制时重新发送字符图像的绘制功能

解决方案是声明一个新变量，该变量将承载角色的当前图片：

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);

----答案到此结束，下面的内容只是为了好玩----

为了好玩，这里有一个我不久前开始的未完成的游戏。 角色的脚有3个图像，在玩家移动时循环。我的想法是基于超级马里奥兄弟的概念。

趣事二： 在中，我通过循环两张模糊脚的图像，让兔子跑得非常快：

---

无关紧要，但我正在尝试制作一款类似胭脂的rpg游戏，或者只是一款可以杀死某些东西的小型rpg。。。（或其他什么…）我只是觉得它会让人心情愉快，或者甚至会有所帮助。我最终改变了一些代码。我试着在看到你是否在一个特定的合作伙伴后画这个角色。。。这是错误的，因为我希望它以任何方式绘制。仍然不起作用，但我更新了主代码。太长，读不下去了我移动了一行或两行，但它什么也没做。尝试创建一个新的图像变量

var player=new image（）

，并将其源代码设置为空白

player.src=”“

。接下来要做的事情是，如果按了W:

player.src=charup.src

，以此类推所有按钮的按下。在绘图功能中，只需绘制播放器图像：

ctx.drawImage（播放器，x，y，宽度，高度）