Wednesday, February 12, 2014

Lesson 51 - Big In Japan

Just wanted to welcome my newly found Japanese readers!

This is continuation of my story about me and my 4-year old daughter writing a simple game "Princess vs Lion". Please have a look at the previous posts for details!

Today I once again used the cheap trick of starting our session with "code juice" (actually orange smoothie). Also change the original plan of learning Javascript functions to a more visual one. Today it was time to bring the Princess on the stage.


This is a figure my daughter drew a while ago and that we already scanned together on her Macbook. Before today's session I converted the scanned images to PNG format and gave them sensible names: prinsessa.png and leijona.png (princess and lion they are). Then I took her to the command-line prompt again. It was time to recap some file and directory stuff. Like

    mv Desktop/prinsessa.png karkuun/

That was to move the princess image file to the directory where our game-under-development resides. Then

    cd karkuun
    ls

That was to "go" to the karkuun directory and list the files in there. She didn't remember much of the command-line skills we had practised earlierly. Actually ls was the only one she properly remembered. We had a brief look at the files in the directory. Then

    open index.html

.. to open the game's HTML page on the browser. And Cmd-Alt-J to open the "secret drawer" that is the Chrome Developer Tools section where we can play around with Javascript. This 3-finger shortcut she did remember, with just a little help. Then I introduced to here a newly written helper function "image" that can be used to display an image on the page. So by running

    image("prinsessa.png")

...we got the picture of the princess on the page. There was much rejoicing. And by the way at this point we had spent like 15 minutes mostly discussing this and that and singing and laughing and doing occasional somersaults on the bed. And doing computer stuff in the middle. She had had the idea that we'll so a little theatrical show right after our session to the rest of the family. It was a bit hard to concentrate, but it was fun anyways.

Yet, she wanted to save our work before quitting. So we went to command-line, used vim to add the same piece of code

    image("prinsessa.png")

...to our main Javascript file game.js. Then was time for the show. It was a success and the audience (mom) gave a standing ovation. Good times!

Oh and I told her that people in Japan are reading about her adventures.

6 comments:

  1. "gave them sensible names: prinsess.png" -- still stuck to 8+3 filenames? Just kidding, you mean prinsessa as later evident. :) And what a beautiful prinsessa she is.

    ReplyDelete
  2. Oh, fixing was not really necessary but ok. Did not mean to nitpick, but found the incidental 8+3 just too funny. Perhaps it was hilarious in my inner space only and embarrassing to anyone else. :) It might be wise to spare those 8+3 file name tales to our grandchildren only.

    ReplyDelete
  3. Hello ! I am one of "japanese readers" :-). I enjoy to read your previous articles.

    ReplyDelete
  4. Amazing! I'm same Daddy! My daughter is 5 years old, she cannot do coding but she like drawing with iPad.

    ReplyDelete
  5. After reading your first article, I tried the same thing with my 4-the-same-year old girl.
    here is the youtube of her first try:)
    http://www.youtube.com/watch?v=_cjvCdCdEq8

    ReplyDelete