Skip to content

Commit 23fc3fd

Browse files
Shivangi-chShivangi-ch
committed
brick breaker added
1 parent c309e55 commit 23fc3fd

4 files changed

Lines changed: 228 additions & 0 deletions

File tree

‎brick_breaker/README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
#GAME (BRICK BREAKER)
2+
3+
Game build using html canvas and javascript.

‎brick_breaker/index.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
body{
2+
/* display:flex;
3+
align-items: center;
4+
justify-items: center; */
5+
margin-left:280px;
6+
margin-top:60px;
7+
background: linear-gradient(-45deg, #141414e1, #f389ac, #110010e8, #f3eded);
8+
background-size: 400% 400%;
9+
animation: gradient 8s ease infinite;
10+
11+
12+
}
13+
canvas {
14+
background-image: url("https://i.pinimg.com/originals/ce/33/72/ce33721232fb5e0939a4b6a72b4aeef1.jpg");
15+
/* background-image: url("https://ak.picdn.net/shutterstock/videos/1016039314/thumb/1.jpg"); */
16+
background-repeat: no-repeat;
17+
background-attachment: fixed;
18+
background-position: center center;
19+
height: 80vh;
20+
width: 60vw;
21+
display:flex;
22+
align-items: center;
23+
justify-items: center;
24+
25+
}
26+
@keyframes gradient {
27+
0% {
28+
background-position: 0% 50%;
29+
}
30+
50% {
31+
background-position: 100% 50%;
32+
}
33+
100% {
34+
background-position: 0% 50%;
35+
}
36+
}
37+

‎brick_breaker/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>
5+
Brick Breaker
6+
</title>
7+
8+
<link rel="stylesheet" href="index.css" />
9+
</head>
10+
<body>
11+
<canvas id="myCanvas" width="480" height="320"></canvas>
12+
<script src="index.js"></script>
13+
</body>
14+
</html>

‎brick_breaker/index.js‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
var canvas = document.getElementById("myCanvas");
2+
var ctx = canvas.getContext("2d");
3+
var ballRadius = 10;
4+
var x = canvas.width/2;
5+
var y = canvas.height-30;
6+
var dx = 2;
7+
var dy = -2;
8+
var paddleHeight = 10;
9+
var paddleWidth = 75;
10+
var paddleX = (canvas.width-paddleWidth)/2;
11+
var rightPressed = false;
12+
var leftPressed = false;
13+
var brickRowCount = 5;
14+
var brickColumnCount = 3;
15+
var brickWidth = 75;
16+
var brickHeight = 20;
17+
var brickPadding = 10;
18+
var brickOffsetTop = 30;
19+
var brickOffsetLeft = 30;
20+
var score = 0;
21+
var lives = 3;
22+
var grd = ctx.createLinearGradient(0, 0, 420, 0);
23+
grd.addColorStop(0, "crimson");
24+
grd.addColorStop(1, "white");
25+
26+
27+
28+
var bricks = [];
29+
for(var c=0; c<brickColumnCount; c++) {
30+
bricks[c] = [];
31+
for(var r=0; r<brickRowCount; r++) {
32+
bricks[c][r] = { x: 0, y: 0, status: 1 };
33+
}
34+
}
35+
36+
document.addEventListener("keydown", keyDownHandler, false);
37+
document.addEventListener("keyup", keyUpHandler, false);
38+
document.addEventListener("mousemove", mouseMoveHandler, false);
39+
40+
function keyDownHandler(e) {
41+
if(e.key == "Right" || e.key == "ArrowRight") {
42+
rightPressed = true;
43+
}
44+
else if(e.key == "Left" || e.key == "ArrowLeft") {
45+
leftPressed = true;
46+
}
47+
}
48+
49+
function keyUpHandler(e) {
50+
if(e.key == "Right" || e.key == "ArrowRight") {
51+
rightPressed = false;
52+
}
53+
else if(e.key == "Left" || e.key == "ArrowLeft") {
54+
leftPressed = false;
55+
}
56+
}
57+
58+
function mouseMoveHandler(e) {
59+
var relativeX = e.clientX - canvas.offsetLeft;
60+
if(relativeX > 0 && relativeX < canvas.width) {
61+
paddleX = relativeX - paddleWidth/2;
62+
}
63+
}
64+
function collisionDetection() {
65+
for(var c=0; c<brickColumnCount; c++) {
66+
for(var r=0; r<brickRowCount; r++) {
67+
var b = bricks[c][r];
68+
if(b.status == 1) {
69+
if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
70+
dy = -dy;
71+
b.status = 0;
72+
score++;
73+
// add pop sound
74+
if(score == brickRowCount*brickColumnCount) {
75+
alert("YOU WIN, CONGRATS!");
76+
document.location.reload();
77+
}
78+
}
79+
}
80+
}
81+
}
82+
}
83+
84+
function drawBall() {
85+
ctx.beginPath();
86+
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
87+
ctx.fillStyle = grd;
88+
ctx.fill();
89+
ctx.closePath();
90+
}
91+
function drawPaddle() {
92+
ctx.beginPath();
93+
ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
94+
ctx.fillStyle = grd;
95+
ctx.fill();
96+
ctx.closePath();
97+
}
98+
function drawBricks() {
99+
for(var c=0; c<brickColumnCount; c++) {
100+
for(var r=0; r<brickRowCount; r++) {
101+
if(bricks[c][r].status == 1) {
102+
var brickX = (r*(brickWidth+brickPadding))+brickOffsetLeft;
103+
var brickY = (c*(brickHeight+brickPadding))+brickOffsetTop;
104+
bricks[c][r].x = brickX;
105+
bricks[c][r].y = brickY;
106+
ctx.beginPath();
107+
ctx.rect(brickX, brickY, brickWidth, brickHeight);
108+
ctx.fillStyle = grd;
109+
ctx.fill();
110+
ctx.closePath();
111+
}
112+
}
113+
}
114+
}
115+
function drawScore() {
116+
ctx.font = "16px cursive";
117+
ctx.fillStyle = "white";
118+
ctx.fillText("Score: "+score, 8, 20);
119+
}
120+
function drawLives() {
121+
ctx.font = "16px cursive";
122+
ctx.fillStyle = "white";
123+
ctx.fillText("Lives: "+lives, canvas.width-65, 20);
124+
}
125+
126+
127+
function draw() {
128+
ctx.clearRect(0, 0, canvas.width, canvas.height);
129+
drawBricks();
130+
drawBall();
131+
drawPaddle();
132+
drawScore();
133+
drawLives();
134+
collisionDetection();
135+
136+
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
137+
dx = -dx;
138+
}
139+
if(y + dy < ballRadius) {
140+
dy = -dy;
141+
}
142+
else if(y + dy > canvas.height-ballRadius) {
143+
if(x > paddleX && x < paddleX + paddleWidth) {
144+
dy = -dy;
145+
}
146+
else {
147+
lives--;
148+
if(!lives) {
149+
alert("GAME OVER");
150+
document.location.reload();
151+
}
152+
else {
153+
x = canvas.width/2;
154+
y = canvas.height-30;
155+
dx = 3;
156+
dy = -3;
157+
paddleX = (canvas.width-paddleWidth)/2;
158+
}
159+
}
160+
}
161+
162+
if(rightPressed && paddleX < canvas.width-paddleWidth) {
163+
paddleX += 7;
164+
}
165+
else if(leftPressed && paddleX > 0) {
166+
paddleX -= 7;
167+
}
168+
169+
x += dx;
170+
y += dy;
171+
requestAnimationFrame(draw);
172+
}
173+
174+
draw()

0 commit comments

Comments
 (0)