<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
background-color:skyblue;
position: absolute;
}
</style>
</head>
<body>
<div></div>
<script>
var div,
speed=5,
code;
init();
function init() {
div=document.querySelector("div");
setInterval(animation,16);
window.addEventListener("keydown",keydownHandler);
// window.addEventListener("keyup",keydownHandler);
// keyup 这句注释掉可以自己移动,类似贪吃蛇。不注释,随按键输入而移动。
}
function animation() {
if (!code)return;
switch (code) {
case 37:
div.style.left = div.offsetLeft - speed + "px";
break;
case 38:
div.style.top = div.offsetTop - speed + "px";
break;
case 39:
div.style.left = div.offsetLeft + speed + "px";
break;
case 40:
div.style.top = div.offsetTop + speed + "px";
break;
}
}
function keydownHandler(e) {
if (e.type==="keydown"){
if(e.keyCode>40 || e.keyCode<37)return;
code=e.keyCode;
}else if(e.type==="keyup"){
code=0;
}
}
</script>
</body>
</html>