Num-Num Intern

• 

  Game Initialisation

• 

  Change of Direction

• 

  Game Over

Inspiration

Most of my friends who wish to be a software engineer as future career are grinding Leetcode questions and having headache getting an offer from a high-tech company, including myself as well. Insteading of a snake hunting for fruits, why not create a similar game to simulate us hunting for internships. Although there are many difficulties during the journey, we will never give up! It will be even cooler by making the game voice-controlled.

What it does

Num-Num Intern is a Web game which is similar to our childhood snake game but controlled by voice. There will be a student with energy bars moving around and one company logo at a random location in the grid. By saying commands Go left, Go right, Go up, Go down, we can instruct the student to move in the respective direction. Once the student hits the company logo, it means this internship has been hunted. The student will gain one score and one more energy bar (similar to snake growing longer). If the student hits the wall or her own energy bar, it will be considered as a loss. Users can pause and resume the game anytime during the playing.

How we built it

I used ReactJS framework and relevant libraries such as react-voice-recognition for voice control and use-sound for sound effects.

I first created a traditional snake game controlled by keyboard with a very simple UI to test its functionality, followed by implementing the voice control feature. I then modified the UI to fit the theme of hunting for internships and added sound effects.

Challenges we ran into

As a beginner of ReactJS, understanding and applying React hooks such as useEffect was one of the main difficulties. I referred to many articles and YouTube videos to learn these hooks and eventually made my way through.

Another difficulty was to use images on React canvas. The images will disappear after re-render of the page. This was mainly due to my lack of understanding with React features and lifecycles. I searched and tried many methods and eventually figured out a feasible solution.

Accomplishments that we're proud of

I managed to implement the voice control feature and created the game UI as I envisioned.

What we learned

I learned more ReactJS knowledge such as React canvas, useEffect, useRef hooks etc. and revised Web development knowledge such as HTML, CSS and Javascript.

What's next for Num-Num Intern

There is a slight delay between verbal instruction and change of direction which can be further improved. The speed of movement can be increased as well. At this stage, Num-Num Intern is just a frontend game. To go further, I wish to implement backend features such as user login, database management and others.

Built With

• github
• javascript
• react