HTML CANVAS减速运动

Question

Alright, so I have an image I'm moving around the canvas with keypresses (WASD.)

The problem is that if you check out the animation (you can check it out on my website at maddogathecanadianunicorn.batcave.net/project5.html if you want to see it), it moves too fast. It's not the animation itself, but the movement being too fast.

Is there a way I can lower how much it moves per second or something? Maybe it has something to do with the FPS?

My Code is Below.

        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

Just add a cooldown for each point your character moves.

Example:

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

Hope this helps. :)

sidenotes:: the cooldown will still continue even if the character doesn't move, this is just one solution to slow movement down. If you want the cooldown to start upon movement, you have to instantiate a cooldown timer variable on the move event to make it move smoothly.