Link to the Sketch: https://editor.p5js.org/be2143/full/wxUp4YLBf
Concept
“The Brain Game” is a game designed to challenge the user to complete 3 levels. Initially, my idea was to implement only “The 5 Hats to 3 Men Problem.” However, I later changed the concept to make it more engaging. One alternative idea I had was presenting the challenge in a storytelling format. Eventually, I drew inspiration from the “Brain Challenge” mobile game and developed the current game concept.
Key elements
Level 1: Reach the Exit
In level 1, the user’s task is to guide the character to the exit using arrow keys. To reach the exit, the player must first collect a key to clear the path. Once the player reaches the exit, the game proceeds to the next level.
Level 2: Odd One Out
The player is presented with an image and
must identify what’s unusual. A cursor circle outlines the cursor, and the player must position it over the odd item and click. If the player makes two incorrect selections, a “hint” appears. Once the player correctly identifies the odd item, the game proceeds to the next level.
Level 3: Solve a Riddle
This level presents “The 5 Hats to 3 Men Problem,” challenging the player’s logical thinking skills. Three characters and five hats (three black and two white) are involved. The three hats are randomly assigned to each character. Given the ability to see the hats of the other two characters and the answer they have given, the player’s task is to guess the color of their own hat. An incorrect guess results in the level restarting, while a correct guess ends the game.
You can read more about the problem here: https://www.pumpfundamentals.com/The%205%20hats%20to%203%20men%20problem%20solution.pdf
Design
I have intentionally provided instructions for each level before they begin to enhance player engagement and understanding.
Sound effects have been included throughout the game to enhance the user experience and provide feedback. For instance, an incorrect choice triggers a specific sound effect to signal that the player should try again.
A “home” button allows the player to restart the game without resetting the entire session.
I asked two of my friends to play my game to understand: what’s confusing for the user and to spot the areas to improve in the game. Based on their feedback, I added a hint feature for Level 2 to assist players in spotting the odd item. Additionally, in Level 3, I implemented a feature where the cursor touching a hat changes the background color around the image to clarify how to make a guess.
Problems I ran into
The most challenging part of this project was adapting “The 5 Hats to 3 Men Problem” into a playable game. To ensure solvability, I created specific hat combinations for the three characters, limiting the possibilities to wwb, wbb, and bwb (w = white; b = black). And it is not a random selection of combinations which limits the problem setting. I chose this combination based on the problem setting that the other two characters have already answered that they don’t know the color of their hat color. So that we should eliminate the combinations in which those two characters will be able to make the guess.
let blackHatImg, whiteHatImg, greyHatImg;
let hats = [[1, 0, 1], [0, 1, 1], [0, 0, 1]]; // 1 for black, 0 for white
let randomHatSet;
let characters = 3;
// randomly choose hat set
randomHatSet = floor(random(3));
function playPuzzle() {
if (puzzleImgIndex < puzzleImg.length) {
image(puzzleImg[puzzleImgIndex], 0, 0, width, height);
}
// Calculate the available width for the rectangles (canvas width minus margins)
let availableWidth = width - 60; // 30 pixels from the left and 30 pixels from the right
// Calculate the width of each section for three hats
let sectionWidth = availableWidth / 3;
// Draw the hats
for (let i = 0; i < characters; i++) {
// Calculate the x-coordinate for each hat based on the section
let x = 30 + (i * sectionWidth) + sectionWidth / 2;
let y = height / 4;
// Draw the assigned hat images
if (hats[randomHatSet][i] === 1) {
image(blackHatImg, x - 45, y + 30, 90, 45);
} else if (hats[randomHatSet][i] === 0) {
image(whiteHatImg, x - 45, y + 30, 90, 45);
}
}
// Draw a mystery hat on top of the hat of the user
image(greyHatImg, (30 + (2 * sectionWidth) + sectionWidth / 2) - 45, (height / 4) + 30, 90, 45);
// Choose from the black or white hat
if (puzzleImgIndex === 1) {
if (mouseX > blackHatGuess.x && mouseX < blackHatGuess.x + blackHatGuess.w && mouseY > blackHatGuess.y && mouseY < blackHatGuess.y + blackHatGuess.h) {
// Change the color when the cursor is inside
noStroke();
fill('#FFB8CD');
rect(blackHatGuess.x - 2, blackHatGuess.y - 2, blackHatGuess.w + 4, blackHatGuess.h + 4);
} else if (mouseX > whiteHatGuess.x && mouseX < whiteHatGuess.x + whiteHatGuess.w && mouseY > whiteHatGuess.y && mouseY < whiteHatGuess.y + whiteHatGuess.h) {
// Change the color when the cursor is inside
noStroke();
fill('#FFB8CD');
rect(whiteHatGuess.x - 2, whiteHatGuess.y - 2, whiteHatGuess.w + 4, whiteHatGuess.h + 4);
}
// Draw a rect around the hat choices
image(blackHatImg, blackHatGuess.x, blackHatGuess.y, blackHatGuess.w, blackHatGuess.h);
image(whiteHatImg, whiteHatGuess.x, whiteHatGuess.y, whiteHatGuess.w, whiteHatGuess.h);
}
}
function makeGuess(mouseX, mouseY) {
if (mouseX > blackHatGuess.x && mouseX < blackHatGuess.x + blackHatGuess.w &&
mouseY > blackHatGuess.y && mouseY < blackHatGuess.y + blackHatGuess.h) {
pauseAndResumeDraw();
levelCompleteSound.play();
gameState = 'end';
} else {
pauseAndResumeDraw();
// restart level 3
wrongChoiceSound.play();
restartPuzzle();
}
}
Areas for improvement
If I had more time, I would implement additional features, such as allowing players to skip levels or revisit previous levels. I also observed that players tend to forget the challenge scenario in Level 3 thus it would be better to enable players to revisit instructions for clarification.
Despite my overall satisfaction with the game, I could have enhanced the game’s visual appeal by investing in more attractive graphics, animations, and a user-friendly interface design. For my future projects, I will certainly prioritize the overall graphic design, its aesthetics, and user coherence.