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 を使用してmarginLeft、 またはmarginRightまたはleftを使用して画像の位置を変更できます (位置またはをandrightに設定する必要があります)。relativeabsoluteleftright

于 2013-02-06T12:01:23.387 に答える
1

これを行う: 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
}
于 2013-02-06T12:06:47.937 に答える
0

画像の属性ソースを変更したいと思うでしょう。

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