HTML CANVAS 减缓运动

Question

好的，所以我有一个图像，我正在使用按键 (WASD) 在画布上移动。

问题在于，如果您查看动画（如果您想查看，可以在我的网站 maddogathecanadianunicorn.batcave.net/project5.html 上查看），它移动得太快了。不是动画本身，而是动作太快了。

有什么方法可以降低每秒移动的速度或其他什么？也许它与FPS有关？

我的代码在下面。

        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;
      var srcx = 0;
      var srcy = 0;


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


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

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

                function move(event){

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

                                    //ANIMATOR
                                    srcy = 0;
                                    srcx+=33;

                                    if(srcx === 66){
                                    srcx = 0;
                                    }

                                //CHAR MOVER
                                if(y >= 20){
                                        y-=20;

                                }

                                /* This loops it back around.
                                else if(y < 20){
                                        y = 460;
                                }
                                */

                        }
                        //---
                        //A
                        //---
                        if(event.keyCode == 65){ //a

                                    //Animator
                                    srcy = 66;
                                    srcx+=33;

                                    if(srcx === 66){
                                    srcx = 0;
                                    }

                                //CHAR MOVER
                                if(x >= 20){
                                        x-=20;
                                }

                                /*Loops it back around
                                else if(x < 20){
                                        x = 460;
                                }
                                */
                        }
                        //---
                        //S
                        //---
                        if(event.keyCode == 83){ //s

                                    //Animator
                                    srcy = 33;
                                    srcx+=33;

                                    if(srcx === 66){
                                    srcx = 0;
                                    }

                                //CHAR MOVER    
                                if(y+height <= 490){
                                        y+=20;
                                }

                                /*Loops Char back...
                                else if(y+height > 460){
                                        y = 0;
                                }
                                */
                        }
                        //---
                        //D
                        //---
                        if(event.keyCode == 68){ //d

                                    //Animator
                                    srcy = 100;
                                    srcx+=33;

                                    if(srcx === 66){
                                    srcx = 0;
                                    }

                                //Mover    
                                if(x+width <= 490){
                                        x+=20;
                                }

                                /*Loops Char Back
                                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(char, srcx, srcy, 32, 32, x, y, width, height);
                }

        }

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

Answer 1

只需为角色移动的每个点添加冷却时间。

例子：

movement_cd_per_cell = 300; //movement speed in milliseconds
move_able = true;

//this interval will serve as a refresher for every time the character moves
setInterval(function(){  move_able = true;}, movement_cd_per_cell );

//shortened move function
      function move(event){

                 //---
                 //W
                 //---

                 //add into the condition move_able to check if the character can move again.
                 if(event.keyCode == 87 && move_able == true){ //w

                 //ANIMATOR
                      srcy = 0;
                      srcx+=33;

                  if(srcx === 66){
                       srcx = 0;
                        }
                  //CHAR MOVER
                  if(y >= 20){
                       y-=20;
                       move_able = false; //add this line to prevent anymore movement
                       }
                }

希望这会有所帮助。 :)

旁注:: 即使角色不移动，冷却仍然会继续，这只是减缓移动速度的一种解决方案。如果您希望在移动时开始冷却，则必须在 move 事件上实例化一个冷却计时器变量以使其平稳移动。