JavaScript实现的使用键盘控制人物走动实例

其实这个示例用到了js的两个核心时间，键盘事件onkeydown，周期执行事件setInterval。
实现效果
当按下键盘某个键时网页中的人物实现相应的动作，达到利用键盘控制走动效果
实现步骤
一、预订键值作用：
w：向上
s：向下
a：向左
d：向右
空格：停止
二、预订键值后，要能捕获按键事件以及判断用户按的是哪个键？
捕获键盘事件可以用onkeydown
获取键值码可以用event.keyCode

三、用setInterval周期执行事件替换图片
替换图片是为了实现任务走动效果
但要注意使用clearInterval清除周期执行，否则会越走越快
示例代码：

<html><head><meta charset="utf-8" /><title>人物走动</title></head><body onkeydown="show（）"><ul style="posttion:absolute;border:1px solid #999;list-style:none;width:150px;padding:20px;background:#ffffef;"><li>w：向上</li><li>s：向下</li><li>a：向左</li><li>d：向右</li><li>空格：停止</li><li style="margin-top:20px;"><u><a href="http://www.jb51.net">脚本之家</a></u></li></ul><div style="position:absolute;top:0;left:0" id="di"><img src="http://files.jb51.net/file_images/article/201408/201482791327688.gif?201472791345" id="img"></div><script>var img1="http://files.jb51.net/file_images/article/201408/201482791656841.gif?201472791722";var img2="http://files.jb51.net/file_images/article/201408/201482791327688.gif?201472791345";var x=0;var y=0;var xs=0;var ys=0;var flag=true;var zq=null;function ks（）{zq=setInterval（function（）{var s=document.getElementById（"img"）;var str=s.src;var area=document.getElementById（"di"）;var xpos=parseInt（area.style.left）;var ypos=parseInt（area.style.top）;x=x+xs;y=y+ys;area.style.left=x;area.style.top=y;var pos=str.lastIndexOf（"/"）+1;var hz=str.substr（pos）;if（hz==img1）{s.src= img2;}else{s.src= img1;}},50）;}ks（）;function show（）{var sz=window.event.keyCode;switch（sz）{case 87:img1="http://files.jb51.net/file_images/article/201408/ren_h_1.gif";img2="http://files.jb51.net/file_images/article/201408/ren_h_2.gif";ys=-5;xs=0;break;case 65:img1="http://files.jb51.net/file_images/article/201408/ren_l_1.gif";img2="http://files.jb51.net/file_images/article/201408/ren_l_2.gif";xs=-5;ys=0;break;case 68:img1="http://files.jb51.net/file_images/article/201408/ren_r_1.gif";img2="http://files.jb51.net/file_images/article/201408/ren_r_2.gif";xs=5;ys=0;break;case 83:img1="http://files.jb51.net/file_images/article/201408/ren_q_1.gif";img2="http://files.jb51.net/file_images/article/201408/ren_q_2.gif";ys=5;xs=0;break;case 32:if（flag）{clearInterval（zq）;flag=false;break; }case 13: if（！flag）{ ks（）; flag=true;break;}}}</script></body></html>