键盘事件就是通过按键控制物体移动,我们今天要实现的就是利用上下左右按键实现物体的上下左右移动,甚至斜上下左右。
首先,先创造一个物体。
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>键盘控制div移动</title>
<style>
*{
margin: 0;
padding: 0;
}
#ok{
width: 100px;
height: 100px;
background-color: purple;
position: absolute;
left: 200px;
top: 200px;
}
</style>
</head>
<body>
<div id="ok"></div>
</body>
然后给我们的 ok写事件
先获取一下ok
var dOk = document.getElementById("ok");
要知道,我们的键盘事件只能修改状态,也就是布尔值。所以要想实现物体的运动