meta data for this page

Unit 0 - Optional Javascript Crash Course

Skimmed through, skipped exercises.

Time used: 20m?

Unit 1 - Canvas

Nothing new here, did the exercises to jog my memory in any case.

Notes: (Animation) I love me some modulo. (Storytime) Interesting.

Time used: 30m

Unit 2 - Atlases

Got past experience on tilemaps/spritesheets and whatnot, so the concept is not at all unfamiliar. Never did it in JS before though.


(Loading Map Data) Answer video passes “false” in xhrGet, which is not required. Had to scour the forums for a solution after having no clue what's going on.

Didn't know atlasing had such a great impact on load times.

Notes: (Tiled map data) Loving the image path “..\/..\/..\/..\/..\/Dropbox\/grits\/grits_master.png”

Time used: 2h

Unit 3 - Input

While the content was not at all unfamiliar, the quizzes were more often than not broken in at least one way, so doing them ended up frustrating.


Keyboard Input Manager Quiz would not pass on Firefox no matter what, despite code being identical to the answer. (throws “global leak detected: getInterface”), fine on Chrome with the same code.

Physics Engine API Quiz required declaring move_dir outside the class, then referencing to it with “this.”, as opposed to the answer to pass.

Mouse Firing Quiz passes without changing anything in the code.

Keyboard Firing Quiz passes without changing anything in the code.

Notes: (Unfair gameplay) Cringe.

Time Used: 2h

Unit 4 - Entities

Quizzes went surprisingly smoothly, compared to last Unit at least.

Though, scouring through seven files (totaling 500 lines of code) to edit a line or two of code is a bit of a bore. The editor could at least open the file we're supposed to edit instead of defaulting to core.js or whatever.

Only encountered a very minor thing in Killing Entities Quiz code:

      // Loop through the entities and call that entity's
      // 'update' method, but only do it if that entity's
      // '_killed' flag is set to true.

Which clearly implies that we should only update killed entities, which doesn't make any sense. And the answer requires updating alive entities, as suspected.

Time Used: 1h

Unit 5 - Physics

I'm quite familiar with Box2D, although a slightly older version and in different language, but the basic idea remains the same so this Unit didn't prove much of a challenge in the end.

The length of the unit compensated for that though, can't imagine how long this is going to take someone who hasn't used Box2D before.

Physics Bodies Quiz:

  // Return your BodyDef object.

You have to return the created body, not its definition.

Updating Entities:

  ReferenceError: PHYSICS_LOOP_HZ is not defined

Had to mess with PhysicsEngine.js despite the quiz having nothing to do with it.

Time Used: 2h

Unit 6 - Sound

I know the course pretty much expects you to use Chrome, but I'm not a huge fan of tying myself to a single browser and totally dropping all the rest, so I didn't end up implementing WebAudio in the assignment.

Skimmed through the exercises to get the basic idea behind WebAudio

Time used: 1h

Unit 7 - Asset Loading

Quizzes went surprisingly smoothly.

Time used: 2h


Finished product

Play Game

Udacity 100%


Time used total: ~24h

Tested functional on Firefox (Windows, Ubuntu & Android), Opera (Windows), Chrome (Windows & Android; Android version has no sounds)

Assets & Acknowledgements

Code by myself, with some inspiration and solutions taken from GRITS as well as Udacity's HTML5 course.

Physics handled by Box2D.

All pixel art by myself, done in Paint.NET.

Sounds from SFXR

CSS from another HTML5 project of mine (which is why it contains so much junk I didn't have time to clean up)

Initial idea

2D platformer/puzzler with pixel art

You play as a thief in a locked-up box factory trying to reach next room so you can loot everything, and possibly even find the motherlode box.

The factory contains tons of different boxes that you can either use directly to your advantage, or break down and hope to find something useful inside.

Initial demo

Basically set up all the engine side things, such as entity management, contact listeners and basic inputs.

To do:

All the juicy stuff. Actual game logic, gfx & sfx…

It's still quite early in development due to exams and other stuff going on right now, but should pick up soon.

Play (A/D+Space)


(12.5.) Play

* Added temp graphics using GRITS' atlas, custom ones to be added later

(13.5.) Play

* Added custom gfx


* Presented demo so far.

(28.5.) Play

* Lots of progress.

* Level generation of sorts.

* Raycasting cameras.

(29.5.) Play

* General tweaks.

* Particles/debris.

* Loot.

(30.5.) Play

* Changed cameras into turrets.

* Added some html+css.

(31.5.) Play

* Added spinning (will damage boxes and help you get through tight spaces)

* Modified turrets

* Modified particles

* Added sound effects

(1.6.) Play (FINAL)

* Added batch loading

* Tweaked things

Possibly useful links (Learned Box2D back in the day there, it's AS3 but translates pretty easily to JS)


Misc notes

Not a huge fan of the exercises. Usually by the time the code editor loads I've already forgotten what to do, having to go back to check the video again.

At some point in the exercises the code editor opened a dozen files that I had to go through to find out which one to edit.

Could use a “skip quiz” button if I just want to chill back and watch the magic happen. (Skipping is possible, but requires submitting an empty answer, waiting for it to process and then skipping to answer)

After viewing the official quiz answer the video automatically moves on to the next one. Should you miss a part of the explanation the first time, you have to back up and re-skip the quiz to view it again.

Text is a bit too opaque when the instructor's hand is behind it, hard to read.

Clicking on map.json tab makes the editor freeze for 10s or so.