Matthew Casperson's Hubfolio

Home

Articles

Reviews

Blog

Media

Game Development with JavaScript and the Canvas element

RSS

badge-black white I have written a new series that shows you how to create a platformer game using JavaScript and the new Canvas element that is part of the HTML version 5 standard. This is officially a Chrome Experiment.

View the live demos here.

If you enjoyed these tutorials you may also like the CAKE Programming Tutorial series.

Go back to the Tutorial Index

Written by Matthew Casperson (4,880 pts

) in Matthew Casperson Blog
Last Edited on Sep 3 2009, 03:00 PM

Tags: JavaScript, Canvas, tutorial, HTML

15 Comments

Oct 13, 2009 6:04 PM

Matthew Casperson

Printable version

At the moment I don't believe there is any "printer friendly" page template available in the Brighthub system. Copy and paste would be your best bet.

Oct 13, 2009 4:37 PM

Jonsul

Offline

Would it at all be possible to make a printable version of the tutorial? That would be awesome to be able to look through this on paper.

Sep 26, 2009 8:04 PM

Matthew Casperson

standing in mid air

It's actually the width of the frames that make up the players character that are too wide. If you look at the animation strip at http://webdemos.sourceforge.net/jsplatformer12/run_left.png you can see that there is too much space.

Sep 26, 2009 4:54 PM

nobody

buggies

The width is out of bounds (left and right) for the stones, and the character stands in mid air.

Sep 11, 2009 12:02 PM

Flex Developer

RE: Game Development with JavaScript and the Canvas element

Excellent list. I will try to implement in my work

Sep 3, 2009 3:17 AM

Matthew Casperson

RE: Game Development with JavaScript and the Canvas element

The application works fine on Chrome. If you are looking for the source code, there is a link at the end of each article. The latest is https://sourceforge.net/projects/webdemos/files/webdemos/MainMenu.zip

Sep 2, 2009 7:14 PM

Sasuke

RE: Game Development with JavaScript and the Canvas element

hey matt, Can you please please please put the new jewel quest game on google chrome?

Sep 2, 2009 8:53 AM

PranKe

Great! Whats next?

Hi!
I enjoyed the Tutorial very much - I learned a lot! But the last tutorial is about 2 months old. Will there be more?

Greetings!

Aug 31, 2009 6:03 AM

Codventure

full Game

Hey, I wanna to try full game. I like it very much to play a game in javascript.

http://www.codventure.com

Aug 20, 2009 2:39 AM

Matthew Casperson

Timing

Yes, the timing was calculated incorrectly. Thanks for the tip.

Aug 18, 2009 12:58 AM

Joshua Newth

Bug in timing...

I just thought I would let everyone know that there is a bug in the timing, to prove this just open Main.js and change FPS to 1, it will still run fast as it's actually updated at 1 frame per millisecond rather than 1 frame per second. To fix this just change "SECONDS_BETWEEN_FRAMES" from "1 / FPS" to "1000 / FPS" within Main.js, remember that setInterval() takes the time in milliseconds not seconds.

Aug 7, 2009 9:31 PM

Joshua Newth

Thanks for the tutorials

Just wanted to say thanks for all the tutorials... just learnt of the HTML5 canvas element and I think it's the best thing ever for a graphics programming ^_^.

Jul 19, 2009 9:21 AM

hishank

code help/..........................

can anyone mail me java script code for jewel quest game

Jul 4, 2009 6:56 PM

Matthew Casperson

RE: Game Development with JavaScript and the Canvas element

The complete game isn't made yet - I make it as the tutorials go up. I should have it finished over the next few weeks.

Jul 3, 2009 1:50 PM

Gammenon

But...

where can i try the complete game? :(

Follow Matthew Casperson

Receive weekly updates from Matthew Casperson