必威官网登录-betway必威官网|体育在线

热门关键词: 必威体育,betway必威官网,必威官网登录,必威app下载

到达利用键盘调节走动作效果果,到达利用键盘

作者: 计算机网络  发布:2019-09-09

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

ActionScript30 键盘控制人物走动效果

这些代码我没有看出你的目的,但是根据你说的题目:键盘控制人物走动,我理解为通过键盘的上下左右箭头控制“实例”的移动,我的思路是:给实例创建两种事件侦听,一种是鼠标弹起,一种是键盘按下,键盘弹起目标移动多少像素,若是键盘按下,则再给this或者其他你随便挑一个增加Event。enter_frame事件,即每跳动一帧便执行一次,这个事件主要用于键盘方向键长按不放时让实例连续移动  

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

经常需要监听键盘的事件,以便做更好的操作,基本原理是:监听全局键盘,每一个键盘,当用户按下某一按键时,返回对应的键值,然后再判断用户按下了哪一科按键,键值对应按键的名称在最下面列出,自行比对。去以下介绍两种不同的方式

捕获键盘事件可以用onkeydown
获取键值码可以用event.keyCode
 
三、用setInterval周期执行事件替换图片

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

其实这个示例用到了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.bkjia.com">帮客之家</a></u></li>
  </ul>
  <div style="position:absolute;top:0;left:0" id='di'><img src="http://www.bkjia.com/uploads/allimg/140829/02330K015-0.gif?201472791345" id="img"></div>
  <script>
   var img1='http://files.jb51.net/file_images/article/201408/201482791656841.gif?201472791722';
   var img2='http://www.bkjia.com/uploads/allimg/140829/02330K015-0.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.jb51.net/file_images/article/201408/ren_h_1.gif';
      img2='http://files.jb51.net/file_images/article/201408/ren_h_2.gif';
      ys=-5;
      xs=0;
      break;
     case 65:
      img1='http://files.jb51.net/file_images/article/201408/ren_l_1.gif';
      img2='http://files.jb51.net/file_images/article/201408/ren_l_2.gif';
      xs=-5;
      ys=0;
      break;
     case 68:
      img1='http://files.jb51.net/file_images/article/201408/ren_r_1.gif';
      img2='http://files.jb51.net/file_images/article/201408/ren_r_2.gif';
      xs=5;
      ys=0;
      break;
     case 83:
      img1='http://files.jb51.net/file_images/article/201408/ren_q_1.gif';
      img2='http://files.jb51.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;
       }
    }
   }
  </script>
 </body>
</html>

keypress:某个键盘的键被按下或按住

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

javascript代码实现键盘控制方向

<style>
tr.highlight{background:#08246B;color:white;}
</style>
<table border="1" width="70%" id="ice">
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
</tr>
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
</tr>
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
</tr>
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
</tr>
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
</tr>
</table>
<script ......余下全文>>  

以上就是小编为大家带来的js监听键盘事件的方法_原生和jquery的区别详解全部内容了,希望大家多多支持脚本之家~

实现效果

keyup:某个键盘的键被松开

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

使用方法,一般来说,键盘监听是直接在整个页面文档上进行监听的,也就是document上

实现步骤

您可能感兴趣的文章:

  • js和jquery实现监听键盘事件示例代码
  • 不要使用jQuery触发原生事件的方法
  • js事件监听机制(事件捕获)总结

本文由betway必威官网发布于计算机网络,转载请注明出处:到达利用键盘调节走动作效果果,到达利用键盘

关键词:

上一篇:没有了
下一篇:没有了