javascript - 更改按键的背景位置

Question

我是 javascript 游戏的新手。

我有一个游戏的想法，例如，如果我正在使用 Solidsnake 的 Angular 色。

我希望在按下导航键时更改字符 View 。 如果我按左键，它应该显示左 View ，右键显示右 View 等等。 我如何在按下按键时更改图像，我如何在 javascript 中执行此操作？ 游戏理念——

代码简述-

var leftKey,upKey,rightKey,downKey;
    var box = $("#plane"),
        left = 37,
        up = 38,
        right = 39,
        down = 40;



function key(e) {
    console.log(e.keyCode);
    var $key = e.keyCode;

    $(document).keydown(function(e) {
        if (e.keyCode == left) 
        leftKey = true;


    if (e.keyCode == up) 
        upKey = true;

    if (e.keyCode == right) 
        rightKey = true;

    if (e.keyCode == down) 
        downKey = true;

    }).keyup(function(e) {
       if (e.keyCode == left) 
        leftKey = false;


    if (e.keyCode == up) 
        upKey = false;

    if (e.keyCode == right) 
       rightKey = false;

    if (e.keyCode == down) 
        downKey = false;

    });



}

$("body").keydown(function(){
   key(event); 
});




setInterval(function() {


    if (upKey) {
        box.css("top", "-=10");
    }
    if (rightKey) {
        box.css("left", "+=10");
    }
    if (downKey) {
        box.css("top", "+=10");
    }
    if (leftKey) {
        box.css("left", "-=10");
    }


},20);

现在我有了这个带有简单导航 Action 的代码。

Js fiddle

Answer 1

您可以使用 CSS 执行此操作以正确设置并避免多个图像请求。您需要有一个 Angular 色的所有图像都排成一行的 Sprite ，然后用 div mask 您需要显示的区域。然后使用 javascript，您可以使用 marginLeft 或 marginRight 或 left 和 right 更改图像的位置(您需要为 left 和 right 设置位置 relative 或 absolute。