我试图根据用户按下的箭头键在 Canvas 中移动图像，但即使我按下箭头键，图像仍保持不动。这是我的 html 代码。
<!DOCTYPE html>
<html>
<head>
<title>Keyboard Animation Demo</title>
<meta charset="UTF-8"/>
<style type="text/css">
.hidden{
display: none;
}
</style>
<script type="text/javascript">
var drawing;
var con;
var gokupic;
CANV_HEIGHT = 200;
CANV_WIDTH = 200;
SPR_HEIGHT = 50;
SPR_WIDTH = 40;
var x = 0;
var y = 0;
var dx = 10;
var dy = 7;
var currentKey;
function init(){
drawing = document.getElementById("drawing");
con = drawing.getContext("2d");
gokupic = document.getElementById("goku");
document.onkeydown = updateKeys;
setInterval(draw, 100);
}
function updateKeys(e){
currentKey = e.keyCode;
if(currentKey == K_LEFT){
dx = -5;
}
if(currentKey == K_RIGHT){
dx = 5;
}
if(currentKey == K_TOP){
dy = -5;
}
if(currentKey == K_DOWN){
dy = 5;
}
if(currentKey == K_SPACE){
dx = 0;
dy = 0;
}
}//end updateKeys
function draw(){
//clear bg
con.clearRect(0,0,200,200);
currentKey = null;
//move the element
x += dx;
y += dy;
//check for boundaries
wrap();
//draw the image
con.drawImage(gokupic, x,y,SPR_WIDTH, SPR_HEIGHT);
//draw a rectangle
con.strokeStyle = "red";
con.lineWidth = 5;
con.strokeRect(0,0,CANV_WIDTH,CANV_HEIGHT);
}//end draw
function wrap(){
if(x > CANV_WIDTH){
x = 0;
}
if(x < CANV_WIDTH){
x = 0;
}
if(y > CANV_HEIGHT){
y = 0;
}
if(y < CANV_HEIGHT){
y = 0;
}
}//end wrap
//keyboard constans
K_LEFT = 37; K_RIGHT = 39; K_UP = 39; K_DOWN = 40; K_SPACE = 32;
</script>
</head>
<body onload = "init()">
<h1>Keyboard Motion</h1>
<img class = "hidden" id = "goku" src = "goku.jpg" alt = "goku pic" />
<canvas id = "drawing" height=200 width=200>Canvas not supported</canvas>
<p>Use arrow keys to move image, space bar to stop the motion.</p>
</body>
</html>
谢谢
注意:我对图像本身没有任何问题，我认为由于我对 javascript 缺乏经验，我在脚本标签内的某个地方犯了一些小错误，所以我需要你的帮助。
最佳答案
问题出在 wrap() 和 updateKeys() 函数中:
function updateKeys(e){
currentKey = e.keyCode;
if(currentKey == K_LEFT){
dx = -5;
dy = 0;
}
if(currentKey == K_RIGHT){
dx = 5;
dy = 0;
}
if(currentKey == K_UP){
dy = -5;
dx = 0;
}
if(currentKey == K_DOWN){
dy = 5;
dx = 0;
}
if(currentKey == K_SPACE){
dy = 0;
dx = 0;
}
}//end updateKeys
function wrap(){
if(x > CANV_WIDTH){
x = 0;
}
if(x < 0){ // this one should be 0, right?
x = 0;
}
if(y > CANV_HEIGHT){
y = 0;
}
if(y < 0){ // this one should be 0, right?
y = 0;
}
}//end wrap
另外，您还没有定义变量，并且混淆了不同箭头键的键码。
//keyboard constans
var K_LEFT = 37, K_RIGHT = 39, K_UP = 38, K_DOWN = 40, K_SPACE = 32;
关于javascript - 为什么我的 javascript 键盘输入不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37382153/