12/12 Adding other effects


#1

https://www.codecademy.com/en/courses/web-beginner-en-JwhI1/2/4?curriculum_id=50a3fad8c7a770b5fd0007a1

Ive been messing around trying to add various effects to Mario. I got him to turn around when he moves to the left and to jump, but he only jumps to the right. I’m trying to get him to jump left when he’s facing in that direction. I’m thinking he’s probably not jumping left because when I check for the “flip” class on the img it’s checking the document on “ready” at which point it doesn’t have that class, but I’m not sure how to get it to check for the class when the key is pressed.



$(document).ready(function() {
    $(document).keydown(function(key) {
        switch(parseInt(key.which,10)) {
			// Left arrow key pressed
			case 37:
			    $("img").addClass("flip");
			    $("img").animate({left: "-=10px"}, "fast");
				break;
			// Up Arrow Pressed
			case 38:
				$("img").animate({top: "-=10px"}, "fast");
				break;
			// Right Arrow Pressed
			case 39:
			    $("img").removeClass("flip");
				$("img").animate({left: "+=10px"}, "fast");
				break;
			// Down Arrow Pressed
			case 40:
				$("img").animate({top: "+=10px"}, "fast");
				break;
	        case 32:
	            switch($("img").hasClass(".flip")) {
	               case true: 
                       $("img").animate({top: "-=40px", left: "-=60px"}, "fast");
	                   $("img").animate({top: "+=40px"}, "fast");
	                   break;
	               case false:
	                   $("img").animate({top: "-=40px", left: "+=60px"}, "fast");
	                   $("img").animate({top: "+=40px"}, "fast");
	                   break;
	            }
		}
	});
});


Thanks


#2

We can use the CSS transform property…

        switch(parseInt(e.which,10)) {
            case 37: //left
            $('img').animate({left: "-=10px"},'fast').css("transform","rotateY(180deg)");
                break;
            case 38: //up
            $('img').animate({top: "-=10px"},'fast').css("transform","rotateZ(270deg)");     
                break;
            case 39: //right
            $('img').animate({left: "+=10px"},'fast').css("transform","rotateY(0deg)");  
                break;
            case 40: //down
            $('img').animate({top: "+=10px"},'fast').css("transform","rotateZ(90deg)");    
                break;
        }

That takes care of direction Mario is facing. Will need to play around to get a jump into the picture.


Okay, on the logic that moving up or down won’t involve a jump on the horizontal axis, but moving left to right, or right to left could feasibly accommodate a jumping motion on the vertical axis…

function moveMario(key) {
    switch(parseInt(key.keyCode, 10)){
    case 65:
    case 37:
        img.css("transform","rotateY(180deg)")
        .animate({left:"-=10px",top:"-=45px"},'fast','linear')
        .animate({left:"-=9px",top:"+=45px"},'fast','linear');
        break;
    case 83:
    case 40:
        img.css("transform","rotateZ(90deg)")
        .animate({top: "+=16px"}, 'fast');
        break;
    case 87:
    case 38:
        img.css("transform","rotateZ(270deg)")
        .animate({top: "-=16px"}, 'fast');
        break;
    case 68:
    case 39:
        img.css("transform","rotateY(0deg)")
        .animate({left:"+=10px",top:"-=45px"},'fast','linear')
        .animate({left:"+=9px",top:"+=45px"},'fast','linear');
        break;
    default:
    }
}
jQuery(function($){
    window.img = $('img');
    $(document).keydown(moveMario);
});

#3

Ok cool. Thanks.
Transform is definitely useful here. I take it adding “linear” smooths out the jump action. I’m wondering if there’s a way to have normal side movement with the arrow keys and add a jump in either direction with space bar. I couldn’t manage to nest a “if /else” statement into the switch case, I don’t know if that’s possible, but was looking for a way to determine which direction he was facing so jumps in either direction could be linked to one key.


#4

My thinking above takes into account gravity. What goes up comes down. There is no side to side unbalanced force in nature unless Mario is an electron in a magnetic field. Animation should be perceived as natural, imho.

https://www.startpage.com/do/dsearch?query=electron+in+a+magnetic+field


#5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.