Concept
The concept of the game is breaking the brick wall of the house of three little pigs. As of the original story, the wolf fails to break into the house of the youngest pig because brick walls are too strong. However, through my game, the wolf is able to break into the house and meet the pigs. Therefore, as the user breaks the bricks, an image of three little pigs that were hiding behind the bricks will be visible.
Design
So far, I have worked on creating the code for the bricks, bouncing ball, and the paddle. Using classes and functions, I organized the code and tried to make it look “neat”. However, I have not added any details or aesthetic to the game. Therefore, as it is shown below, the outlook of the game is quite dull.
Regarding the aesthetics, I am planning to add color and use brick png in place of the rectangles. The background will be decorated to look like the house of the three little pigs. Also, I am going to add sound effects to make the game more interesting. For the home page, I will use text for the title and create a button to start the game. I will also create an end page that allows the user to replay the game.
Difficulty
The most difficult part in the coding process was figuring out how to make the bricks in rows and columns and make them disappear when collided with the ball. I watched and referenced this video and it was confusing for me to use the “if statements” to create various conditions. The code I used to create class brick is shown below.
class Brick {
constructor (x, y, w, h){
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.collide = false;
this.val = 0;
}
drawBrick(){
if (this.collide){
fill(255, 255, 0);
} else {
fill (255);
}
rect(this.x, this.y, this.w, this.h);
}
collided(ball){
//x and y cordinate of the edges of the brick to detect when the ball collides with the bricks
let closeX = ball.x;
let closeY = ball.y;
//detecting right and left side of the brick
if (ball.x > this.x + this.w){
closeX = this.x + this.w;
} else if (ball.x < this.x){
closeX = this.x;
}
//detecting top and bottom side of the brick
if (ball.y > this.y + this.h){
closeY = this.y + this.h;
} else if (ball.y < this.y){
closeY = this.y;
}
//testing if the ball and the brick collided
let distance = dist(closeX, closeY, ball.x, ball.y);
if (distance <= ball.r){
this.collide = true;
this.val = 1;
ball.dy = ball.dy * -1;
} else {
this.collide = false;
}
}
}
This is the code in the main sketch that creates the bricks in rows and columns by using arrays.
function setup() {
createCanvas(400, 400);
//nested loop for creating rows and columns of bricks
for (let i=0; i<cols; i++){
bricks[i] = [];
for (let j=0; j<rows; j++) {
bricks[i][j] = new Brick(i*size, j*size, size, size);
}
}
This is the code in the main sketch that makes the bricks appear when not collided, hence making them disappear when collided.
function draw() {
//nested loop for creating bricks when not collided with the ball
for (let i=0; i<cols; i++){
for (let j=0; j<rows; j++){
if (bricks[i][j].val == 0){
bricks[i][j].drawBrick();
bricks[i][j].collided(ball);
}
}
}
Other parts of the project that I am concerned about is creating the buttons for “play” and “reset”. I have never created a button for other assignments and I will be challenging myself to create several buttons to add user interaction.
The only user interaction that is possible so far is moving the paddle with mouseX function. This is why I want to add the buttons to add more interaction and user experience.