HTML5 Canvas意外的移動量

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

這是因爲keyListen被稱爲每個requestAnimationFrame的代碼。

窗口事件偵聽器正在建立，在彼此之上添加。每次調用$(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); 
    }