Skip to content

Commit f159c47

Browse files
NaeuCodeNaeuCode
committed
Adding Day #17
1 parent 21cb273 commit f159c47

File tree

5 files changed

+178
-0
lines changed

5 files changed

+178
-0
lines changed

‎Day #17 - Breakout Game/README.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Day #17
2+
3+
### Breakout Game
4+
In this tutorial ([Open in Youtube](https://youtu.be/Pp2Iga_E4yE)), I am gonna showing to you how to code a Breakout Game with javascript. we create a project that you can play breakout game with javascript❗️
5+
6+
# Screenshot
7+
Here we have project screenshot :
8+
9+
![screenshot](ScreenShot.png)

‎Day #17 - Breakout Game/ScreenShot.png

115 KB
Loading

‎Day #17 - Breakout Game/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
<title>Day #17 - Breakout Game | NaeuCode </title>
8+
</head>
9+
<body>
10+
11+
<canvas id="game" width="650" height="450"></canvas>
12+
13+
<script src="index.js"></script>
14+
</body>
15+
</html>

‎Day #17 - Breakout Game/index.js

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
let canvas = document.getElementById("game"),
2+
ctx = canvas.getContext("2d"),
3+
ballRadius = 9,
4+
x = canvas.width / (Math.floor(Math.random() * Math.random() * 10) + 3),
5+
y = canvas.height - 40,
6+
dx = 2,
7+
dy = -2;
8+
9+
let paddleHeight = 12,
10+
paddleWidth = 72;
11+
12+
let paddleX = (canvas.width - paddleWidth) / 2;
13+
14+
let rowCount = 5,
15+
columnCount = 9,
16+
brickWidth = 54,
17+
brickHeight = 18,
18+
brickPadding = 12,
19+
topOffset = 40,
20+
leftOffset = 33,
21+
score = 0;
22+
23+
let bricks = [];
24+
for (let c = 0; c < columnCount; c++) {
25+
bricks[c] = [];
26+
for (let r = 0; r < rowCount; r++) {
27+
bricks[c][r] = { x: 0, y: 0, status: 1 };
28+
}
29+
}
30+
31+
document.addEventListener("mousemove", mouseMoveHandler, false);
32+
33+
function mouseMoveHandler(e) {
34+
var relativeX = e.clientX - canvas.offsetLeft;
35+
if (relativeX > 0 && relativeX < canvas.width) {
36+
paddleX = relativeX - paddleWidth / 2;
37+
}
38+
}
39+
40+
function drawPaddle() {
41+
ctx.beginPath();
42+
ctx.roundRect(
43+
paddleX,
44+
canvas.height - paddleHeight,
45+
paddleWidth,
46+
paddleHeight,
47+
30
48+
);
49+
ctx.fillStyle = "#ad886a";
50+
ctx.fill();
51+
ctx.closePath();
52+
}
53+
54+
function drawBall() {
55+
ctx.beginPath();
56+
ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
57+
ctx.fillStyle = "#fff";
58+
ctx.fill();
59+
ctx.closePath();
60+
}
61+
62+
function drawBricks() {
63+
for (let c = 0; c < columnCount; c++) {
64+
for (let r = 0; r < rowCount; r++) {
65+
if (bricks[c][r].status === 1) {
66+
let brickX = c * (brickWidth + brickPadding) + leftOffset;
67+
let brickY = r * (brickHeight + brickPadding) + topOffset;
68+
bricks[c][r].x = brickX;
69+
bricks[c][r].y = brickY;
70+
ctx.beginPath();
71+
ctx.roundRect(brickX, brickY, brickWidth, brickHeight, 30);
72+
ctx.fillStyle = "#ad886e";
73+
ctx.fill();
74+
ctx.closePath();
75+
}
76+
}
77+
}
78+
}
79+
80+
function trackScore() {
81+
ctx.font = "bold 16px sans-serif";
82+
ctx.fillStyle = "#fff";
83+
ctx.fillText("Score : " + score, 8, 24);
84+
}
85+
86+
function hitDetection() {
87+
for (let c = 0; c < columnCount; c++) {
88+
for (let r = 0; r < rowCount; r++) {
89+
let b = bricks[c][r];
90+
if (b.status === 1) {
91+
if (
92+
x > b.x &&
93+
x < b.x + brickWidth &&
94+
y > b.y &&
95+
y < b.y + brickHeight
96+
) {
97+
dy = -dy;
98+
b.status = 0;
99+
score++;
100+
101+
if (score === rowCount * columnCount) {
102+
alert("You WIN !");
103+
document.location.reload();
104+
}
105+
}
106+
}
107+
}
108+
}
109+
}
110+
111+
function init() {
112+
ctx.clearRect(0, 0, canvas.width, canvas.height);
113+
trackScore();
114+
drawBricks();
115+
drawBall();
116+
drawPaddle();
117+
hitDetection();
118+
119+
if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
120+
dx = -dx;
121+
}
122+
123+
if (y + dy < ballRadius) {
124+
dy = -dy;
125+
} else if (y + dy > canvas.height - ballRadius) {
126+
if (x > paddleX && x < paddleX + paddleWidth) {
127+
dy = -dy;
128+
} else {
129+
alert("Game Over ! ");
130+
document.location.reload();
131+
}
132+
}
133+
134+
if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
135+
dy = -dy;
136+
}
137+
138+
x += dx;
139+
y += dy;
140+
}
141+
142+
setInterval(init, 10);

‎Day #17 - Breakout Game/style.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
body {
2+
display: flex;
3+
align-items: center;
4+
justify-content: center;
5+
background: #243f4d;
6+
}
7+
8+
#game {
9+
background-color: #000;
10+
margin-top: 10rem;
11+
border: 2px solid #fff;
12+
}

0 commit comments

Comments
 (0)