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

Question

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

一个例子是像吃豆子的人如何PAC不能碰到墙壁

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的快速演示。