php人物走动,JavaScript_JavaScript实现的使用键盘控制人物走动实例，其实这个示例用到了js的两个 - phpStudy...

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

其实这个示例用到了js的两个核心时间，键盘事件onkeydown，周期执行事件setInterval。

实现效果

当按下键盘某个键时网页中的人物实现相应的动作，达到利用键盘控制走动效果

实现步骤

一、预订键值作用：

w：向上

s：向下

a：向左

d：向右

空格：停止

二、预订键值后，要能捕获按键事件以及判断用户按的是哪个键？

捕获键盘事件可以用onkeydown

获取键值码可以用event.keyCode

三、用setInterval周期执行事件替换图片

替换图片是为了实现任务走动效果

但要注意使用clearInterval清除周期执行，否则会越走越快

示例代码：

人物走动

• w：向上
• s：向下
• a：向左
• d：向右
• 空格：停止
• phpstudy

var img1='http://files.phpstudy.net/file_images/article/201408/201482791656841.gif?201472791722';

var img2='http://files.phpstudy.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.phpstudy.net/file_images/article/201408/ren_h_1.gif';

img2='http://files.phpstudy.net/file_images/article/201408/ren_h_2.gif';

ys=-5;

xs=0;

break;

case 65:

img1='http://files.phpstudy.net/file_images/article/201408/ren_l_1.gif';

img2='http://files.phpstudy.net/file_images/article/201408/ren_l_2.gif';

xs=-5;

ys=0;

break;

case 68:

img1='http://files.phpstudy.net/file_images/article/201408/ren_r_1.gif';

img2='http://files.phpstudy.net/file_images/article/201408/ren_r_2.gif';

xs=5;

ys=0;

break;

case 83:

img1='http://files.phpstudy.net/file_images/article/201408/ren_q_1.gif';

img2='http://files.phpstudy.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;

}

}

}

相关阅读:

如何对 MongoDB 进行性能优化(五个简单步骤)

C#如何防止程序多次运行的技巧

纯css实现的下拉菜单只有边框底纹用到图片

jQuery+php实现ajax文件即时上传的详解

逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)

在Linux系统中使用Gitblit工具创建Git仓库的方法

分享50个提高PHP执行效率的技巧

Java里的static import使用小结

asp.net使用jquery实现搜索框默认提示功能

Mac OS X 如何查询电脑运行时间想知道运行了多长时间

LINUX安全运维之：文件系统的权限修改与安全设置

Java的Hibernate框架中的组合映射学习教程

php中opendir函数用法实例

HTML5 Canvas 起步(1) - 基本概念