用戶輸入在HTML5畫布中移動對象

我只是JavaScript的新手，我遇到了我的代碼問題，我試圖用用戶輸入在畫布周圍移動對象。用戶輸入在HTML5畫布中移動對象

它工作得很好使用Firefox來運行它，但與Chrome用戶輸入移動廣場不起作用，我想知道爲什麼這是？

<!DOCTYPE html> 
<html> 
<head> 
    <canvas id = "gameCanvas" width="400" height="400" style = "border:1px solid #000000;"></canvas> 
    <style type="text/css"></style> 
</head> 
<body> 
<script type="text/javascript"> 
    var c = document.getElementById("gameCanvas"); 
    var ctx = c.getContext("2d"); 
    ctx.fillStyle = "rgb(255, 0, 0)"; 

    var snake = { 
     x: 5 
     , y: 5 
     }; 


    function drawSnake() { 
     ctx.fillRect(snake.x ,snake.y,20,20); 
     } 

    window.addEventListener("keypress", function(event) { 
     if (event.keyCode == 39) 
      snake.x += 5; 
     else if (event.keyCode == 37) 
      snake.x -= 5; 
     else if (event.keyCode == 38) 
      snake.y -= 5; 
     else if (event.keyCode == 40) 
      snake.y += 5; 

     drawSnake(); 
     }); 

    drawSnake(); 
</script> 
</body> 
</html>

來源

2015-11-01 Smurfffy

說「不起作用」不是很有幫助。你能描述一下你預期的方式會發生什麼？ – HeadCode

你有你的keypress事件更改，使其在基於IE和鉻瀏覽器。

來源

2015-11-01 21:20:32

用戶輸入在HTML5畫布中移動對象

回答

相關問題