Home > html5 > A Platform Game Written in HTML5

A Platform Game Written in HTML5

September 11, 2009 Leave a comment Go to comments
screenshot

Click to play

Nearly 15 years ago, when I was all of 15 years old, I wrote this little platform game which I have recently ported to HTML5/Javascript.

It’s a kind of Mario clone and at the time I named it “Fred Jones in Adventureland”… hmm, not a great name.

The themes of the game are intended to be tongue-in-cheek however. Hence the ridiculous title and deliberately unsubtle references to other games in the genre.

And it is somewhat incomplete; the player has unlimited lives and unfortunately there are only 5 levels. But as it stands it is playable and hopefully a little bit of fun. There are a couple of surprises along the way too.

Browser Compatibility

If you’re using Microsoft Internet Explorer 7 or 8 the game will run dreadfully slow. (Update: The game now supports the Google Chrome Frame plug-in. If you are using Internet Explorer I recommend you install it.)

Internet Explorer 6 and earlier, Firefox 1.x and I believe Opera 8 and previous will not run the game at all. This is because these older browsers do not support HTML5 (arguably, no version of Internet Explorer supports HTML5, however the game can run with the assistance of 3rd-party plug-ins and other workarounds). Please upgrade or switch to a different browser.

Controls

Left Arrow: move left
Right Arrow: move right
Spacebar: jump

iPhone Version

See HTML5 Platform Game for iPhone

Play!

Click the link above to play the game.

Technical Details

This is a port of the original game to HTML5/Javascript. This means it now runs in any modern web browser.

Unlike most web games the game does not use Flash. The HTML5 Canvas is used to draw the visual elements.

All the code for the game is all available to read if you hit “view source” in your browser and I invite you to take a look.

I was pleasantly surprised by the performance of Canvas drawing operations and javascript run-times in most modern browsers. However Internet Explorer users apparently will have to wait for version 10 before such features will grace the browser.

The game currently has no sound but this could be added using the HTML5 <audio> element.

About these ads
  1. Ben
    November 20, 2009 at 8:32 pm

    Awesome dude, thanks for posting this. You are inspiring a new generation of coders with this type of thing. If I were 15 and wanting to hack code, this type of project would give me a hard-on.

  2. November 20, 2009 at 8:58 pm

    why ctrl?? totally messes with spaces! please use something normal like space or enter!

  3. November 20, 2009 at 9:31 pm

    It’s a great!

    But it would be nicer if you chose another key for jump, because it interferes with the combination ctrl+directional key, which changes the current desktop in mac os. So it’s a little annoying.

    Anyway good work!

  4. purple floyd
    November 21, 2009 at 11:39 am

    Thanks for the feedback. I’ve changed the jump key to be spacebar so Mac users should no longer have a problem.

    I’m a Linux guy myself ;-)

  5. November 21, 2009 at 12:42 pm

    Amazing!

  6. ZoomZak
    November 21, 2009 at 10:06 pm

    Awesome! Reminds me the days when I was a kid playing platform games, well done for doing this in HTML5/JavaScript :-)

  7. January 30, 2010 at 8:30 am

    Hehe that’s awesome. Especially from a technological point of view. Hopefully HTML 5 will become standard soon, that will give Adobe/Flash a run for their money.

    Instead of lives, you could implement a timer, so that players can compete in “speed-runs”.
    Btw. I love how you stored the map data :)

  8. February 21, 2010 at 12:54 am

    Hi, I was wondering if I could use this game on my website (maybe I’m still not sure what I’m doing with it). I have a domain and server, I was thinking of possibly making an addicting games type website except fully html5. I dunno just an idea, get back at me. Thank you.

  9. purple floyd
    February 24, 2010 at 7:03 am

    If you are planning to host the game on another server I’d appreciate it if you email me first :-) My email address can be found on this blog’s about page.

  10. March 6, 2010 at 1:32 pm

    Speachless………

  11. March 6, 2010 at 4:20 pm

    Is it possible to make it work on the iPhone safari browser? The game appears to load but there’s no way (I can find) to trigger any controls.

    Twould be most awesome.

    • purple floyd
      March 6, 2010 at 4:33 pm

      Hi Mark, yes! I’ve written a version of the game for iPhone, still in HTML5/Javascript, see this post.

  12. Samn
    May 23, 2010 at 12:00 pm

    Its going to be a sad few years for web games soon. Developers are going to be “oh wow – we don’t need flash – look a javascript game!”

    Well look at the graphics – no vector = back to the old 16bit games console games.

    It’s only programmers and devlopers who think it’s great they dont need flash – almost 98% of browsers support flash. The graphics are amazing with the effects. Apart from really badly coded games – they run fine (believe me – JS games can kill your browser just as easily as flash)

    Its a good example – but i just hate how flash is getting such a hard time lately.

  13. Dave
    June 21, 2010 at 10:32 am

    If your where 15 years old when you did this game, I´m sure that you are a great game programmer now! =) We are currently developing a browser game, check it out and maybe you have some inputs to it. The game is called Aloriah, and it´s now in the beta test. Enjoy =)

  14. October 21, 2010 at 8:57 am

    I see this post is quite old, but for us HTML5 is all quite new. Without wanting to be a spammer, I’d like to draw your attention to http://www.html5contest.com. We’re doing a monthly contest for HTML5 games and we’re trying to encourage developers to try out HTML5. Don’t hesitate to contact me about this, thanks!

  15. April 13, 2011 at 2:08 pm

    Sweet game man, working in with HTML5 myself. Keep up the work blogging about it. I love reading about what people are doing with the technology.

  16. ANTONIO
    June 28, 2011 at 4:59 pm

    Dude i want to make a education video game of automatization and robotics in html, i gave clases of robotics for kids and they go crazy when making a robot car with sensors and programming in a diagram way to complete a task, it would be extremely cool a video game that emule that proses.
    In 2d

  17. Alex
    September 17, 2011 at 7:21 am

    thanks. enjoyed the post .. here is another usefull stuff

    All about html5, templates,news,apps everything here.

    http://html5arena.blogspot.com/

  18. January 5, 2012 at 7:21 am

    Nice post. One thing, i’m running Win 7 with the Firefox 4 Beta browser and your columns are overlapping a little. Though you may want to fix it :-)

  19. August 2, 2012 at 11:54 am

    hi..! can i use/upload your
    game in my site http://
    trantopic.com
    email me

  20. September 27, 2012 at 8:22 am

    Hi, I do think this is a great web site. I stumbledupon it ;) I’m going to revisit once again since i have bookmarked it. Money and freedom is the best way to change, may you be rich and continue to guide other people.

  21. February 19, 2013 at 9:24 pm

    Very nice game ! Thanks u :o) check mine : http://www.facebook.com/LosgoGame

  22. buy
    March 29, 2013 at 2:07 am

    They make more cash that way, instead of selling everything at once or selling each item individually.
    Such a restriction places this benefit out of reach for many owners.
    Based on HUD info, every state was granted ADDI allocation.

  23. Aria
    June 3, 2013 at 3:04 am

    I was playing this game on my iPhone and added it to my home screen like you suggested, and I was playing it from there, but then it glitched. My power button wouldn’t work, and my home button wouldn’t work. The only thing that worked was the game. It wouldn’t even shut off automatically! I had to leave it there, on, all night so that it would die. What the heck?!!!

  24. June 9, 2013 at 4:22 am

    I know this if off topic but I’m looking into starting my own blog and was wondering what all is required to get set up? I’m assuming having a blog like yours would cost
    a pretty penny? I’m not very web savvy so I’m not 100% certain.
    Any tips or advice would be greatly appreciated. Thanks

  25. July 5, 2013 at 4:48 pm

    Well, I examined your blog and I really concur, mind-blowing thoughts.
    A little bit off-topic, nonetheless, it’s something I would love to to show you. The condition with so many modern games is that they are simply just not pleasant to play. A particular zero cost to play game I play is empire online, give it a try and let me know what you think

  26. July 25, 2013 at 7:02 am

    Hey There. I found your blog using msn. This is an extremely well written article.
    I’ll be sure to bookmark it and return to read more of your useful info. Thanks for the post. I will definitely return.

  27. July 26, 2013 at 9:02 pm

    Magnificent goods from you, man. I have understand your stuff previous to and you are just too wonderful.

    I really like what you have acquired here, certainly like what you’re saying and the way in which you say it. You make it enjoyable and you still take care of to keep it wise. I can’t wait
    to read far more from you. This is really a wonderful
    website.

  28. September 18, 2013 at 4:23 am

    I am truly thankful to the owner of this website who has
    shared this impressive paragraph at here.

  29. September 28, 2013 at 3:31 am

    I’m not that much of a internet reader to be honest but
    your blogs really nice, keep it up! I’ll
    go ahead and bookmark your website to come back in the
    future. Cheers

  30. Gayan
    November 22, 2013 at 5:17 am

    Nice game! can you please let me know whether i can get the source code to do some experiment with it?

  31. January 1, 2014 at 10:20 am

    coppra   coprah   copras   copses   copter   copula   coquet   corals.
    censes   censor   census   centai   cental   centas   center   centos.
    holdfast holdings holdouts holdover holeless holibuts holidays holiness.

  32. January 18, 2014 at 3:11 pm

    It’s the best time to make a few plans for the longer term and it is time to be happy.
    I have read this submit and if I may I desire to recommend you few
    interesting issues or suggestions. Maybe you could write
    next articles regarding this article. I want to read even more things approximately it!

  33. January 28, 2014 at 12:45 pm

    One of the biggest arcade classics in history is finally coming
    home to the XBox 360 and Play – Station 3. When the dude
    faces problems he gets high, when he wants to mellow out, he gets high,
    when he is ready to bowl and roll his way into the semi’s,
    he gets high, his life is pretty much getting high. Wakeboarding has
    you holding you remote horizontally as you take to the
    water, sweeping from side to side and flicking the remote
    up as your board hits the wave.

  34. January 30, 2014 at 6:25 pm

    ” Maltby notes, “When it pulls up, I literally feel the joy draining out of my body.
    On the previous operating system, you would have to close out of
    the racing app to read and answer the text. If you’re asphalt does
    need to be repaired, however be sure to do it quickly as sealcoating can protect the asphalt
    from water and other elements once the surface it’s self is cracked.

  35. January 31, 2014 at 12:45 am

    Like any other type of betting, football betting requires
    skills, and sufficient knowledge. The language and learning disabilities can be cured
    with the help of computer video games. So, the users just need to access the intenet and the rest is all done.

  36. February 28, 2014 at 5:52 pm

    It’s possible that when walking across a carpeted room with a Blu-ray disc in hand and placing it into
    your player, a certain amount of electro static is generated which can
    then transfer to the player, resulting in various functional issues.
    Spiderman – Now here we have a superhero who gets his name
    from the thing that has caused him to be one. The impact of
    depression and sexual deviance on each of them is enormous.

  37. March 29, 2014 at 6:22 pm

    Even with 25 billion apps obtainable in i – Phone 4s 5.
    Step 5: Once you are back at the extras menu, press the Pwned DFU button to continue
    with the jailbreak process using custom i – OS 5 firmware file.

    They zoomed seamlessly, adding relevant street names seemingly as I needed to know them.

  38. April 8, 2014 at 4:29 pm

    Do people pick grapes from thorns, or figs from thistles.
    It wont come back again the adhering to yr, although (omit) a number of exceptions to this
    rule, which established seeds that manage to survive about the winter season and volunteer
    the upcoming yr. Sacral center 2 and 8 ‘ Zimbabwe : opposite side (8) pacific ocean where
    Lemuria used to be.

  39. April 11, 2014 at 11:10 am

    Seasons one to ten have been released on DVD in many continents.
    Mom reminds him that Wo – W is “just a video game” – his grade on the Spanish exam is more important than how he’s doing in some video game,
    right. Having the option to save after every mission helps to make the
    time just fly by, and it makes the game more pick-up-and-play friendly,
    plus, there is also a mission skip feature is in the game, but it is only made available after your sixth restart for a mission, which
    gives you a nice reward for replaying a mission that you just
    can’t get done for whatever reason.

  40. April 18, 2014 at 3:55 pm

    Bad weather can affect the way a quarterback throws a ball and how well a
    player’s shoes grip the turf. Central midfielder – 17 – PSV – £3m – Dutch – DEMO.
    Have you always wondered how you can control stress management in the
    workplace.

  41. April 23, 2014 at 9:06 am

    Most amazing and nice prince here for HTML 5 game good platform where i aware about new and latest gaming and get the peoples 100% reviews and talking about the games and this game is very user friendly i played already with my sister,

  42. April 27, 2014 at 6:43 pm

    It’s going to be end of mine day, except before ending I am reading this enormous
    piece of writing to increase my experience.

  43. April 29, 2014 at 1:11 pm

    Ahaa, its pleasant conversation about this article here at this website, I have read all that, so at this time me also commenting at this place.

  44. August 6, 2014 at 9:51 am

    superb job. though i know html and being working on it from years but never come out with such idea. great work

  1. February 17, 2010 at 2:11 am
  2. February 22, 2010 at 4:37 pm
  3. April 29, 2010 at 11:34 pm
  4. May 3, 2010 at 2:31 pm
  5. July 6, 2010 at 4:10 am
  6. October 30, 2011 at 1:35 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: