3

我是 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小提琴

4

4 回答 4

2

当您这样做时e.keyCode == up，您可以更改图像源：

if (e.keyCode == up) {
    upKey = true;
    $("#plane").attr('src', 'up-img-src');
}
于 2013-02-06T11:52:24.390 回答
2

您可以使用 CSS 来设置它并避免多个图像请求。您需要有一个连续包含角色所有图像的精灵，然后用div您需要显示的区域进行遮罩。然后使用 javascript，您可以使用marginLeftormarginRight或leftand更改图像的位置right（您需要设置位置relative或absolutefor leftand right）。

于 2013-02-06T12:01:23.387 回答
1

要么这样做：http: //jsfiddle.net/VMM5P/1/

更改image srcon 按键：

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
}
于 2013-02-06T12:06:47.937 回答
0

您可能想要更改图像的 attr 源。

if (leftKey) {
    box.find('img').attr('src', 'ENTER NEW IMAGE URL HERE');
}
于 2013-02-06T11:52:57.993 回答