在按鍵上更改背景位置

我有遊戲的想法，作爲一個例子，如果我以索利德·斯內克的性格。

我想按導航鍵上的字符視圖更改。如果按左鍵，它應顯示左視圖，右鍵顯示右視圖等等。如何在按鍵上獲取圖像更改，如何在javascript中執行此操作？在brief-

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

理念遊戲 - **Theme i guess-**

代碼的現在，我有這樣的代碼與簡單的導航移動。

Js fiddle

來源

2013-02-06 Manoj

你的移動g圖像上，下，左，右...嘗試有4個不同的視圖，並且在每次按鍵時更改css相應地改變圖像 – Rinku

你可以用CSS做這個設置是正確的，避免多個圖像的請求。你需要在一行中有一個角色的所有圖像的精靈，然後用你需要顯示的區域掩碼。然後用JavaScript您可以通過使用marginLeft或marginRight或left和right改變圖像的位置（需要設置位置relative或absolute爲left和right）。

來源

2013-02-06 12:01:23 otinanai

這是一個很好的建議。 – Manoj

當你做e.keyCode == up之類的，你可以改變圖像源，則：

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

來源

2013-02-06 11:52:24

Thankyou，它工作簡單。 – Manoj

你想改變的圖像ATTR源。

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

來源

2013-02-06 11:52:57

做這一點：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-06 12:06:47 Jai

在按鍵上更改背景位置

回答

相關問題