<canvas id="canvas" width=300 height=300 style="border: 1px solid black; background: #EEEEEE"></canvas>

<script>

	let canvas = document.getElementById('canvas')
	let ctx = canvas.getContext('2d')

	function drawRect(rect) {
		//if a rect is in its intangible state, we draw the outline only.
		//Otherwise, we fill the whole rect.
		
		if (!rect.intangible) {
			ctx.fillStyle = rect.color
			ctx.fillRect(rect.x, rect.y, rect.width, rect.height)
		} else {
			ctx.strokeStyle = rect.color
			ctx.strokeRect(rect.x, rect.y, rect.width, rect.height)
		}
	}
	
	function updateRect(rect) {
		rect.x += rect.xspeed
		rect.y += rect.yspeed
		
		if (rect.x > canvas.width)
			rect.x = -rect.width
		if (rect.y > canvas.height)
			rect.y = -rect.height
			
		if (rect.x < -rect.width)
			rect.x = canvas.width
		if (rect.y < -rect.height)
			rect.y = canvas.height
	}
	
	function aabbCollision(rect1, rect2) {
		return rect1.x < rect2.x + rect2.width &&
			rect1.x + rect1.width > rect2.x &&
			rect1.y < rect2.y + rect2.height &&
			rect1.y + rect1.height > rect2.y
	}
	
	function updatePlayer(player) {
		player.xspeed = 0
		player.yspeed = 0
		
		let speed = 1;
		
		if (keyboard.ArrowLeft)
			player.xspeed -= speed
		if (keyboard.ArrowRight)
			player.xspeed += speed
		if (keyboard.ArrowUp)
			player.yspeed -= speed
		if (keyboard.ArrowDown)
			player.yspeed += speed
	}
	
	let rect1 = { x: 0, y: 0, width: 32, height: 32, color: "blue", xspeed: 0.4, yspeed: 0.1 }
	let rect2 = { x: 0, y: 0, width: 20, height: 20, color: "green", xspeed: -0.2, yspeed: 0.05 }
	let rect3 = { x: 0, y: 0, width: 40, height: 40, color: "orange", xspeed: 0.5, yspeed: -0.1 }
	
	let rect4 = { x: 0, y: 0, width: 40, height: 40, color: "purple", xspeed: 0.5, yspeed: 1 }
	let rect5 = { x: 0, y: 0, width: 50, height: 50, color: "maroon", xspeed: -0.5, yspeed: -0.25 }
	let rect6 = { x: 0, y: 0, width: 70, height: 70, color: "gray", xspeed: 0.1, yspeed: -0.25 }
	
	let player = { x: 150, y: 150, width: 32, height: 32, color: "red", xspeed: 1, yspeed: 1 }
	
	let rectArray = [player, rect1, rect2, rect3]
	
	let keyboard = {}
	
	function keyDownEvent(eventInfo) {
		keyboard[eventInfo.code] = true;
	}
	
	function keyUpEvent(eventInfo) {
		keyboard[eventInfo.code] = false;
	}
	
	addEventListener("keyup", keyUpEvent);
	addEventListener("keydown", keyDownEvent);
	
	let scoreValue = 0;
	
	function drawText(text, x, y) {
		ctx.fillStyle = 'black'
		ctx.font = '20px serif'
		ctx.fillText(text, x, y);
	}
	
	function incrementScore() {
		scoreValue++
		
		//Now first we create them as intangible rectangles, wait a while, then make them solid
		
		if (scoreValue == 7) {
			rectArray.push(rect4)
			rect4.intangible = true
		}
		
		if (scoreValue == 10)
			rect4.intangible = false
			
			
		if (scoreValue == 17) {
			rectArray.push(rect5)
			rect5.intangible = true
		}
		
		if (scoreValue == 20)
			rect5.intangible = false
		
			
		if (scoreValue == 27) {
			rectArray.push(rect6)
			rect6.intangible = true
		}
		
		if (scoreValue == 30)
			rect6.intangible = false
			
	}
	
	function update() {
		ctx.clearRect(0, 0, canvas.width, canvas.height)
		
		updatePlayer(player)
		
		for (let rect of rectArray) {
			updateRect(rect)
			drawRect(rect)
			
			//now we also check if the rect has the intangible property, and if yes we ingore the collision
			if (rect != player && aabbCollision(player, rect) && !rect.intangible) {
				scoreValue = 0
				rectArray = [player, rect1, rect2, rect3]
			}
		}
		
		drawText("Score: " + scoreValue, 10, 20)
	}
	
	setInterval(update, 4)
	setInterval(incrementScore, 500)


</script>