Demo Day Overview: Code Your Own Games

Nowadays, many children like to use the Internet as a platform to play games. Some parents are worried that their children will get addicted to gaming and this will adversely affect their academic performance. As a result, they may hesitate to allow their children to use the Internet for an extended period of time. In our perspective, however, the most effect method is not to stop children from playing. Instead, we should use games as a means to teach children how to think logical and creatively.

In this article, we will show you how our students apply their programming skills and imagination to build games!


“Kill the Cockroaches” by Madhavi Chakravorty

Most people are scared of cockroaches and there is no exception for Madhavi. The reason behind the creation of his project is primarily out of a fear of cockroaches! Madhavi is afraid of killing them in real life and so he decided to create a game that allows him to “kill” cockroaches without facing them directly.

When the game starts, a cockroach will appear at a random position on the screen. There is also an insecticide spray that follows the cursor.

When the player clicks on the screen, the spray will tilt a little to the left and back to its original position to simulate how people spray. To kill the cockroach, players have to click on the cockroach image before it disappears and reappears at another position.

Can you guess what kind of project this game belongs to? It is actually a web programming project. Madhavi applied his knowledge in HTML, CSS, JavaScript, and jQuery to build this game! He also shared with us the script for making some interesting effects.

For example, to rotate the spray 20 degrees anticlockwise to “spray” the target and then back to its original position, we need the following code:

When users click on the left key (which is the “mousedown” event), a function is triggered to make the spray turn anticlockwise by 20 degrees (which is “-20deg” in the script).

When users release the left key (which is the “mouseup” event), another function is triggered to make the spray turn clockwise by 20 degrees (which is “20deg” in the script).

Madhavi has put much effort in creating this game. Nonetheless, Madhavi believes that the game can be improved. In the future, he plans to add a scoring system to show how many cockroaches have been killed. Madhavi’s project demonstrates how we can apply programming skills to create a game that help us face some of our greatest fears. Well done!


“Roast Beef Game” by Jerry Chen

Next up, we have Jerry’s game project. Jerry’s project is a simulation of roasting beef. It is indeed a popular game among teenagers and young adults alike. As Jerry mentioned, being able to complete tasks and gain points in games can sometimes help relieve stress at school or at work.  

Jerry got this game idea from a food technology class. He then combined it with the game “Cooking Graze” that he played earlier.

 Credit: Big Fish Games

When the game starts, players will see a piece of raw beef, a burning fire and a hungry boy:

There is a score count which shows the number of beef being eaten. There is also a restart button for players to reload the game. When players move the raw beef to the fire, the beef will turn from red to brown:

This shows that the beef is cooked and is ready to eat. In that case, players have to move the beef to the boy and click on the boy. This will add 1 to the score count and the beef will turn red again to indicate that it is raw.

Jerry also applied web programming techniques to create this game. For instance, to make the beef turn brown, Jerry used the following code:

When the beef is moved to the fire (which applies the “mouseover” event), the degree of heat will be updated by 1. If the degree of heat is over 3, the raw beef icon will be replaced by the cooked beef icon.

This app shows us that games are indeed excellent inspiration for creative projects! In the future, Jerry wants to add some interesting features such as a piece of green rotten meat that players should avoid. We certainly look forward to the updated game!


“Bubble Prick” by Emily Ouyang

Last but not least, we have Emily. Different from the last two students, Emily used AppInventor instead of a web programming platform to create her game. The aim of this project is to make a bubble as big as you can without being popped by the pins.

This is how the game looks like:

To grow the bubbles, players need to push the “press” button. But at the same time, players should avoid the bubble being popped. There is also a “reset” button for players to reload the game.

In fact, Emily herself is a fan of popping bubbles. This is what motivated her to create this game. She created a “reset” button so that players do not need to scan the QR code to load the project again if they want to try again. In the future, she wants to add a time counter to show how long the bubble can endure before it pops!

We are very proud of our students for their dedication and creativity in building projects which are interactive and intriguing. Instead of asking children to quit gaming, let’s turn it into an opportunity to learn!

Share This"
Follow First Code Academy on:
5/F, Gee Tuck Building,
16-20 Bonham Strand, Sheung Wan, Hong Kong
Tue to Fri: 10:00AM to 7:00PM
Sat: 9:00AM to 6:00PM
+852 2772 2108
+852 2772 2101