Category Archives: HTML5 Game Development

So Close, But Yet So Far

I finally have my ball on the canvas. Unfortunately, it is not behaving well at all. Ideally right now it should just sit there because I have defined gravity as:

b2Vec2(0.0, 0.0)

But for some reason, the y-value is changing. To add weirdness to it, the y-value changes differently for different starting y positions. I think it has something to do with my “ground” bounding box. Time to do a little exploring.

Update: It was a problem with my ground bounding box. My ball was inside the box. Turning the ground into a “wall” and placing the ball outside of it fixed the problem.

Update update: I now have a bouncing ball! This might actually work now!

It’s Alive!

Meltdown! is not really a game yet, but it is doing many of the things games do. For one, it has a functioning game loop now. If you go to the web page here, at the time of this writing you will see it displaying some text with a running counter on the canvas. Google Chrome says that it is running very close to its desired frame rate of 60 fps (Frames Per Second). I am liking Google Chrome’s developer tools more and more as this project continues. If you don’t need a running assessment of frames per second, I was pleasantly surprised to find that the code works just fine on Internet Explorer 9.

I also realized today that at the end of Udacity’s “HTML5 Game Development” course, you don’t have a functioning game! This is a huge oversight in my opinion. I suspect that the instructors just ran out of time, probably due to trying to do too much too quickly. The whole course should probably be redone with a very simple game in mind (a single bouncing target with one turret gun to shoot at it, perhaps) that is developed from start to finish as the course progresses. It could still have all of that wonderful stuff about atlases, asset loaders, physics engines, audio, etc., but everyone would also have a working game when they finish.

Lack of Progress Report: Too Much Stuff, Not Enough Time

Among other things, we are encouraged to use readily-available tools such as Tiled and TexturePacker. I downloaded those yesterday and fully intend to use them, but I doubt that they will add much to my little game at this point and I am rapidly running out of time. TexturePacker may be useful to me in Steampunk Road though. After I finish this project, I will have to see if I can integrate an atlas in with Google’s Maps API to cut down on load times.

Progress Report: Now Loading

The project is progressing. I started where CS255 ended: loading assets. I am currently loading box2dweb from a script that also loads my images and will load my sounds (when I have sounds). Next up, I need to get the ball bouncing.

Although I have worked with WordPress for other people in the past, this is the first time I have used it myself. I can see the appeal for bloggers. I think that I shall add a blog to Steampunk Road as well, particularly if I can find a 19th century newspaper or steampunk theme.

About the Project

I mentioned the Udacity HTML5 Game Development course in the Introduction post. During the time lessons for the course were first being released, a contest was announced in which the students could compete. Unfortunately, I was otherwise occupied and so could not. View the Contest Winners here.

There is a second incentive to create a project now however: HTML5 Game Development Certification. I am a little wary of the quiz, given the problems with the course’s programming quizzes. I will also be squeezed for time as June 24th is the only date I have available to take it. Before I make that decision though, I can at least try my hand at the project.

Every project begins with an idea. Mine is to create a game based on bumper-pool, pinball, and pachinko. It should integrate the elements that are desirable in this project: fast-moving graphics, physics, audio, and game play. It could even be educational if turned into a typing tutor game.

I’ll lay out the basic elements here. There will be a fixed table 100% visible on screen: square, hexagonal, or octagonal. There will be six or eight pockets. There will be active bumpers on the table that flash and make noise. There will be temporary pop-up gates in front of the pockets, triggered by key presses. There will be balls. There may be randomly moving bumpers that appear at random times, e.g. mice, to mix things up. There may even be music.

I could write my own physics engine, but one of the goals of the course is to use pre-existing tools and libraries, so I am going to try box2dweb for my physics engine. First goal: incorporate the physics engine and get a ball bouncing around a table. I will keep you updated on my progress here.

And somewhere along the line, I need to think up a name. Hmm ….


It has been a while since I have regularly posted to the Internet, but I have decided to make at least a brief return for the purpose of documenting a new project for an online course I enrolled in. If you are somewhat proficient in Javascript (particularly, asynchronous Javascript), have an interest in game development for modern-day web browsers taking advantage of HTML5, and have an exceptionally high tolerance for frustration, then I recommend checking out Udacity HTML5 Game Development.

If you want to skip the frustration part, just click the “Submit” button any time you get to a quiz and then click “View Answer”. I managed to eventually get 100% correct on all of the quizzes, but I had to use three different browsers on two different operating systems in order to accomplish that. Hopefully Udacity will continue to improve both the course and their quiz tool.