Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
Infinite Mario in HTML5 (fromlifetodeath.com)
229 points by creativityhurts on July 23, 2011 | hide | past | favorite | 72 comments


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.)


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


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.


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.


This brings up a good point. The controls are even set swapped compared to gamepads, so using the wrong hand isn't comfortable. Old computer games did use the pc arrows of course. But now since this is a remake of the classic, it should at least be hand aware :)


Flipping around the hands used for directions and actions is standard with emulator keyboard input, actually.


Now that I think about it, it's really weird. I play FPSes at times, and WASD feels natural, but WASD+JKL for, say, Sega emulation feels wrong compared to ↑←↓→+ASD(/ZXC, for you crazy Japanese-targeted-game fans).


Or catch the key's event trigger with onfocus or onkeydown. That way even if they are pressed, nothing will happen.


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.


Infinite Mario is actually a rather useful piece of code for all sorts of games research. It's a very good "simplest non-trivial example". The code itself is decently clean, OOP code, which a lot of open-source games, even those written in Java, are not.

For example, I modified Infinite Mario to become self-repairing: http://www.zenetproject.com/pages/lakitu


That's because the problem was, essentially, "get from point A to point B", but few people could see it.


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)...


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.


Its source is on GitHub[1].

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


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


I was just about to say that.


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.


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.


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.


Perfect explanation tibbon.


"Over a year"? Given that the canvas element was introduced in 2004, I suppose this is accurate.

I agree, I am also mystified by how people are consistently impressed with game demos that say little more than "See, we can now do some of the things that Flash has been able to do for ten years, as long as you run the right browser."


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!


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.


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?


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.


It's certainly possibly, it's just generally a waste of time for games made for fun..


Well here you go: http://blocks.solitairey.com

It's a Tetris clone and very much a work in progress: Only "Standard" mode (and the controls menu) is implemented at all. There's also a simplistic AI and it saves your replays, but none of that is actually integrated into the game interface-wise yet :\


Check out Robots Are People Too: http://raptjs.com. You can click the pictures showing the keys to enter new controls.


  // 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 :|


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


https://github.com/robertkleffner/mariohtml5/

Nope, it's actually open source.


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.


You can always use Javascript Deminifier For Firefox https://addons.mozilla.org/en-US/firefox/addon/javascript-de...

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


You can copy and paste the .min.js file into http://jsbeautifier.org/. That would beautify everything so it's readable. :)

Crystal


The source is obfuscated? It's just one-lined. Copy-paste here: http://jsbeautifier.org/

I don't know why they even bothered un-white-spacing it. Doing so doesn't save much space, nor provide any kind of real obfuscation. At best it just makes it un-debuggable (hmm. seems like an oversight (that most debuggers also miss) that you can't set breakpoints inside a single line of code...)


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?


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.


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


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


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


Works for me on 5.0.1 (latest) Mac.


Sounds worked for me in the latest Windows nightly build.


Doesn't work in Chrome on Windows either.


Works perfectly in Chrome 12 (linux).


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.


S is jump?


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


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.


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


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


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


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


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


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


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


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.


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


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


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


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


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


I'm not disappointed, but I was actually hoping it was a playable html5 version of this:

http://www.youtube.com/watch?v=T2OytHzZ72Y

My favorite part is when he misses the goalpost in his first pass and then goes back a second time and hits it.


Yea, but what's infinite about it?


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/


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


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


It's a HTML 5 version of older (Java/Flash?) game called "Infinite Mario".

edit: I'm not sure about this, but I got the idea that it randomly generates the map/levels.


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


Bandwidth Limit Exceeded... too bad.


Amazing work. Love it.


Finally lost my Mario virginity...


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




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: