分析:如果让方向键同时控制方向和速度,那么无法有好的使用效果,所以要将方向和速度分开控制。
- 使用定时器来控制方向,获取到对应的方向键的keyCode值就向不同的方向移动。
- 在按键松开的时候将方向清空,确保在按键松开时div不会在继续移动。
练习代码如下,对比分析,理清思路:
- 这是之前没有优化的代码,按键按下之后,div会停滞一会才开始移动
<!DOCTYPE html>
<html lang="en">
<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 type="text/css">
#box{
width: 100px;
height: 100px;
position: absolute;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById("box");
document.onkeydown = function(event){
// alert("绑定成功");
event = event || window.event