<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.sound.js"></script>
<script src="https://cdn.jsdelivr.net/gh/bmoren/p5.collide2D@0.5/p5.collide2d.js"></script>
<script>


var bricks = []

var ball

var numberofrows = 8


function setup() {
	createCanvas(600, 600)


	ball = {
		x: 300,
		y: 400,
		speedx: random(-2, 2),
		speedy: random(0, 5)
	}

	for (var i = 0; i < numberofrows; i++) {
		makeBrickRow()
	}

	console.log(bricks)

}


function draw() {
	background(51)

	fill("blue")
	rectMode(CENTER)
	rect(mouseX, 550, 80, 10)

	fill("red")
	ellipse(ball.x, ball.y, 20, 20)
	ball.x += ball.speedx
	ball.y += ball.speedy

	if (ball.x > width || ball.x < 0) {
		ball.speedx = -ball.speedx
	}

	if (ball.y >= 535 && ball.y <= 545 && ball.x > mouseX - 40 && ball.x < mouseX + 40) {
		ball.speedy = -ball.speedy
		ball.speedx *= 1.1
		console.log(ball.y)
	}

	if (ball.y > height || ball.y < 0) {
		ball.speedy = -ball.speedy
	}
	// 10 rows of bricks, 12 bricks per row
	stroke("black")
	rectMode(CORNER)
	for (var i = 0; i < bricks.length; i++) {

		var currentrow = bricks[i]
		for (var j = 0; j < currentrow.length; j++) {
			if (currentrow[j] == true) {
				var brickwidth = width / 12
				var brickheight = 250 / numberofrows
				var x = j*brickwidth
				var y = i*brickheight
				fill("green")
				rect(x, y, brickwidth, brickheight)

				if (collideRectCircle(x, y, brickwidth, brickheight, ball.x, ball.y, 20)) {
					ball.speedx = -ball.speedx
					ball.speedy = -ball.speedy
					bricks[i][j] = false
				}

			}
		}

	}



}


function makeBrickRow() {
	var row = []
	for (var i = 0; i < 12; i++) {
		row.push(true)
	}
	bricks.push(row)
}







</script>