During my second week of using P5.js in class, we looked into different data types, conditional statements, variables and mouse interactions.
Using what I learnt in class I was tasked with creating a game. Since we focused on tracking the mouse position on the screen and using colours, I decided to make a colour-matching game. My idea was that the user would have to match the background of the canvas to the colour of a circle in the centre of the canvas.
What went well and what didn’t :
I successfully got the background to change colours depending on the cursor’s position (using the code we had written in class as a guide) with this I was able to perfectly match the colour to the circle. As it was a game I added some instructions which appeared in the console log.
Which came out like this ↓
In an aim, to make this game more interactive, I wanted a message to pop up when a user correctly matched the background colour to the circle. Unfortunately, I could not get the congratulations message to appear when the colours matched. So, in an effort to improve this game in the future, I will practice writing different conditional statements.
Since I couldn’t get the message to work I decided to try and add a different feature instead, this feature would allow the user to change the colour of the circle. All the user would have to do is click on the circle and the colour would randomly change. This way, a user could try a different colour if they got stuck or they had matched the previous one.
After making these changes I decided to make the game more visually appealing. The previous version was quite boring and plain so I thought I’d give the user more to look at. I did this by replacing the original circle with different shapes and changing the size of the canvas. In addition to changing how the game looked, I also added a reset ‘button’ so that the user could feel like they were starting the game from the beginning.
The final result looked like this ↓
Code Close Up
//Varibles
let backgroungColour = ‘lightgrey’;
let shapeColour;
let red = 250;
let green = 150;
let blue = 250;
function setup() {
createCanvas(500, 600);
shapeColour = (‘lightgrey’);
}
function draw() {
background(220);
//This changes the colour for the background when the mouse is moved on the screen
mouseProportionX = mouseX / (width – 0);
red = 0 + (mouseProportionX * (255 – 0));
mouseProportionY = mouseY / (height – 0);
blue = 0 + (mouseProportionY * (255 – 0));
backgroundColour = color(red, green, blue);background(backgroundColour);
fill(‘white’);
rect(180, 30, 150,150); // Top
fill(shapeColour);
triangle(255, 50, 200, 150, 305, 150);
// Three rectangles to colour – Middle
rect(180, 215, 50,150);
rect(230, 215, 50,150);
rect(280, 215, 50,150);
//the end
fill(‘white’); //Bottom
rect(180, 400, 150, 150);
//This will colour all elements in the squares
fill(shapeColour);
arc(329, 510, 90, 80, 7.88, PI + HALF_PI, OPEN);
arc(181, 401, 90, 100, 0, HALF_PI)
circle(250, 480, 50);
circle(210, 520, 30);
circle(300, 430, 40);
//Reset button
fill(‘blue’);
rect(35, 505, 95, 45);
//Text configurations
fill(‘white’);
text(‘Reset’, 65, 521, 280);
// Instructions
textSize(15)
textWrap(WORD);
text(‘Match the backgroung to the shapes click anywhere to start.’, 20, 50,150)
}
// This function changes the color of shapes when the mouse is pressed and resets when a ‘button’ is clicked
function mousePressed() {
// Check if the mouse is within the reset button’s area
if (mouseX > 35 && mouseX < 130 && mouseY > 505 && mouseY < 550) {
// Reset the shape color and background color
shapeColour = color(‘lightgrey’); // Reset shape color
red = 250;
green = 150;
blue = 250;
} else {
// Change the shape color randomly if clicked anywhere else
shapeColour = color(random(255), random(255), random(255));
}
}
If I have more time to work on this game there are definitely things I would like to improve or add such as:
Things to improve
- The layout of the instructions, possibly get them to disappear once the shapes have been clicked for the first time.
- The lack of an actual ending to the game, add a functioning congratulations message when the colours match
- Change the code so the colour matching is more accurate
Things to add
- A button that could change the shapes
- Maybe a timer so the user could see how long it takes them to match the colours