HTML CANVAS 减速移动

Question

好吧，我有一张图像，我正在使用按键 (WASD) 在 canvas 周围移动。

问题是，如果你查看动画（你可以在我的网站 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
                       }
                }

希望这对您有所帮助。 :)

旁注:: 即使角色不动，冷却时间仍会继续，这只是减慢移动速度的一种解决方案。如果你想让冷却时间在移动时开始，你必须在移动事件上实例化一个冷却时间计时器变量以使其平滑移动。

HTML CANVAS 减速移动

HTML CANVAS Slow down Movement

html

javascript

animation

canvas