window.onload=function() { alert("Created by Mohsin Uddin"); var canvas = document.getElementById("canvas"); var ctx=canvas.getContext("2d"); canvas.width= innerWidth-15; canvas.height= innerHeight-200; var ry= canvas.height-30; var y = canvas.height-60; var rx= 150; var x = rx+50; var dx= 4; var dy= -4; var r = 12; var s = 0; var h = 3; var t = 0; var brc = 5; var bcc = 8; var bw = 40; var bh = 18; var bp = 2; var bot = 2; var bol = 2; var bricks = []; var left = false; var right = false; var ri = document.getElementById("right"); var le = document.getElementById("left"); var score = document.getElementById("score"); var life = document.getElementById("life"); function drawBall(){ ctx.beginPath(); ctx.fillStyle="white"; ctx.arc(x,y,r,0,2*Math.PI); ctx.fill(); ctx.fillStyle="skyblue"; ctx.fillRect(rx,ry,100,20); ctx.closePath(); } function initBricks(){ for(var c=0; c 0) { if(x > b.x-r && x < b.x+bw+r && y > b.y-r && y < b.y+bh+r) { dy=-dy; b.status -= 1; s+=10; } } status += bricks[i][j].status; } } if(status==0){ alert("\n You Win! \n Score :"+s); clearInterval(t); x= rx+50; y= ry-30; dx=4; dy=-4; s=0; h=3; initBricks(); } } function animate(){ requestAnimationFrame(animate); ctx.clearRect(0,0,innerWidth,innerHeight); score.innerHTML = "Score : "+s; life.innerHTML = "Life : "+h; drawBricks(); drawBall(); brakeBrick(); if(left == true && rx > 0){ rx-=4; } if(right == true && rx < canvas.width-100){ rx+=4; } if(x+r>innerWidth-15 || x-r<0) { dx=-dx; } if(y-r<0) { dy=-dy; } x=x+dx; y=y+dy; if(y+dy>canvas.height-30-r) { if(x>rx-20 && xrx-20 && xrx+80 && xcanvas.height-r) { x= rx+50; y= ry-30; h=h-1; dx=4; dy=-4; } } if (h<=0) { alert("Game Over!\n\nYour Scroe = "+s); clearInterval(t); x= rx+50; y= ry-30; dx=4; dy=-4; s=0; h=3; initBricks(); } } animate(); ///Move Event/// ri.addEventListener("touchstart", () => { left = false; right = true; }); ri.addEventListener("touchend", () => { right = false; }); le.addEventListener("touchstart", () => { right = false; left = true; }); le.addEventListener("touchend", () => { left = false; }); ///Move Event/// ri.addEventListener("mousedown", () => { left = false; right = true; }); ri.addEventListener("mouseup", () => { right = false; }); le.addEventListener("mousedown", () => { right = false; left = true; }); le.addEventListener("mouseup", () => { left = false; }); } window.onresize = function(){ canvas.width= innerWidth-15; canvas.height= innerHeight-200; }

Break the Brick Game