使用用户输入在 HTML5 Canvas 中移动对象
Moving an Object in a HTML5 Canvas with User Input
我只是 JavaScript 的新手,我的代码有问题,我试图通过用户输入在 canvas 周围移动一个对象。
使用 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>
您必须将 keypress
事件更改为 keydown
才能使其在基于 IE 和 Chromium 的浏览器中运行。
我只是 JavaScript 的新手,我的代码有问题,我试图通过用户输入在 canvas 周围移动一个对象。
使用 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>
您必须将 keypress
事件更改为 keydown
才能使其在基于 IE 和 Chromium 的浏览器中运行。