MooTools, Mario, and Portal

By  on  
Mario

I'm a big fan of video games. I don't get much time to play them but I'll put down the MacBook Pro long enough to get a few games in. One of my favorites is Portal. For those who don't know, what's wrong with you? Portal is a strategic game that requires a lot of thinking and good timing. You get two "portal guns" which allow you to get from place to place. Check out some gameplay here.

While Portal now has a place in my heart, it needs to share space with the original Mario games. Don't ask me why, but I got the idea of combining the two in my head. And I'm not a video game programmer so I needed to rock MooTools to accomplish it. It was actually quite simple.

The XHTML

<!-- LIGHTS and CAMERA -->
<div id="stage">
	<!-- LEFT TUBE -->
	<img id="tube-left" src="mario-pipe.png" alt="Left Pipe" />
	<!-- RIGHT TUBE -->
	<img id="tube-right" src="mario-pipe.png" alt="Right Pipe" />
	<!-- LEFT MARIO -->
	<img id="mario-left" src="mario-left.png" alt="Mario!" />
	<!-- RIGHT MARIO -->
	<img id="mario-right" src="mario-right.png" alt="Mario!" />
	<!-- FLOOR -->
	<div id="floor"></div>
</div>

Just a stage and some imagery which will be manipulated with CSS and MooTools JavaScript.

The CSS

#stage		{ width:600px; height:250px; position:relative; background:#5573EB; }
#stage img	{ display:block; }
#tube-left	{ position:absolute; bottom:0; left:100px; z-index:5; }
#tube-right	{ position:absolute; bottom:0; right:100px; z-index:5; }
#mario-left	{ position:absolute; bottom:0; left:110px; z-index:3; }
#mario-right { position:absolute; bottom:0; right:110px; z-index:3; }
#baddy		{ position:absolute; bottom:30px; left:180px; z-index:5; }
#box		{ position:absolute; bottom:130px; left:290px; z-index:5; }
#floor		{ position:absolute; bottom:0; left:0; height:30px; width:600px; background:url(mario-floor.png) 0 0; right:0; }

The absolute positioning is key here. The hardest part is measuring things up -- once you've got that, you're golden. Also be sure that the pipes have a larger z-index than the Marios.

The MooTools JavaScript

(function($) {
	window.addEvent('domready',function() {
		/* the master */
		var animation = function() {
			/* settings */
			var upDuration = 300, downDuration = 500, upHeight = 200, baddyDuration = 10000, rightDistance = 400;
			var lefty = $('mario-left'), righty = $('mario-right'), baddy = $('baddy');
			
			/* left animations time! */
			var leftFxUp = new Fx.Tween(lefty,{
				duration: upDuration,
				onComplete: function() { leftFxDown.start('bottom',0); }
			}).start('bottom',upHeight);
			var leftFxDown = new Fx.Tween(lefty,{
				duration: downDuration,
				onComplete: function() { rightFxUp.start('bottom',upHeight); }
			});
			
			/* right animation time! */
			var rightFxUp = new Fx.Tween(righty,{
				duration: upDuration,
				onComplete: function() { rightFxDown.start('bottom',0); }
			});
			var rightFxDown = new Fx.Tween(righty,{
				duration: downDuration,
				onComplete: function() { leftFxUp.start('bottom',upHeight); }
			});
			
			/* baddy animation */
			var baddyRightFx = new Fx.Tween(baddy,{
				duration: baddyDuration,
				onComplete: function() { baddyLeftFx.start('left',rightDistance); }
			});
			var baddyLeftFx = new Fx.Tween(baddy,{
				duration: baddyDuration,
				onComplete: function() { baddyRightFx.start('left',180); }
			}).start('left',rightDistance);
			
		};
			
		/* ACTION! */
		animation();
	});
})(document.id);

The MooTools JavaScript is the fun part. I create 4 Fx.Tween objects that will act as the "up" and "down" animations. Once one finishes, the next one is directed start. So simple!

I know: ridiculous. It was a great way to mix the old school an new school though!

Recent Features

  • By
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

Incredible Demos

  • By
    Creating Spacers with Flexbox

    I was one of the biggest fans of flexbox before it hit but, due to being shuffled around at Mozilla, I never had the chance to use it in any practice project; thus, flexbox still seems like a bit of a mystery to me.  This greatly...

  • By
    Elegant Overflow with CSS Ellipsis

    Overflow with text is always a big issue, especially in a programmatic environment. There's always only so much space but variable content to add into that space. I was recently working on a table for displaying user information and noticed that longer strings were...

Discussion

  1. Very nice effect !

    It’s so funny !

  2. It’s one of those very cool, yet useless items on the web. But it can help you dissect the code and understand the animation that’s being used here.

    Keep it up Walsh. Love your posts!

  3. Add some easing and it will seem like there are real-time browser-based physics at work :) How do you come up with this stuff? It is cool though.

  4. adamnfish

    The vertical effects should be parabolic so it looks like gravity is at work. (Fx.Transitions.Quad)

  5. Andrea

    The walking mushroom is a touch of genius :P

  6. That really put a smile on my face. Thanks!

  7. kolin

    does this mean you could add keyboard events to move the mario image?

  8. That was really cool. I also used to play Mario when I was a child but not anymore.
    :)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!