https://editor.p5js.org/hk3863/full/bszj5rkSJ
Concept
One of the games that went viral in South Korea is the Ideal Type World Cup. I have tried this game several times, and it seemed quite simple but also very interesting in the way that it makes the user think of their preferences. Another similar game is the “Balance Game,” which requires the user to choose between two extreme situations, for example, getting 10 million dollars after 10 years or one million dollars immediately. I think what makes this game interesting is that it presents situations that people can relate to.
When I decided to create an Ideal Type World Cup, I started wondering about something that could make this game much more relatable to students. So, I came up with an idea to make this game using campus food. All NYUAD students get campus dirhams, flex dirhams, and meal swipes, which could be used on campus. I think our campus offers a vast variety of food. Each student probably has a preference for certain types of food and dining places. So, my final concept for the project is to make the NYUAD Ideal Food Tournament, which will feature different campus foods.
My game contains 32 candidates, which are campus foods. The game is in the form of a tournament where the game contains overall 5 rounds. The user has to choose between the two foods that they like more. Then, the winners of each round pass to the next round until there is a winner.
How My Project Works
My code contains four game states: “OPENING,” “CAMPUS_MAP,” and “GAME.”
- “OPENING”
The first thing users see is the opening page. The OpeningScreen class in my code is designed to manage and display the initial screen of my project, typically shown when the game or application first starts.
The constructor of the OpeningScreen class takes three parameters: schoolInfo, logoImage, and diningInfo. These parameters are stored as properties of the class and represent the textual information about the school, the graphical logo image, and the information about dining options available on campus, respectively.
The display method is responsible for rendering the content to the screen. It dynamically adjusts the sizes and positions of the text and logo based on the current window size, ensuring that the visuals adapt nicely to different screen dimensions.
- “CAMPUS_MAP”
The next page that appears after clicking on the canvas is the Campus Map page. The CampusMap class in this code snippet is designed to provide users with detailed information about dining options available at a university campus. This class contains images of dining halls, marketplaces, and other food outlets, accompanied by informative labels and detailed descriptions.
- “GAME”
When the user clicks on the screen again, the gameState changes to “GAME.” During this gameState, the code displays two candidates, updates the winner, and runs the logic for making this game.
4. “ENDING”
What I am Proud of
I am particularly proud of the design for this project. Since the project is related to our campus, I exclusively used NYU colors and also downloaded the official NYU font. The game looks aesthetically pleasing. Additionally, I really like the design of the Campus Map page. I have masked the three campus images displayed on that page into a circular shape so that they look pleasing to the eye. Also, for the background, I used our campus map to design the page in a way that the images are located where they actually are in real life.
let campusmappicturesSize = width / 5
let campusmask = createGraphics(campusmappicturesSize, campusmappicturesSize)
campusmask.ellipse(campusmappicturesSize / 2, campusmappicturesSize / 2, campusmappicturesSize, campusmappicturesSize); // Create a circular mask
diningHallsImage.mask(campusmask);
marketplaceImage.mask(campusmask);
outletsImage.mask(campusmask);
I am also particularly proud of the logic I have created for updating candidates for each round.
function handleGameClicks(candidate1Position, candidate2Position, imageSize) {
// Check if click is within candidate 1 image bounds
if (mouseX > candidate1Position.x - imageSize / 2 && mouseX < candidate1Position.x + imageSize / 2 &&
mouseY > candidate1Position.y - imageSize / 2 && mouseY < candidate1Position.y + imageSize / 2) {
nextRoundCandidates.push(currentPair[0]);
updateCurrentPair();
}
// Check if click is within candidate 2 image bounds
else if (mouseX > candidate2Position.x - imageSize / 2 && mouseX < candidate2Position.x + imageSize / 2 &&
mouseY > candidate2Position.y - imageSize / 2 && mouseY < candidate2Position.y + imageSize / 2) {
nextRoundCandidates.push(currentPair[1]);
updateCurrentPair();
} else {
showMessage = true;
messageStartFrame = frameCount; // Reset message timer
}
}
This function, ‘handleGameClicks’, is designed to process mouse clicks within the game, specifically to determine if a click occurred on one of the two candidate images. It checks if the mouse’s X and Y positions fall within the bounds of either candidate 1’s or candidate 2’s image by comparing the mouse coordinates against the images’ positions and sizes. If the click is within the bounds of candidate 1’s image, that candidate is added to the ‘nextRoundCandidates’ array, and a function to update the current pair of candidates is called. Similarly, if the click is within candidate 2’s bounds, that candidate is added to the array, and the pair update function is called. If the click doesn’t fall within the bounds of either image, a message is triggered to show by setting ‘showMessage’ to true and resetting a timer for how long the message should be displayed.
The ‘showMessage’ variable triggers the display of the text “Please click on one of the pictures” when a user’s click does not fall within the bounds of either candidate 1’s or candidate 2’s image.
if (showMessage) {
displayMessage("Please click on one of the pictures");
function updateCurrentPair() {
if (nextRoundCandidates.length === 1 && currentRoundCandidates.length === 0) {
// Only one candidate left, game should end
gameIsOver = true;
gameState = "ENDING";
} else if (currentRoundCandidates.length > 0) {
// There are still candidates in the current round to be paired
currentPair = [currentRoundCandidates.shift(), currentRoundCandidates.shift()];
} else if (nextRoundCandidates.length > 1) {
// Current round is empty but there are enough candidates for another round
currentRoundCandidates = shuffle(nextRoundCandidates.slice()); // Create a new round from remaining candidates
nextRoundCandidates = []; // Reset for the next round
roundNumber++;
currentPair = [currentRoundCandidates.shift(), currentRoundCandidates.shift()];
} else {
}
}
‘updateCurrentPair()’ manages the transition of game states and the setup of candidates for comparison in each round of the game. If there is exactly one candidate left and no more in the current round, it signifies the end of the game by setting ‘gameIsOver’ to true and changing the ‘gameState’ to “ENDING,” indicating a winner has been determined. If there are candidates still available in the current round, it forms a new pair for comparison by removing the first two candidates from ‘currentRoundCandidates’ and assigning them to ‘currentPair.’ In cases where the current round has ended but there are multiple candidates left for the next round (‘nextRoundCandidates.length > 1’), it shuffles the ‘nextRoundCandidates’ to start a new round, empties the ‘nextRoundCandidates’ for future use, increments the round number, and assigns a new pair to ‘currentPair’.
Improvements and Problems
In the Campus Map page, I was thinking of making the page more interactive. My initial thought was to display text about the dining place in a rectangle if the mouse is located over one of the three images. However, I had some difficulties making the description appear when the mouse is located inside the circle. My code was detecting the wrong location for images, thus, showing the rectangular description at the wrong timing. So, for further improvements, I would like to add this feature. Also, I would like to add some buttons instead of requiring users to just click on the screen to start the game.
Overall, this midterm experience helped me to figure out how to build logics for projects, and I learned a lot of new skills to make what I have imagined.