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 相关文章推荐
How to Auto Include a Javascript File
Feb 02 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
Dec 28 Javascript
JavaScript 图像动画的小demo
May 23 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
js 获取radio按钮值的实例
Aug 17 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 Javascript
Javascript基础教程之数组 array
Jan 18 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
Feb 02 Javascript
全面介绍vue 全家桶和项目实例
Dec 27 Javascript
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
vue实现移动端省市区选择
Sep 27 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 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
德生S2000南麂列岛台湾FM收听记录
2021/03/02 无线电
PHP mail()函数使用及配置方法
2014/01/14 PHP
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
运算符&amp;&amp;的三个不同层次
2013/04/07 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
js实现飞入星星特效代码
2014/10/17 Javascript
jQuery插件expander实现图片翻转特效
2015/05/21 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
javascript  数组排序与对象排序的实例
2017/07/17 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
webpack项目调试以及独立打包配置文件的方法
2018/02/28 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
webpack打包非模块化js的方法
2018/10/24 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
[09:13]2014DOTA2国际邀请赛 中国区预选赛coser表演
2014/05/23 DOTA
python数据结构树和二叉树简介
2014/04/29 Python
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
django 中的聚合函数,分组函数,F 查询,Q查询
2019/07/25 Python
Pandas把dataframe或series转换成list的方法
2020/06/14 Python
记录一下scrapy中settings的一些配置小结
2020/09/28 Python
Python Selenium操作Cookie的实例方法
2021/02/28 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
机械设计及其自动化求职推荐信
2014/02/17 职场文书
教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
校园运动会广播稿
2015/08/19 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android