HTML5畫布 - 鍵盤按鍵不響應

Question

我試圖在乒乓球遊戲中實現按鍵輸入。重點是上下方向鍵不起作用。我的瀏覽器控制檯不顯示任何錯誤消息。

Here is my code, this is WIP some Objects are not implemented yet

var playerBat = { 
     x: null, 
     y: null, 
     width: 20, 
     height: 80, 
     UP_DOWN: false, 
     DOWN_DOWN: false, 

     update: function() { 
     // Keyboard inputs 
     window.addEventListener('keydown', onKeyDown, false); 
     window.addEventListener('keyup', onKeyUp, false); 

     var key = { 
      UP: 38, 
      DOWN: 40 
     }; 

     function onKeyDown(e) { 
      if (e.keyCode == 38) 
      this.UP_DOWN = true; 

      else if (e.keyCode == 40) 
      this.DOWN_DOWN = true; 
     } 

     function onKeyUp(e) { 
      if (e.keyCode == 38) 
      this.UP_DOWN = false; 

      else if (e.keyCode == 40) 
      this.DOWN_DOWN = false; 
     } 

     this.y = Math.max(Math.min(this.y, Canvas_H - this.height), 0); // Collide world bounds 
     }, 

     render: function() { 
     ctx.fillStyle = '#000'; 
     ctx.fillRect(this.x, this.y, this.width, this.height); 

     if (this.UP_DOWN) 
      this.playerBat.y -= 5; 

     else if (this.DOWN_DOWN) 
      this.playerBat.y += 5; 
     } 
    }; 

Answer 1

事件被解僱，問題是​​，你將他們在每次更新。你想要做的是在addEvents之類的方法外部使用回調函數和addEventListener，這些方法在初始化時應該被稱爲ONCE。目前，大量的事件處理程序被觸發殺死了頁面。

function addEvents() { 

     window.addEventListener('keydown', onKeyDown, false); 
     window.addEventListener('keyup', onKeyUp, false); 

     var key = { 
     UP: 38, 
     DOWN: 40 
     }; 

     function onKeyDown(e) { 
     if (e.keyCode == key.UP) { 
      playerPaddle.UP_DOWN = true; 
     } 

     if (e.keyCode == key.DOWN) { 
      playerPaddle.DOWN_DOWN = true; 
     } 
    } 

    function onKeyUp(e) { 
     if (e.keyCode == key.UP) { 
     playerPaddle.UP_DOWN = false; 
     } 

     if (e.keyCode == 40) { 
     playerPaddle.DOWN_DOWN = key.DOWN; 
     } 
    } 
} 

進一步審查後，還有一些其他問題。首先，實際更改槳的X和Y的邏輯應該在更新方法中（因爲這通常用於更改對象屬性），而渲染方法應該只使用對象的更新屬性繪製形狀和圖像。

其次，您正嘗試在render方法中訪問this.playerBat.y，但是'this'實際上就是playerBat。因此，爲了正確定位'y'屬性，您需要編寫this.y。

我還注意到你已經有了一個關鍵的地圖，定義了UP和DOWN鍵碼，但實際上並沒有使用它，而是使用了數字。也許你打算做什麼？

Answer 2

我重新實現您所提供的代碼，並添加了init功能playerBat，重視對​​和keyup事件的事件偵聽器。我只是保留了相關的位和實現的對象作爲函數，但這個概念仍然適用。

送入addEventListener需要結合this回調函數，否則回調（this.UP_DOWN和this.DOWN_DOWN）內的this值將不相同，在封閉範圍的this值;你想要的一個價值。

<canvas id='canvas' style="background:#839496">Your browser doesn't support The HTML5 Canvas</canvas> 
 

 

 

 
<script> 
 
    var canvas = document.getElementById('canvas'); 
 
    canvas.width = window.innerWidth-20; 
 
    canvas.height = window.innerHeight-20; 
 

 
    var ctx = canvas.getContext('2d'); 
 

 
    var Canvas_W = Math.floor(canvas.width); 
 
    var Canvas_H = Math.floor(canvas.height); 
 

 

 

 
    /* 
 
    * Define a Player object. 
 
    */ 
 
    function PlayerBat(){ 
 

 
    this.x = null; 
 
    this.y = null; 
 
    this.width = 20; 
 
    this.height = Canvas_H/3; 
 
    this.UP_DOWN = false; 
 
    this.DOWN_DOWN = false; 
 

 

 
    this.init = function() { 
 
     console.log('init'); 
 

 
     // MUST bind `this`! 
 
     window.addEventListener('keydown', function(e){ 
 
     console.log('keydown'); 
 

 
     if (e.keyCode == 38) this.UP_DOWN = true; 
 
     else if (e.keyCode == 40) this.DOWN_DOWN = true; 
 
     }.bind(this), false); 
 

 
     // MUST bind `this`!   
 
     window.addEventListener('keyup', function(e){ 
 
     console.log('keyUp') 
 

 
     if (e.keyCode == 38) this.UP_DOWN = false; 
 
     else if (e.keyCode == 40) this.DOWN_DOWN = false; 
 
     }.bind(this), false); 
 
    }; 
 

 

 

 
    this.update = function() { 
 
     var key = {UP: 38, DOWN: 40}; 
 
     this.y = Math.max(Math.min(this.y, Canvas_H - this.height), 0); 
 
    }; 
 

 

 
    this.render = function() { 
 
     // Clear the canvas 
 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
 

 
     // Redraw paddle 
 
     ctx.fillStyle = '#00F'; 
 
     ctx.fillRect(this.x, this.y, this.width, this.height); 
 

 
     this.y = (this.UP_DOWN) ? this.y - 5 : ((this.DOWN_DOWN) ? this.y + 5 : this.y); 
 
    }; 
 

 
    } 
 

 

 

 

 
    function GameRunner(){ 
 
    // Create instance of player 
 
    var playerBat = new PlayerBat(); 
 
    playerBat.init(); 
 

 

 
    // Execute upon instantiation of GameRunner 
 
    (function() { 
 
     playerBat.x = playerBat.width; 
 
     playerBat.y = (Canvas_H - playerBat.height)/2; 
 
    })(); 
 

 

 

 
    function step() { 
 
     playerBat.update(); 
 
     playerBat.render(); 
 
     requestAnimationFrame(step); 
 
    } 
 

 

 

 
    // Public method. Start animation loop 
 
    this.start = function(){ 
 
     requestAnimationFrame(step); 
 
    } 
 
    } 
 

 

 

 
    // Create GameRunner instance 
 
    var game = new GameRunner(); 
 

 

 
    // Start game 
 
    game.start(); 
 

 

 
</script>