Game Development Tutorials
Fancy making a game? Using Canvas? You do! Excellent!
Matthew Casperson has been incredibly busy writing this whole bunch of tutorials about developing a platformer using canvas. From keyboard input to parallax scrolling, from animations to resource loading – it’s all covered in his tutorials.
Jump, run, jump some more.
Check them out here:
- An introduction to the canvas element
- Drawing an image to the canvas
- Advanced image manipulations with the canvas element
- Parallax scrolling with the canvas element
- Creating the game framework – part 1
- Creating the game framework – part 2
- Animations
- JavaScript keyboard input
- Putting it all together
- Defining a level
- Jumping and falling
- Adding Powerups
- Resource Loading
Comments
jack
really cool
thanks
Posted on April 29, 2010
TwFlash
Hi, It’s a really cool work you made here. I think i’ll study your sources for my firsts self teaching HTML5 canvas JS sessions.
But… When i see JS… Oh, it is so an ugly language ! What a pity I feel I have to to learn this… Thing. What a pity some people saying it could be compaired and better than flash AS3.
I’m so sad with this HTML5 thing, wich will take us so many years back (I speak in the coder point of view, ok ? I know how cool the idea of HTML5 canva is. It’s just… The wrong language for it.)
So, if we have to… Let get to work, I have so much to learn !
But Flash is better to do games, API and animations, and i’ll go on screaming this as long as I can.
Bah… Maybe, one day, JS will be full Object oriented, with decent constructors, clean memory handling ?
Posted on May 2, 2010
TwFlashHater
A bad language for it? It’s a bloody brilliant language. Point out to me one reason anyone would not want to code in Javascript.
Posted on May 4, 2010
TwFlashHater
It’s a fully prototype-based object-oriented that allows for runtime composition of objects. What constructors, which planet are you from? Prototype-based languages have no concept of classes.
Memory handling? What’s wrong with its “memory handling”? Sounds like something you picked up in the PHP manual. “Yeah, memory handling sounds like something that would impress chicks at a bar”. What are we coding, C, and dealing with retain counts and pointers? Which modern high-level languages out there even let you touch memory management?
Eesh.
Posted on May 4, 2010
TwFlash
Well…
“Prototype-based languages have no concept of classes.” :
- this makes harder for me to organise my code. Where are the packages ? How can i make my functions to be private or public ?
- using patterns is more difficult in JS…
- I feel that JS coding pratices dépends on each coders, and less on the language itself, so my code may not be easily read by another guy who will go on my work. And it’s harder to make UML charts. And harder to work in teams.
- prototype inheritance is not good enougth. You can only simulate OOP features (and this is sufficient for many works). When you are used to use inheritance from classes, it’s very disturbing to use JS.
- But multiple inheritance simulation could have some cool use.
“Memory handling? What’s wrong with its “memory handling”?” “Which modern high-level languages out there even let you touch memory management?”:
In fact, I was talking about Garbage Collector. And here I was wrong ! But in AS3, the GC handling is easy. In JS, this seems more complicated. I’ll see that later !
There are one other bad point for JS : portability of the code on browsers and mobiles… Eeesh.
I try to be objective. Flash has some flaws too !
I’m sure i’ll make some cool things with JS and the Canva. I’ll just be a little more limitated than doing them with Flash and AS3.
Posted on May 4, 2010
AnotherFlashHater
I’m still a noob when it comes to web programming, I’m only just completing my first point-and-click game in pure Javascript and I don’t know ActionScript, but you also have to look at it from a user’s point of view: flash is slow, it often blocks the browser, it doesn’t run smoothly on all systems (support for Linux is quite crappy), you can’t even use bloody F11 to toggle fullscreen once you’re inside, because it’s so much separate from the browser and from html. And last but not least, it’s proprietary and closed, which makes it a bad choice for the future of the net. The less we become dependent on one company to provide web content the better.
Posted on July 28, 2010
Yoda
My friend, when you say “Maybe, one day, JS will be full Object oriented” I know you are a noob flash kiddiez, probably still in highschool or college learning how to program stuff.
First off, there are many programming paradigms. Imperative, Procedural, Event-driven, Object-oriented, and Automata-based are just a few. Javascript is Event-driven, if you don’t know by know.
There is no such thing as best paradigm for all programming situation; each has its own use. Will you use a hammer to cut down a tree? Or a saw to drive in a nail?
Actionscript is good, for Flash. Javascript is good for HTML.
It’s all good
Posted on September 28, 2010
Nick
I have to agree that AS is a far more developed language for animation, drawing, small apps, and generally anything that Canvas has to offer. Programming for canvas would be far easier in an OOP enviroment. Javascript is very lacking compared to AS.
I agree that Javascript is better for HTML, but the canvas is not exactly your average HTML.
Posted on October 21, 2010
Siji
Really cool. ..Thanks for sharing.
I m planning to use it my Bingo project
Posted on November 3, 2010
Matt
Javascript isn’t good for html, it’s just the only ‘choice’. Although the word choice denotes that there is some alternative there isn’t.
There is javascript. The horrid/wonderful/confusing/simple beast that is javascript. It’s is immature and never grows and some wish it would die.
Some guy at Netscape made up JS and now we’re stuck with it. For some bizarre reason no-one’s allowed to use any other programming language to manipulate the DOM, even though it should be trivial.
But never pretend it’s ‘good’ for HTML. That just shows your immaturity as a programmer too. It’s simply the one and only choice.
Posted on November 8, 2010
Sid
There are 2 types of Javascript programmers: The noobs and the pros. The Javascript community believes that the Javascript pros are superior to the Java Pros and thir environment is awsome compared to crappy Java C# etc. But is hard to become a Pro. If you are very smart you can absorb Crockford’s videos and you will be enlightened. Most will not. And they shall remain Object Oriented programmers. I dislike the idea that one needs to cross some intellectual threshold to be good at JS. This reduces the pool of available good coders. But please stop whining coz u cant digest the approach that JS uses. @Matt, if u have not heard of Crockford, u need some real exposure before u comment about JS. But even Crockford can make u puke at JS. Only the most determined can tolerate JS till you begin to love it. http://javascript.crockford.com/
Posted on November 8, 2010
Rusky
Javascript definitely has its flaws, but its lack of cookie-cutter C++/Java/C# OOP is not one of them. I would even say the workarounds for its lack of a module system are good enough, although they could be improved (a la node.js).
There are plenty of good ways to organize programs, and class-based OO is only one of them.
Posted on November 8, 2010
Mickey
Like all languages, they have their ugly points and beauty.
JS does not have explicit public and private, but it definitely supports the behavior. Inheritance is particularly ugly where derived-class functions need to pass through to base-class functions. There are no templates and setting an allocated variable to null does not necessarily free the memory immediately.
Also, JS is definitely slower than Python, C++, and others. The worst part is that this is not a compiled language so that anyone who plays your game has the source as well.
All that negativity makes me tired.
Good stuff is there tho. The support for JS is great and any particular problem you have can easily be solved by a Google search. Also, things that you haven’t probably considered are supported like file I/O, sockets, drawing regular buttons and windows over the canvas, matrix ops, jquery selectors, animations (built into js), rendering and alpha (trivial: rgba(r, g, b, a);) and many other things which are quite a bit harder in C/C++ or other languages.
Overall, I am a supporter but I definitely wish for the language support of a object-oriented language and while adherents call it an OOL (everything is an object in JS), it has weak support for the basic tenets of OOP: encapsulation, inheritance, polymorphism (and I like to add initialization).
Posted on November 8, 2010
Andy Harris
Silly arguments, really. ActionScript and JavaScript are both derived from EcmaScript, and they’re really similar in a lot of ways. The big difference between programming games in Flash / ActionScript and HTML used to be the limitations of the object model. Flash lived in the rich (though designed for animation) flash environment, and JavaScript was tied to a DOM that was never intended for gaming.
JS speeds are increasing at a tremendous rate, and HTML5 finally has integrated support for many very interesting capabilities – the Canvas is becoming a workable 2D environment, and SVG is as attractive as ever (if still not entirely practical.) The addition of transformation and opacity on DOM objects makes programming games on the DOM possible.
(I’ve written books on game programmin and on JavaScript. I’m currently writing a book on HTML 5)
Posted on November 8, 2010
Jake
I also have an inherent fear of Javascript. I believe this is due to some prior experience with C and OpenGL. Can someone comment on whether Javascript bleeds memory? That would be my primary concern for programming canvas.
Does anyone know of a good Javascript IDE that can work well with Canvas?
Posted on November 9, 2010
el guapo
@sid, Yoda, FlashHater, etc…
You guys are drinking deep of the Kool-aid aren’t you? I bet you can’t wait to jump on the next big trend.
To others, don’t be put off by the trolls. They, like so many others in the last 5 years, have jumped on the javascript bandwagon. Didn’t you know? Javascript can cure Cancer! It can bring world peace! It’s the greatest thing ever and if you don’t agree you are a noob, a fool, forever doomed to darkness!
Javascript is an OK language, but it’s inherently screwed up and will remain so for a long time. I mean, we’re going on 20 years of the the same basic ideas. The prototype model is clunky, the handling of scope is crap, the overloaded behavior of the function keyword is terrible, and the idea of doing everything in the freaking world with closures is the “to a man with a hammer, everything looks like a nail” syndrome.
Functional programming is cool, but there are better languages for it than javascript.
Posted on November 9, 2010
neo
really cool one sir
Posted on November 12, 2010
Oboudja
We’re talking about 3 different things here : A language, an API and a platform.
The JavaScript language is rather elegant (it has LISP roots and is OO in a nice way).
The API looks OK for what it was made.
The platform isn’t a virtual machine for games. It’s a virtual machine for interactive content…
You know what ? Several years ago, I tested a PacMan game running in MS Excel. The graphics were made of colored cells. Yes, each pixel was a colored cell. It worked, it was even playable. What a crazy idea… That’s the only arcade game I’ve seen running in Excel.
Mind you, MS Excel is almost everywhere. There should be more Excel games available don’t you think ? Why aren’t there many Excel games ?
Posted on November 22, 2010
Latoya Shuck
Thanks for the series of tuts. I’ve been looking to get into canvas, and this will help a lot with my study/practice! Any advice as to what kinds of languages and platforms are desired by game development companies like the one linked to?
Posted on December 1, 2010
Kreeda
Hey this is really great.
We are currently looking for HTML 5 developers or people with JS background interested in learning HTML 5.
The opening is with a gaming studio in Mumbai, India.
If anyone is interested, please revert with your CVs/Contact details on pratixha@bluesky-hr.com
Posted on December 27, 2010
WhiteKnight
wow this is amazing! This is one of the best comment sections ever. Really cool argument and ive learnt a lot apart from the actual tutorial itself. Anyways to my 2 cents Javascript is a great language in its own way and contrary to what many feel it has great advantages to overcome its backlogs. Take the client side data stores for instance. It made my life much easier and with the new html 5 api for these stores memory handling has been made much easier. Also with evolution of HTML5 native OS support for the gfx has been added to. I do accept it s an hard lang to learn though.
Posted on January 5, 2011
Kahor
VERY good tutorial, great for people new to game dev (for concepts such as parallax scrolling) and for people new to HTML5.
Just two remarks :
- Links in original post are in the wrong order, it should be
Creating the game framework – part 1/2
before
Parallax scrolling with the canvas element
- It’s sad that no licence is specified, there should be one just to clarify
Thank you very much
Posted on February 15, 2011
Pere
EXCELLENT tutorial. It helped me a lot as a new developer with Canvas.
I made a little but solid engine for RPG games based on lots of things learned from your tuto.
Thank you!!
Posted on June 21, 2011
Billy
Thanks! You have a lot of good tutorials for building HTML5 stuff. I can’t wait to digg into all these tutorials and make a cool HTML5 game/app.
Posted on November 4, 2011
TheGuy
Fantastic tutorials!
Great spot to begin to learn how to use JS and the Canvas element. I’ve been programming for two and a half years, and have worked in C#, C++, Flash, and Java, and don’t see why haters gotta hate. Javascript has tons of potential to grow into being even greater than it is, which is already quite great. It, of course, has many drawbacks, but come on, what language doesn’t?! Considering the canvas is relatively new to the world, it’s already quite nice to use.
Again, thanks for the tuts!
Posted on January 20, 2012
Related demos