- Introducing Hopscotch -- Fun Game Programming for Kids
- Using the Hopscotch App
- Programming a Basic Game
Programming a Basic Game
Creating a new game is relatively easy. It all starts on the Create screen, where your child either selects a project template or clicks Blank Project.
If your child starts with a template, the next screen displays a video playback window in the lower right corner. This is great for youngsters just starting out -- they can watch the video and then follow the step-by-step instructions within. The video can be paused and rewound, of course, so kids don't have to rush, and can easily repeat sections they don't understand. By the time the video is done, they've created their game.
Figure 6 Watch the video, learn to code the game.
If your child chooses to start a project from scratch, he starts by adding a character to the screen. Hopscotch comes with a library of presdesigned characters -- cute animals, monsters, robots, and the like. All your child has to do is choose one.
Once a character is inserted, your child tells it what to do by adding one or more rules. A rule might instruct a character to move in a given direction, rotate to the left or right, wiggle, draw onscreen, shrink or grow, or even shoot or throw a projectile. These rules can be predicated on an action -- that is, something happens when the Play button or character is tapped, or when the iPad is tapped or tilted. A rule can even be invoked when the character bumps into something, including another character. It's basic IF...THEN stuff, but coded via simple blocks of instructions that the student drags into place. No keyboard necessary, everything is dragged and dropped with the touch of a finger on device's touchscreen.
Let's look at a simple example of adding a character to the screen and having it move around. The student follows these simple steps:
- Tap the + button at the top of the screen. This displays a panel with available characters.
- Tap the character you want. The character is inserted on the screen.
- Tap + Add a New Rule. This displays the When panel.
- Drag the block for the action you want to program onto the When section on the right. For this example, drag and drop When the Character is Tapped onto the right side of the screen.
- You now see a panel with code blocks for what that character can do. There are sections for My Abilities, Movement, Drawing, Appearance, Values, and Control Flow. For this example, open the My Abilities section and drag the Draw a Spiral block onto the right side of the screen.
Figure 7 Selecting a character for a new project.
Figure 8 Selecting a rule for the selected character.
Figure 9 Selecting an action for the selected rule.
When you're done, tap the Play button. You now see the character onscreen; tap the character and she starts moving in a circle, drawing a spiral behind her.
Figure 10 Our first project, completed; the character draws a spiral onscreen.
Now, that was a rather simple bit of programming, but you can see how easy it all is. You can program multiple actions onto a character, or different actions based on different events happening. You can even create your own character actions, such as moving forward a certain number of pixels, or rotating a certain number of degrees.
By combining these program blocks together in different ways, and by adding more characters to the project, students can create surprisingly intricate games. Yes, they'll have fun doing it -- and playing the games -- but they'll also be learning how programming works. And that's a very good thing.
BIO Michael Miller is a prolific and popular writer. He has written more than 150 non-fiction books over the past twenty-five years, along with numerous articles, blog posts, and instructional videos. His best-selling books include Computer Basics: Absolute Beginner's Guide, My Windows 8.1 Computer for Seniors, and Easy Computer Basics.