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


Posted in Javascript onAugust 27, 2014

其实这个示例用到了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="https://3water.com">三水点靠木</a></u></li>
		</ul>
		<div style="position:absolute;top:0;left:0" id='di'><img src="//img.jbzj.com/file_images/article/201408/201482791327688.gif?201472791345" id="img"></div>
		<script>
			var img1='//img.jbzj.com/file_images/article/201408/201482791656841.gif?201472791722';
			var img2='//img.jbzj.com/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='//img.jbzj.com/file_images/article/201408/ren_h_1.gif';
						img2='//img.jbzj.com/file_images/article/201408/ren_h_2.gif';
						ys=-5;
						xs=0;
						break;
					case 65:
						img1='//img.jbzj.com/file_images/article/201408/ren_l_1.gif';
						img2='//img.jbzj.com/file_images/article/201408/ren_l_2.gif';
						xs=-5;
						ys=0;
						break;
					case 68:
						img1='//img.jbzj.com/file_images/article/201408/ren_r_1.gif';
						img2='//img.jbzj.com/file_images/article/201408/ren_r_2.gif';
						xs=5;
						ys=0;
						break;
					case 83:
						img1='//img.jbzj.com/file_images/article/201408/ren_q_1.gif';
						img2='//img.jbzj.com/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 相关文章推荐
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
Js 获取、判断浏览器版本信息的简单方法
Aug 08 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 Javascript
JavaScript设计模式之代理模式详解
Jun 09 Javascript
javascript 取小数点后几位几种方法总结
Aug 02 Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
KnockoutJS数组比较算法实例详解
Nov 25 Javascript
微信小程序用canvas画图并分享
Mar 09 Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 Javascript
关于对TypeScript泛型参数的默认值理解
Jul 15 Javascript
JavaScript截取字符串的2个函数介绍
Aug 27 #Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
Aug 27 #Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 #Javascript
javascript实现的一个随机点名功能
Aug 26 #Javascript
JS按回车键实现登录的方法
Aug 25 #Javascript
在JavaScript中重写jQuery对象的方法实例教程
Aug 25 #Javascript
一个支持任意尺寸的图片上下左右滑动效果
Aug 24 #Javascript
You might like
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
PHP和.net中des加解密的实现方法
2013/02/27 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
常用的javascript function代码
2008/05/23 Javascript
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
小程序最新获取用户昵称和头像的方法总结
2019/09/23 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
Python中的__slots__示例详解
2017/07/06 Python
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
使用django的ORM框架按月统计近一年内的数据方法
2019/07/18 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
介绍一下sql server的安全性
2014/08/10 面试题
历史教育专业个人求职信
2013/12/13 职场文书
会计学生自我鉴定
2014/02/06 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书
工作会议通知
2015/04/15 职场文书
大学生青年志愿者活动总结
2015/05/06 职场文书
深入探讨opencv图像矫正算法实战
2021/05/21 Python
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python