sound on
OVERVIEW
Hit the Virus is a cyberpunk-style single-player game project, theming hitting the virus inspired by the worldwide covid situation. UI and UX are specifically concerned in this project.
GOAL
Hit the Virus is a project for the course Creative Coding Lab. The goal is to practice the front-end coding skill and simple game development process concerning UI and UX.
DOMAIN
Front-end Coding / Game Development
TOOL
ROLE (Team size 2)
Javascript / p5.js
Ideation/ Engineering
How It Works
In response to the global pandemic and insipred by the bouncing ball games, we created Hit the Virus with the goal of using minimum text-based instructions but provide intuitive and playful experiences, and create a gameful opportunity to rethink about the global pandemic situation.
-
Start the game by hitting the Space Bar.
-
Launch the ball to hit the virus by hitting the space Bar.
-
10 Launches is allowed each round.
-
The virus has a renewing blood bar so really beat the virus in time. (Minimum three hits in row can kill the virus)
Bouncing Ball Game
Process
Pre-Production
Brainstorm and design the primary interaction method.
We would like to make the game intuitive and straightforward, the element of a bumping ball (the virus) meets the requirement. As we thought about the mechanism of the launching pad, we went through different versions and finally decided to use a rocker launch pad. The brainstorming struggles could be seen in the drafts below.
Production
01 Switch the launch pad design.
We were using a moving blocker before thinking of switching to a rocker launch pad. The reason why we made this move is that the direction of the bouncing ball always stays the same as we prototyped the moving blacker. Then we redesign the launch pad and here's the working prototype in p5.
https://editor.p5js.org/tj1059/sketches/sO9dtntTs.
02 To be a game - OOP and stages
The prototype works well for one-time trial of the game, while we saw part of the whole picture of the difficulties that we should be able to separate each game state individually. We then tried to modify what we had at that time into an object-oriented programming format, which was a huge challenge for us. Thanks to the help from our professor Steele, learning assistant Linda and fellows, we finally tidied up our basic logic within the code – creating different classes and methods, and defining different game states to call the according to methods to run the game.
03 User test & UI UX concerned
We conducted simple user tests in class. For example, through user tests, we found most of the users can easily recognize the rules and goals of this game. What surprised us was that instead of continuously launching the ball for random hits, most of the users prefer to launch each ball carefully so that they can hit the virus more accurately. In response, we designed a time counter on the launching pad.
In addition, we added a restart button, and accommodated the game with different sizes of windows. To increase the playability we also created a blood bar for the virus. The goal of the game was therefore to literally “kill” the virus before it recovers. (This is one of my proudest development of our project:)
The UI stays in the cyber-punk style to create a playable experience. We also selected audio sources and switched mouse interactions to key interactions for a better user experience.
Takeaway
This is one of my early-stage coding projects, and also the very first front-end game project. Our team's goal is to make an interactive game with a simple and clear UI and a relatively high degree of playability. There are two main takeaways from this project. The first is that we should be subject to changes in plans. We changed our project idea/plan in detail several times. For example, the blood bar is decided to be added right the eve before the final presentation. It turns out this is a good decision. The second takeaway is to take the challenge and never give up. At that time we both didn't know much code, each modification and progress counts an amount of time and study. But as we had a clear goal in mind, we managed to make it in time and we achieved what we set out to do.
Showcase：Exhibit on Fall 2020 IMA show