Bricks/public/scripts/sketch.js

var lr;

function setup(){

	lr = getItem("levelReached");
	lr = lr == null ? 0 : parseInt(lr);
	levelReached = lr
	
    createCanvas(window.innerWidth, window.innerHeight);
    
    //Layout Setup
	$("#openButton").hide();
	setInfoStyles();
	for (var i = 1; i <= levelCount; i++){
		$("#rekordInfo table:eq(1)").append("<tr><td></td><td>" + i + "</td><td></td></tr>");
		var bgColor;
		var fgColor;
		if (i % 2 == 0){
			bgColor = "rgba(200, 0, 0, 0.5)";
			fgColor = "#FFF";
		}
		if (i % 2 != 0){
			bgColor = "rgba(0, 200, 0, 0.5)";
			fgColor = "#000";
		}
		$("#rekordInfo table:eq(1) tr:eq(" + i + ")").css({
			"background-color": bgColor,
			"color": fgColor
		});
	}
	setRekordInfo();
	
	for (var i = 0; i < stateCount; i++){
		$("#colors tr:eq(" + i + ") td:eq(2)").html("<canvas id=\"brick" + i + "\"></canvas>");
		$("#brick" + i).attr({
			"width": String(wWidth * 0.3 * 0.6),
			"height": String($("#colors").css("font-size").slice(0, 2) * 2)
		});
		$("#brick" + i).css({
			"border": strokePadding * 2 + "px solid #000",
			"border-radius": strokePadding * 2
		});
		var c = document.getElementById("brick" + i);
		var ctx = c.getContext("2d");
		ctx.fillStyle = colorSwitch(i + 1);
		ctx.fillRect(0, 0, c.width, c.height);
	}
	
	for (var i = 0; i < itemCount; i++){
		$("#items tr:eq(" + i + ") td:eq(2)").html("<canvas id=\"item" + i + "\"></canvas>");
		$("#item" + i).attr({
			"width": String(wWidth * 0.3 * 0.3),
			"height": String($("#items").css("font-size").slice(0, 2) * 3)
		});
		
		var c = document.getElementById("item" + i);
		var ctx = c.getContext("2d");
		
		var ballX = c.width / 2;
		var ballY = c.height / 2;
		var ballR = c.height / 2;
		var lw = ballR * 0.2;
		
		ctx.beginPath();
		ctx.fillStyle = "#000000";
		ctx.arc(ballX, ballY, ballR, 0, TWO_PI);
		ctx.fill();
		ctx.closePath();
		
		var rectX = ballX - ballR * sin(5 * PI / 8) + lw;
		var rectY = ballY + ballR * cos(5 * PI / 8) + lw;
		var rectW = ballR * 2 * sin(5 * PI / 8) - lw * 2;
		var rectH = ballR * 2 * abs(cos(5 * PI / 8)) - lw * 2;
		
		ctx.beginPath();
		ctx.lineJoin = "round";
		switch (i + 1){
			case FastBall:
				ctx.fillStyle = "#00FF00";
				ctx.arc(ballX, ballY, ballR * 0.625, 0, TWO_PI);
				ctx.fill();
				break;
			case FastPaddle:
				ctx.strokeStyle = "#00FF00";
				ctx.fillStyle = "#00FF00";
				
				ctx.moveTo(rectX, rectY);
				ctx.lineTo(rectX + rectW, rectY);
				ctx.lineTo(rectX + rectW, rectY + rectH);
				ctx.lineTo(rectX, rectY + rectH);
				ctx.lineTo(rectX, rectY);
				ctx.lineTo(rectX + rectW, rectY);
				ctx.lineTo(rectX, rectY);
				
				ctx.stroke();
				ctx.fill();
				break;
			case SlowBall:
				ctx.fillStyle = "#FF0000";
				ctx.arc(ballX, ballY, ballR * 0.625, 0, TWO_PI);
				ctx.fill();
				break;
			case SlowPaddle:
				ctx.strokeStyle = "#FF0000";
				ctx.fillStyle = "#FF0000";
				
				ctx.moveTo(rectX, rectY);
				ctx.lineTo(rectX + rectW, rectY);
				ctx.lineTo(rectX + rectW, rectY + rectH);
				ctx.lineTo(rectX, rectY + rectH);
				ctx.lineTo(rectX, rectY);
				ctx.lineTo(rectX + rectW, rectY);
				ctx.lineTo(rectX, rectY);
				
				ctx.stroke();
				ctx.fill();
				break;
			case CreateBall:
				var lineLength = ballR * 0.5;
				
				ctx.lineWidth = lw;
				ctx.strokeStyle = "#00FF00";
				
				ctx.moveTo(ballX, ballY);
				ctx.lineTo(ballX + lineLength, ballY);
				ctx.lineTo(ballX - lineLength, ballY);
				ctx.lineTo(ballX, ballY);
				
				ctx.moveTo(ballX, ballY);
				ctx.lineTo(ballX, ballY + lineLength);
				ctx.lineTo(ballX, ballY - lineLength);
				ctx.lineTo(ballX, ballY);
				
				ctx.stroke();
				break;
			case UpgradeBricks:
				var lineLength = ballR * 0.5;
				
				ctx.lineWidth = lw;
				ctx.strokeStyle = "#FF0000";
				
				ctx.moveTo(ballX, ballY);
				ctx.lineTo(ballX + lineLength, ballY);
				ctx.lineTo(ballX - lineLength, ballY);
				ctx.lineTo(ballX, ballY);
				
				ctx.moveTo(ballX, ballY);
				ctx.lineTo(ballX, ballY + lineLength);
				ctx.lineTo(ballX, ballY - lineLength);
				ctx.lineTo(ballX, ballY);
				
				ctx.stroke();
				break;
			case UpgradeBricks:
		}
		ctx.closePath();
	}
	
    
    //Level Setup
    var level = levelReached + 1;
	if (level > levelCount) level = levelCount;
    currentGame = new Level(level);
	$("#currentLevel").html(level);
	checkLevelButtons(level);
	openInstructions();
}

function draw(){
    currentGame.drawShapes();
    currentGame.renderTime();
}