画布：按下键时出现奇怪的行为

Question

By default the rectangle of my canvas should move from left to right. When pressing the key down, it should start moving down.

 var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), x = 0, y = 0; function draw(x_move, y_move) { requestAnimationFrame(function() { draw(x_move, y_move); }); ctx.beginPath(); ctx.rect(x, y, 20, 20); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "#ffffff"; ctx.fill(); ctx.closePath(); x = x + x_move; y = y + y_move; } draw(1, 0); document.addEventListener('keydown', function(event) { //console.log(event.keyCode); if (event.keyCode == 40) { draw(0, 1); } }); 

 canvas { background-color: red; } 

 <canvas id="canvas" width="600" height="400"></canvas> 

Using the code above, you may at least notice two issues:

1. When pressing key down, the rectangle moves down but also keeps moving to the right.
2. When you keep pressing the down key multiple times, the speed gets increased.

How can I fix those issues?

Answer 1

See where you call

requestAnimationFrame(function() {
    draw(x_move, y_move);
  });

You're now recursively calling draw() .

Now every time you call draw() , it gets called over and over and over again. And when you call it from the keydown event, you call it 2x as often, then 3x as often on the second time you press it, etc.

I'm not entirely clear on what your objective is here, but if you wanted to just adjust the trajectory of the square by pressing down, you could do something like this:

document.addEventListener('keydown', function(event) {
  //console.log(event.keyCode); 
  if (event.keyCode == 40) {
    adjustDownwardTrajectory();
  }
});

and have that adjustDownwardTrajectory() change some downwardTrajectory variable such that:

function draw(x_move, y_move) { 
  requestAnimationFrame(function() {
    draw(x_move, y_move);
  }); 
  ctx.beginPath();
  ctx.rect(x, y, 20, 20);
  ctx.clearRect(0, 0, canvas.width, canvas.height); 
  ctx.fillStyle = "#ffffff";
  ctx.fill();
  ctx.closePath();
  x = x + x_move;
  y = y + y_move + downwardTrajectory;
} 

Answer 2

I believe this is what you want to be doing (and you were close!). I hope this is the behaviour you were looking for.

A related point : It may be a good idea to wrap x_move and y_move up in a closure with these functions so you avoid accidentally changing them in other parts of the program. That way the functions you implement for changing directions of the square will have private access to these variables.

 var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), x = 0, y = 0; var x_move = 1; var y_move = 0; function draw() { requestAnimationFrame(function() { draw(); }); ctx.beginPath(); ctx.rect(x, y, 20, 20); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "#ffffff"; ctx.fill(); ctx.closePath(); x = x + x_move; y = y + y_move; } draw(); document.addEventListener('keydown', function(event) { //console.log(event.keyCode); if (event.keyCode == 40) { x_move = 0; y_move = 1; } }); 

 canvas { background-color: red; } 

 <canvas id="canvas" width="600" height="400"></canvas> 

Answer 3

keyboardEvent.keyCode is a depreciated property. You should use keyboardEvent.code or keyboardEvent.key they provided a named key which is much easier to manage than trying to remember key codes.

You can use fillRect rather than rect and you don't need to use beginPath and fill . You don't need to use closePath you only use it if you want to close a shape (ie add a line from the last point to the first) rect is already closed

You can set the callback directly as the argument for requestAnimationFrame

It pays to group related data together. In this case the square has a position x , y and a delta position ( x_move , y_move ) that are better off in a object. A good clue that you have related data is when you find yourself adding the same name to a set of variables. Objects can also include behaviour in the form of functions like draw and update

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// list of named keys to record state of
const keys = {
   ArrowDown: false,
};
// create key event listeners
document.addEventListener('keydown', keyEvent);
document.addEventListener('keyup', keyEvent);

// define the square
const square = {
    x : 0,  // position
    y : 0,
    dx : 0, // delta pos
    dy : 0,
    draw () {  // function to render the square
        ctx.fillStyle = "#ffffff";
        ctx.fillRect(this.x, this.y, 20, 20);
    },
    update () { // function to update square
        if(keys.ArrowDown){
            this.dx = 0;
            this.dy = 1;
        }else {
            this.dx = 1;
            this.dy = 0;
        }
        this.x += this.dx;
        this.y += this.dy;
    }
}

// main animation update function called once per frame 1/60th second
function update () {
  requestAnimationFrame(update);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  square.update();
  square.draw();
}

// key event records named key state (false up, true down)
function keyEvent (event) {
   if(keys[event.code] !== undefined){
      keys[event.code] = event.type === "keydown";
   }
}