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

最新推荐文章于 2021-03-20 22:23:27 发布

不悲不喜

最新推荐文章于 2021-03-20 22:23:27 发布

阅读量2.3k

点赞数

分类专栏： Javascript 文章标签： javascript 游戏 div

本文链接：https://blog.csdn.net/syukugai/article/details/3560992

版权

Javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

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

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

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

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <script>
        function $(id){
            return (document.getElementById(id));
        }
        
        var keybuf = {};
        function keydown(e){
            var evt = e || window.event;
            var o = $("div1");
            keybuf[evt.keyCode] = true;
            whatIsDown();
        }
        
        function keyup(e){
            var evt = e || window.event;
            var o = $("div1");
            keybuf[evt.keyCode] = false;
            whatIsDown();
        }
        
        function keypress(e){
            whatIsDown();
        }
        
        function whatIsDown(){
            var o = $("div1");
            var str = "";
            for (k in keybuf) {
                if (keybuf[k] == true) {
                    str += k + "; ";
                }
            }
            o.innerHTML = str;
        }
    </script>
    <body>
        <input type="text" value="" onkeydown="keydown(event);" onkeyup="keyup(event);" onkeypress="keypress(event);"/>
        <div id="div1">
        </div>
    </body>
</html>
 