在按鍵上更改背景位置

Question

我是javascript游戲的新手。

我對游戲有一個想法，如果我正在服用Solidsnake的角色 。

我想在按導航鍵時更改字符視圖。 如果我按左鍵，它應顯示左視圖，右鍵顯示右視圖，依此類推。 如何在按鍵上更改圖像，如何在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);

現在我有這個代碼與簡單的導航動作。

Js小提琴

Answer 1

當您執行e.keyCode == up等時，您可以更改圖像源：

if (e.keyCode == up) {
    upKey = true;
    $("#plane").attr('src', 'up-img-src');
}

Answer 2

您可以使用CSS執行此操作以將其設置正確並避免多個圖像請求。 你需要有一個sprite，其中包含一行中所有角色的圖像，然后使用div掩蓋你需要顯示的區域。 然后用JavaScript您可以通過改變圖像的位置marginLeft或marginRight或left和right （你需要設置位置relative或absolute的left和right ）。

Answer 3

要么這樣做： http ： //jsfiddle.net/VMM5P/1/

在按鍵上更改image src ：

if (upKey) {
    box.attr("src", "http://cdn3.iconfinder.com/data/icons/blackblue/128/iChat.png");
}
if (rightKey) {
    box.attr("src", "http://cdn2.iconfinder.com/data/icons/blackblue/128/guitar.png");
}
if (downKey) {
    box.attr("src", "http://cdn3.iconfinder.com/data/icons/blackblue/128/TextEdit.png");
}
if (leftKey) {
    box.attr("src", "http://cdn2.iconfinder.com/data/icons/blackblue/128/preview.png");
}

或者你可以制作精靈並相應地定位它們：

Suppose box is the div which has a background sprite image

if (upKey) {
    box.css("background-position", "0px 0px"); // pos 1
}
if (rightKey) {
    box.css("background-position", "120px 0px"); // pos 2
}
if (downKey) {
    box.css("background-position", "240px 0px"); // pos 3
}
if (leftKey) {
    box.css("background-position", "360px 0px"); // pos 4
}

Answer 4

您可能希望更改圖像的attr源。

if (leftKey) {
    box.find('img').attr('src', 'ENTER NEW IMAGE URL HERE');
}