function game(){
document.getElementById("content").innerHTML = '<canvas id="gameCanvas"></canvas>';
var bg = new Image(); bg.src = "assets/graphics/backgrounds/watermeetslava.png";
var brick1 = new Image(); brick1.src = "assets/graphics/sprites/brick/1.png";
var brick2 = new Image(); brick2.src = "assets/graphics/sprites/brick/2.png";
var brick3 = new Image(); brick3.src = "assets/graphics/sprites/brick/3.png";
var brick4 = new Image(); brick4.src = "assets/graphics/sprites/brick/4.png";
var brickTnt = new Image(); brickTnt.src = "assets/graphics/sprites/brick/tnt.png";
var brickSprites = [brick1, brick2, brick3, brick4, brickTnt];
var explosionSprites = new Image(); explosionSprites.src = "assets/graphics/sprites/explosion.png";
var ball; var bar;
var bonuses = new Array();
var explosions = new Array();
var lives = 3; var score = 0;
var explosions = new Array();
var canvas=document.getElementById('gameCanvas');
var ctx=canvas.getContext('2d');
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
var w = canvas.width;
var h = canvas.height;
var blockW = (w - ((level[0].length + 1) * (w/200))) / level[0].length;
var blockH = ((h/2) - ((level.length + 1) * ((h/2)/200))) / level.length;
var barW = w/10;
var leftInput = false;
var rightInput = false;
function gameObject(x, y, dx, dy){
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;
this.move = move;
this.moveReverse = moveReverse;
this.getSpeed = getSpeed;
function move(){
this.x += this.dx;
this.y += this.dy;
}
function moveReverse(){
this.x -= this.dx;
this.y -= this.dy;
}
function getSpeed(){
return Math.sqrt((dx*dx) + (dy*dy));
}
}
function gameBonus(sprite, type){
this.sprite = sprite;
this.type = type;
}
function explosion(x, y, frame){
this.x = x;
this.y = y;
this.frame = frame;
}
var r = w/150;
reset();
var intervalId = setInterval(gameLoop, 20); //50 fps
function gameLoop(){
ctx.drawImage(bg, 0, 0, w, h);
ctx.strokeStyle ='#FFFFFF';
ctx.strokeRect(0, 0, w/5, h);
ctx.strokeRect((w/5)*4, 0, w/5, h);
ctx.fillStyle='#FF0000';
ctx.beginPath();
ctx.arc(ball.x,ball.y,r,0,2*Math.PI);
ctx.fill();
ctx.closePath();
ctx.fillRect(bar.x, bar.y, barW, h/100);
var blockX = w/200; var blockY = (h/2)/200;
var won = true;
for(var i = 0; i < level.length; i++){
for(var j = 0; j < level[0].length; j++){
var block = level[i][j];
if (block != 0){
won = false;
}
if (block != 0){
ctx.drawImage(brickSprites[block - 1], blockX, blockY, blockW, blockH);
if (ballIntersect(blockX, blockY, blockW, blockH)){
ball.dy = -ball.dy;
destroyBlock(i, j);
}
}
blockX += blockW + w/200;
}
blockY += blockH + (h/2)/200;
blockX = w/200;
}
function destroyBlock(i, j){
if (level[i][j] != 0){score++;}
if (lvBonuses[i][j] != 0){
bonuses.splice(0, 0, new gameBonus(new gameObject(ball.x, ball.y, 0, h/100), lvBonuses[i][j]));
}
var isTnt = (level[i][j] == 5);
level[i][j] = 0;
if (isTnt){
if ((i - 1) > -1){destroyBlock(i - 1, j);}
if ((i + 1) < level.length){destroyBlock(i + 1, j);}
if ((j - 1) > -1){destroyBlock(i, j - 1);}
if ((j + 1) < level[0].length){destroyBlock(i, j + 1);}
if (((i - 1) > -1) && ((j - 1) > -1)){destroyBlock(i - 1, j - 1);}
if (((i - 1) > -1) && ((j + 1) < level[0].length)){destroyBlock(i - 1, j + 1);}
if (((i + 1) < level.length) && ((j - 1) > -1)){destroyBlock(i + 1, j - 1);}
if (((i + 1) < level.length) && ((j + 1) < level[0].length)){destroyBlock(i + 1, j + 1);}
explosions.splice(0, 0, new explosion(blockX, blockY, 0));
}
}
ctx.fillStyle='#FF0000';
var txtHeight = h/20;
ctx.font = txtHeight + "px Arial";
ctx.fillText("Score: " + score + "; Lives: " + lives, 0, h - txtHeight);
if(bonuses.length != 0){
for(var i = 0; i < bonuses.length; i++){
bonuses[i].sprite.move();
var s = "";
switch (bonuses[i].type){
case 1:
s = "100";
break;
case 2:
s = "200";
break;
case 3:
s = "500";
break;
case 4:
s = "Bar+";
break;
case 5:
s = "Bar-";
break;
case 6:
s = "+1Life";
break;
case 7:
s = "-1Life";
break;
case 8:
s = "DoubleScore";
break;
}
ctx.fillText(s, bonuses[i].sprite.x, bonuses[i].sprite.y);
if (bonuses[i].type != 0){
ctx.strokeRect(bonuses[i].sprite.x, bonuses[i].sprite.y - txtHeight, ctx.measureText(s).width, txtHeight);
}
if (rectIntersect(bonuses[i].sprite.x, bonuses[i].sprite.y - txtHeight, ctx.measureText(s).width, txtHeight, bar.x, bar.y, barW, h/100)){
switch (bonuses[i].type){
case 1:
score += 100;
break;
case 2:
score += 200;
break;
case 3:
score += 500;
break;
case 4:
bar.x -= barW / 2;
barW *= 2;
break;
case 5:
bar.x += barW / 2;
barW /= 2;
break;
case 6:
lives += 1;
break;
case 7:
lives -= 1;
break;
case 8:
score *= 2;
break;
}
bonuses[i].type = 0;
}
}
}
for(var i = 0; i < explosions.length; i++){
drawExplosionFrame(explosions[i]);
if(explosions[i].frame != 63){
explosions[i].frame++;
}else{
explosions.splice(i, 1);
}
}
if (ball.x + r > w || ball.x - r < 0){
ball.dx = -ball.dx;
}
if (ball.y - r < 0){
ball.dy = -ball.dy;
} else if (ball.y > h){
lives--;
reset();
}
if (ballIntersect(bar.x, bar.y, barW, h/100)){
if (ball.x > bar.x && ball.x < bar.x + barW){
var deltaX = ball.x - (bar.x + barW/2);
var angle = (Math.PI/2) - (Math.abs((Math.abs(deltaX)/(barW/2)) * (Math.PI/3)));
var v = ball.getSpeed();
ball.dx = v * Math.cos(angle);
ball.dy = -(v * Math.sin(angle));
if (deltaX < 0){
ball.dx = -ball.dx;
}
}
}
ball.move();
if (leftInput){
if(!(bar.x < 0)){
bar.moveReverse();
}
}
if (rightInput){
if(!((bar.x + barW) > w)){
bar.move();
}
}
if (won){
alert("You won!!");
clearInterval(intervalId);
menu();
}
if (lives == -1){
alert("You lost!!");
clearInterval(intervalId);
menu();
}
}
function ballIntersect(x, y, w, h){
var bx = ball.x; var by = ball.y;
return rectIntersect(x, y, w, h, bx - r, by - r, r, r);
}
canvas.addEventListener("touchstart", function(e){
var x = e.targetTouches[0].clientX;
var y = e.targetTouches[0].clientY;
if (rectContains(0, 0, w/5, h, x, y)){
leftInput = true;
}
if (rectContains((w/5)*4, 0, w/5, h, x, y)){
rightInput = true;
}
});
canvas.addEventListener("touchend", function(e){
leftInput = false;
rightInput = false;
});
canvas.addEventListener("touchmove", function(e){
e.preventDefault();
});
window.addEventListener("keydown", function(e){
switch(e.keyCode){
case 37:
leftInput = true;
break;
case 39:
rightInput = true;
break;
}
});
window.addEventListener("keyup", function(e){
switch(e.keyCode){
case 37:
leftInput = false;
break;
case 39:
rightInput = false;
break;
}
});
function reset(){
ball = new gameObject(w/2, (h/3)*2, 0, h/100);
bar = new gameObject((w-(barW))/2, (h/10)*9, w/200, 0);
}
function drawExplosionFrame(e){
sy = Math.floor(e.frame / 8) * 128;
sx = (e.frame % 8) * 128;
//alert(frame + " " + sy + " " + sx)
ctx.drawImage(explosionSprites, sx, sy, 128, 128, e.x, e.y, 128, 128);
}
}
function rectContains(rectX, rectY, rectW, rectH, x, y){
return ((x > rectX) && (x < (rectX + rectW)) && (y > rectY) && (y < (rectY + rectH)));
}
function rectIntersect(x1, y1, w1, h1, x2, y2, w2, h2){
//return ((rectContains(x1, y1, w1, h1, x2, y2)) || (rectContains(x1, y1, w1, h1, x2 + w2, y2)) || (rectContains(x1, y1, w1, h1, x2, y2 + h2)) || (rectContains(x1, y1, w1, h1, x2 + w2, y2 + h2)));
return !(((x1 + w1) < x2) || ((x2 + w2) < x1) || ((y1 + h1) < y2) || ((y2 + h2)) < y1);
}