<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>小人快跑</title>
<style>
#imgs{
position: absolute;
left: 100px;
top:100px
}
</style>
</head>
<body>
<img src="img/down-0.png" id="imgs">
</body>
<script src="js/xiaorenkuaipao.js"></script>
</html>
--------------------------以下js---------------------------
var imgs=document.querySelector('#imgs')
var index=-1
function fn(ns){
index++
if(index==5){
index=0
}
imgs.src="img/"+ns+"-"+index+".png"
}
document.onkeydown=function(e){
var e=window.event;
// alert(e.keyCode)
switch(e.keyCode){
case 37:
imgs.style.left=imgs.offsetLeft-10+'px'
fn("left")
break;
case 38:
imgs.style.top=imgs.offsetTop-10+'px'
fn("up")
break;
case 39:
imgs.style.left=imgs.offsetLeft+10+'px'
fn("right")
break;
case 40:
imgs.style.top=imgs.offsetTop+10+'px'
fn("down")
break;
}
}
