>> HERE IS THE GAME ONLINE << (GitHub io page)
See the game in action HERE
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!-- To disable zooming , I have setup my viewport so that it is not user scalable -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Game Arima</title>
<META NAME="robots" CONTENT="noindex, nofollow">
<link rel="stylesheet prefetch" type="text/css" href="css/game.css">
<script src="js/game.js" defer></script>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
</html>
CSS file:
body{
background-color:#fff;
}
#myCanvas
{
display: block;
margin: 0 auto;
margin-top:10px;
background-image: url("http://arima.bg/game/game.jpg");
/*background-color:#2A2927;*/
border-radius: 10px;
border-bottom:35px solid #C2AA83;
box-shadow: 3px 3px 0px #888888;
padding-top:25px;
}
JavaScript file:
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
var x=canvas.width/2;
var y=canvas.height-80;
var paddleHeight=10;
var paddleWidth=75;
var paddleX=(canvas.width-paddleWidth)/2;
var rightPressed=false; // Whether right control button is pressed
var leftPressed=false; // Whether left control button is pressed
var ballRadius=10;
var brickRowCount=7;
var brickColumnCount=5;
var count=brickRowCount*brickColumnCount;
var rem=count;
var score = 0;
var lives = 50; // How many lives player has to complete the game
var brickWidth=80;
var brickHeight=20;
var brickPadding=7;
var brickOffsetTop=30;
var brickOffsetLeft=40;
var speedup1=0;
var speedup2=0;
var speedup3=0;
var speedup4=0;
var speedup5=0;
var speedup6=0;
var speedup7=0;
var bricks=[];
for(c=0;c<brickColumnCount;++c){
bricks[c]=[];
for(r=0;r<brickRowCount;++r){
bricks[c][r]={x:0,y:0,status:1};
}
}
var dx=3.5;
var dy=-3.5;
function drawBall(){
ctx.beginPath();
ctx.arc(x,y,ballRadius,0,Math.PI*2);
ctx.fillStyle="#fff";
ctx.fillStroke="#fff";
ctx.stroke="10";
ctx.fill();
ctx.closePath();
}
function drawPaddle(){
ctx.beginPath();
ctx.rect(paddleX,canvas.height-paddleHeight,paddleWidth,paddleHeight);
ctx.fillStyle="#00ffff";
ctx.fill();
ctx.closePath();
}
function drawBricks(){
for(c=0;c<brickColumnCount;++c){
for(r=0;r<brickRowCount;++r){
if(bricks[c][r].status==1){
var brickX=(c*(brickWidth+brickPadding))+brickOffsetLeft;
var brickY=(r*(brickHeight+brickPadding))+brickOffsetTop;
bricks[c][r].x=brickX;
bricks[c][r].y=brickY;
ctx.beginPath();
ctx.rect(brickX,brickY,brickWidth,brickHeight);
if(c%2!=0)
ctx.fillStyle="#fff";
else
ctx.fillStyle="#C2AA83";
ctx.fill();
ctx.closePath();
}
}
}
}
function collisionDetection(){
for(c=0;c<brickColumnCount;++c){
for(r=0;r<brickRowCount;++r){
var b=bricks[c][r];
if(b.status==1){
if(x>b.x && x<b.x+brickWidth && y>b.y && y<b.y+brickHeight){
var snd=new Audio("./music/paddleBall.wav");
snd.play();
dy=-dy;
b.status=0;
score++;
count--;
/*** Change color of ball when it hits a brick ****/
ctx.beginPath();
ctx.arc(x,y,ballRadius,0,Math.PI*2);
ctx.fillStyle="#00ffff";
ctx.fillStroke="#00ffff";
ctx.stroke="10";
ctx.fill();
ctx.closePath();
/**************************************************/
/*** If count of total bricks decreases to 30
Increase the speed of ball ***/
if(count<=(rem-rem/7) && speedup1==0){
if(dy<0)
dy-=0.5;
else
dy+=0.5;
if(dx<0)
dx-=0.5;
else
dx+=0.5;
paddleWidth+=2;
speedup1=1;
}
/*** If count of total bricks decreases to 20
Increase the speed of ball and increase paddleWidth***/
if(count<=(rem-2*rem/7) && speedup2==0){
if(dy<0)
dy-=1;
else
dy+=1;
if(dx<0)
dx-=1;
else
dx+=1;
paddleWidth+=3;
speedup2=1;
}
/*** If count of total bricks decreases to 10
Increase the speed of ball ******/
if(count<=(rem-3*rem/7) && speedup3==0){
if(dy<0)
dy-=1;
else
dy+=1;
if(dx<0)
dx-=1;
else
dx+=1;
paddleWidth+=4;
speedup3=1;
}
if(count<=(rem-4*rem/7) && speedup4==0){
if(dy<0)
dy-=1;
else
dy+=1;
if(dx<0)
dx-=1;
else
dx+=1;
paddleWidth+=5;
speedup4=1;
}
if(count<=(rem-5*rem/7) && speedup5==0){
if(dy<0)
dy-=1;
else
dy+=1;
if(dx<0)
dx-=1;
else
dx+=1;
paddleWidth+=6;
speedup5=1;
}
if(count<=(rem-6*rem/7) && speedup6==0){
if(dy<0)
dy-=1;
else
dy+=1;
if(dx<0)
dx-=1;
else
dx+=1;
paddleWidth+=7;
speedup6=1;
}
if(count<=20){
alert("You WON!!! Good job champ!");
document.location.reload();
}
}
}
}
}
}
function drawScore(){
ctx.font="18px Arial";
ctx.fillStyle="#fff";
ctx.fillText("score: "+score,40,20);
// console.log(parseInt(brickRowCount)*parseInt(brickColumnCount)-parseInt(count));
}
function drawLives() {
ctx.font = "18px Arial";
ctx.fillStyle = "#fff";
ctx.fillText("ARIMA'S GAME lives: "+lives, canvas.width-310, 20);
}
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height);
drawBricks();
drawBall();
drawPaddle();
drawScore();
drawLives();
collisionDetection();
if(y+dy<ballRadius)
dy=-dy;
else if(y+dy>canvas.height-ballRadius){
if(x>=paddleX && x<=paddleX+paddleWidth){
var snd=new Audio("./music/paddleBall2.wav");
snd.play();
dy=-dy;
}
else{
lives--;
if(!lives) {
alert("Sorry, you've lost...\nTry again! :-)");
document.location.reload();
}
else{
x=canvas.width/2;
y = canvas.height-30;
paddleWidth=80;
rem=count;
paddleX=(canvas.width-paddleWidth)/2;
}
}
}
else
y+=dy;
if(x+dx<ballRadius || x+dx>canvas.width-ballRadius)
dx=-dx;
else
x+=dx;
if(rightPressed && paddleX<canvas.width-paddleWidth)
paddleX+=7;
else if(leftPressed && paddleX>0)
paddleX-=7;
}
function keyDownHandler(e){
if(e.keyCode==39)
rightPressed=true;
else if(e.keyCode==37)
leftPressed=true;
}
function keyUpHandler(e){
if(e.keyCode==39)
rightPressed=false;
if(e.keyCode==37)
leftPressed=false;
}
function mouseMoveHandler(e){
var relativeX=e.clientX-canvas.offsetLeft;
if(relativeX>0 && relativeX<canvas.width){
if((relativeX-paddleWidth/2>=0) && (relativeX-paddleWidth/2<=(canvas.width-paddleWidth)))
paddleX=relativeX-paddleWidth/2;
}
}
document.addEventListener("keydown",keyDownHandler,false);
document.addEventListener("keyup",keyUpHandler,false);
document.addEventListener("mousemove", mouseMoveHandler, false);
setInterval(draw,20);
Account
