html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
</head>
<body>
<canvas></canvas>
<audio id="pop">
<source src="http://k003.kiwi6.com/hotlink/8p93ocrvmw/4B_X_AAZAR_-_Pop_Dat.mp3"></source>
</audio>
<audio id="pop1">
<source src="http://k003.kiwi6.com/hotlink/wh7j0ca3jd/TRAP_-_The_Legend_Of_Zelda_-_Saria_s_Turn_up_GTA_Remix_.mp3"></source>
</audio>
<audio id="pop2">
<source src="http://k003.kiwi6.com/hotlink/wl5s7t819o/marshmello_-_FinD_Me_Bass_Boosted_.mp3"></source>
</audio>
<audio id="pop3">
<source src="http://k003.kiwi6.com/hotlink/4knbi5ayu9/Marshmello_-_Blocks_Official_Music_Video_.mp3"></source>
</audio>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
*{margin:0;padding:0;}body{background:#ececec;}canvas{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border-radius:5px;box-shadow:0px 2px 2px rgba(0,0,0,.2);}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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();
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run