如何使用箭头键控制矩形（HTML元素）？

Question

你如何制作一个矩形或任何其他HTML元素但是让我们说例如一个矩形能够移动并通过箭头键控制该运动（使用e.keycode和case＃）然后你会怎么做？制作矩形不能移动的空格？提前感谢任何帮助。

一个例子就像pacman，pac man怎么不能碰到墙壁

Answer 1

Like this

$(document).ready(function() {
    $(document).keydown(function(e) {
        //left arrow
        if (e.which == 37) {
            $('#box').css('left','-=1');
        }
        //up arrow
        if (e.which == 38) {
           $('#box').css('top','-=1');
        }
        //right arrow
        if (e.which == 39) {
            $('#box').css('left','+=1');
        }
        //down arrow
        if (e.which == 40) {
            $('#box').css('top','+=1');
        }
    });
});

您可以查找密钥代码here。

也就是说，最好的方法是使用HTML5的Canvas。这只是一个div的快速演示。