mootools_MooTools，Mario和Portal-白红宇

mootools

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 .

我是电子游戏的忠实粉丝。我没有太多时间来玩这些游戏，但是我会放下MacBook Pro足够长的时间来玩一些游戏。我最喜欢的游戏之一是Portal。对于那些不知道的人，你怎么了？门户网站是一项战略游戏，需要大量的思考和良好的时机。您会得到两把“门炮”，可以让您到处走动。查看。

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.

虽然Portal现在在我心中占有一席之地，但它需要与原始Mario游戏共享空间。不要问我为什么，但是我想到了将两者结合在一起的想法。而且我不是视频游戏程序员，所以我需要摇滚MooTools来完成它。实际上很简单。

XHTML (The XHTML)

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

只是一个阶段和一些图像，这些图像将通过CSS和MooTools JavaScript进行处理。

CSS (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.

绝对定位是这里的关键。最难的部分是进行测量-一旦掌握了这些，就变得很黄金。另外，请确保管道的z索引大于Marios。

MooTools JavaScript (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!

MooTools JavaScript是有趣的部分。我创建了4个Fx.Tween对象，它们将充当“向上”和“向下”动画。一旦完成，将直接开始下一个。很简单！

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

我知道：可笑。不过，这是将旧学校与新学校混合的好方法！

翻译自:

mootools