Planning & Ideas
When I first found out about this task at the beginning of week 5 I thought of making a simple program for young children to develop their understanding of sound and letters, whereby they would be presented with an object which they would then move to the correct box. E.g. an apple would be moved to the "A" box because it starts with an A sound.
However, my learning using course materials and links to external sites has deepened my understanding about the complexities of computational thinking and algorithmic coding. So, although I have learned much, I need more time to develop my coding skills to be able to successfully code such complex algorithms. Subsequently, I decided to create a simpler game where the aim was to move the coloured coins to the matching treasure chest.
To start, I drew a treasure chest in "Painter" using black straight and curved lines as I thought this image resolution would be small enough to import and work with in "Hopscotch". I then used the RGB menu to select a different colour to change the black to a green, blue, red, yellow, pink & purple colour and saved each image.
However, my learning using course materials and links to external sites has deepened my understanding about the complexities of computational thinking and algorithmic coding. So, although I have learned much, I need more time to develop my coding skills to be able to successfully code such complex algorithms. Subsequently, I decided to create a simpler game where the aim was to move the coloured coins to the matching treasure chest.
To start, I drew a treasure chest in "Painter" using black straight and curved lines as I thought this image resolution would be small enough to import and work with in "Hopscotch". I then used the RGB menu to select a different colour to change the black to a green, blue, red, yellow, pink & purple colour and saved each image.
- Note that although I created six boxes, I only used four because when I was debugging the game I found that having six boxes made it too difficult to get the coins to all the boxes on time.
Using Hopscotch
Hopscotch is a programming tool available for IPad, IPhone and Android devices. It can be used to create a variety of artefacts using algorithms set out as coding blocks. I thought this program would be a suitable platform for my game.
I then imported the treasure chest images and placed them at the bottom of the screen. Immediately I noticed that although I had altered the resolution in painter (made the image smaller), it was still to large. Consequently the first code I enters was for each treasure chest to reduce in size by 50% when the game started.
Next I needed to create a coin, so I added a round shape. I then needed to create some algorithms to:
This would involve 5 algorithms for each coloured coin using conditional algorithms, branching algorithms and iteration algorithms.
- Randomly place the coin at the top of the screen
- Move the coin down the screen at a set pace
- Allow the user to swipe the screen to adjust it's landing point
- Attach a signal that ensures the user understand they have placed the coin in the right chest
- Attach a signal the ensures the user understand they have not placed the coin in the right chest
- Repeat this process at random times
- Repeat these algorithms for each coloured coin
This would involve 5 algorithms for each coloured coin using conditional algorithms, branching algorithms and iteration algorithms.
I selected the code box for the blue coin and opened it. I then started entering all the codes that will affect the blue coin. I selected the "when game starts" code, so these algorithms will happen as soon as the game begins.
When the games starts, I do not want the player to see where the coins are so I set the coin to become invisible when the games starts.
Each coin is a standard black, until I give it a colour. So I programed the colour for each coin (blue, red, green & yellow). Because I have already told the program to make the coin invisible, it is an invisible yellow!
Now I do not want the coins to drop straight away or at the same time so I have programed the next step to happen after a random amount of time between 999 and 50 milliseconds (for this coin). I used other numbers for the random wait time for the other coloured coins to increase the randomness (e.g. 400 & 1200).
After the wait time I want the player to see the coins so I programed them to then become visible.
Next, I wanted the coins to continuously fall down the screen in a never ending loop. To do this I created an algorithm at a speed of 50 (quite slow - as there will be 4 coins falling at the same time) and told it to move the coin to a Y position of -800 (this is the edge of the IPad). I wanted this to be continuous so I put this inside a "repeat forever" box - this means that the coin will continuously drop down the screen.
When the games starts, I do not want the player to see where the coins are so I set the coin to become invisible when the games starts.
Each coin is a standard black, until I give it a colour. So I programed the colour for each coin (blue, red, green & yellow). Because I have already told the program to make the coin invisible, it is an invisible yellow!
Now I do not want the coins to drop straight away or at the same time so I have programed the next step to happen after a random amount of time between 999 and 50 milliseconds (for this coin). I used other numbers for the random wait time for the other coloured coins to increase the randomness (e.g. 400 & 1200).
After the wait time I want the player to see the coins so I programed them to then become visible.
Next, I wanted the coins to continuously fall down the screen in a never ending loop. To do this I created an algorithm at a speed of 50 (quite slow - as there will be 4 coins falling at the same time) and told it to move the coin to a Y position of -800 (this is the edge of the IPad). I wanted this to be continuous so I put this inside a "repeat forever" box - this means that the coin will continuously drop down the screen.
I now want a sound to play when the blue coin hits the blue treasure chest, then re-set itself in a new position at the top of the screen.
First I selected a new coding box that uses a branching algorithm and set it to "When the blue coin bumps the blue chest"
I then selected it to play a sound for 2 counts.
I now want the coin to disappear is if it went into the chest so I set it to become invisible.
I now want the coin to become visible, but not right away. And I want it to appear at a random time so it is not easy for the player to guess. So I code it to wait for a random time of 400 to 9990 milliseconds, then re-set the coin to appear at a random X position between 100 and 700 (so it doesn't touch the edge) and the top of my screen: Y position of 700 (I don't want it to actually touch the top of the screen as that would interfere with a code I am using later)
After the coin has been reset I want to be able to see it so I code it to become visible again.
First I selected a new coding box that uses a branching algorithm and set it to "When the blue coin bumps the blue chest"
I then selected it to play a sound for 2 counts.
I now want the coin to disappear is if it went into the chest so I set it to become invisible.
I now want the coin to become visible, but not right away. And I want it to appear at a random time so it is not easy for the player to guess. So I code it to wait for a random time of 400 to 9990 milliseconds, then re-set the coin to appear at a random X position between 100 and 700 (so it doesn't touch the edge) and the top of my screen: Y position of 700 (I don't want it to actually touch the top of the screen as that would interfere with a code I am using later)
After the coin has been reset I want to be able to see it so I code it to become visible again.
Currently the blue coin will fall to the bottom of the screen. If it bumps the blue treasure chest it will play a sound then appear at a random spot at the top of the screen. But I have not coded an algorithm that tells the coin what to do when it reaches the bottom of the screen (Y is -800), so it just sits there.
I want it to do the same as the previous code, but play a different sound to indicate it didn't make it.
Consequently I can copy the above algorithm, and just make a couple of changes. As I am working on an IPad I hold the above algorithm for a moment, then the "cut, copy, paste" box appears. I select copy. Then Ensuring I am out of that algorithm, but still in the blue coin coding box I select paste.
Now all I need to do is change the branching part of the algorithm from:
when the blue coin bumps the blue chest - to - when the blue coin bumps the edge of the IPad.
Now I just need to change the sound that is played, so I highlight the coin image and select a new sound - the X.
All the other codes of the algorithm remain the same.
I want it to do the same as the previous code, but play a different sound to indicate it didn't make it.
Consequently I can copy the above algorithm, and just make a couple of changes. As I am working on an IPad I hold the above algorithm for a moment, then the "cut, copy, paste" box appears. I select copy. Then Ensuring I am out of that algorithm, but still in the blue coin coding box I select paste.
Now all I need to do is change the branching part of the algorithm from:
when the blue coin bumps the blue chest - to - when the blue coin bumps the edge of the IPad.
Now I just need to change the sound that is played, so I highlight the coin image and select a new sound - the X.
All the other codes of the algorithm remain the same.
Now the coins have the correct algorithmic code to make them move and appear as they should, but the program has all the control, the player cannot manipulate the coins.
Ideally I would have like to code an algorithm like:
Blue Coin:
Repeat forever
- Set speed to 50
- Change Y by -800
Unless self is touching blue coin then
- Set speed to 50
- Change Y by -800
- Change X to last touch of X
This would mean that the coins would always fall, unless they were being touched. Then they would continue to fall but also move sideways as indicated by dragging them with your finger. However, in Hopscotch the "or" button was limited to numbers and mathematical equations and Ipad tilts and positions. I was unable to figure out how to manipulate the coding blocks into the correct algorithm to make the code do as I wished. Consequently, I will need to do more research and experimentation to figure this out.
Instead I coded two simple algorithms:
When the IPad is swiped left, keep the same Y position and change the X position by -80
When the IPad is swiped right, keep the same Y position and change the X position by 80
Ideally I would have like to code an algorithm like:
Blue Coin:
Repeat forever
- Set speed to 50
- Change Y by -800
Unless self is touching blue coin then
- Set speed to 50
- Change Y by -800
- Change X to last touch of X
This would mean that the coins would always fall, unless they were being touched. Then they would continue to fall but also move sideways as indicated by dragging them with your finger. However, in Hopscotch the "or" button was limited to numbers and mathematical equations and Ipad tilts and positions. I was unable to figure out how to manipulate the coding blocks into the correct algorithm to make the code do as I wished. Consequently, I will need to do more research and experimentation to figure this out.
Instead I coded two simple algorithms:
When the IPad is swiped left, keep the same Y position and change the X position by -80
When the IPad is swiped right, keep the same Y position and change the X position by 80
The last code I wrote was for some text to appear explaining the objective of the game. So I added a picture (the text explanation). Then I wrote the code. When the game starts colour the text purple. Wait 4000 milliseconds. Set invisibility to 100%.
My game was now ready to play!
Playing Colour Treasure Remix
Game reflection
Notice that when the IPad is swiped ALL the coins move the same amount? I would have liked them to move independently, so I will need further debugging.
Also, another step to add would be for the coins to add up to points, and if they fall to the bottom loose a life - as I said, I need more research and debugging to successfully code the right algorithm for this to happen.
Also, another step to add would be for the coins to add up to points, and if they fall to the bottom loose a life - as I said, I need more research and debugging to successfully code the right algorithm for this to happen.
Want to try yourself?
If you are viewing this on an IPad, IPhone or Android device you can click here to play yourself. Unfortunately this platform does not work on desktop computers.