无法在画布上的按键上更改图像 [英] Can't get image to change on keypress on canvas

问题描述

我要制作它，以便当我按向左按钮时，它会显示设置为向左移动的图像. (我正在制作RPG游戏.)我不知道如何使用Spritesheet，因此我最终分别加载每个图像以使事情变得更容易.

I want to make it so that when I press left, it shows the image set for going left. (I'm making an RPG game.) I can't figure out how to use a spritesheet, so I ended up loading each image individually to make things easier.

这是我到目前为止所拥有的:

Here's what I have so far:

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

推荐答案

问题出在绘制函数上，该函数可在每次绘制时重新设置字符图像.

The problem lies in the draw-function that reserts the character image on each draw.

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

The solution would be to declare a new variable that will host the current picture for your character:

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

下一步是更改键侦听器功能，以便更改播放器图像的来源(也请删除此功能中所有字符绘制).像这样:

Next step is to alter your keylistener-function so that the source for your player-image is changed (also remove all drawing of your character in this function). Like so:

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

最后，在您的绘图功能中:

Finally, in your draw-function:

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

-----这里结束了答案，下面的东西只是为了娱乐而已------

为了娱乐，这是我前一段时间开始的未完成的游戏. http://home.niddro.com/HTML5/supergoose/SuperGoose.html 角色的脚上有3张图像，随着玩家移动他的脚而循环.我以超级马里奥兄弟的概念为基础.

For fun, here's an unfinished game I started with a while back. http://home.niddro.com/HTML5/supergoose/SuperGoose.html The character's feet have 3 images that loop as the players moves him. I based that idea on the super mario bros concept.

有趣的事实2: 在另一种游戏中，我通过循环播放2张模糊的图像使兔子运行得非常快脚:

Fun fact 2: In another game I made a bunny run really fast by looping 2 images of blurred feet:

这篇关于无法在画布上的按键上更改图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！