如何使用onkeypress在HTML中移动图像_Html

如何使用onkeypress在HTML中移动图像

html

如何使用onkeypress在HTML中移动图像,html,Html,我目前正在创建一个程序，允许用户移动图像以避免掉块，但我一直坚持让图像移动。我一直在用onkeypress用任何按钮移动图片，最终让它用箭头键移动，但到目前为止，图像没有移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=&quo

我目前正在创建一个程序，允许用户移动图像以避免掉块，但我一直坚持让图像移动。我一直在用onkeypress用任何按钮移动图片，最终让它用箭头键移动，但到目前为止，图像没有移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    h1{
        font-size: 2.8em;
        text-align: center;
    }
    #Screen{
        padding-left: 0;
        padding-right: 0;
        margin-left: auto;
        margin-right: auto;
        display: block;
        box-shadow: 0 0 20px gray;
    }
    #car{
        position: absolute;
        background-color: blue;
        width: 50px;
        height: 80px;
    }
</style>
</head>
<body>
    <h1>Drive your car with arrow keys</h1>
    <canvas id="Screen" width="400px" height="400px"></canvas>
    <div id="car" tabindex="0"></div>
    <div id="Screen"></div>
    <!-- <img id="car"  tabindex="0" src='race_car.png'> -->
    <script>
        var mycar = document.getElementById("car");
        mycar.onkeypress = moveCar();
        function moveCar(){
            console.log(mycar.offsetLeft);
            mycar.style.left = mycar.offsetLeft + 20 + "px";
        }
    </script>
</body>
</html>


文件
h1{
字号：2.8em；
文本对齐：居中；
}
#屏风{
左侧填充：0；
右边填充：0；
左边距：自动；
右边距：自动；
显示：块；
框阴影：0 20px灰色；
}
#汽车{
位置：绝对位置；
背景颜色：蓝色；
宽度：50px；
高度：80px；
}
用箭头键开车
var mycar=document.getElementById（“car”）；
mycar.onkeypress=moveCar（）；
函数moveCar（）{
控制台日志（mycar.offsetLeft）；
mycar.style.left=mycar.offsetLeft+20+“px”；
}

您已不正确地分配了事件侦听器

使用

document.onkeypress=moveCar

var mycar=document.getElementById（“car”）；
document.onkeypress=moveCar；
函数moveCar（）{
控制台日志（mycar.offsetLeft）；
mycar.style.left=mycar.offsetLeft+20+“px”；
}
h1{
字号：2.8em；
文本对齐：居中；
}
#屏风{
左侧填充：0；
右边填充：0；
左边距：自动；
右边距：自动；
显示：块；
框阴影：0 20px灰色；
}
#汽车{
位置：绝对位置；
背景颜色：蓝色；
宽度：50px；
高度：80px；
}
用箭头键驾驶汽车
除非您必须在按键上使用键，否则该键似乎无法与键盘箭头配合使用。根据，此事件仅为有限的一组密钥激发。有一种解决方案是使用按下左箭头
（以及此处的其他箭头键：
在该示例中，您可以使用箭头键进行完全移动。根据MDN，现在不推荐使用，而应该使用keydown
。
您需要使用keydown
。尝试使用window.onkeydown=函数（e）{alert（e.key）}
用于测试。要了解有关window.onkeydown的更多信息，请访问。此外，您还需要使用CSStransform
移动或调整左
和右
值。