Cyber Hero

• 

  Cyber Hero

Inspiration

We decided to pursue the CSE Challenge since it appealed to our fun-loving nature as young adults. We felt as though we could create a game that is both informative and extremely fun and attention-grabbing for young children.

The CSE challenge provided a perfect opportunity for us to show our passion for programming as well as create a humorous and silly application that we hope puts a smile on the face of its user!

What it does

The web application is an endless tower defence game. Upon game start, the user will see bugs approaching their computer, intending to hurt the poor mainframe. It is the user's job to protect the computer and not allow the bugs to deplete its health bar. In order to get rid of the bugs, the user must click on them (or cycle through them using the TAB key), prompting a multiple choice question testing their knowledge on important cybersecurity topics and answering it correctly.

The game is endless, with the speed and spawn rate of the bugs increasing over time to increase difficulty. The game ends when prompted or when the mainframe's health is reduced to 0, as indicated by its health bar.

How we built it

We wanted to include as many basic game design features as we could brainstorm. These included catchy music, visually appealing graphics and visuals, as well as an intuitive user interface. We managed to accomplish this using React as a game engine, an unconventional choice.

The web application itself is built using TypeScript and CSS for its front end and NextJS for a bit of the back end. hosted using Cloudfare.

Challenges we ran into

Some challenges we faced were implementing React's useEffect and useState without bugs, as well as creating custom game sprites.

Accomplishments that we're proud of

Some of the accomplishments we're proud of:

• The user experience is perfectly tailored to the target audience.
• The app is extremely accessible and packed with features to enhance the user experience.
• Sprites are custom-made and animated

What we learned

• A further understanding of React applications
• Revisiting high school physics with vector calculations
• CSS styling techniques

What's next for Cyber Hero

• Adding an ingame currency, allowing users to earn credits when eradicating bugs and using said credits to buy weapons/armour to help them progress further in the game
• Adding a scoring system and a leaderboard to add a competitive aspect to the game
• Pitch the project to game publishers, specifically mobile app publishers for possible game publishment to help spread the importance of cybersecurity.

Built With

• cloudfare
• cse
• nextjs
• react
• typescript