Search code examples
javascriptanimationpositioning

Move image to specified minimum value


I have the code

$(document).keydown(function (key) {
    switch (parseInt(key.which, 10)) {
        case 38://up
            mObj.animate({
                top: "-=100px"
            });
            mObj.animate({
                top: "+=" + change + "px"
            });
            break;
        default:
            break;
    }
});

Which moves my image up and down correctly upon the up button, given the up button is not pressed again while Mario is in the air. I would like to remedy this condition (not being able to click up while Mario is in the air) through a method such as the attempted in lines 43-46 of my code found here.

In essence I want to allow Mario to simply fall all the way back down to a set minimum level when not being moved up. Any help on getting it to do this or pointing out why my alternate method (the one commented out in lines 43-46) doesn't work?


Solution

  • As an immediate solution, you could try using this:

    $(document).ready(function () {
        var jumping = false;
        $(document).keydown(function (key) {
            switch (parseInt(key.which, 10)) {
                case 38://up
                    if (!jumping) {
                        jumping = true;
    
                        var jumpUp = new $.Deferred();
                        var jumpDown = new $.Deferred();
    
                        mObj.animate({
                            top: "-=100px"
                        }, {
                            done: function () {
                                jumpUp.resolve();
                            }
                        });
                        mObj.animate({
                            top: "+=" + change + "px"
                        }, {
                            done: function () {
                                jumpDown.resolve();
                            }
                        });
                        $.when(jumpUp, jumpDown).done(function () {
                            jumping = false;
                        });
                    }
                    break;
                default:
                    break;
            }
        });
    });
    

    http://jsfiddle.net/wuY9V/1/

    It basically just has a "state" of whether or not Mario is jumping. When the "up" arrow is pressed, Mario is jumping. As soon as the animations that move him up and then back down, are done, Mario is no longer jumping. So the function ignores the "up" key when Mario is jumping. I'm sure there's a more elegant way (like built into .animate) but this is what I came up with.

    So obviously to test it, try pressing the "up" key at any point during Mario's jumping...it shouldn't do anything.

    I didn't look into it too much, but I'm wondering why you have a setInterval for moving Mario? The way I would've done it is only listened for the keydown event. If it's the "up" arrow, animate him to move up and then back down (like you have, and like I've assisted with here). If it's the left arrow, animate him to move left a set distance. If it's the right arrow, animate him to move right a set distance. Is there a reason you have the setInterval to constantly check for a key pressed? Maybe I'm missing something.