Skip to content

Commit f2a3b8d

Browse files
daviskamaudaviskamau
authored
initial commit
1 parent b5ebbd7 commit f2a3b8d

25 files changed

+1502
-0
lines changed

Diff for: ‎breakout-game/README.md

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
## Breakout! Game
2+
3+
Game where you control a paddle with the arrow keys to bounce a ball up to break bricks. This app uses the HTML5 canvas element and API
4+
5+
## Project Specifications
6+
7+
- Draw elements on canvas
8+
- Use canvas paths to draw shapes
9+
- Add animation with requestAnimationFrame(cb)
10+
- Move paddle on arrow key press
11+
- Add collision detection
12+
- Keep score
13+
- Add rules button with slider

Diff for: ‎breakout-game/index.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<link rel="stylesheet" href="style.css" />
8+
<title>Breakout!</title>
9+
</head>
10+
<body>
11+
<h1>Breakout!</h1>
12+
<button id="rules-btn" class="btn rules-btn">Show Rules</button>
13+
<div id="rules" class="rules">
14+
<h2>How To Play:</h2>
15+
<p>
16+
Use your right and left keys to move the paddle to bounce the ball up
17+
and break the blocks.
18+
</p>
19+
<p>If you miss the ball, your score and the blocks will reset.</p>
20+
<button id="close-btn" class="btn">Close</button>
21+
</div>
22+
23+
<canvas id="canvas" width="800" height="600"></canvas>
24+
25+
<script src="script.js"></script>
26+
</body>
27+
</html>

Diff for: ‎breakout-game/plan.txt

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
1. Create canvas context
2+
2. Create and draw ball
3+
3. Create and draw paddle
4+
4. Create bricks
5+
5. Draw score
6+
6. Add update() - Animate - requestAnimationFrame(cb)
7+
7. Move paddle
8+
8. Keyboard event handlers to move paddle
9+
9. Move ball
10+
10. Add wall bounderies
11+
11. Increase score when bricks break
12+
12. Lose - redraw bricks, reset score

Diff for: ‎breakout-game/script.js

+240
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
const rulesBtn = document.getElementById('rules-btn');
2+
const closeBtn = document.getElementById('close-btn');
3+
const rules = document.getElementById('rules');
4+
const canvas = document.getElementById('canvas');
5+
const ctx = canvas.getContext('2d');
6+
7+
let score = 0;
8+
9+
const brickRowCount = 9;
10+
const brickColumnCount = 5;
11+
const delay = 500; //delay to reset the game
12+
13+
// Create ball props
14+
const ball = {
15+
x: canvas.width / 2,
16+
y: canvas.height / 2,
17+
size: 10,
18+
speed: 4,
19+
dx: 4,
20+
dy: -4,
21+
visible: true
22+
};
23+
24+
// Create paddle props
25+
const paddle = {
26+
x: canvas.width / 2 - 40,
27+
y: canvas.height - 20,
28+
w: 80,
29+
h: 10,
30+
speed: 8,
31+
dx: 0,
32+
visible: true
33+
};
34+
35+
// Create brick props
36+
const brickInfo = {
37+
w: 70,
38+
h: 20,
39+
padding: 10,
40+
offsetX: 45,
41+
offsetY: 60,
42+
visible: true
43+
};
44+
45+
// Create bricks
46+
const bricks = [];
47+
for (let i = 0; i < brickRowCount; i++) {
48+
bricks[i] = [];
49+
for (let j = 0; j < brickColumnCount; j++) {
50+
const x = i * (brickInfo.w + brickInfo.padding) + brickInfo.offsetX;
51+
const y = j * (brickInfo.h + brickInfo.padding) + brickInfo.offsetY;
52+
bricks[i][j] = { x, y, ...brickInfo };
53+
}
54+
}
55+
56+
// Draw ball on canvas
57+
function drawBall() {
58+
ctx.beginPath();
59+
ctx.arc(ball.x, ball.y, ball.size, 0, Math.PI * 2);
60+
ctx.fillStyle = ball.visible ? '#0095dd' : 'transparent';
61+
ctx.fill();
62+
ctx.closePath();
63+
}
64+
65+
// Draw paddle on canvas
66+
function drawPaddle() {
67+
ctx.beginPath();
68+
ctx.rect(paddle.x, paddle.y, paddle.w, paddle.h);
69+
ctx.fillStyle = paddle.visible ? '#0095dd' : 'transparent';
70+
ctx.fill();
71+
ctx.closePath();
72+
}
73+
74+
// Draw score on canvas
75+
function drawScore() {
76+
ctx.font = '20px Arial';
77+
ctx.fillText(`Score: ${score}`, canvas.width - 100, 30);
78+
}
79+
80+
// Draw bricks on canvas
81+
function drawBricks() {
82+
bricks.forEach(column => {
83+
column.forEach(brick => {
84+
ctx.beginPath();
85+
ctx.rect(brick.x, brick.y, brick.w, brick.h);
86+
ctx.fillStyle = brick.visible ? '#0095dd' : 'transparent';
87+
ctx.fill();
88+
ctx.closePath();
89+
});
90+
});
91+
}
92+
93+
// Move paddle on canvas
94+
function movePaddle() {
95+
paddle.x += paddle.dx;
96+
97+
// Wall detection
98+
if (paddle.x + paddle.w > canvas.width) {
99+
paddle.x = canvas.width - paddle.w;
100+
}
101+
102+
if (paddle.x < 0) {
103+
paddle.x = 0;
104+
}
105+
}
106+
107+
// Move ball on canvas
108+
function moveBall() {
109+
ball.x += ball.dx;
110+
ball.y += ball.dy;
111+
112+
// Wall collision (right/left)
113+
if (ball.x + ball.size > canvas.width || ball.x - ball.size < 0) {
114+
ball.dx *= -1; // ball.dx = ball.dx * -1
115+
}
116+
117+
// Wall collision (top/bottom)
118+
if (ball.y + ball.size > canvas.height || ball.y - ball.size < 0) {
119+
ball.dy *= -1;
120+
}
121+
122+
// console.log(ball.x, ball.y);
123+
124+
// Paddle collision
125+
if (
126+
ball.x - ball.size > paddle.x &&
127+
ball.x + ball.size < paddle.x + paddle.w &&
128+
ball.y + ball.size > paddle.y
129+
) {
130+
ball.dy = -ball.speed;
131+
}
132+
133+
// Brick collision
134+
bricks.forEach(column => {
135+
column.forEach(brick => {
136+
if (brick.visible) {
137+
if (
138+
ball.x - ball.size > brick.x && // left brick side check
139+
ball.x + ball.size < brick.x + brick.w && // right brick side check
140+
ball.y + ball.size > brick.y && // top brick side check
141+
ball.y - ball.size < brick.y + brick.h // bottom brick side check
142+
) {
143+
ball.dy *= -1;
144+
brick.visible = false;
145+
146+
increaseScore();
147+
}
148+
}
149+
});
150+
});
151+
152+
// Hit bottom wall - Lose
153+
if (ball.y + ball.size > canvas.height) {
154+
showAllBricks();
155+
score = 0;
156+
}
157+
}
158+
159+
// Increase score
160+
function increaseScore() {
161+
score++;
162+
163+
if (score % (brickRowCount * brickColumnCount) === 0) {
164+
165+
ball.visible = false;
166+
paddle.visible = false;
167+
168+
//After 0.5 sec restart the game
169+
setTimeout(function () {
170+
showAllBricks();
171+
score = 0;
172+
paddle.x = canvas.width / 2 - 40;
173+
paddle.y = canvas.height - 20;
174+
ball.x = canvas.width / 2;
175+
ball.y = canvas.height / 2;
176+
ball.visible = true;
177+
paddle.visible = true;
178+
},delay)
179+
}
180+
}
181+
182+
// Make all bricks appear
183+
function showAllBricks() {
184+
bricks.forEach(column => {
185+
column.forEach(brick => (brick.visible = true));
186+
});
187+
}
188+
189+
// Draw everything
190+
function draw() {
191+
// clear canvas
192+
ctx.clearRect(0, 0, canvas.width, canvas.height);
193+
194+
drawBall();
195+
drawPaddle();
196+
drawScore();
197+
drawBricks();
198+
}
199+
200+
// Update canvas drawing and animation
201+
function update() {
202+
movePaddle();
203+
moveBall();
204+
205+
// Draw everything
206+
draw();
207+
208+
requestAnimationFrame(update);
209+
}
210+
211+
update();
212+
213+
// Keydown event
214+
function keyDown(e) {
215+
if (e.key === 'Right' || e.key === 'ArrowRight') {
216+
paddle.dx = paddle.speed;
217+
} else if (e.key === 'Left' || e.key === 'ArrowLeft') {
218+
paddle.dx = -paddle.speed;
219+
}
220+
}
221+
222+
// Keyup event
223+
function keyUp(e) {
224+
if (
225+
e.key === 'Right' ||
226+
e.key === 'ArrowRight' ||
227+
e.key === 'Left' ||
228+
e.key === 'ArrowLeft'
229+
) {
230+
paddle.dx = 0;
231+
}
232+
}
233+
234+
// Keyboard event handlers
235+
document.addEventListener('keydown', keyDown);
236+
document.addEventListener('keyup', keyUp);
237+
238+
// Rules and close event handlers
239+
rulesBtn.addEventListener('click', () => rules.classList.add('show'));
240+
closeBtn.addEventListener('click', () => rules.classList.remove('show'));

Diff for: ‎breakout-game/style.css

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
background-color: #0095dd;
7+
display: flex;
8+
flex-direction: column;
9+
align-items: center;
10+
justify-content: center;
11+
font-family: Arial, Helvetica, sans-serif;
12+
min-height: 100vh;
13+
margin: 0;
14+
}
15+
16+
h1 {
17+
font-size: 45px;
18+
color: #fff;
19+
}
20+
21+
canvas {
22+
background: #f0f0f0;
23+
display: block;
24+
border-radius: 5px;
25+
}
26+
27+
.btn {
28+
cursor: pointer;
29+
border: 0;
30+
padding: 10px 20px;
31+
background: #000;
32+
color: #fff;
33+
border-radius: 5px;
34+
}
35+
36+
.btn:focus {
37+
outline: 0;
38+
}
39+
40+
.btn:hover {
41+
background: #222;
42+
}
43+
44+
.btn:active {
45+
transform: scale(0.98);
46+
}
47+
48+
.rules-btn {
49+
position: absolute;
50+
top: 30px;
51+
left: 30px;
52+
}
53+
54+
.rules {
55+
position: absolute;
56+
top: 0;
57+
left: 0;
58+
background: #333;
59+
color: #fff;
60+
min-height: 100vh;
61+
width: 400px;
62+
padding: 20px;
63+
line-height: 1.5;
64+
transform: translateX(-400px);
65+
transition: transform 1s ease-in-out;
66+
}
67+
68+
.rules.show {
69+
transform: translateX(0);
70+
}

Diff for: ‎custom-video-player/README.md

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
## Custom Video Player
2+
3+
Custom video player using the HTML5 video element and it's JavaScript API with a custom design
4+
5+
## Project Specifications
6+
7+
- Display custom video player styled with CSS
8+
- Play/pause
9+
- Stop
10+
- Video progress bar
11+
- Set progress bar time
12+
- Display time in mins and seconds

0 commit comments

Comments
 (0)