<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div
{
width: 50px;
height: 50px;
background-color: greenyellow;
position: absolute;
}
</style>
</head>
<body>
<div></div>
<script>
var div;
var speed=5;
var code;
init();
function init() {
div=document.querySelector("div");
setInterval(animation,16);
window.addEventListener("keydown",keydownHandler);
}
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>