====== Learning diary of Jouni Ikonen (HTML 5 Game development)

HTML5 Development environments:

  • Jetbrains webstorm

0. Optional Javascript Crash course part

Object, if, for, JSON. Yes I have heard about these :)

Still section 0 took me 3.0 hours to make.

Test 1 But the first test. What are they asking? How did JSON parse work - I do not remember. I can see only fail message when I try my code solution, until I change to Chrome browser. Now the feedback are show more information, which was not visible earlier. Luckily someone else had said that they had problem with the quiz and I was able to get help from answers …

Not a good start.

Test 2 (Ajax) I have to been running video back and forth. Did they ask call to asynchoronous? I had open other browser to look videos and edit solution on other, otherwise I would loose my markings. Had to also look in w3schools how did ajax onload codes go.

 weaponXHR.onload = function () {
      if (weaponXHR.readyState==4 && weaponXHR.status==200)

Ok - their solution looks different than my …

Test 3

Their solution look like mine first solutin which did not pass their tests at all. :( Aagh.

Test 4.

Again reimplementation after looking their solution. This time got their solution to compile also (after some time).

How about Index for lesson and how long sections are?

Test 5 (Dom)

I believe that I did about correct thing, but failing 5/5. And solution did not match given guidlines (:(

There are clearly bugs in this course.

Test 6 (some kind of inheritance)

Fastest (and easiest)test so far (<1min).

What now? Review did remind some consepts, but was a bit hard crash as it did not offer much help if I had some problems. I was going back and forth in videos in on browser and writing tests in another. I did not find convient way to see my previus soulutions, so some kind of index for each video and test section would be appriciated. I'm hoping that next tasks are more guiding.

1. Canvas

Spend 3-4 hours to do canvas tasks and think meaning of the tasks. Learned some of the basics of canvas. Had plenty of trouble working with some of the tasks. Luckily people write to to forums! Please more explanations to videos / helping material. We are not all starting from the same background.

2. Atlases

Learned new idea, i.e. what atlases are. Task explanations could be more wordy (if that is a word). Worked on the problems in class room with other people, which helped me with the tasks. Had couple stupid programming mistages, e.g. in logic operations.

Cordinate system was throwing me off. Earlier section talked about cordinates and said that draw position is upper left corner and now we are calculating center point of an image?

Spend two hours in first 3 problems and I still have a little bit more to go. But without help from others I would have used much more time.

So we got more sessions for Atlases.

Trimming of image in a task was again challenging. What are we actually calculating. There must be a gap of knowledge. Luckily a lot of people had taught about the same problem…

XHR request task taught me more about classes. Initially I thought I have to build functions for XMLHttpRequest, but we had a ready function which we could call, for we have to give a map and function. I also learned that you can actually write whole function there.

      xhrGet(map, function (){ 
      this.fullyLoaded = true;

And by the way answer video has diffeent xhrGet function??

Next quiz asks to load different dimension information from JSON. Thing come really quickly, so I had to go back to videos to understand what we are trying to accomplish (quiz text is not enough). Comments also helped to find JSON parser to clarify the idea. I have to learn to remember TH vs. HT, i.e. widTH, heigHT

And the battle goes on. - how do we go trough all elements

    for(var i=0; i<map.tilesets.length;i++)

2 hours more spend for Atlases and still few tasks left. Videos introduce pieces of data really fast, without leaving me time to think.