In this final I made a game called "BRICK BREAKER" I took me a while to compile this code into the game I wanted it to be. I feel confident with my game and I hope you will enjoy it too.
//paddle horizontal position
var paddleX;
//size of the paddle
var paddleSize;
//this is our score
var score;
//these are variables for the ball
var ballX;
var ballY;
var ballSize;
//speed for the first ball
var xSpeed;
var ySpeed;
// Hardcore mode
var HardMode;
// Hardcore ball variables
var ballO;
var ballP;
var ballSize2;
// Hardcore ball speed
var oSpeed;
var pSpeed;
//gameStates to swtich
var gameState;
// Arrays For the bricks
var x = [];
var y = [];
var wSize;
var hSize;
function setup() {
// put setup code here
createCanvas(1290, 900);
gameState = 0;
wSize = 90;
hSize = 20;
//number of rows of bricks
for (var i = 0; i < 10; i++) {
//number of columns of bricks
for (var j = 0; j < 13; j++) {
//add a new value to the x array, based on j
x.push(j * 100 + 5);
//add a new value to the y array, based on i
y.push(i * 30 + 10);
//i is 0, for the first 6 in a row, j increase
}
}
console.log(x);
console.log(y);
//draw our rectangle from the center out
rectMode(CENTER);
paddleX = 800;
paddleSize = 390;
ballX = 800;
ballY = 780;
ballSize = 30;
xSpeed = 0;
ySpeed = 0;
score = 0;
ballO = 800;
ballP = 780;
ballSize2 = 30;
oSpeed = 0;
pSpeed = 0;
HardMode = false;
}
function draw() {
// put drawing code here
background(50);
fill(255);
textSize(20);
text("Score: " + score, 50, 886);
fill(255, 0, 0);
rect(paddleX, 800, paddleSize, 10);
fill('orange');
ellipse(ballX, ballY, ballSize, ballSize);
//this moves the ball horizontall
ballX += xSpeed;
ballY += ySpeed;
if (gameState === 0) {
fill(0);
textSize(30);
text('Press "Space Bar" to play HardMode', 700, 200);
text('Press "a" to start the game', 100, 200);
}
if (gameState == 1) {
//collsions with bricks and first ball
for (var i = 0; i < x.length; i++) {
if ((ballX > x[i]) && (ballX < (x[i] + wSize)) && (ballY > y[i]) && (ballY < (y[i] + hSize))) {
console.log("BE GONE BRICK!");
xSpeed = -xSpeed;
ySpeed = -ySpeed;
x.splice(i, 1);
y.splice(i, 1);
score += 1;
}
}
//this is drawing our bricks
for (var i = 0; i < x.length; i++) {
fill(255, 0, 0);
rect(x[i], y[i], wSize, hSize);
}
//bouncing off the left and right of the screen
if ((ballX > (1290 - ballSize / 2)) || (ballX < (ballSize / 2))) {
xSpeed = -xSpeed;
}
//bouncing off the top of the screen
if (ballY < ballSize / 2) {
ySpeed = -ySpeed;
}
if (HardMode) {
ballO += oSpeed;
ballP += pSpeed;
//collsions with bricks and first ball
for (var i = 0; i < x.length; i++) {
if ((ballO > x[i]) && (ballO < (x[i] + wSize)) && (ballP > y[i]) && (ballP < (y[i] + hSize))) {
console.log("BE GONE BRICK!");
pSpeed = -pSpeed;
oSpeed = -oSpeed;
x.splice(i, 1);
y.splice(i, 1);
score += 1;
}
}
//bouncing off the left and right of the screen
if ((ballO > (1290 - ballSize2 / 2)) || (ballO < (ballSize2 / 2))) {
oSpeed = -oSpeed;
}
//bouncing off the top of the screen
if (ballP < ballSize2 / 2) {
pSpeed = -pSpeed;
}
// Second ball
if ((ballP > (800 - ballSize2 / 2)) && (ballO > (paddleX - paddleSize / 2)) &&
(ballO < (paddleX + paddleSize / 2))) {
pSpeed = -pSpeed;
oSpeed += 2;
pSpeed -= 1;
}
fill('orange')
ellipse(ballO, ballP, ballSize2, ballSize2);
}
//this moves the ball horizontall
if ((ballY > (800 - ballSize / 2)) && (ballX > (paddleX - paddleSize / 2)) &&
(ballX < (paddleX + paddleSize / 2))) {
ySpeed = -ySpeed;
xSpeed += 2;
ySpeed -= 1;
}
if (keyIsDown(LEFT_ARROW)) {
paddleX -= 9.4;
} else if (keyIsDown(RIGHT_ARROW)) {
paddleX += 9.4;
}
//this is a cheating way to end the game
//could create a boolean to 'end' the game
//and then use a keypress to restart the game
if ((ballY > 900) && (gameState == 1)) {
ballY = 800;
ballX = 600;
ballO = 800;
ballP = 600;
ySpeed = 0;
xSpeed = 0;
oSpeed = 0;
pSpeed = 0;
gameState = 2;
}
if ((ballP > 900) && (gameState == 1)) {
ballY = 800;
ballX = 600;
ballO = 800;
ballP = 600;
ySpeed = 0;
xSpeed = 0;
oSpeed = 0;
pSpeed = 0;
gameState = 2;
}
}
//gameOver
if (gameState == 2) {
x.splice(0, x.length)
y.splice(0, y.length);
fill(25, 250, 0);
textSize(50);
text("GAME OVER, YOU LOSE", 600, 300);
fill(0);
text('Press "a" to play again', 100, 200);
}
}
function keyPressed() {
if (keyCode == 32) {
//console.log('HARDMODE ENGAGED!');
HardMode = true;
}
if (key === 'a') {
if (gameState === 0) {
xSpeed = 4;
ySpeed = -2;
oSpeed = 6;
pSpeed = -2;
gameState = 1;
}
//if the game is over, go back to the beginning
if (gameState === 2) {
gameState = 0;
paddleX = 800;
paddleSize = 390;
ballX = 800;
ballY = 780;
ballSize = 30;
xSpeed = 0;
ySpeed = 0;
score = 0;
ballO = 800;
ballP = 780;
ballSize2 = 30;
oSpeed = 0;
pSpeed = 0;
//ADD IN SPLICE TO REMOVE ALL THE BRICKS
x.splice(0, x.length);
y.splice(0, y.length);
for (var i = 0; i < 10; i++) {
//number of columns of bricks
for (var j = 0; j < 13; j++) {
//add a new value to the x array, based on j
x.push(j * 100 + 5);
//add a new value to the y array, based on i
y.push(i * 30 + 10);
//i is 0, for the first 6 in a row, j increase
}
}
}
}
}