
Infinite Mario in HTML5 - creativityhurts
http://mario.fromlifetodeath.com/
======
JoshTriplett
This seems to have the same property I've seen in quite a few other HTML5
games: the arrow keys get used for movement but also still get interpreted by
the browser to scroll the page. Both seem important: I usually don't want
anything to break the arrow keys for scrolling, but on the other hand for
something like this I don't really want the page to move around as I play. (Of
course, for something like this perhaps the page just needs to become small
enough to not need scrolling, which would fix the problem, but the general
issue still applies.)

~~~
Groxx
No, they're just all making the same crazy omission: event.preventDefault();

I have a fix, if you're interested, in my top-level comment:
<http://news.ycombinator.com/item?id=2798835>

~~~
middus
This will deactivate _all_ keys, including e.g. F5 for refresh. Moreover,
mentioning this here won't necesserily get it fixed.

Here's a pull request: <https://github.com/robertkleffner/mariohtml5/pull/3>
Feel free to comment / add.

~~~
Groxx
Which is why you restrict it by A) the list of known keys (the values are
already in an array in the same file), and if you're feeling nice B) after
clicking inside the container the game lives in.

All of which is mind-numbingly easy, but far below 50% of "HTML5" games I've
played have done so.

------
JonnieCache
The original java infinite mario was used in the fascinating Mario AI
competition.

Details and papers here: <http://www.marioai.org>

Video of last years winning entry at work here:
<http://www.youtube.com/watch?v=DlkMs4ZHHr8>

It's pretty interesting, a lot of people wrote/are writing high falutin'
machine learning algorithms, but they are consistently trounced by good old A*
techniques.

~~~
StavrosK
Is there anything like this for lua? It might be just the thing to help me
finally learn the language (I have an inexplicable dearth of problems to work
on in lua)...

~~~
neovive
Try looking through some of the resources for the Corona game engine
(<http://www.anscamobile.com/resources/>). The SDK compiles Lua source into
iOS and Android. I've just started looking at it myself -- it's the first time
I have seen Lua code -- and it looks extremely clean.

------
beaumartinez
Its source is on GitHub[1].

[1] <https://github.com/robertkleffner/mariohtml5>

~~~
neovive
Very interesting. Does anyone know which script controls the mapping of the
background bitmaps to create the panning background?

------
fiblye
I don't mean to sound cocky, but I don't get why people are still impressed by
simple game demos in javascript. I've been working on a full Metroid-like game
(some very old screenshots here <http://ektomarch.com/games/>) that'll have
~100 rooms, ~40 enemy designs, and a full plot for a year now and I've been
doing it at a glacial pace, yet it's still nearing completion. How is it that
seemingly nobody has made any real games in HTML5/javascript yet? We've had
over a year of nothing but basic demos.

~~~
tibbon
I think its partially that people are impressed by simple things when
completed, more than complex things in the works. Looks like you have a cool
game, but it will get the attention it deserves when its complete more than
beforehand.

~~~
grncdr
I don't think the GP was complaining about lack of attention given to his
game, more wondering why nobody else has yet released a full game when he's
almost done and not going particularly fast.

------
simias
It's very cool, however I have yet to find an html5 game that will let me
change the keybindings. Think of the people who don't use QWERTY!

~~~
larelli
For Ubuntu (and probably most of the other distros) theres a keyboard layout
switcher. I'm sure there's something similar for windows and almost every
browser. You can use those extensions to rapidly switch to qwerty layout when
needed.

~~~
simias
Of course, but why should I need to? Most "real" games let me remap the
controls however I like. Is there a technical limitation of html5 that
prevents that or is just that nobody bothers to implement it?

~~~
hardy263
Personally, it usually doesn't cross my mind to remap the keys when I make
simple games, because I'm so busy thinking about all the logic to actually
make the game work. If the game is particularly simple, it's not worth my time
to make a settings page anyway.

And if you think about it, mario is usually played on a device where you only
have a limited number of buttons. There's no reason to remap the keys if
there's only 6 buttons to use.

------
Groxx

      // in Enjine.KeyboardInput 
      Initialize: function() {
        var self = this;
        document.onkeydown = function(event) { self.KeyDownEvent(event); }
        document.onkeyup = function(event) { self.KeyUpEvent(event); }
      },
      IsKeyDown: function(key) {
        if (this.Pressed[key] != null)
          return this.Pressed[key];
        return false;
      },
        
      KeyDownEvent: function(event) {
        this.Pressed[event.keyCode] = true;
      },
      
      KeyUpEvent: function(event) {
        this.Pressed[event.keyCode] = false;
      }
    

Sheesh. _That's_ why it's jumping up and down when you use the arrow keys. All
keyboard input is based on checking `IsKeyDown`, and nothing else.
`event.preventDefault()` please. Why do people do this? .preventDefault() is
missing in a _huge_ amount of HTML5 demos that aren't full-screen; surely it's
not _that_ obscure.

edit: seriously, that's all there is to it. Pop open the console / inspector
in your browser of choice, and run this:

    
    
      document.onkeyup = function(event) { Enjine.KeyboardInput.KeyUpEvent(event); event.preventDefault(); }
      document.onkeydown = function(event) { Enjine.KeyboardInput.KeyDownEvent(event); event.preventDefault(); }
    

Viola. No more jumping. No more keyboard scrolling either, which is why you
check if the cursor location / last-clicked location is within your canvas.

edit2: that aside, very nice work. Smooth playing and so far no glitches, and
highly readable code :)

edit3: if you're on IE, that code is `event.returnValue = false` btw. Yaaay,
IE :|

------
bprater
Too bad the source is obfuscated. This is the kind of thing that could draw a
young person into digging deeper into programming.

~~~
kevingadd
It's always disappointing when people's cool demos have obfuscated/minified JS
source. It destroys the readability and hackability of the code, and it means
that if you find bugs (like I did in this demo) you can't trivially fix them
either.

~~~
arkitaip
You can always use Javascript Deminifier For Firefox
[https://addons.mozilla.org/en-US/firefox/addon/javascript-
de...](https://addons.mozilla.org/en-US/firefox/addon/javascript-deminifier/)

For Chrome, there's the built-in de-obfuscator
<http://www.sitepoint.com/whats-new-in-google-chrome-12/>

------
_phred
Infinite (in the practical sense) lives for Infinite Mario; pop open your JS
console and run:

    
    
      Mario.MarioCharacter.Lives += 1024
    

Now the challenge is: how far can you get before the game locks up?

~~~
Retric
The three starting lives are actually plenty, I stopped playing out of bordem
not game over. By the time I stopped I was sitting at 12 lives and I think I
died 3 or 4 times in the process.

------
keyle
"Background music currently does not work in any browser besides Firefox 4."

~~~
kevingadd
Doesn't even work in a newer Firefox. Very strange.

~~~
doublec
Sound works for me in a FF nightly build on Linux.

------
wccrawford
Win7/Chrome. Can't jump! Up and down move up and down the page, space moves
down the page. S and Left and Right are the only things that do anything.

~~~
ry0ohki
S is jump?

~~~
wccrawford
Weird. That works now, but it didn't the first time.

------
progolferyo
Does anyone know what javascript engine this game is using. It appears to be
'Enjine' but I can't seem to find any information about it.

~~~
sycren
His own engine, open source code can be found here:
<https://github.com/robertkleffner/enjine>

------
robkleffner
Thanks for crashing my website guys. Any ideas where to put it so I don't have
to pay an exorbitant amount for hosting?

------
rebelidealist
Awesome work! I am always curious about the copyright implication of cloning
an old game like Mario. Does anyone know?

------
alttab
Can't play on iPad. Which is dissapointing because when you have a good web
game that works with touch you have won

------
ayanb
Really nice work, here is what git clone says

"Receiving objects: 100% (113/113), 1.07 MiB | 164 KiB/s, done."

Just 1 MB. Further

ubuntu mariohtml5 $ du -k code Enjine/

364 code

68 Enjine/

roughly 400K of code

~~~
JonnieCache
Consider that the original super mario brothers ROM is 30.79kb.

~~~
sp332
Yeah, but it wasn't written in ASCII either :)

~~~
extension
No, but it was written in 8-bit assembly language. I'm not sure if that would
have any better functionality per byte ratio than minified JavaScript.

~~~
comex
It would, probably; not all those names to type out.

------
swolchok
Can't seem to jump while holding down the run key, which is usually my method
of playing mario...

~~~
Twisol
Sounds like your keyboard might have a ghosting issue with those keys, as I
can jump while running perfectly well.

[http://www.microsoft.com/appliedsciences/AntiGhostingExplain...](http://www.microsoft.com/appliedsciences/AntiGhostingExplained.mspx)

------
mshron
I'm confused. All I see is a copy of Mario in HTML5. Can someone enlighten me?

~~~
kiiski
What did you expect? The title is "Infinite Mario in HTML5".

~~~
jessriedel
Yea, but what's infinite about it?

~~~
woogley
The original[1] was made by the Minecraft guy. Like most of his projects, the
levels are randomly generated. The levels themselves end, but there is no end
to the actual game. It just keeps generating new levels.

[1]: <http://www.mojang.com/notch/mario/>

~~~
mshron
Got it. For some reason I was expecting some sort of Mario AI or something.
Thanks!

~~~
comex
The Mario AI Competition used the original Infinite Mario...

------
robjohnson
That is absolutely incredible - makes me want to dive into learning HTML 5.

------
ahmetalpbalkan
Bandwidth Limit Exceeded... too bad.

------
kand
Amazing work. Love it.

------
JackWebbHeller
Finally lost my Mario virginity...

------
Arxiss
Amazing! HTML5 rocks my world. Too bad sound doesn't work.

