BreakOut Clone. Javascript. 2018.

ball.js

class Ball {
	//CHANGE SPEED
	constructor() {
		this.xDir = random([-1, 1]);
		this.yDir = 1;
		this.xSpeed = 3.8;
		this.ySpeed = 3.31629;
		// this.pos.x = random(20, width - 20);
		// this.pos.y = 220;
		this.pos = createVector(random(20, width - 20), 220);


		this.diam = 20;
	}
	startMoving() {
		this.pos.x += this.xSpeed * this.xDir;
		this.pos.y += this.ySpeed * this.yDir;
		if (this.pos.x > width - this.diam / 2 || this.pos.x < this.diam / 2) {
			this.xDir *= -1;
		}
		if (this.pos.y > height - this.diam / 2 || this.pos.y < this.diam / 2) {
			this.yDir *= -1;
		}
	}

	show() {
		ellipse(this.pos.x, this.pos.y, this.diam);
	}
	touchesPaddle() {
		return (
			this.pos.y + this.diam / 2 > paddle.pos.y &&
			this.pos.x > paddle.pos.x - this.diam / 2 &&
			this.pos.x < paddle.pos.x + paddle.width + this.diam / 2 &&
			this.pos.y + this.diam &&
			this.pos.y < paddle.pos.y + paddle.height
		); //PERFECTION
	}

	touchesGround() {
		return this.pos.y > height - this.diam;
	}
}

ballPower.js

class tripleBall extends Ball {
	constructor(x, y) {
		super();
		// this.pos.x = x;
		// this.pos.y = y;
		this.pos = createVector(x, y)
		this.diam = ball.diam;
		this.xDir = random([-1, 1]);
		this.yDir = -1;
	}

	startMoving() {
		this.pos.x += (ball.xSpeed - 2) * this.xDir;
		this.pos.y += (ball.ySpeed - 1.8) * this.yDir;

		if (this.pos.x > width - this.diam / 2 || this.pos.x < this.diam / 2) {
			this.xDir *= -1;
		}
		if (this.pos.y > height - this.diam / 2 || this.pos.y < this.diam / 2) {
			this.yDir *= -1;
		}
	}

	show() {
		fill(0, 230, 102, 150);
		ellipse(this.pos.x, this.pos.y, this.diam);
	}
}

blocks.js

class block {
	constructor(x, y, col, id) {
		this.height = 20;
		this.width = width / 10;
		// this.pos.x = pos.x;
		// this.pos.y = pos.y;
		this.pos = createVector(x, y)
		this.color = col;
		this.id = id;
	}

	show() {
		fill(this.color);
		rect(this.pos.x, this.pos.y, this.width, this.height, 6);
	}

	touchesBlock(input) {
		return (
			input.pos.y <= this.pos.y + input.diam * 1.5 &&
			input.pos.x > this.pos.x &&
			input.pos.x < this.pos.x + this.width
		);

		//1.5 because height is 20. diameter to get to top to bottom. Radius to get from bottom to Ball middle.
	}

	ballsTouch() {
		for (i = 0; i < ballsArr.length; i++) {
			return (
				ballsArr[i].pos.y <= this.pos.y + ballsArr[i].diam * 1.5 &&
				ballsArr[i].pos.x > this.pos.x &&
				ballsArr[i].pos.x < this.pos.x + this.width
			);
		}
	}

	changeColor() {
		fill(this.color);
		rect(this.pos.x, this.pos.y, this.width, this.height, 2);
	}

	numbers() {
		fill(200);
		stroke(200);
		textSize(14);
		text(this.id, this.pos.x + 50, this.pos.y + 15);
	}
}

paddle.js

class paddle {
	constructor() {
		// this.pos.y = width / 2;
		// this.pos.y = height - height / 6;
		this.pos = createVector(width / 2, height - height / 6 )
		this.height = 10;
		this.width = 60;
	}
	show() {
		rect(this.pos.x, this.pos.y, this.width, this.height);
	}
}

script.js

var blockArr = [];
var lost = false;
var score = 0;
var x = 0;
var counter = 0;
var ballsArr = [];
var ballsBefore = false;
var makeBalls = false;
var won = false;
var makeBig = false;
var bigCounter = 0;

while (true) {
	var check = confirm('Ready?');
	if (check) {
		break;
	}
}

function setup() {
	createCanvas(1002, 800);

	ball = new Ball();

	paddle = new paddle();

	//Make the blocks
	for (i = 0; i < 80 ; i++) {
		let col = map(i,  0 , 80 , 130, 0)


		blockArr[i] = new block(
			i % 10 * 100,
			(i + 10 - i % 10) * 2 - 20,
			[100,col,200],
			i
		);
	}

	//make the 3 balls
	for (i = 0; i < 3; i++) {
		ballsArr[i] = new tripleBall(i * 400 + 100, 605 - (i * 100));
	}
}

function draw() {
	//setup
	background(0);

	ball.startMoving();

	//check if ball touches paddle
	if (keyIsDown(LEFT_ARROW)) {

		if (paddle.pos.x > 0) {

			paddle.pos.x -= 7;

		}
	}
	if (keyIsDown(RIGHT_ARROW)) {
		if (paddle.pos.x < width - paddle.width) paddle.pos.x += 7;
	}

	if (ball.touchesPaddle()) {
		ball.pos.y -= ball.diam / 2
		ball.yDir *= -1;

		if (!ballsBefore) {
			if (round(random(1, 40)) == 5) {
				makeBalls = true;
				ballsBefore = true;
			}
		}

		if (!makeBig){
			if (round(random(1, 40)) == 2){


				makeBig = true;

			}
}

			if (makeBig){
				paddle.width = 130;
				bigCounter++;

				if (bigCounter % 5 == 0) {

					paddle.width = 60;

			}
		}


}
	//CHANGE BACK
	if (ball.touchesGround()) {
		lost = true;
	}
	for (i in ballsArr) {
		if (ballsArr[i].touchesPaddle()) {
			ballsArr[i].yDir *= -1;
		}
	}
	for (i = 0; i < ballsArr.length; i++) {
		if (ballsArr[i].touchesGround()) {
			ballsArr.splice(i, 1);
			break;
		}
	}

	for (i = blockArr.length - 1; i >= 0; i--) {
		if (blockArr[i].touchesBlock(ball)) {
			scoreId(Math.floor(blockArr[i].id / 10));

			ball.yDir *= -1;

			blockArr.splice(i, 1);
			counter++;

			if (counter == 10) {
				ball.xSpeed++;
				ball.ySpeed++;
				counter = 0;
			}

			if (blockArr.length == 0) won = true;
		}
	}

	if (lost) {
		textSize(70);
		text("YOU LOST!!! You got : " + score, 100, 300);
		ball.xDir = 0;
		ball.yDir = 0;
    for (i of ballsArr){
      i.yDir *= 0;
      i.xDir *= 0;
    }
	} else if (won) {
		textSize(80);
		text('YOU WON!!!', height / 2 - 100, width / 2 - 200);
		ball.xDir = 7;
		ball.yDir = 7;
	}

	//Render the things, and color them
	for (i of blockArr) {
		i.show();
		i.numbers();
	}
	fill(255);
	paddle.show();
	fill(200);
	ball.show();

	//textColour
	fill(255);

	//Check for balls

	if (makeBalls) {
		for (i of ballsArr) {
			i.show();
			i.startMoving();
		}
	}

	for (i = 0; i < blockArr.length; i++) {
		for (j = 0; j < ballsArr.length; j++) {
			if (blockArr[i].touchesBlock(ballsArr[j])) {
				ballsArr[j].yDir *= -1;
				blockArr.splice(i, 1);
				break;
			}
		}
	}



	document.getElementById('score').innerHTML = "Your Score: " + score;
}

function scoreId(input) {
	switch (input) {
		case 7:
			score++;
			break;
		case 6:
			score += 2;
			break;
		case 5:
			score += 3;
			break;
		case 4:
			score += 4;
			break;
		case 3:
			score += 5;
			break;
		case 2:
			score += 6;
			break;
		case 1:
			score += 7;
			break;
		default:
			score += 7;
			break;
	}
}

source.html

<!DOCTYPE html>
<title> Break out!!! </title>
<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>
<script src="paddle.js"></script>
<script src="script.js"></script>
<script src="ball.js"></script>
<script src="blocks.js"></script>
<script src="ballPower.js"></script>

<p id="score"></p>






</body>