{"id":42,"date":"2008-02-01T18:14:38","date_gmt":"2008-02-01T17:14:38","guid":{"rendered":"http:\/\/www.bluej.org\/mrt\/?p=42"},"modified":"2020-05-15T15:46:26","modified_gmt":"2020-05-15T15:46:26","slug":"teaching-my-daughter-to-code-part-iii","status":"publish","type":"post","link":"https:\/\/blogs.kcl.ac.uk\/proged\/2008\/02\/01\/teaching-my-daughter-to-code-part-iii\/","title":{"rendered":"Teaching My Daughter To Code, Part III: Prepare The TARDIS!"},"content":{"rendered":"

The third part of my endeavours to write a Dr Who computer game with my daughter<\/em><\/strong><\/p>\n

\"\"<\/a><\/p>\n

If you’re reading this, then you probably already have an idea what this is about: An ongoing project to write a Dr Who-themed computer game with my daughter Sophie, who is 10 years old. (Yes, she’s 10 now – it was her birthday earlier this week!)<\/p>\n

This is the third part of this story. In part I <\/a>we got the Doctor to move, and in part II<\/a> we added some Daleks. This time, we giving the Doctor something to do, something worthy of the last of the Time Lords: Collecting energy pellets for the TARDIS.<\/p>\n

<\/p>\n

\"\"<\/a><\/p>\n

So, it was time for another programming session with Sophie. We hadn’t done anything with the game for a week, other than talk about possible stories and plot lines a few times. One thing Sophie had decided on over time was this: There should be multiple levels in the game. What we are doing right now is the first level, and the Doctor uses the TARDIS to get to the next level.<\/p>\n

\"\"<\/a>(A short interlude for those readers who are not intimately familiar with the Doctor<\/a>, Daleks, Cybermen, Time Lords, etc.: The TARDIS<\/a> is the Doctor’s ship. He uses it to travel \u2013 in a somewhat uncontrolled manner \u2013 through time and space. For some reasons \u2013 it’s a long story… \u2013 the TARDIS has the form of a London Police Call Box. And it’s bigger on the inside…)
\nAnyway, we decided that the TARDIS has run out of energy. The task for the Doctor is to collect energy pellets. When he has collected enough of them, he can go to the TARDIS and travel to the next level.
\nSo far, so easy.<\/p>\n

So Sophie and I sat down at the computer again (Sophie at the keyboard, and I watching from the sidelines), and fired up Greenfoot<\/a> with the DrWho scenario. When we had a look at where we left off last time (Daleks moving back and forth over the screen, the Doctor running around between them) Sophie didn’t like the fact that the Daleks did not switch around when they changed direction. So first, she decided to make the Dalek image switch.<\/p>\n

The good thing about this is that we had done something very similar before: we had also made the Doctor’s image switch with his direction.<\/p>\n

This neatly introduces the overall theme of this session: Practice of what we’ve seen before.<\/p>\n

This time, I did not introduce anything really new in terms of concepts or syntax. We are at a stage now where we can achieve quite a bit with what we have seen. So we just used constructs and techniques that we had seen in previous sessions, and applied them differently.<\/p>\n

The great thing about this was that Sophie could do most of it pretty much on her own, with much less help and instruction than before. But let’s do that one step at a time. The game we started with looked something like this:<\/p>\n

\"\"<\/a><\/p>\n

The Daleks were facing left, even when they moved right. So we mirrored the Dalek image (using Photoshop) and saved it into the scenario’s images folder under the name ‘dalek-right.png<\/em>‘.<\/p>\n

Then, we had a look at the code for the Doctor, and Sophie found the instruction that changed the image. It was<\/p>\n

   setImage(\"dr-right.png\"<\/span>);<\/pre>\n
The Dalek’s act method contained this code:<\/p>\n
   if<\/span> (movingLeft)\r\n   {\r\n       moveLeft() ;\r\n       if<\/span> (atWorldEdge())\r\n       {\r\n           movingLeft = false<\/span>;\r\n       }\r\n   }\r\n   else<\/span>\r\n   {\r\n       moveRight();\r\n       if<\/span> (atWorldEdge())\r\n       {\r\n           movingLeft = true<\/span>;\r\n       }\r\n   }<\/pre>\n
So I asked Sophie where the setImage<\/em> instruction should go, and she worked out that it should be within the inner if statements. We then got this:<\/p>\n
   if<\/span> (movingLeft)\r\n   {\r\n       moveLeft() ;\r\n       if<\/span> (atWorldEdge())\r\n       {\r\n           setImage(\"dalek-right.png\"<\/span>);\r\n           movingLeft = false<\/span>;\r\n       }\r\n   }\r\n   else<\/span>\r\n   {\r\n       moveRight();\r\n       if<\/span> (atWorldEdge())\r\n       {\r\n           setImage(\"dalek.png\"<\/span>);\r\n           movingLeft = true<\/span>;\r\n       }\r\n   }<\/pre>\n
Next, we wanted to make energy pellets. So I suggested to Sophie to make another class now for this. She looked at the diagram of the classes we already had, and asked: “Should they be a Mover, or just an Actor?”<\/p>\n
I thought that was fantastic! She had clearly understood the subclass relationship as a specialisation (an is-a<\/em> relation) and was thinking about the right things. We agreed that the pellets would not move, so Sophie created them as a subclass of Actor.<\/p>\n
The class creation dialogue in Greenfoot lets you choose an image for the class, so she browsed through the available images for a while. While she was looking around there, she discovered an image of a skull, and she was quite excited, and said: “Look, there’s a skull! We can use that later. Then the Doctor is not allowed to step on it, or he dies!”
\n\"\"<\/a>I have seen this before: just looking at the available images often seems to set off new ideas about things one could do. The power of images.
\nAfter a little browsing, Sophie chose an image of a reddish round thing, and we had our EnergyPellet<\/em> class. We could now immediately compile and place some energy pellets into the world to see what it looked like.<\/p>\n
It looked quite okay. Not bad at all.<\/p>\n
So, next came the task to make the Doctor collect the pellets. Again, we had done something quite similar before: We had code in the Dalek to remove the Doctor when they ran into him. So we only had to adapt that code for the Doctor to remove the pellets when he ran into them.<\/p>\n
After I pointed out that the Dalek code is quite similar to what we need, Sophie quite easily managed to copy and then modify the code for the Doctor:<\/p>\n
   if<\/span> ( touches (EnergyPellet.class<\/span>))\r\n   {\r\n       remove (EnergyPellet.class<\/span>);\r\n       Greenfoot.playSound(\"exterminate.wav\"<\/span>);\r\n   }<\/pre>\n
We decided to leave the counting for later, and just remove the pellets for now. Later, we want to add a counter so that we know how many we have collected.<\/p>\n
This worked really well, except that it now shouted “EXTERMINATE” when the Doctor picked up a pellet – that’s not right. So we also needed a new sound.<\/p>\n
Sophie this time wanted to use a real Doctor Who sound (with David Tennant’s voice – that 10th Doctor \u2013 that’s the one she knows). And he should say something like “Got it!” or “Hurrah!” or “YES!!” or some such thing. So we then spent the next 20 minutes searching the internet for Doctor Who sound files. There are quite a lot actually (and we may use some later) but there was nothing usable for this situation. So we decided to make our own again.<\/p>\n
We saved the sound in the “sounds” folder and changed the code to use it. Quite straight forward – no problems here.<\/p>\n
Next, we decided to change the background. We had already said a few times before that it looks a bit dark, so we had a play with Photoshop. We created an image the same size as our world (750 x 450) and used a filter (Render > Difference Clouds<\/em>) to get some noise on the screen. Then we fiddled a bit with Color Balance and Hue\/Saturation, and we were done. After saving the image file and using it, this is what it now looked like:<\/p>\n
\"\"<\/a><\/p>\n
Almost done. One last thing was that we wanted the actors (the Doctor, the Dalek, and the pellets) to show up automatically, so that we don’t always have to create them new. So we opened the Mars class, and added code to the constructor to create these objects and place them into the world. The Mars constructor now looks like this:<\/p>\n
    public<\/span> Mars()\r\n    {\r\n        \/\/ Create a new world with 20x20 cells with a cell size of 10x10 pixels.<\/span>\r\n        super<\/span>(750, 450, 1);\r\n\r\n         addObject( new<\/span> Doctor(), 200, 400);\r\n         addObject( new<\/span> Dalek(), 380, 320);\r\n         addObject( new<\/span> Dalek(), 100, 120);\r\n\r\n         addObject( new<\/span> EnergyPellet(), 150, 75);\r\n         addObject( new<\/span> EnergyPellet(), 610, 290);\r\n         addObject( new<\/span> EnergyPellet(), 25, 200);\r\n         addObject( new<\/span> EnergyPellet(), 310, 160);\r\n         addObject( new<\/span> EnergyPellet(), 520, 110);\r\n         addObject( new<\/span> EnergyPellet(), 670, 400);\r\n    }<\/pre>\n
After every successful compile, an object of the world subclass is automatically created and shown in the main window. This includes, of course, executing that object’s constructor. The effect is that now the Doctor, two Daleks, and a few energy pellets are automatically created as well.<\/p>\n
That’s it. We played for a while, and tried to collect all pellets without getting caught. It’s not as easy as it looks! Try it yourself<\/a>.<\/p>\n
One of the nice things about today’s session was that Sophie could do a lot on her own. I introduced a lot fewer new things, and she could practice what she had seen before: Changing the image, detecting other objects, etc. That was good.<\/p>\n
And we got a lot of ideas for things we want to do next… But you’ve got to wait until next time to find out about those.<\/p>\n
Summary:<\/p>\n
Session #3
\nTime: 40 min (excluding 20 minutes random and unsuccessful web searching)
\nResult (live on the Greenfoot site): DrWho3<\/a>
\n(Source code can be downloaded from the link above.)<\/p>\n
Next: Dr Who Part IV: Return of the Daleks<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
The third part of my endeavours to write a Dr Who computer game with my daughter If you’re reading this, then you probably already have an idea what this is about: An ongoing project to write a Dr Who-themed computer … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":179,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15,8,13],"tags":[34,44,53,107],"class_list":["post-42","post","type-post","status-publish","format-standard","hentry","category-greenfoot-software-tools","category-programming","category-teaching","tag-coding","tag-dr-who","tag-greenfoot-software-tools","tag-teaching"],"_links":{"self":[{"href":"https:\/\/blogs.kcl.ac.uk\/proged\/wp-json\/wp\/v2\/posts\/42","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.kcl.ac.uk\/proged\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.kcl.ac.uk\/proged\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.kcl.ac.uk\/proged\/wp-json\/wp\/v2\/users\/179"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.kcl.ac.uk\/proged\/wp-json\/wp\/v2\/comments?post=42"}],"version-history":[{"count":5,"href":"https:\/\/blogs.kcl.ac.uk\/proged\/wp-json\/wp\/v2\/posts\/42\/revisions"}],"predecessor-version":[{"id":981,"href":"https:\/\/blogs.kcl.ac.uk\/proged\/wp-json\/wp\/v2\/posts\/42\/revisions\/981"}],"wp:attachment":[{"href":"https:\/\/blogs.kcl.ac.uk\/proged\/wp-json\/wp\/v2\/media?parent=42"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.kcl.ac.uk\/proged\/wp-json\/wp\/v2\/categories?post=42"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.kcl.ac.uk\/proged\/wp-json\/wp\/v2\/tags?post=42"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
We went back to Audacity<\/a>, and Sophie recorded herself saying “Got it!”. The idea was to then change the pitch to make the voice lower. Doing this, it still sounded nothing like the Doctor. But playing around with it a little, we discovered that making the pitch higher, while still nothing like the Doctor, sounded quite funny. So we gave up on trying to emulate David Tennant’s voice and just went for funny.<\/p>\n
\"\"<\/a>Actually, this is not quite true. Sophie first got the two images the wrong way around, so that the Dalek then always went backwards, but that was interesting, too, and she managed to fix that easily then. The version shown above is the corrected version.<\/p>\n