6 ms·

Super Mario in HTML5

68 points by dutchbrit 14y ago

dutchbrit 14y ago
More info including source can be found here: http://www.codeproject.com/Articles/396959/Mario5 http://www.codeproject.com/Articles/396959/Mario5
hayksaakian 14y ago
No touch support Heads up.
thealphanerd 14y ago
A really interesting tech-demo but why oh why did you make jump up... kills it for me http://www.allgame.com/game.php?id=2630&tab=controls http://www.allgame.com/game.php?id=2630&tab=controls
esbwhat 14y ago
nice demo, but terrible physics
AskHugo 14y ago
Nice work. I found a couple of bugs: - Straight after you jump on enemies you're able to pass through some blocks - You are not able to jump on top of shells and stop them from moving - You could improve jumping
jncraton 14y ago
This looks really nice, but the games runs too fast on my machine. It's probably close to 1.5x speed vs the original game.
- brixon 14y ago
  The jumping is too fast on my machine, but the running and forward jumping is too slow.
dutchbrit 14y ago
Quick note - I actually wanted to make Mario in HTML5 but came across this today before starting. I'm not the author :). Thought it'd be interesting to share.
eli_gottlieb 14y ago
So... what was the point?
speeder 14y ago
The physics are bad, and the performance is even worse. I am using a recent MacMini (I bought it I think 6 months ago) and the browser is RockMelt (fork of Chrome). Seriously, if it was slower, it would go backwards.
- sspiff 14y ago
  On my first generation i5 with integrated graphics, it runs fine in Iron, which is basically Chromium. Looking at the Wikipedia article for RockMelt, that browser hasn't even seen a preview release in over half a year, so I would assume its performance might lag a bit behind the upstream projects. Have you tried it in any other browsers?
alvaromuir 14y ago
this is amazing
abderrahmane 14y ago
Have you seen the Source Code ? :O apart from <!doctype html> and <audio/> I do not see what is so HTML5 about moving divs using JavaScript.
magoon 14y ago
This is excellent, but doesn't quite "feel right" when playing. In my opinion, anybody interested in playing Super Mario will remember its distinct feel -- so it will be important to nail down the exact dynamics of running, jumping, falling, stopping, mid-jump corrections, ducking while running, how close you can get to edges, etc.
- T-hawk 14y ago
  how close you can get to edges This is an incredibly deep and fascinating topic in the context of the original Super Mario Bros. The answer to how close you can get to a wall edge is one or two pixels inside it. This is actually very important for SMB's playability, vastly increasing the tolerance for moves like jumping up in a narrow shaft or bending a jump to get on top of a block you're currently under. The game then needs a mechanism to eject Mario out of those walls if he ends up inside. Among many emergent behaviors, this gives rise to the famous entry to Negative World, which occurs by fooling the game into ejecting Mario in the macroscopically wrong direction. (BTW, we hackers should know World -1 is really World <Blank>-1, accessed by entering a warp zone pipe before it initializes.) Fascinating reading on the topic: http://tasvideos.org/GameResources/NES/SuperMarioBros.html http://tasvideos.org/GameResources/NES/SuperMarioBros.html This sort of detail is absolutely key to making a Mario clone that feels right.
slacka 14y ago
Wow, thanks to the raw power of HTML5, my dual-core 2Ghz laptop, can nearly achieve the performance of my 20 year old 1.79 MHz NES. The future is now! Color me impressed.
- DavidBradbury 14y ago
  Either you didn't try it at all, or you don't know the difference between the SNES or NES. Good job. Not a great demo, but it's functional.
  - slacka 14y ago
    What are you talking about? I had both a NES and a SNES as a kid. Super Mario Bros was originally released for the NES and later re-released for the SNES as Super Mario All-Stars. But this HTML5 version runs worse in my broswer than the original did on my NES, nevermind the SNES.
jedahan 14y ago
Another version, this time of infinite mario (ported from Notch's Java version to javascript) https://github.com/robertkleffner/mariohtml5 https://github.com/robertkleffner/mariohtml5 A friend of mine hacked https://github.com/odbol/mariohtml5 https://github.com/odbol/mariohtml5 with me during arthackday.net/gaffta . We made it a one-button game that you can only die once. It was fun!
mistercow 14y ago
Very neat, but like most Mario clones, it does not properly emulate the jumping dynamics of the original. When jumping, the length of time that you hold down the jump button should control the height of the jump. Should sort of be as if, instead of jumping, Mario has a jetpack which is almost out of fuel, but is refilled when he lands.
nohup 14y ago
awesome
dj2stein9 14y ago
FYI, in case the author sees, on MacOSX the key combo Right + Ctrl switches desktops, so shooting fireballs doesn't work.

68 points by dutchbrit 14y ago

More info including source can be found here: http://www.codeproject.com/Articles/396959/Mario5 http://www.codeproject.com/Articles/396959/Mario5

hayksaakian 14y ago

No touch support Heads up.

thealphanerd 14y ago

A really interesting tech-demo but why oh why did you make jump up... kills it for me http://www.allgame.com/game.php?id=2630&tab=controls http://www.allgame.com/game.php?id=2630&tab=controls

esbwhat 14y ago

nice demo, but terrible physics

AskHugo 14y ago

Nice work. I found a couple of bugs: - Straight after you jump on enemies you're able to pass through some blocks - You are not able to jump on top of shells and stop them from moving - You could improve jumping

jncraton 14y ago

This looks really nice, but the games runs too fast on my machine. It's probably close to 1.5x speed vs the original game.

brixon 14y ago
The jumping is too fast on my machine, but the running and forward jumping is too slow.

dutchbrit 14y ago

Quick note - I actually wanted to make Mario in HTML5 but came across this today before starting. I'm not the author :). Thought it'd be interesting to share.

eli_gottlieb 14y ago

So... what was the point?

speeder 14y ago

The physics are bad, and the performance is even worse. I am using a recent MacMini (I bought it I think 6 months ago) and the browser is RockMelt (fork of Chrome). Seriously, if it was slower, it would go backwards.

sspiff 14y ago
On my first generation i5 with integrated graphics, it runs fine in Iron, which is basically Chromium. Looking at the Wikipedia article for RockMelt, that browser hasn't even seen a preview release in over half a year, so I would assume its performance might lag a bit behind the upstream projects. Have you tried it in any other browsers?

alvaromuir 14y ago

this is amazing

abderrahmane 14y ago

Have you seen the Source Code ? :O apart from <!doctype html> and <audio/> I do not see what is so HTML5 about moving divs using JavaScript.

magoon 14y ago

This is excellent, but doesn't quite "feel right" when playing. In my opinion, anybody interested in playing Super Mario will remember its distinct feel -- so it will be important to nail down the exact dynamics of running, jumping, falling, stopping, mid-jump corrections, ducking while running, how close you can get to edges, etc.

T-hawk 14y ago
how close you can get to edges This is an incredibly deep and fascinating topic in the context of the original Super Mario Bros. The answer to how close you can get to a wall edge is one or two pixels inside it. This is actually very important for SMB's playability, vastly increasing the tolerance for moves like jumping up in a narrow shaft or bending a jump to get on top of a block you're currently under. The game then needs a mechanism to eject Mario out of those walls if he ends up inside. Among many emergent behaviors, this gives rise to the famous entry to Negative World, which occurs by fooling the game into ejecting Mario in the macroscopically wrong direction. (BTW, we hackers should know World -1 is really World <Blank>-1, accessed by entering a warp zone pipe before it initializes.) Fascinating reading on the topic: http://tasvideos.org/GameResources/NES/SuperMarioBros.html http://tasvideos.org/GameResources/NES/SuperMarioBros.html This sort of detail is absolutely key to making a Mario clone that feels right.

slacka 14y ago

Wow, thanks to the raw power of HTML5, my dual-core 2Ghz laptop, can nearly achieve the performance of my 20 year old 1.79 MHz NES. The future is now! Color me impressed.

DavidBradbury 14y ago
Either you didn't try it at all, or you don't know the difference between the SNES or NES. Good job. Not a great demo, but it's functional.
- slacka 14y ago
  What are you talking about? I had both a NES and a SNES as a kid. Super Mario Bros was originally released for the NES and later re-released for the SNES as Super Mario All-Stars. But this HTML5 version runs worse in my broswer than the original did on my NES, nevermind the SNES.

jedahan 14y ago

Another version, this time of infinite mario (ported from Notch's Java version to javascript) https://github.com/robertkleffner/mariohtml5 https://github.com/robertkleffner/mariohtml5 A friend of mine hacked https://github.com/odbol/mariohtml5 https://github.com/odbol/mariohtml5 with me during arthackday.net/gaffta . We made it a one-button game that you can only die once. It was fun!

mistercow 14y ago

Very neat, but like most Mario clones, it does not properly emulate the jumping dynamics of the original. When jumping, the length of time that you hold down the jump button should control the height of the jump. Should sort of be as if, instead of jumping, Mario has a jetpack which is almost out of fuel, but is refilled when he lands.

nohup 14y ago

awesome

dj2stein9 14y ago

FYI, in case the author sees, on MacOSX the key combo Right + Ctrl switches desktops, so shooting fireballs doesn't work.