Clever Geek Handbook

Change background position on key press

I am new to javascript games.

I have an idea for a game. As an example, if I accept the Solidsnake symbol .

I need to change the look of the character when the navigation keys are pressed. If I press the left key, it should show the left image, the right key for correct view, and so on. How can I change the image on key presses, how can I do this in javascript? Game idea- ** Theme i guess - **

Briefly code -

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

Now I have this code with simple movements.

Js fiddle

+3


source to share


4 answers


You can do this with CSS to set it correctly and avoid multiple image requests. You should have a sprite with all the images of the character in a line and then mask with the div

area you need to show. Then with javascript you can reposition the image with marginLeft

either marginRight

or or left

and right

(you need to set the position to relative

or absolute

for left

and right

).



+2


source


When you do e.keyCode == up

and the like, you can change the source of the image, then:



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


source


Or do this: http://jsfiddle.net/VMM5P/1/

Change image src

on your keyboard:

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

or you can create a sprite and place them accordingly:

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
}
+1


source


You want to change the attr source for the image.

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


source






More articles:


All Articles