Javascript 游戏中多键同时按下的处理方法

在实时交互程序中尤其是游戏程序中经常要判断的多个键同时按下的状态,并进行处理。
比如:同时按下向上和向右的方向键,向右上方移动控制对象,那么程序中是怎样实现的呢。

我们知道键盘事件有 onkeydown, onkeypress 和 onkeyup.
但事件响应时的 event 中只有一个 keycode,因此单纯的在一个事件中是无法处理多个按键状态的。
不过把它们组合起来使用就可以实现了。

基本原理如下:
(1) 在onkeydown事件响应时,将响应按键的状态保存到对象中
(2) 在onkeypress事件响应中,判断保存到对象中的按键状态,并根据状态进行相应的处理.
(3) 在onkeyup事件中,将对象中保存的当前释放的按键的状态复位.

下面是用javascrip实现的例子程序.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.     </head>
  6.     <script>
  7.         function $(id){
  8.             return (document.getElementById(id));
  9.         }
  10.         
  11.         var keybuf = {};
  12.         function keydown(e){
  13.             var evt = e || window.event;
  14.             var o = $("div1");
  15.             keybuf[evt.keyCode] = true;
  16.             whatIsDown();
  17.         }
  18.         
  19.         function keyup(e){
  20.             var evt = e || window.event;
  21.             var o = $("div1");
  22.             keybuf[evt.keyCode] = false;
  23.             whatIsDown();
  24.         }
  25.         
  26.         function keypress(e){
  27.             whatIsDown();
  28.         }
  29.         
  30.         function whatIsDown(){
  31.             var o = $("div1");
  32.             var str = "";
  33.             for (k in keybuf) {
  34.                 if (keybuf[k] == true) {
  35.                     str += k + "; ";
  36.                 }
  37.             }
  38.             o.innerHTML = str;
  39.         }
  40.     </script>
  41.     <body>
  42.         <input type="text" value="" onkeydown="keydown(event);" onkeyup="keyup(event);" onkeypress="keypress(event);"/>
  43.         <div id="div1">
  44.         </div>
  45.     </body>
  46. </html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值