Infinite Mario in HTML5

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

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.

Its source is on GitHub[1].

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

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.

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!

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

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?

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

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.

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.

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

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

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

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.