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

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

2021-02-27 17:21JavaScript教程网 JavaScript

这篇文章主要介绍了JavaScript实现的使用键盘控制人物走动实例,也可说是一个JS实现的小人走动小游戏,需要的朋友可以参考下

其实这个示例用到了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.zzvips.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>