Question

我是javascript游戏的新手。

我对游戏有所了解，例如，如果我正在使用 Solidsnake的角色。

我希望按导航键更改字符视图。如果我按左键，它应显示左视图，右键显示右视图，依此类推。如何在按键上更改图像，如何在javascript中执行此操作？游戏理念 - **Theme i guess-**

代码简介 -

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 fiddle

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或{ {1}} absolute和left} {/ p>

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');
}

在按键上更改背景位置

4 个答案: