0. Optional Javascript Crash course

Quiz 1:

Didn't notice the “frames”-field at first. I also had to check the console.log-function from the discussions. Otherwise it was pretty easy.

Quiz 2:

Now this was strange. For onload-function, I had to seek help from the discussions because I kept on getting “student should return correct 'x' value”-error. Console.log doesn't seem to work in this case. I wonder why it's used in the answer clip then…

Quiz 3:

Basically the same we did in the last quiz with an exception of setting the responseType. Didn't have much trouble with this one.

Quiz 4:

Again the same as last two quizzes but now with parameters. Easy in the end but could have been less frustrating if the code was saved somewhere when jumping between clips (for checking syntax in my case). It doesn't motivate much if you have to write the same code over again.

Quiz 5:

Had to recall how to set element's id but very basic nonetheless.

Quiz 6:

Got it on my first try just as #5.

Miscellaneous notes

  • Quite a lot of hanging with the videos as others have also mentioned
  • Random bugs e.g. Reset doesn't work sometimes, removing or adding a useless whitespace in code might have an impact on the code, bug in Jasmine in quiz 5 (“Passing 5 specs” even though code's working) etc.
  • Hopefully videos are more in-depth in the future because they don't seem to provide enough information to solve the quizzes. I had to seek help elsewhere on the net.

Time spent: 1 h 45 min.

Total time: 1 h 45 min.

1. Canvas

Quiz 1:

17.2 Bugs,bugs,bugs… can't submit or even test my code. I'm fairly sure I got it right so I'm gonna skip this one.

23.2 Finally they got the grading system working! As I thought the answer was correct.

Quiz 2:

17.2 Jasmine's still broken… Maybe I should wait 'til they get it fixed before continuing.

23.2 Hmm, I got my code working but I don't quite get why do I need to declare the image as global (img = new Image();)

Quiz 3:

This one was easier. Got it on my first try.

Quiz 4:

This last task took some time and I'm not sure if I got it right. I got all 10 passes but no animation, just one still picture. After seeing the answer, I changed my current frame-handling to match the frame-handling in answer which did the trick and animation now works. I still don't know why my first answer didn't work, though.

Miscellaneous notes:

  • Interesting information about image formats and graphics
  • The grading system works now but there are still some problems (quiz 4 in my case)

Time spent: 1 h 51 min.

Total time: 3 h 36 min.

2. Atlases

Quiz 1:

Forgot already how JSON-parse worked, so I had to check it from previous lessons. The quiz itself took almost an hour to get it right. Funny how the instructions seem to make the quiz harder than it actually is.

Quiz 2:

Another hour for this quiz (these are getting quite difficult). Had to check the discussions for hints. Maybe I should recall some of the basics of JSON because that is where I seem to have most problems.

Quiz 3:

After seeing this image: https://forums.udacity.com/questions/100026218/little-explanation-about-trimming#cs255 and some math, it was actually pretty easy.

Quiz 4:

Pretty straightforward.

Quiz 5:

Ok, I don't know if it's a bug but why are they using global variable in the quiz but “this” in instructions and answer. Both of them seem to work as it should, though.

Quiz 6:

Took a while to get this one right. I knew the main principles of what I had to do but got confused with “map” and “gMap”, and even though I got the quiz done, I'm not sure if I understood it. My image's “src” attribute is a bit different, too. Better return to this later.

Quiz 7:

Pretty easy after checking the map.json-file (which I, of course, didn't do until I started to feel hopeless ;)). NumXTiles and numYTiles needed some extra work understand it.

Quiz 8:

Bleh, took several days to understand what to do. Had a hard time understanding the structure of the map.json-file but now I think I got it. Definitely should have had some kind of graphical presentation of the file. Luckily, there are posts in the discussion that explain stuff more thoroughly e.g. http://forums.udacity.com/questions/100033127/how-does-the-indexing-scheme-work which explains all you need to do to pass the quiz and then some.

Quiz 9:

This one had better intructions, and I got the basic structure done quite easily but couldn't submit it at first because of a typo.

Quiz 10:

This wasn't too hard either. The only thing I forgot to do was multiplying the location by tileSize so the output (world) looked quite bizarre at first.

Miscellaneous notes:

  • Definitely hardest one as far as quizzes are concerned so far
  • Again had to seek hints elsewhere to solve quizzes
  • Deep dive into map data-part didn't make much sense when watching it first time.
  • Inconsistencies between quizzes and answers in videos (quiz #5 and #6)
  • Hard to debug some errors in the code (quiz #9)

Time spent: 4 h 54 min. (plus some extra time to dive into map.json)

Total time: 8 h 30 min.

3. Input

Quiz 1:

Lots of bugs again:

  1. document.getElementByID → document.getElementById
  2. addEventHandler('event name', eventHandlerFunction) → addEventListener('event name', eventHandlerFunction)
  3. In task #2 you'll need to return clientX-value. What's with the posx?

Quiz 2:

This includes bugs as well: you need to add “this.” to all event handler functions (when calling them with addEventListener) to get it work. Otherwise, it's quite simple.

Quiz 3:

Nothing too hard if one understands the key-binding-action-relationship.

Quiz 4:

Had to check how to modify coordinates of a vector object but otherwise I didn't have much trouble solving it.

Quiz 5:

Umm, what? The answer's filled already!?!?

Quiz 6:

Hmm, doesn't seem to check my code at all. You'll get “correct” answer just by clicking submit. The quiz looks quite simple but since I can't check my code, I don't know if I got it right. After watching the answer video: what about diagonal firing? Edit: Ahh my bad, diagonal firing is indeed implemented in the answer. These videos are so short I didn't catch it at first.

Miscellaneous notes:

  • I wonder if they have checked the quizzes for bugs before releasing
  • Maybe I should check this part again later when/if they have fixed most of the bugs

Time spent: 1 h 49 min.

Total time: 10 h 19 min.

4. Entities

Quiz 1:

A different type of quiz this time. Got it on my second try.

Quiz 2:

Classes have become familiar during this course so I didn't have trouble constructing one.

Quiz 3:

Nothing too complicated.

Quiz 4:

Had to think for a while. I wonder what the second set of parentheses mean in “new”?

Quiz 5:

Bah, took about 20 minutes looking through files because I just couldn't get the answer right. After a while I realized that I just had forgotten to initialize the variable in for-loop. I guess it's time for a break…

Quiz 6:

Ok, so it blows up one call after its lifetime has reached zero.

Quiz 7:

Bug: call update if “_killed” flag is false. Otherwise simple.

Quiz 8:

This took some time. Would have taken less time if they had mentioned that there was an erase-function in core.js.

Quiz 9:

Seems that you'll get correct whatever you put in currSpriteName and draw. I personally don't even remember the draw function anymore.

Quiz 10:

Same as in quiz #9, the grader doesn't check the code. Yeah, I guess the bucketized method is more effective than my solution. And since the grader doesn't work, I don't know if my code code even works.

Miscellaneous notes:

  • I wonder if the grader system supports inner loops at all 'cos my browser crashes every time I try to use one. Or am I missing something?

Time spent: 1 h 43 min.

Total time: 12 h 02 min.

5. Physics

Quiz 1:

Got a little ahead of myself and started already calculating outer borders of the images and comparing those. Answer was a little simpler. Got it after 5 minutes though.

Quiz 2:

I got it correct but my solution differs a lot of the given answer. Also, I don't quite get how, for example, r2.left > r1.right comparison is enough to check if objects intersect with each other.

Quiz 3:

Okayyy… now this quiz wasn't structured very well in my opinion. Cookie for the ones who got this on their first try ;).

Quiz 4:

I think this was pretty self-explanatory.

Quiz 5:

Sob, I wanted to see how far the rabbit hole went :(. I don't recall them saying anything about either designing new physics engine or using existing one.

Quiz 6:

In the end, pretty simple.

Quiz 7:

I don't know if it's a bug but you have to use “this.PHYSICS_LOOP_HZ” insted of just “PHYSICS_LOOP_HZ” to get the framerate. Edit: Yeah, I think it's just a mismatch between comment and answer.

Quiz 8:

Had problems with bodyDef's type and syntax. Having some hard time understanding what I'm doing but I just try to push forward. Edit: I guess (bodyDef-object).position.Set(entityDef.x, entityDef.y) works too.

Quiz 9:

Easy as pie

Quiz 10:

Another easy one.

Quiz 11:

Again quite simple.

Quiz 12:

Got it on my first try once again. Looks like developers make these quizzes easier as we go on. Or am I actually learning something ;)?

Quiz 13:

Easy peasy lemon squeezy, indeed.

Quiz 14:

Same as the above.

Quiz 15:

-||-

Quiz 16:

After some trial and error, I got it right.

Quiz 17:

Of course, I should have done some sanity checking, and check if the owner has maximum health.

Miscellaneous notes:

  • I wonder, what was with the end of the quiz #7 intruction video?
  • Damn, the instructor talks fast.

Time spent: 3 h 53 min.

Total time: 15 h 55 min.

6. Sound

Quiz 1:

Sounds pretty reasonable.

Quiz 2:

Just some initializing. Nothing too hard.

Quiz 3:

The last part of my code was a bit different than in the given answer.

Quiz 4:

Better check XMLHttpRequests from Optional Javascript Crash course once again. Having some problems with asynchronous loading. Sometimes it fails at: “should set clips[path].b to the sound buffer decoded by decodeAudioData”, sometimes: “should return a Sound object” and sometimes at: “should set clips[path].l to true once done decoding audio” with same code. Tried this about half an hour, then I checked the answer and fixed errors but still not getting it correct. I think the grader is buggy. Edit: The next day, I tried to submit my code and sometimes I get errors but sometimes I also get 100% correct. So my conclusion is that the grader is problematic.

Quiz 5:

According to discussions I've got correct code but because of race conditions, I can't get it correct for the grader. Sometimes I hear the sound effect (explosion, I think) but still don't get correct. Edit: Got 1 time 100% correct by clicking “test run” but not by clicking “submit”, I'm gonna skip this one.

Quiz 6:

Same thing as two previous quizzes but now I managed to get correct by clicking submit for about 3 minutes straight.

Quiz 7:

Still can't submit my code correctly but very easy nonetheless.

Quiz 8:

The callback function of loadAsync was probably the only one that I had problems with. Still can't submit correctly.

Quiz 9:

Had to draw some pictures to get an idea about distances. Had some problems with task #3 although now that I've seen the answer, it shouldn't have been that hard.

Miscellaneous notes:

  • More grader problems (race conditions).
  • Sometimes when I continue to answer/view answer, I get to the next quiz immediately. Meaning that the instruction clip doesn't play when it should.
  • 2 task “#1”s in quiz #8.
  • I think I should return to this after/if they fix the race condition-problems.

Time spent: 3 h 11 min.

Total time: 19 h 06 min.

7. Asset Loading

Quiz 1:

Pretty obvious in my opinion.

Quiz 2:

The grader suggests to use “===” when comparing with “null” but with it you don't pass the quiz (have to use “==”).

Quiz 3:

Took quite a while to figure this one out. And it didn't help much to have null-comparison filled as “===” when it can't pass the test.

Quiz 4:

My code differs quite a lot from the given answer but it passed the tests. Also, when I tried to implement the given answer to my code and it stopped working…

Quiz 5:

Yeah, I was right about the given answer in the previous quiz. According to discussions, my code's right but since developers' code is buggy, tests are not passed.

Miscellaneous notes:

  • Still some random jumps between videos. For example, after watching the first clip, it skipped second, and started playing the third one. It could be a browser issue.
  • Would have been interesting to see how much asset manager speeds up loading times compared to individual asset fetches.

Time spent: 2 h 27 min.

Total time: 21 h 33 min.

8. The Game

I am trying to do a simple platformer game with at least following features:

  • Couple of platforms on top of which the player moves (by using keyboard).
  • Falling objects which award points (and possibly decrease, too).
  • Falling from platform results in Game Over.
  • Possibly some increase in difficulty as time passes (more smaller platforms, objects falling faster or something).
  • Sounds

Progress 20.5.2013:

  • Batch loading of assets done though I'm still lacking most of the assets.
  • Structure of the game engine done (order of world simulating, drawing, collision handling, input handling etc.)
  • Little bit of physics
  • Basic structure of entities

I think I'm trying to get the game engine and physics done first since I'm still looking for suitable images and sprites. However, my first priority is to get the exams done and after that I'm concentrating on this work.

Final version: Play! (Use Firefox, for some reason doesn't always work on Chrome) Source

Idea: The idea of the game is to collect as many fish as possible as Tux the penguin while avoiding falling from platforms. Player moves with arrow-keys(Left, right and up to jump). Tested on Firefox.

Comment on project: Definitely I'm not very satisfied for my project since there're quite a few bugs I had no time to fix. If I had used some other guide or book than Udacity's course as base, I'm fairly sure I would've spend my time more effectively. But since I started working the same way as they did on the course, I wanted to finish it the same way, too. That's why the game code is mostly based on the code presented in the course with my own code added.

Known bugs:

  • Player can practically fly while pressing up-arrow. (Maybe I should have picked a different avian as character)
  • Entity's bodies and rendered sprites are a bit out of place. Meaning that player may sometimes fall through platform and sometimes walk in the air.
  • Sometimes the game engine doesn't recognize collision. Meaning that sometimes fish doesn't disappear instantly when it hits player or platform.
  • Because of the problem in collisions (see above), the player may get more points from a fish than she/he actually should.

Used sources:

Used time: Maybe 50 h