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

Incredible Demos

  • By
    Prevent Page Zooming in Mobile Browsers

    Ever since I got my iPhone, I've been more agreeable in going places that my fiancee wants to go. It's not because I have any interest in checking out women's shoes, looking at flowers, or that type of stuff -- it's because my iPhone lets...

  • By
    Retrieve Your Gmail Emails Using PHP and IMAP

    Grabbing emails from your Gmail account using PHP is probably easier than you think. Armed with PHP and its IMAP extension, you can retrieve emails from your Gmail account in no time! Just for fun, I'll be using the MooTools Fx.Accordion plugin...

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!