使用的图：
效果图：
（推荐教程：javascript教程）
实例代码：
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>title</title> <style> html { background-color: deepskyblue; } div { width: 32px; height: 32px; background-image: url("img/actor01-braver03.png"); position: absolute; } </style></head><body> <div></div> <script> var key=0; var bool=false; var speed=2;//每次行走的距离 var actor;//人物div const height=33;//人物的高 const width=32;//人物的宽 var arr=[1,3,2,0];//4排图像 代表 下 左 右 上 var num=0; var jumpbool=false; var actorskinspeed=8; var jumpspeed=-15; init(); function init() { window.addeventlistener("keydown",keyhandler); window.addeventlistener("keyup",keyhandler); actor=document.queryselector("div"); setinterval(animation,16); //按键驱动不能实现 实现的是通过按键触发相应动画 实现我们的人物的帧动画 跳转 } function keyhandler(e) { bool=e.type==="keydown"; key=e.keycode; if(!bool){ num=0; actor.style.backgroundpositionx=-num*width+"px"; } if(key===32 && !jumpbool){//跳跃 空格驱动 jumpbool=true; } } function animation() { jump(); if(!bool)return; walk();//单方向行走 实现 changedirection();//方向确定时 内部行走的实现 } function jump() { if(!jumpbool)return; jumpspeed+=1; if(jumpspeed===15){ jumpbool=false; jumpspeed=-15; return; } actor.style.top=actor.offsettop+jumpspeed+"px"; } function changedirection() { actorskinspeed--; if(actorskinspeed>0) return; actorskinspeed=8; num++; if(num>3) num=0; actor.style.backgroundpositionx=-num*width+"px"; } function walk() { switch (key){ case 37://左 ×1 第二排 actor.style.left=actor.offsetleft-speed+"px"; actor.style.backgroundpositiony=-arr[0]*height+"px"; break; case 38://上 ×3 第四排 actor.style.top=actor.offsettop-speed+"px"; actor.style.backgroundpositiony=-arr[1]*height+"px"; break; case 39://右 ×2 第三排 actor.style.left=actor.offsetleft+speed+"px"; actor.style.backgroundpositiony=-arr[2]*height+"px"; break; case 40://下 ×0 第一排 actor.style.top=actor.offsettop+speed+"px"; actor.style.backgroundpositiony=-arr[3]*height+"px"; break; } } </script></body></html>
相关视频教程推荐：javascript视频教程
以上就是js如何利用键盘事件实现人物行走的详细内容。