1

I am trying to make something like game and i came to problem.I was google-ing a lot and couldn't find answer.I am trying to use jquery "keydown" options to change my "element" thrue the page.
Example: if right key is pressed it needs to detect previous position of "box" and to move it "+10px" right.
I hope u have any tutorial or suggestion for me where to start :)
This is where i came to
HTML

<div id="movingBox"></div>

CSS

#movingBox{
    width:20px;
    height:20px;
    background:blue;
}

U can find my jsfiddle here

Crion
  • 199
  • 1
  • 1
  • 9
  • possible duplicate of [Move elements with arrow keys](http://stackoverflow.com/questions/11043144/move-elements-with-arrow-keys) – Jmh2013 Jul 25 '14 at 20:17

4 Answers4

2

You can try something like this:

js

$(document).keydown(function(e) {
    switch (e.which) {
    case 37:
        $('#movingBox').stop().animate({
            left: '-=10'
        }); //left arrow key
        break;
    case 38:
        $('#movingBox').stop().animate({
            top: '-=10'
        }); //up arrow key
        break;
    case 39:
        $('#movingBox').stop().animate({
            left: '+=10'
        }); //right arrow key
        break;
    case 40:
        $('#movingBox').stop().animate({
            top: '+=10'
        }); //bottom arrow key
        break;
    }
})

css

#movingBox{
    width:20px;
    height:20px;
    background:blue;
    position:absolute;
    top: 0;
    left: 0;
}

fiddle

Alex Char
  • 32,879
  • 9
  • 49
  • 70
  • Thanks man, this worked so good, just as i wanted to.I am waiting to accept ur answer :) – Crion Jul 25 '14 at 20:21
1

You will need something like the following to get it done. Just look for the keycode corresponding to the key on the keyboard and replace it with 13. That should get you started in the right direction.

$( "#target" ).keydown(function( event ) {
  if ( event.which == 13 ) {
  event.preventDefault();
}

  var msg = "Handler for .keydown() called " + xTriggered + " time(s).";
  $.print( msg, "html" );
  $.print( event );
});
user3460974
  • 131
  • 2
  • 14
1

If I could comment, I'd do that, but I don't have the reputation. Anyway, take a look at this JSFiddle

HTML:

<img id="plane" src='http://i.imgur.com/WmhK6mX.png' border='0'/>

Javascript:

setInterval(movePlane, 20);
var keys = {}

$(document).keydown(function(e) {
    keys[e.keyCode] = true;
});

$(document).keyup(function(e) {
    delete keys[e.keyCode];
});


function movePlane() {
    for (var direction in keys) {
        if (!keys.hasOwnProperty(direction)) continue;
        if (direction == 37) {
            $("#plane").animate({left: "-=5"}, 0);                
        }
        if (direction == 38) {
            $("#plane").animate({top: "-=5"}, 0);  
        }
        if (direction == 39) {
            $("#plane").animate({left: "+=5"}, 0);  
        }
        if (direction == 40) {
            $("#plane").animate({top: "+=5"}, 0);  
        }
    }
}

CSS:

body{
background:white;
}
#plane {
    height: 50px;
    position:absolute;
    top:40%;
    left:40%;
}

You can start here. Take a look at what is being done and try to change a few elements around to get a feel for it. Then, work with this as a basis for what you're trying to do. If you have any more questions, I can do my best to assist.

jwolf
  • 69
  • 2
  • 9
1

you can use the jquery animate function to move the box. I used this method in my own game:

HTML:

<div id="movingBox"></div>

CSS:

#movingBox{
    width:20px;
    height:20px;
    background:blue;
    position:absolute;
}

JS:

$(function(){
    $("html").keydown(function(k){
        if(k.which == 39){
            $("#movingBox").animate({left: "+=50"},100);
        }

    });

});

http://jsfiddle.net/Jx2cn/4/

MilMike
  • 12,571
  • 15
  • 65
  • 82