Hot For Coding
JavaScript写的一个键盘控制人物走动Demo

其实这个示例用到了JavaScript的两个核心事件,键盘事件onkeydown,周期执行事件setInterval

full

实现效果

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

实现步骤

  • 预订键值作用:

w:向上 s:向下
a:向左
d:向右
空格:停止

  • 设置键值后,要能捕获按键事件以及判断用户按的是哪个键?

捕获键盘事件可以用onkeydown,获取键值码可以用event.keyCode

  • setInterval周期执行事件替换图片

替换图片是为了实现任务走动效果,但要注意使用clearInterval清除周期执行,否则会越走越快

Example

Demo点这里

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>人物走动 Nicholas Lee www.qttc.net</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://www.qttc.net">Nicholas Lee</a></u></li>
    </ul>
    <div style="position:absolute;top:0;left:0" id='di'><img src="images/ren_q_1.gif" id="img"></div>
    <script>
      var img1='ren_q_1.gif';
      var img2='ren_q_2.gif';
      var x=0;
      var y=0;
      var xs=0;
      var ys=0;
      var flag=true;
      var zq=null;

      function start(){
        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='images/'+img2;
          }else{
            s.src='images/'+img1;
          }               
        },50);
      }
      start();

      function show(){
        var sz=window.event.keyCode;
        switch(sz){
          case 87:
            img1='ren_h_1.gif';
            img2='ren_h_2.gif';
            ys=-5;
            xs=0;
            break;
          case 65:
            img1='ren_l_1.gif';
            img2='ren_l_2.gif';
            xs=-5;
            ys=0;
            break;
          case 68:
            img1='ren_r_1.gif';
            img2='ren_r_2.gif';
            xs=5;
            ys=0;
            break;
          case 83:
            img1='ren_q_1.gif';
            img2='ren_q_2.gif';
            ys=5;
            xs=0;
            break;
          case 32:
            if(flag){
              clearInterval(zq);
              flag=false;
              break;
            }
          case 13:
            if(!flag){
              start();
              flag=true;
              break;
            }
        }
      }
    </script>
  </body>
</html>

TITLE: JavaScript写的一个键盘控制人物走动Demo

LINK: https://www.qttc.net/87_javascript_keybord_game.html

NOTE: 转载内容请注明出处