键盘事件练习——移动的方块

Posted botoo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了键盘事件练习——移动的方块相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
        </style>
    </head>

    <body style="position: relative;">
        <div id="box" style="width: 100px;height: 100px;background-color: sandybrown;position: absolute;">

        </div>
        <script type="text/javascript">

/*获取浏览器的最大化尺寸*/ var wi = document.documentElement.clientWidth - 100; //取得浏览器页面可视区域的宽度,(并且需要减去 方块的宽度) var hi = document.documentElement.clientHeight - 100; //取得浏览器页面可视区域的高度,(并且需要减去 方块的高度) var box = document.getElementById("box") document.addEventListener("keydown", function(e) { var l = parseInt(window.getComputedStyle(box, null).left); //获取方块坐标 var t = parseInt(window.getComputedStyle(box, null).top); console.log(l, t) var event = e || window.event if(event.key == "w" & t > 0) { box.style.top = t - 10 + "px"; }; if(event.key == "s" & t < hi) { box.style.top = t + 10 + "px"; }; if(event.key == "a" & l > 0) { box.style.left = l - 10 + "px"; }; if(event.key == "d" & l < wi) { box.style.left = l + 10 + "px"; }; }, false) </script> </body> </html>

 

以上是关于键盘事件练习——移动的方块的主要内容,如果未能解决你的问题,请参考以下文章

简单的使用键盘控制方块移动

为什么这个程序中的运动仍然伴随着keydown事件的发射?

EaselJS 键盘收录问题

3-3 编程练习:jQuery键盘事件案例

简单的动态规划练习

Javascript 移动键盘事件