Skip to content

Commit de7e3b4

Browse files
tsb99xtsb99x
committed
feat: add arkanoid brick breaker single-page web application
- Introduce `arkanoid/` directory with complete game implementation - Update root `README.md` and `AGENTS.md` to include the new project - Implement game using HTML5 Canvas with Catppuccin Mocha dark theme - Include score tracking, lives system, level progression, and restart functionality - Add comprehensive JSDoc documentation and type hints as per agent constraints
1 parent 9a5c47d commit de7e3b4

8 files changed

Lines changed: 923 additions & 0 deletions

File tree

‎AGENTS.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ Each subfolder is an independent project with its own `AGENTS.md` that describes
1414
| `tldr/` | Linux TLDR Commands single-page web application |
1515
| `games-ontology/` | Games Ontology interactive knowledge graph visualizing game relationships |
1616
| `flash-cards/` | Chinese language learning flashcards for HSK vocabulary |
17+
| `arkanoid/` | Classic Arkanoid (brick breaker) single-page web application |
1718

1819
## Agent Instructions
1920

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ This is a repository for my vibecoding experiments. This project explores the ac
3636
| [`tldr/`](tldr/) | Linux TLDR Commands single-page web application |
3737
| [`games-ontology/`](games-ontology/) | Games Ontology interactive knowledge graph visualizing game relationships |
3838
| [`flash-cards/`](flash-cards/) | Chinese language learning flashcards for HSK vocabulary |
39+
| [`arkanoid/`](arkanoid/) | Classic Arkanoid (brick breaker) single-page web application |
3940

4041
## Articles
4142

‎arkanoid/AGENTS.md‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
# AGENTS.md — Arkanoid
2+
3+
## Project Overview
4+
A classic Arkanoid (brick breaker) game implemented as a single-page web application. The player controls a paddle at the bottom of the screen to bounce a ball and destroy rows of colored bricks. The game ends when the ball falls below the paddle or all bricks are destroyed.
5+
6+
## File Structure
7+
```
8+
arkanoid/
9+
├── index.html — HTML structure with canvas and UI controls
10+
├── style.css — All styling (Catppuccin Mocha theme)
11+
└── script.js — All game logic (ball, paddle, bricks, collision)
12+
```
13+
14+
## Constraints
15+
16+
### Styling
17+
- **Use Catppuccin Mocha palette** exclusively.
18+
- **No light mode** — dark theme only, always.
19+
20+
### Code Organization
21+
- **Separate CSS and JS from HTML.** Keep styles in `style.css` and logic in `script.js`; never inline them in `index.html`.
22+
- Each file has a single responsibility.
23+
- **JSDoc with type hints required.** All variables, constants, and functions must include JDoc comments with proper `@typedef`, `@type`, parameter types, and return type annotations.
24+
25+
### Game Features
26+
- Ball bounces off walls, paddle, and bricks
27+
- Paddle controlled by mouse or keyboard (arrow keys / WASD)
28+
- Multiple rows of colored bricks
29+
- Score tracking
30+
- Lives system (3 lives)
31+
- Level progression (win when all bricks destroyed)
32+
- Game over when lives reach 0
33+
- Restart option
34+
35+
### UI Elements
36+
- Start/Pause button
37+
- Score and lives display
38+
- Game over / win overlay with restart button
39+
- "Back to Main Page" button linking to `../index.html`
40+
41+
## Catppuccin Mocha Colors (Reference)
42+
| Token | Hex | Usage |
43+
|------------|----------|---------------------------|
44+
| Base | `#1e1e2e`| Main background |
45+
| Mantle | `#181825`| Container/surface bg |
46+
| Crust | `#11111b`| Darkest elements |
47+
| Surface 0 | `#313244`| Inputs, cards |
48+
| Surface 1 | `#45475a`| Borders, dividers |
49+
| Subtext 0 | `#a6adc8`| Labels, secondary text |
50+
| Text | `#cdd6f4`| Primary text |
51+
| Lavender | `#b4befe`| Headings |
52+
| Blue | `#89b4fa`| Buttons, focus borders |
53+
| Mauve | `#cba6f7`| Section titles |
54+
| Green | `#a6e3a1`| Positive values, paddle |
55+
| Red | `#f38ba8`| Negative values, errors |
56+
| Peach | `#fab387`| Bricks row color |
57+
| Yellow | `#f9e2af`| Bricks row color |
58+
| Rosewater | `#f5c2e7`| Bricks row color |
59+
60+
## Game Mechanics
61+
- **Canvas Size:** 480x600 pixels
62+
- **Paddle:** 80px wide, 12px high, moves horizontally
63+
- **Ball:** 8px radius
64+
- **Bricks:** 60px wide, 18px high, 5 rows x 7 columns
65+
- **Initial Speed:** 4 px/frame for ball
66+
- **Lives:** 3
67+
- **Controls:** Mouse movement or arrow keys / A,D

‎arkanoid/README.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Arkanoid
2+
3+
A classic Arkanoid (brick breaker) game implemented as a single-page web application.
4+
5+
## Features
6+
7+
- **Ball & Paddle Physics** — Ball bounces off walls, paddle, and bricks with angle-based paddle deflection
8+
- **Keyboard Controls** — Arrow keys or WASD (A/D) to move the paddle
9+
- **Mouse Controls** — Move paddle by hovering over the canvas
10+
- **Lives System** — 3 lives; lose one when the ball falls below the paddle
11+
- **Score Tracking** — +10 points per destroyed brick
12+
- **Win / Game Over** — Win by destroying all bricks; game over when lives reach 0
13+
- **Pause** — Press Space, P, or click the Pause button
14+
- **Catppuccin Mocha Theme** — Dark theme only, no light mode
15+
16+
## How to Play
17+
18+
1. Open `index.html` in a browser.
19+
2. Click **Start** to begin.
20+
3. Move the paddle with the mouse or arrow keys / WASD.
21+
4. Bounce the ball to destroy all bricks.
22+
5. Press **Space** or **P** to pause/resume.
23+
24+
## File Structure
25+
26+
| File | Description |
27+
|------|-------------|
28+
| `index.html` | HTML structure with canvas and UI controls |
29+
| `style.css` | All styling (Catppuccin Mocha theme) |
30+
| `script.js` | All game logic (ball, paddle, bricks, collision) |
31+
32+
## Game Mechanics
33+
34+
| Property | Value |
35+
|----------|-------|
36+
| Canvas Size | 480 × 600 px |
37+
| Paddle | 80 × 12 px |
38+
| Ball Radius | 6 px |
39+
| Bricks | 60 × 18 px, 5 rows × 7 columns |
40+
| Initial Ball Speed | 4 px/frame |
41+
| Lives | 3 |

‎arkanoid/index.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
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+
<title>Arkanoid</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<header>
12+
<h1>Arkanoid</h1>
13+
<nav>
14+
<a href="../index.html" class="back-btn">← Back to Main Page</a>
15+
</nav>
16+
</header>
17+
18+
<div class="game-wrapper">
19+
<div class="game-info">
20+
<div class="info-item">
21+
<span class="label">Score:</span>
22+
<span id="score">0</span>
23+
</div>
24+
<div class="info-item">
25+
<span class="label">Lives:</span>
26+
<span id="lives">3</span>
27+
</div>
28+
<div class="info-item">
29+
<span class="label">Level:</span>
30+
<span id="level">1</span>
31+
</div>
32+
</div>
33+
34+
<canvas id="gameCanvas" width="480" height="600"></canvas>
35+
36+
<div class="controls">
37+
<button id="startBtn">Start</button>
38+
<button id="pauseBtn" disabled>Pause</button>
39+
<button id="restartBtn" style="display: none;">Restart</button>
40+
</div>
41+
</div>
42+
43+
<div id="overlay" class="overlay" style="display: none;">
44+
<div class="overlay-content">
45+
<h2 id="overlayTitle">Game Over</h2>
46+
<p id="overlayMessage"></p>
47+
<button id="overlayRestartBtn">Play Again</button>
48+
</div>
49+
</div>
50+
</div>
51+
52+
<script src="script.js"></script>
53+
</body>
54+
</html>

0 commit comments

Comments
 (0)