This forum is now read-only. Please use our new forums! Go to forums

banner
Close banner
0 points
Submitted by Yannis
over 11 years

Mario will move only with a key but not with w,d, and s.

$(document).ready(function() {
    $(document).keydown(function(key) {
        switch(parseInt(key.which,10)) {
            case 65:
                $('img').animate({left: "-=10px"}, 'fast');
                break;
            case 83:
                $('img').animate({down: "-=10px"}, 'fast');
                break;
            case 87:
                $('img').animate({up: "-=10px"}, 'fast');
                break;
            case 68:
                $('img').animate({right: "-=10px"}, 'fast');
                break;
            default:
                break;
        }
    });
});

It validates but other than a keys won’t work. Perhaps because I have a mac?

Answer 50e86cd3d255167155005c07

23 votes

Permalink

This exercise is tricky. You would think you would need a top, bottom, left, right syntax for this, I did. But really all you need is top, and left. The difference is in the + or - 10px you use. So you should have two lefts for right/left movement, and two top(s) for up/down. Just change the +/- respectively.

points
Submitted by computerFace
over 11 years

5 comments

Yannis over 11 years

You are absoultely right! But why this happens? What is the logic behind it? Unfortunately, I can’t mark your answer as best answer.. System doesn’t show me the respective areas under your post..

computerFace over 11 years

It is actually very logical when you think about it. If we were to say + 10 px from the bottom, it would drop Mario to 10 px from the bottom of the page. I’m not sure if that would even work, but when you look at it like that, using Top makes sense. We can’t have Mario jumping from one side of the page to the other in a single move.

Yannis over 11 years

as I think of it now, we need to pass the “top” and “left” just because they refer to initial zero positions of a browser..

Farobek about 11 years

Well done

Thanks. now I roger that

Answer 50ecfd8cc68f1f82020009d7

12 votes

Permalink

$(document).ready(function() {
$(document).keydown(function(key) {
    switch(parseInt(key.which,10)) {
        case 65:
            $('img').animate({left: "-=10px"}, 'fast');
            break;
        case 83:
            $('img').animate({top: "+=10px"}, 'fast');
            break;
        case 87:
                $('img').animate({top: "-=10px"}, 'fast');
            break;
        case 68:
                $('img').animate({left: "+=10px"}, 'fast');
            break;
        default:
            break;
    }
});

});

work for me!

points
over 11 years

1 comments

Ganzar Azhary almost 11 years

Thank’s bro, it’s work…

Answer 50e85c7ac72674856f0053ec

0 votes

Permalink

Now I changed it to :

$(document).ready(function() {
    $(document).keydown(function(key) {
        switch(parseInt(key.which,10)) {
            case 65:
                $('img').animate({left: "-=10px"}, 'fast');
                break;
            case 83:
                $('img').animate({bottom: "-=10px"}, 'fast');
                break;
            case 87:
                $('img').animate({top: "-=10px"}, 'fast');
                break;
            case 68:
                $('img').animate({left: "+=10px"}, 'fast');
                break;
            default:
                break;
        }
    });
});

and it works..

points
Submitted by Yannis
over 11 years

2 comments

Yannis over 11 years

it is so strange. It bottom works only once and case 83 has top -10 however it goes up, not to bottom..

this work for me

$(document).ready(function() { $(document).keydown(function(key) { switch(parseInt(key.which,10)) { case 65: $(‘img’).animate({left: “-=10px”}, ‘fast’); break; case 83: $(‘img’).animate({top: “+=10px”}, ‘fast’); break; case 87: $(‘img’).animate({top: “-=10px”}, ‘fast’); break; case 68: $(‘img’).animate({left: “+=10px”}, ‘fast’); break; default: break; } }); });

Answer 50ecfd5928dc16cbab000a04

0 votes

Permalink

$(document).ready(function() {
$(document).keydown(function(key) {
    switch(parseInt(key.which,10)) {
        case 65:
            $('img').animate({left: "-=10px"}, 'fast');
            break;
        case 83:
            $('img').animate({top: "+=10px"}, 'fast');
            break;
        case 87:
                $('img').animate({top: "-=10px"}, 'fast');
            break;
        case 68:
                $('img').animate({left: "+=10px"}, 'fast');
            break;
        default:
            break;
    }
});

});

foi oque funcionou para mim

points
over 11 years

Answer 51cb87e5631fe9ddaa0137d7

0 votes

Permalink

Here is the code that worked for me:

$(document).ready(function() {
$(document).keydown(function(key) {
    switch(parseInt(key.which,10)) {
        case 65:
            $('img').animate({left: "-=10px"}, 'fast');
            break;
        case 83:
            $('img').animate({top: "+=10px"}, 'fast');
            break;
        case 87:
            $('img').animate({top: "-=10px"}, 'fast');
            break;
        case 68:
            $('img').animate({left: "+=10px"}, 'fast');
            break;
        default:
            break;
    }
});});
points
Submitted by Ventsi Tsachev
almost 11 years

Answer 52cb290a8c1cccfd3c00c4d8

0 votes

Permalink

The issue is that the instructions and the hint claim that left -= is identical to right += or the inverse of that, I think.

points
Submitted by Jesus of Nazareth
over 10 years

Answer 52efd3d98c1ccc53220009d9

0 votes

Permalink

How come that none of the above works for me?

points
Submitted by Erigers
about 10 years

Answer 536aa9909c4e9d528a000348

0 votes

Permalink

$(document).ready(function() { $(document).keydown(function(key) { switch(parseInt(key.which,10)) { // Left arrow key pressed case 37: $(‘img’).animate({left: “-=10px”}, ‘fast’); break; // Up Arrow Pressed case 38: $(‘img’).animate({top: “+=10px”}, ‘fast’); break; // Right Arrow Pressed case 39: $(‘img’).animate({left: “+=10px”}, ‘fast’); break; // Down Array Pressed case 40: $(‘img’).animate({top: “-=10px”}, ‘fast’); break; } }); });

points
Submitted by RR78
almost 10 years

Answer 550c899ce39efede29000d82

0 votes

Permalink

A mi sólo me funcionó así: $(document).ready(function() { $(document).keydown(function(key) { switch(parseInt(key.which,10)) { case 65: $(‘img’).animate({left: “-=10px”}, ‘fast’); break; case 83: $(‘img’).animate({top: “+=10px”}, ‘fast’); break; case 87: $(‘img’).animate({top: “-=10px”}, ‘fast’); break; case 68: $(‘img’).animate({left: “+=10px”}, ‘fast’); break; case 37: $(‘img’).animate({left: “-=10px”}, ‘fast’); break; case 38: $(‘img’).animate({top: “-=10px”}, ‘fast’); break; case 39: $(‘img’).animate({left: “+=10px”}, ‘fast’); break; case 40: $(‘img’).animate({top: “+=10px”}, ‘fast’); break; default: break; } }); }); Espero que les funcione a ustedes también!

points
Submitted by Heidergger Forero
about 9 years