Concept and User Interaction
One of the games that went viral in South Korea is the Ideal Type World Cup. It’s a simple game where several rounds are played, each presenting two options of celebrities, and you have to choose one out of the two. The selected option advances to the next round, and you continue choosing the one you like more until there is only one winner left.
Recently, while I was studying, I wanted to take a break, so I decided to play this game with my friends. I found one on the internet about the ideal Korean male actor and then played another one about food. Then, it occurred to me that it would be very interesting to try making this World Cup with the food we have on campus. The final idea for my midterm project is to create a Campus Food World Cup, where there will be photos of food from places on campus (Marketplace, D2, D1, Mysk, Blacksmith, etc.). Users will click on the photos of the food they prefer to find out what their top campus food is.
Design
Some elements that I would like to add to my project, as part of the design, include a beautiful interface and fonts. Additionally, there will be background music playing during the game and another piece of music at the end of the game. When the user selects the winner, I would like to add a sound effect. The overall interface will feature colors related to our campus, using NYU colors, etc., to establish a connection with our campus. Also, on the starting page, I plan to add some text about our campus and the dining systems we have.
Code
The biggest challenge I faced initially when I started to conceptualize the logic for my project was figuring out how to make my code remember the winners I had chosen from each round and continue the game to the next round until there was only one winner. To understand how the logic should work, I decided to experiment with numbers before loading all the pictures and designing the project. Therefore, I created an array of 32 numbers.
To facilitate several rounds of the game, I introduced a ‘winner’ variable, which would be determined by the mouse location.
if (currentPair.length === 2) {
let winner = (mouseX < width / 2) ? currentPair[0] : currentPair[1];
nextRoundCandidates.push(winner);
If the mouse location is on the left half of the canvas, the ‘winner’ variable would be the element on the left side, and the same logic applies to the right side.
Then, I created an array called ‘nextRoundCandidates’ so that the array would contain all the elements that should pass to the next round.
if (currentRoundCandidates.length === 0) {
if (nextRoundCandidates.length === 1) { // If only one candidate remains, the game is over
gameIsOver = true;
return;
If there are no more candidates left for the next round, the program recognizes that the game is over.
if (gameIsOver) { // Restart the game if it's over
gameSetup();
return;
}
The program then executes the gameSetup() function.
function gameSetup() {
// Reset and reshuffle the game for a new start
candidates = Array.from({length: 32}, (_, i) => i + 1);
currentRoundCandidates = shuffle(candidates);
nextRoundCandidates = [];
currentPair = [];
updateCurrentPair();
roundNumber = 1;
gameIsOver = false;
loop(); // Restart the drawing loop
// Show a restart message
showMessage = true;
messageStartFrame = frameCount;
}
This code resets the game to its starting conditions, reshuffling the candidates and resetting all relevant variables for a new game.
Although there are still many aspects to add to this project, I am pleased that I was able to write the code for the main logic of the game. Now, I will focus on the details and design part of the project to make it visually appealing.