JavaScript实现的使用键盘控制人物走动实例_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>

JavaScript实现的使用键盘控制人物走动实例_javascript技巧_