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
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

  • By
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

Incredible Demos

  • By
    Create a Simple Dojo Accordion

    Let's be honest:  even though we all giggle about how cheap of a thrill JavaScript accordions have become on the web, they remain an effective, useful widget.  Lots of content, small amount of space.  Dojo's Dijit library provides an incredibly simply method by which you can...

  • By
    Morphing Elements Using MooTools and CSS

    Morphing an element between CSS classes is another great trick the MooTools JavaScript library enables you to do. Morphing isn't the most practical use of MooTools, but it's still a trick at your disposal. Step 1: The XHTML The block of content that will change is...

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!