Question

我正在使用画布构建一个迷宫游戏并且我移动的对象移动了，但它移动了100px而不是1.我不确定为什么会发生这种情况。它可能与我的requestAnimationFrame函数有关吗？

var canvas = document.getElementById('canvas');
    var context = canvas.getContext("2d");

    var requestAnimationFrame = 
                window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function(callback) {
                    window.setTimeout(callback, 1000/60);
                }

    var playerX = 70;
    var playerY = 20;

    function init(){
        requestAnimationFrame(update);
     }

   function update(){
       // clearCanvas();
       context.clearRect(0,0,this.width,this.height);
       sizeCanvas();
       player();
       keyListen();

       this.maze = new Maze(this.context);
       this.maze.render();

       requestAnimationFrame(update);
     }

     function sizeCanvas(){
        this.width = 1025;
        this.height = 575;

        this.canvas.width = this.width;
        this.canvas.height = this.height;

         $(this.canvas).css('left', 25).css('top', 25);
     }


     function clearCanvas(){
         var c = this.context;
         c.fillRect(-this.width/2, -this.height/2, this.width,     this.height);
    }

     function keyListen(){

      $(window).keydown(function(event){
          var code = event.keyCode;

          if(code == 37){
              playerX -= 1;

         }else if(code == 39){
              playerX += 1;
              console.log(playerX);
         }else if(code == 38){
              playerY -= 1; 
         }else if(code == 40){
              playerY += 1; 
         }
     });
   }

      function player(){
         context.strokeStyle ='#2dbd3a ';
         context.fillStyle = '#2dbd3a ';
         context.lineWidth = 3;
         context.fillRect( playerX, playerY, 20, 20);
         context.stroke();
       }

      $(function(){
           init();
      });

这是迷宫的代码

function Maze(context){
this.width = $(window).width();
this.height = $(window).height();
}

Maze.prototype.render = function(){
 context.strokeStyle = '#333';
 context.fillStyle = '#333';
 context.lineWidth = 1;

//border
context.fillRect(10,10,25,550);
context.fillRect(110,10,900,25);
context.fillRect(20,535,990,25);
context.fillRect(985, 20, 25, 450);

//walls
context.fillRect(300,10,25,250);
context.fillRect(300,140, 300, 25);
context.fillRect(200,150, 100, 25);


// walls coming from top border
context.fillRect(400,10,25,85);
context.fillRect(580,10,25,85);


//inner walls starting from right
context.fillRect(850, 150, 25, 140);
context.fillRect(730, 150, 175, 25);
context.fillRect(800, 265, 50,25)
context.fillRect(730,10, 25, 150);

// right walls
context.fillRect(900,75,100,25);
context.fillRect(800,400,200,25);
context.fillRect(850,400,25,90);
context.fillRect(900,350,25,50);
context.fillRect(585,400,25,90);
context.fillRect(675,490,25,50);


//middle walls
context.fillRect(475,400,25,140);
context.fillRect(500,400,200,25);
context.fillRect(550,300,25,100);
context.fillRect(575,300,100,25);
context.fillRect(650,200,25,100);

//left wall 
context.fillRect(10,100, 140,25);
context.fillRect(10,200, 120,25);

//inner walls starting from left
context.fillRect(100, 350, 25,108);
context.fillRect(100, 455, 300, 25);
context.fillRect(300,355, 25, 100);
context.fillRect(300, 350, 100,25);
context.fillRect(375, 250, 25, 100);
context.fillRect(375,250,150,25);
context.fillRect(500, 150, 25,120);

context.fillRect(175, 250, 150, 25);






context.stroke();
   }

Answer 1

这是因为每个requestAnimationFrame都会调用keyListen。

窗口事件侦听器正在构建，并在彼此之上添加。每次调用$(window).keydown(fn)时，先前的事件侦听器都不会消失。现在，如果按下按钮，将会触发数百个事件监听器。

将呼叫从keyListen()移出update，只调用一次。我把它移到init这样，它运行正常：

function init(){
    requestAnimationFrame(update);
    keyListen();
}

function update(){
    // clearCanvas();
    context.clearRect(0,0,this.width,this.height);
    sizeCanvas();
    player();

    this.maze = new Maze(this.context);
    this.maze.render();

    requestAnimationFrame(update);
  }

HTML5 Canvas意外移动量

1 个答案: