const _=(_)=>document.querySelector(_); let cvs,ctx,w,h,player,ball,bricks=[],score =0,board,gameover=true,start=false; const {floor,abs,random,pow} = Math; window.onload = ()=>{ cvs = _("canvas"); w = cvs.width = window.innerWidth/1.1; h = cvs.height = window.innerHeight/1.1; ctx=cvs.getContext("2d"); player = new Player(w/2,h-50-20); ball = new Ball(w/2,h/2); for(let i =0;i<6;i++)for(let j =0;j<6;j++)bricks.push(new Brick(i*50+(w/2-3*50),j*25+20));start=true; board = new Board(w/2-25,h-20); requestAnimationFrame(draw); } const draw=()=>{ ctx.clearRect(0,0,w,h); requestAnimationFrame(draw); if(!gameover){player.show(); ball.show();ball.update();board.show(); for(let i in bricks)bricks[i].show(); }else{ ctx.fillStyle ="#000";ctx.font="30px bold sens-serif";ctx.fillText("Start the Game",w/2-80,h/2); ctx.setLineDash([8,3]);ctx.moveTo(0,h/2+10);ctx.lineTo(w,h/2+10);ctx.stroke(); ctx.font ="20px bold sens-serif";ctx.fillText("Score:"+score,w/2-20,h/2+40); ctx.moveTo(50,h-50);ctx.lineTo(w-25,h-50);ctx.moveTo(50,h-20);ctx.lineTo(w-25,h-20); ctx.stroke();ctx.fillText("Click to Continue",w/2-60,h-30); _("canvas").onclick=()=>restart(); } if(collision(player,ball)){ball.y=ball.y-ball.r;ball.velY*=-1;} for(let i =0;i{if(start)player.x= parseInt(e.changedTouches[0].clientX) - cvs.getBoundingClientRect().top - document.documentElement.scrollTop-(player.w/2);} let collision=(a,b)=>{ let distX =abs(b.x - a.x-a.w/2); let distY =abs(b.y - a.y-a.h/2); if(distX>(a.w/2+b.r))return false; if(distY>(a.h/2+b.r))return false; if(distX <= (a.w/2))return true; if (distY <= (a.h/2))return true; return (pow(distX-a.w/2,2)+pow(distY-a.h/2,2)<=(pow(b.r,2))); } const restart =()=>{ let arr= [pop,pop1,pop2,pop3]; arr[floor(random()*arr.length)].play(); score = 0;bricks =[]; player = new Player(w/2,h-50-20); ball = new Ball(w/2,h/2); for(let i =0;i<6;i++)for(let j =0;j<6;j++)bricks.push(new Brick(i*50+(w/2-3*50),j*25+20));board =new Board(w/2-25,h-20);gameover = false; } class Player{ constructor(x,y){ this.x = x;this.y = y; this.w = 40;this.h =5; } show(){ ctx.fillStyle = "#4488ff"; ctx.fillRect(this.x,this.y,this.w,this.h); } } class Brick{ constructor(x,y){ this.x = x;this.y = y; this.col = ["skyblue","pink","tomato","red","brown","yellow","brown","#55eeff","#4488ff","rgba(255,0,0,0.7)"]; this.w = 40;this.h = 5; this.color = this.col[floor(random()*this.col.length)]; } show(){ ctx.fillStyle = this.color; ctx.fillRect(this.x,this.y,this.w,this.h); } } class Ball{ constructor(x,y){ this.x = x;this.y = y; this.r = 4;this.velX = 4; this.velY = 4;this.col = "#4488ff"; } show(){ ctx.beginPath();ctx.fillStyle = this.col; ctx.arc(this.x,this.y,this.r,2*Math.PI,false);ctx.fill();ctx.closePath(); } update(){ this.x+=this.velX;this.y+=this.velY; if(this.x+this.r>w)this.velX*=-1; else if(this.xh-55 || bricks.length==0){this.velY*=-1;gameover =true;}else if(this.y

🕹️🎮BRICK BREAKER🎮🕹️