tetris klaar
This commit is contained in:
martijn.diersmann@pm.me
@@ -0,0 +1,6 @@
|
|||||||
|
.git
|
||||||
|
.DS_Store
|
||||||
|
README.md
|
||||||
|
Makefile
|
||||||
|
k8s/
|
||||||
|
*.log
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
.DS_Store
|
||||||
|
node_modules/
|
||||||
|
*.log
|
||||||
+21
@@ -0,0 +1,21 @@
|
|||||||
|
# Serveert de statische Tetris-game via nginx.
|
||||||
|
# nginx:alpine draait standaard de master als root en wisselt zelf naar de
|
||||||
|
# 'nginx'-user voor de workers; hierdoor werkt de entrypoint-configuratie
|
||||||
|
# (schrijven naar /etc/nginx/conf.d en /var/cache) zonder aanpassingen.
|
||||||
|
FROM nginx:1.27-alpine
|
||||||
|
|
||||||
|
# Game-bestanden kopieren naar de web-root
|
||||||
|
COPY game/ /usr/share/nginx/html/
|
||||||
|
|
||||||
|
# Extra headers voor veiligheid en caching
|
||||||
|
RUN { \
|
||||||
|
echo 'server_tokens off;'; \
|
||||||
|
echo 'add_header X-Content-Type-Options nosniff;'; \
|
||||||
|
echo 'gzip_types text/css application/javascript application/json image/svg+xml;'; \
|
||||||
|
} > /etc/nginx/conf.d/security.conf
|
||||||
|
|
||||||
|
EXPOSE 80
|
||||||
|
|
||||||
|
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
|
||||||
|
CMD wget --quiet --tries=1 --spider http://127.0.0.1/ || exit 1
|
||||||
|
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
IMAGE ?= neo-tetris
|
||||||
|
TAG ?= latest
|
||||||
|
CTX ?= $(shell kubectl config current-context 2>/dev/null)
|
||||||
|
|
||||||
|
.PHONY: build push run deploy undeploy preview serve test pf status
|
||||||
|
|
||||||
|
## Lokaal de game draaien (zonder Docker)
|
||||||
|
serve:
|
||||||
|
python3 -m http.server 8000 --directory game
|
||||||
|
|
||||||
|
## Docker-image bouwen
|
||||||
|
build:
|
||||||
|
docker build -t $(IMAGE):$(TAG) .
|
||||||
|
|
||||||
|
## Image naar registry pushen
|
||||||
|
push:
|
||||||
|
docker push $(IMAGE):$(TAG)
|
||||||
|
|
||||||
|
## Container lokaal draaien op poort 8080
|
||||||
|
run:
|
||||||
|
docker run --rm -p 8080:80 $(IMAGE):$(TAG)
|
||||||
|
|
||||||
|
## K8s-manifests renderen/valideren (zonder iets te deployen)
|
||||||
|
preview:
|
||||||
|
kubectl kustomize k8s/
|
||||||
|
|
||||||
|
## Alles deployen naar Kubernetes
|
||||||
|
deploy:
|
||||||
|
kubectl apply -k k8s/ --context $(CTX)
|
||||||
|
|
||||||
|
## Alles verwijderen uit Kubernetes
|
||||||
|
undeploy:
|
||||||
|
kubectl delete -k k8s/ --context $(CTX)
|
||||||
|
|
||||||
|
## Logs van de pods volgen
|
||||||
|
logs:
|
||||||
|
kubectl logs -n games -l app=neo-tetris -f --context $(CTX)
|
||||||
|
|
||||||
|
## Spelen via port-forward (kiest je lokale browser op http://localhost:8088)
|
||||||
|
pf:
|
||||||
|
kubectl port-forward -n games svc/neo-tetris 8088:80 --context $(CTX)
|
||||||
|
|
||||||
|
## Status van de deployment bekijken
|
||||||
|
status:
|
||||||
|
kubectl -n games get pods,svc --context $(CTX)
|
||||||
@@ -0,0 +1,105 @@
|
|||||||
|
# Neo Tetris
|
||||||
|
|
||||||
|
Een Tetris-clone als pure browser-game (HTML/CSS/JS + Canvas), zonder backend
|
||||||
|
of database. De highscore wordt per browser bijgehouden via `localStorage`.
|
||||||
|
Het geheel draait als statische content achter nginx en is bedoeld om in
|
||||||
|
Kubernetes te draaien.
|
||||||
|
|
||||||
|
## Speel het spel
|
||||||
|
|
||||||
|
**Besturing:**
|
||||||
|
|
||||||
|
| Toets | Actie |
|
||||||
|
| ---------------- | ---------------------- |
|
||||||
|
| `◀` / `▶` | verschuiven |
|
||||||
|
| `▼` | zacht laten zakken |
|
||||||
|
| `▲` / `X` | rechtsom draaien |
|
||||||
|
| `Z` | linksom draaien |
|
||||||
|
| `Spatie` | hard drop |
|
||||||
|
| `C` | hold |
|
||||||
|
| `P` | pauze |
|
||||||
|
| `R` | opnieuw starten |
|
||||||
|
|
||||||
|
Regels: vorm lijnen met de 7 tetromino's. Elke 10 lijnen ga je een level omhoog
|
||||||
|
en valt het blok sneller. Punten: 1 rij = 100, 2 = 300, 3 = 500, 4 = 800
|
||||||
|
(komma's vermenigvuldigd met je level), plus bonus voor hard/soft drop.
|
||||||
|
Verdien je een top-10 score, dan kun je je naam invullen.
|
||||||
|
|
||||||
|
## Projectstructuur
|
||||||
|
|
||||||
|
```
|
||||||
|
game/ # de statische game (index.html, css/, js/)
|
||||||
|
k8s/ # Kubernetes-manifests (kustomize)
|
||||||
|
Dockerfile # nginx-image die game/ serveert
|
||||||
|
Makefile # handige commands
|
||||||
|
```
|
||||||
|
|
||||||
|
## Lokaal ontwikkelen
|
||||||
|
|
||||||
|
Zonder Docker:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
make serve
|
||||||
|
# open http://localhost:8000
|
||||||
|
```
|
||||||
|
|
||||||
|
Met Docker:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
make build
|
||||||
|
make run
|
||||||
|
# open http://localhost:8080
|
||||||
|
```
|
||||||
|
|
||||||
|
## Deployen naar Kubernetes
|
||||||
|
|
||||||
|
De manifests zitten in `k8s/` (kustomize) en bestaan uit:
|
||||||
|
`namespace.yaml`, `deployment.yaml` en `service.yaml` (NodePort op `30080`).
|
||||||
|
|
||||||
|
1. Pas de `image` in `k8s/deployment.yaml` aan naar jouw registry
|
||||||
|
(bijv. `ghcr.io/<gebruiker>/neo-tetris:latest`), of gebruik een lokaal
|
||||||
|
cluster (k3d/kind) met `imagePullPolicy: IfNotPresent`.
|
||||||
|
2. Deployen:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
make build && make push # image in je registry zetten
|
||||||
|
make preview # manifests valideren (kubectl kustomize)
|
||||||
|
make deploy # kubectl apply -k k8s/
|
||||||
|
```
|
||||||
|
|
||||||
|
Daarna is het spel bereikbaar op het **NodePort**-adres van elk knooppunt:
|
||||||
|
|
||||||
|
```text
|
||||||
|
http://<kube-node-ip>:30080/
|
||||||
|
```
|
||||||
|
|
||||||
|
De game is volledig stateless en kan dus eenvoudig horizontaal worden
|
||||||
|
opgeschaald (`kubectl scale deployment neo-tetris -n games --replicas=5`).
|
||||||
|
|
||||||
|
### Lokaal testen met kind (op macOS)
|
||||||
|
|
||||||
|
Op macOS draait kind in een VM en is het interne node-IP niet vanaf de host
|
||||||
|
bereikbaar. Gebruik daarvoor `kind-config.yaml` in deze repo, die poort
|
||||||
|
`30080` van het knooppunt naar `localhost` doorzet:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
kind create cluster --config kind-config.yaml --name kind
|
||||||
|
kind load docker-image neo-tetris:latest --name kind
|
||||||
|
make deploy
|
||||||
|
# open http://localhost:30080
|
||||||
|
```
|
||||||
|
|
||||||
|
### Handige commando's
|
||||||
|
|
||||||
|
```bash
|
||||||
|
make status # pods/service in één oogopslag
|
||||||
|
make logs # logs van de pods volgen
|
||||||
|
make pf # alternatief: tijdelijk port-forwarden naar localhost:8088
|
||||||
|
make undeploy # alles verwijderen (kubectl delete -k k8s/)
|
||||||
|
```
|
||||||
|
|
||||||
|
## Highscores
|
||||||
|
|
||||||
|
Scores staan in `localStorage` (top 10 per browser). Wil je later één gedeelde
|
||||||
|
ranglijst voor alle spelers, dan kun je er een klein stateless API'tje
|
||||||
|
(met een database) voor toevoegen zonder de game zelf te veranderen.
|
||||||
@@ -0,0 +1,403 @@
|
|||||||
|
/* ---------- basis ---------- */
|
||||||
|
:root {
|
||||||
|
--bg: #070a11;
|
||||||
|
--panel: #10141f;
|
||||||
|
--panel-border: #1e2637;
|
||||||
|
--text: #dbe4f0;
|
||||||
|
--muted: #75839c;
|
||||||
|
--accent: #35d23d;
|
||||||
|
--accent2: #3c6cf0;
|
||||||
|
--radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: radial-gradient(1200px 800px at 50% -10%, #152137 0%, var(--bg) 60%);
|
||||||
|
color: var(--text);
|
||||||
|
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||||
|
padding: 20px 16px 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
kbd {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 0.7em;
|
||||||
|
background: #1d2638;
|
||||||
|
border: 1px solid #2c3952;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 1px 6px;
|
||||||
|
color: var(--muted);
|
||||||
|
margin-left: 6px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- layout ---------- */
|
||||||
|
.layout {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 210px 300px 260px;
|
||||||
|
gap: 22px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: start;
|
||||||
|
max-width: 1000px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
font-weight: 900;
|
||||||
|
letter-spacing: 0.35em;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
color: var(--text);
|
||||||
|
text-shadow: 0 0 18px rgba(53, 210, 61, 0.35), 0 0 40px rgba(60, 108, 240, 0.25);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title span {
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- panelen ---------- */
|
||||||
|
.panel {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
background: linear-gradient(180deg, var(--panel) 0%, #0d111b 100%);
|
||||||
|
border: 1px solid var(--panel-border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
padding: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-title {
|
||||||
|
font-size: 0.78rem;
|
||||||
|
letter-spacing: 0.28em;
|
||||||
|
color: var(--muted);
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box canvas {
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* statistieken */
|
||||||
|
.stats {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: baseline;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat .label {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat .value {
|
||||||
|
font-size: 1.35rem;
|
||||||
|
font-weight: 800;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- speelbord ---------- */
|
||||||
|
.play-area {
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.board-wrap {
|
||||||
|
position: relative;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 0 0 1px var(--panel-border), 0 20px 60px rgba(0, 0, 0, 0.55);
|
||||||
|
}
|
||||||
|
|
||||||
|
#canvas-board {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
image-rendering: pixelated;
|
||||||
|
background: #0a0e17;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- overlay ---------- */
|
||||||
|
.overlay {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: rgba(5, 8, 14, 0.72);
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
-webkit-backdrop-filter: blur(4px);
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay-card {
|
||||||
|
background: linear-gradient(180deg, #141a29, #0d1120);
|
||||||
|
border: 1px solid var(--panel-border);
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 26px 30px;
|
||||||
|
width: 84%;
|
||||||
|
text-align: center;
|
||||||
|
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay-card h2 {
|
||||||
|
font-size: 1.7rem;
|
||||||
|
letter-spacing: 0.24em;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#overlay-sub {
|
||||||
|
color: var(--muted);
|
||||||
|
|
||||||
|
#name-form label {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--muted);
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#name-form.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#name-input {
|
||||||
|
background: #0a0f1a;
|
||||||
|
border: 1px solid #2c3952;
|
||||||
|
border-radius: 7px;
|
||||||
|
color: var(--text);
|
||||||
|
font-size: 1rem;
|
||||||
|
padding: 9px 12px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#name-input:focus {
|
||||||
|
border-color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
color: #ff6b6b;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 11px 18px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
color: var(--text);
|
||||||
|
background: #1d2638;
|
||||||
|
border: 1px solid #2c3952;
|
||||||
|
transition: transform 0.05s ease, filter 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover {
|
||||||
|
filter: brightness(1.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-accent {
|
||||||
|
background: linear-gradient(180deg, var(--accent), #1f9c26);
|
||||||
|
border-color: transparent;
|
||||||
|
color: #05160b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay-hint {
|
||||||
|
margin-top: 14px;
|
||||||
|
font-size: 0.72rem;
|
||||||
|
color: var(--muted);
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- highscores ---------- */
|
||||||
|
.highscore-list {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
max-height: 300px;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highscore-list li {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 10px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
padding: 6px 8px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.highscore-list li.no-scores {
|
||||||
|
color: var(--muted);
|
||||||
|
font-style: italic;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hs-rank {
|
||||||
|
width: 20px;
|
||||||
|
color: var(--muted);
|
||||||
|
font-weight: 700;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hs-name {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hs-score {
|
||||||
|
font-weight: 800;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- besturing ---------- */
|
||||||
|
.controls-table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls-table td {
|
||||||
|
padding: 4px 0;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls-table td:first-child {
|
||||||
|
width: 70px;
|
||||||
|
color: var(--text);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- touch-controls (mobiel) ---------- */
|
||||||
|
.touch-controls {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- responsief ---------- */
|
||||||
|
@media (max-width: 880px) {
|
||||||
|
.layout {
|
||||||
|
grid-template-columns: 300px;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-left,
|
||||||
|
.panel-right {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
width: 300px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-left .box:first-child {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.touch-controls {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
display: grid;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 10px 12px 14px;
|
||||||
|
background: linear-gradient(180deg, transparent, rgba(7, 10, 17, 0.95) 30%);
|
||||||
|
z-index: 20;
|
||||||
|
}
|
||||||
|
|
||||||
|
.touch-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 8px;
|
||||||
|
max-width: 360px;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t-btn {
|
||||||
|
padding: 14px 0;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text);
|
||||||
|
background: rgba(29, 38, 56, 0.85);
|
||||||
|
border: 1px solid #2c3952;
|
||||||
|
border-radius: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
touch-action: manipulation;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t-btn:active {
|
||||||
|
background: var(--accent2);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
padding-bottom: 180px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
margin-bottom: 16px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#name-form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
text-align: left;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
+108
@@ -0,0 +1,108 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="nl">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
|
||||||
|
<title>Neo Tetris</title>
|
||||||
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%230b1118'/%3E%3Crect x='3' y='3' width='4' height='4' fill='%2335d23d'/%3E%3Crect x='9' y='3' width='4' height='4' fill='%2335d23d'/%3E%3Crect x='9' y='9' width='4' height='4' fill='%2335d23d'/%3E%3C/svg%3E" />
|
||||||
|
<link rel="stylesheet" href="css/style.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main class="layout">
|
||||||
|
<!-- Linkerpaneel: hold + statistieken -->
|
||||||
|
<section class="panel panel-left">
|
||||||
|
<div class="box">
|
||||||
|
<h2 class="box-title">HOLD <kbd>C</kbd></h2>
|
||||||
|
<canvas id="canvas-hold" width="120" height="120"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box stats">
|
||||||
|
<div class="stat">
|
||||||
|
<span class="label">Score</span>
|
||||||
|
<span id="stat-score" class="value">0</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat">
|
||||||
|
<span class="label">Lijnen</span>
|
||||||
|
<span id="stat-lines" class="value">0</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat">
|
||||||
|
<span class="label">Level</span>
|
||||||
|
<span id="stat-level" class="value">1</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Centrum: het speelbord -->
|
||||||
|
<section class="play-area">
|
||||||
|
<h1 class="title">NEO <span>TE­TRIS</span></h1>
|
||||||
|
<div class="board-wrap">
|
||||||
|
<canvas id="canvas-board" width="300" height="600"></canvas>
|
||||||
|
|
||||||
|
<div id="overlay" class="overlay hidden">
|
||||||
|
<div class="overlay-card">
|
||||||
|
<h2 id="overlay-title">PAUZE</h2>
|
||||||
|
<p id="overlay-sub"></p>
|
||||||
|
<form id="name-form" class="hidden" autocomplete="off">
|
||||||
|
<label for="name-input">Naam:</label>
|
||||||
|
<input id="name-input" type="text" maxlength="12" placeholder="Speler" />
|
||||||
|
<p id="name-error" class="error hidden">Vul een naam in.</p>
|
||||||
|
<button type="button" id="btn-submit" class="btn btn-accent">Opslaan</button>
|
||||||
|
</form>
|
||||||
|
<div class="overlay-actions">
|
||||||
|
<button type="button" id="btn-primary" class="btn btn-accent">Opnieuw spelen</button>
|
||||||
|
<button type="button" id="btn-secondary" class="btn hidden">Doorgaan</button>
|
||||||
|
</div>
|
||||||
|
<p class="overlay-hint">ENTER of klik op een knop</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Rechterpaneel: next + highscores + besturing -->
|
||||||
|
<section class="panel panel-right">
|
||||||
|
<div class="box">
|
||||||
|
<h2 class="box-title">NEXT</h2>
|
||||||
|
<canvas id="canvas-next" width="120" height="252"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box">
|
||||||
|
<h2 class="box-title">HIGHSCORES</h2>
|
||||||
|
<ol id="highscore-list" class="highscore-list"></ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<details class="box controls" open>
|
||||||
|
<summary class="box-title">BESTURING</summary>
|
||||||
|
<table class="controls-table">
|
||||||
|
<tr><td>◀ ▶</td><td>verschuiven</td></tr>
|
||||||
|
<tr><td>▼</td><td>zacht laten zakken</td></tr>
|
||||||
|
<tr><td>▲ / X</td><td>rechtsom draaien</td></tr>
|
||||||
|
<tr><td>Z</td><td>linksom draaien</td></tr>
|
||||||
|
<tr><td>Spatie</td><td>hard drop</td></tr>
|
||||||
|
<tr><td>C</td><td>hold</td></tr>
|
||||||
|
<tr><td>P</td><td>pauze</td></tr>
|
||||||
|
<tr><td>R</td><td>opnieuw starten</td></tr>
|
||||||
|
</table>
|
||||||
|
</details>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Touch-controls (mobiel) -->
|
||||||
|
<div class="touch-controls">
|
||||||
|
<div class="touch-row">
|
||||||
|
<button type="button" class="t-btn" data-action="rotate" aria-label="Draaien">⟳</button>
|
||||||
|
<button type="button" class="t-btn" data-action="hold" aria-label="Hold">HOLD</button>
|
||||||
|
<button type="button" class="t-btn" data-action="hard" aria-label="Hard drop">⤓</button>
|
||||||
|
</div>
|
||||||
|
<div class="touch-row">
|
||||||
|
<button type="button" class="t-btn" data-action="left" aria-label="Links">◀</button>
|
||||||
|
<button type="button" class="t-btn" data-action="drop" aria-label="Omlaag">▼</button>
|
||||||
|
<button type="button" class="t-btn" data-action="right" aria-label="Rechts">▶</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="js/constants.js"></script>
|
||||||
|
<script src="js/tetris.js"></script>
|
||||||
|
<script src="js/render.js"></script>
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,87 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
/* Centrale configuratie voor het spel */
|
||||||
|
const CONSTANTS = {
|
||||||
|
COLS: 10, // breedte van het bord
|
||||||
|
ROWS: 20, // hoogte van het bord
|
||||||
|
CELL: 30, // pixelgrootte van een cel op het bord
|
||||||
|
PREVIEW_CELL: 18, // pixelgrootte van een cel in de previews
|
||||||
|
PREVIEW_COUNT: 3, // aantal zichtbare volgende blokken
|
||||||
|
COLORS: {
|
||||||
|
I: '#00e5f0',
|
||||||
|
O: '#f7d000',
|
||||||
|
T: '#b14ce0',
|
||||||
|
S: '#35d23d',
|
||||||
|
Z: '#f03c3c',
|
||||||
|
J: '#3c6cf0',
|
||||||
|
L: '#f09a20'
|
||||||
|
},
|
||||||
|
SCORE: {
|
||||||
|
SINGLE: 100, // 1 rij
|
||||||
|
DOUBLE: 300, // 2 rijen
|
||||||
|
TRIPLE: 500, // 3 rijen
|
||||||
|
TETRIS: 800, // 4 rijen
|
||||||
|
SOFT_DROP: 1, // punt per cel bij zachte drop
|
||||||
|
HARD_DROP: 2, // punten per cel bij harde drop
|
||||||
|
LINES_PER_LEVEL: 10 // aantal rijen nodig voor een nieuw level
|
||||||
|
},
|
||||||
|
GRAVITY: [800, 720, 630, 550, 470, 380, 300, 220, 160, 100,
|
||||||
|
80, 70, 60, 50, 40, 30, 20, 15, 10, 10], // ms per zetje per level
|
||||||
|
HIGHSCORE_KEY: 'neo-tetris.highscores',
|
||||||
|
PLAYER_NAME_KEY: 'neo-tetris.playername',
|
||||||
|
MAX_HIGHSCORES: 10
|
||||||
|
};
|
||||||
|
|
||||||
|
/* Punten per aantal tegelijk gewiste rijen (index = aantal rijen) */
|
||||||
|
const SCORE_POINTS = [0, 100, 300, 500, 800];
|
||||||
|
|
||||||
|
/* Definitie van de 7 tetromino's als matrices (1 = gevuld blokje) */
|
||||||
|
const SHAPES = {
|
||||||
|
I: [
|
||||||
|
[0, 0, 0, 0],
|
||||||
|
[1, 1, 1, 1],
|
||||||
|
[0, 0, 0, 0],
|
||||||
|
[0, 0, 0, 0]
|
||||||
|
],
|
||||||
|
O: [
|
||||||
|
[1, 1],
|
||||||
|
[1, 1]
|
||||||
|
],
|
||||||
|
T: [
|
||||||
|
[0, 1, 0],
|
||||||
|
[1, 1, 1],
|
||||||
|
[0, 0, 0]
|
||||||
|
],
|
||||||
|
S: [
|
||||||
|
[0, 1, 1],
|
||||||
|
[1, 1, 0],
|
||||||
|
[0, 0, 0]
|
||||||
|
],
|
||||||
|
Z: [
|
||||||
|
[1, 1, 0],
|
||||||
|
[0, 1, 1],
|
||||||
|
[0, 0, 0]
|
||||||
|
],
|
||||||
|
J: [
|
||||||
|
[1, 0, 0],
|
||||||
|
[1, 1, 1],
|
||||||
|
[0, 0, 0]
|
||||||
|
],
|
||||||
|
L: [
|
||||||
|
[0, 0, 1],
|
||||||
|
[1, 1, 1],
|
||||||
|
[0, 0, 0]
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
const PIECE_TYPES = Object.keys(SHAPES);
|
||||||
|
|
||||||
|
/* Eenvoudige wall-kicks die proberen een blokje langs obstakels te schuiven bij rotatie */
|
||||||
|
const WALL_KICKS = [
|
||||||
|
[ 0, 0],
|
||||||
|
[-1, 0],
|
||||||
|
[ 1, 0],
|
||||||
|
[ 0, -1],
|
||||||
|
[-2, 0],
|
||||||
|
[ 2, 0]
|
||||||
|
];
|
||||||
+274
@@ -0,0 +1,274 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
/* ---------- DOM-referenties ---------- */
|
||||||
|
const boardCanvas = document.getElementById('canvas-board');
|
||||||
|
const holdCanvas = document.getElementById('canvas-hold');
|
||||||
|
const nextCanvas = document.getElementById('canvas-next');
|
||||||
|
|
||||||
|
const elScore = document.getElementById('stat-score');
|
||||||
|
const elLines = document.getElementById('stat-lines');
|
||||||
|
const elLevel = document.getElementById('stat-level');
|
||||||
|
|
||||||
|
const overlay = document.getElementById('overlay');
|
||||||
|
const overlayTitle = document.getElementById('overlay-title');
|
||||||
|
const overlaySub = document.getElementById('overlay-sub');
|
||||||
|
const nameForm = document.getElementById('name-form');
|
||||||
|
const nameInput = document.getElementById('name-input');
|
||||||
|
const nameError = document.getElementById('name-error');
|
||||||
|
const submitBtn = document.getElementById('btn-submit');
|
||||||
|
const btnPrimary = document.getElementById('btn-primary');
|
||||||
|
const btnSecondary = document.getElementById('btn-secondary');
|
||||||
|
|
||||||
|
const highscoreList = document.getElementById('highscore-list');
|
||||||
|
|
||||||
|
const game = new TetrisGame();
|
||||||
|
game.onUpdate = renderUI;
|
||||||
|
|
||||||
|
let gameOverHandled = false;
|
||||||
|
|
||||||
|
/* ---------- highscore-opslag in localStorage ---------- */
|
||||||
|
function loadScores() {
|
||||||
|
try {
|
||||||
|
const raw = localStorage.getItem(CONSTANTS.HIGHSCORE_KEY);
|
||||||
|
const list = raw ? JSON.parse(raw) : [];
|
||||||
|
return Array.isArray(list) ? list : [];
|
||||||
|
} catch (e) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveScores(list) {
|
||||||
|
try {
|
||||||
|
localStorage.setItem(
|
||||||
|
CONSTANTS.HIGHSCORE_KEY,
|
||||||
|
JSON.stringify(list.slice(0, CONSTANTS.MAX_HIGHSCORES))
|
||||||
|
);
|
||||||
|
} catch (e) {
|
||||||
|
/* opslag niet beschikbaar (bv. private browsing) - negeren */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function qualifies(score) {
|
||||||
|
if (score <= 0) return false;
|
||||||
|
const list = loadScores();
|
||||||
|
if (list.length < CONSTANTS.MAX_HIGHSCORES) return true;
|
||||||
|
return score > list[list.length - 1].score;
|
||||||
|
}
|
||||||
|
|
||||||
|
function recordScore(name, score, lines, level) {
|
||||||
|
const list = loadScores();
|
||||||
|
const entry = {
|
||||||
|
name: name || 'Speler',
|
||||||
|
score,
|
||||||
|
lines,
|
||||||
|
level,
|
||||||
|
date: new Date().toISOString()
|
||||||
|
};
|
||||||
|
list.push(entry);
|
||||||
|
list.sort((a, b) => b.score - a.score || a.date.localeCompare(b.date));
|
||||||
|
saveScores(list);
|
||||||
|
return list;
|
||||||
|
}
|
||||||
|
|
||||||
|
function escapeHtml(str) {
|
||||||
|
return String(str)
|
||||||
|
.replace(/&/g, '&')
|
||||||
|
.replace(/</g, '<')
|
||||||
|
.replace(/>/g, '>')
|
||||||
|
.replace(/"/g, '"');
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderHighscores() {
|
||||||
|
const list = loadScores();
|
||||||
|
highscoreList.innerHTML = '';
|
||||||
|
if (list.length === 0) {
|
||||||
|
const li = document.createElement('li');
|
||||||
|
li.className = 'no-scores';
|
||||||
|
li.textContent = 'Nog geen scores - wees de eerste!';
|
||||||
|
highscoreList.appendChild(li);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
list.forEach((entry, i) => {
|
||||||
|
const li = document.createElement('li');
|
||||||
|
const rank = document.createElement('span');
|
||||||
|
rank.className = 'hs-rank';
|
||||||
|
rank.textContent = i + 1;
|
||||||
|
const name = document.createElement('span');
|
||||||
|
name.className = 'hs-name';
|
||||||
|
name.textContent = entry.name;
|
||||||
|
const score = document.createElement('span');
|
||||||
|
score.className = 'hs-score';
|
||||||
|
score.textContent = entry.score;
|
||||||
|
li.appendChild(rank);
|
||||||
|
li.appendChild(name);
|
||||||
|
li.appendChild(score);
|
||||||
|
highscoreList.appendChild(li);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- UI-panelen verversen ---------- */
|
||||||
|
function renderUI() {
|
||||||
|
elScore.textContent = game.score;
|
||||||
|
elLines.textContent = game.lines;
|
||||||
|
elLevel.textContent = game.level;
|
||||||
|
drawHold(holdCanvas, game.hold);
|
||||||
|
drawNext(nextCanvas, game);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ---------- overlays (pauze / game over) ---------- */
|
||||||
|
function setOverlay(title, sub, opts = {}) {
|
||||||
|
overlayTitle.textContent = title;
|
||||||
|
overlaySub.textContent = sub || '';
|
||||||
|
nameForm.classList.toggle('hidden', !opts.showName);
|
||||||
|
btnPrimary.textContent = opts.primaryLabel || 'Opnieuw spelen';
|
||||||
|
btnSecondary.classList.toggle('hidden', !opts.showSecondary);
|
||||||
|
overlay.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideOverlay() {
|
||||||
|
overlay.classList.add('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
function togglePause() {
|
||||||
|
if (game.over) return;
|
||||||
|
game.paused = !game.paused;
|
||||||
|
if (game.paused) {
|
||||||
|
setOverlay('PAUZE', 'Druk op P of "Doorgaan" om verder te spelen.', {
|
||||||
|
showSecondary: true,
|
||||||
|
primaryLabel: 'Opnieuw spelen'
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
hideOverlay();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function restartGame() {
|
||||||
|
game.reset();
|
||||||
|
game.paused = false;
|
||||||
|
gameOverHandled = false;
|
||||||
|
nameForm.classList.add('hidden');
|
||||||
|
nameError.classList.add('hidden');
|
||||||
|
hideOverlay();
|
||||||
|
renderUI();
|
||||||
|
}
|
||||||
|
|
||||||
|
function onGameOver() {
|
||||||
|
const topTen = qualifies(game.score);
|
||||||
|
if (topTen) {
|
||||||
|
nameInput.value = localStorage.getItem(CONSTANTS.PLAYER_NAME_KEY) || '';
|
||||||
|
setOverlay('GAME OVER', 'Top 10! Voer je naam in:', {
|
||||||
|
showName: true,
|
||||||
|
primaryLabel: 'Opnieuw spelen'
|
||||||
|
});
|
||||||
|
nameInput.focus();
|
||||||
|
} else {
|
||||||
|
setOverlay('GAME OVER', `Score: ${game.score}`, {
|
||||||
|
primaryLabel: 'Opnieuw spelen'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
renderHighscores();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSubmitScore() {
|
||||||
|
const name = nameInput.value.trim();
|
||||||
|
if (!name) {
|
||||||
|
nameError.classList.remove('hidden');
|
||||||
|
nameInput.focus();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
localStorage.setItem(CONSTANTS.PLAYER_NAME_KEY, name);
|
||||||
|
recordScore(name.slice(0, 12), game.score, game.lines, game.level);
|
||||||
|
nameForm.classList.add('hidden');
|
||||||
|
overlaySub.textContent = 'Score opgeslagen in de highscore-lijst!';
|
||||||
|
renderHighscores();
|
||||||
|
btnPrimary.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- game-loop ---------- */
|
||||||
|
let lastTime = performance.now();
|
||||||
|
|
||||||
|
function loop(now) {
|
||||||
|
const dt = Math.min((now - lastTime) / 1000, 0.25);
|
||||||
|
lastTime = now;
|
||||||
|
|
||||||
|
game.update(dt * 1000);
|
||||||
|
drawBoard(boardCanvas, game);
|
||||||
|
renderUI();
|
||||||
|
|
||||||
|
if (game.over && !gameOverHandled) {
|
||||||
|
gameOverHandled = true;
|
||||||
|
onGameOver();
|
||||||
|
}
|
||||||
|
|
||||||
|
requestAnimationFrame(loop);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- toetsenbord ---------- */
|
||||||
|
const KEYMAP = {
|
||||||
|
ArrowLeft: { fn: () => game.move(-1), prevent: true },
|
||||||
|
ArrowRight: { fn: () => game.move(1), prevent: true },
|
||||||
|
ArrowDown: { fn: () => game.softDrop(), prevent: true },
|
||||||
|
ArrowUp: { fn: () => game.rotate(1), prevent: true },
|
||||||
|
KeyX: { fn: () => game.rotate(1), prevent: true },
|
||||||
|
KeyZ: { fn: () => game.rotate(-1), prevent: false },
|
||||||
|
Space: { fn: () => game.hardDrop(), prevent: true },
|
||||||
|
KeyC: { fn: () => game.holdPiece(), prevent: false },
|
||||||
|
KeyP: { fn: () => togglePause(), prevent: false },
|
||||||
|
KeyR: { fn: () => restartGame(), prevent: false }
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('keydown', (event) => {
|
||||||
|
// typen in het naamveld: alleen Enter voor opslaan
|
||||||
|
if (event.target === nameInput) {
|
||||||
|
if (event.key === 'Enter') {
|
||||||
|
event.preventDefault();
|
||||||
|
handleSubmitScore();
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (event.key === 'Enter' && !overlay.classList.contains('hidden')) {
|
||||||
|
if (game.over) restartGame();
|
||||||
|
else if (game.paused) togglePause();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const binding = KEYMAP[event.code];
|
||||||
|
if (!binding) return;
|
||||||
|
if (binding.prevent) event.preventDefault();
|
||||||
|
binding.fn();
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ---------- knoppen + touch-controls ---------- */
|
||||||
|
btnPrimary.addEventListener('click', () => restartGame());
|
||||||
|
btnSecondary.addEventListener('click', () => {
|
||||||
|
if (game.paused) togglePause();
|
||||||
|
});
|
||||||
|
submitBtn.addEventListener('click', handleSubmitScore);
|
||||||
|
// voorkom dat Enter in het naamveld de pagina ververst (default form-submit)
|
||||||
|
nameForm.addEventListener('submit', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
handleSubmitScore();
|
||||||
|
});
|
||||||
|
|
||||||
|
const ACTION_MAP = {
|
||||||
|
rotate: () => game.rotate(1),
|
||||||
|
rotateCcw: () => game.rotate(-1),
|
||||||
|
hold: () => game.holdPiece(),
|
||||||
|
hard: () => game.hardDrop(),
|
||||||
|
left: () => game.move(-1),
|
||||||
|
right: () => game.move(1),
|
||||||
|
drop: () => game.softDrop()
|
||||||
|
};
|
||||||
|
|
||||||
|
document.querySelectorAll('.t-btn').forEach((btn) => {
|
||||||
|
btn.addEventListener('click', () => {
|
||||||
|
if (ACTION_MAP[btn.dataset.action]) ACTION_MAP[btn.dataset.action]();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ---------- start ---------- */
|
||||||
|
renderUI();
|
||||||
|
renderHighscores();
|
||||||
|
requestAnimationFrame(loop);
|
||||||
@@ -0,0 +1,141 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
/* Tekenen van een blokje met simpele 3D-schaduwen */
|
||||||
|
function drawCell(ctx, px, py, size, color) {
|
||||||
|
ctx.fillStyle = color;
|
||||||
|
ctx.fillRect(px, py, size, size);
|
||||||
|
|
||||||
|
ctx.fillStyle = 'rgba(255,255,255,0.22)';
|
||||||
|
ctx.fillRect(px, py, size, size * 0.28);
|
||||||
|
ctx.fillRect(px, py, size * 0.28, size);
|
||||||
|
|
||||||
|
ctx.fillStyle = 'rgba(0,0,0,0.25)';
|
||||||
|
ctx.fillRect(px, py + size * 0.72, size, size * 0.28);
|
||||||
|
ctx.fillRect(px + size * 0.72, py, size * 0.28, size);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ghost piece: alleen een omlijning, half transparant */
|
||||||
|
function drawGhostCell(ctx, px, py, size, color) {
|
||||||
|
ctx.save();
|
||||||
|
ctx.globalAlpha = 0.45;
|
||||||
|
ctx.strokeStyle = color;
|
||||||
|
ctx.lineWidth = Math.max(2, size * 0.12);
|
||||||
|
ctx.strokeRect(px + 3, py + 3, size - 6, size - 6);
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Het hoofd-bord */
|
||||||
|
function drawBoard(canvas, game) {
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
const size = CONSTANTS.CELL;
|
||||||
|
const W = CONSTANTS.COLS * size;
|
||||||
|
const H = CONSTANTS.ROWS * size;
|
||||||
|
|
||||||
|
ctx.clearRect(0, 0, W, H);
|
||||||
|
|
||||||
|
// achtergrond met subtiel verloop
|
||||||
|
const grad = ctx.createLinearGradient(0, 0, 0, H);
|
||||||
|
grad.addColorStop(0, '#121722');
|
||||||
|
grad.addColorStop(1, '#070a11');
|
||||||
|
ctx.fillStyle = grad;
|
||||||
|
ctx.fillRect(0, 0, W, H);
|
||||||
|
|
||||||
|
// gridlijnen
|
||||||
|
ctx.strokeStyle = 'rgba(255,255,255,0.05)';
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
for (let c = 1; c < CONSTANTS.COLS; c++) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(c * size, 0);
|
||||||
|
ctx.lineTo(c * size, H);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
for (let r = 1; r < CONSTANTS.ROWS; r++) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(0, r * size);
|
||||||
|
ctx.lineTo(W, r * size);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
// vastgezette blokken
|
||||||
|
for (let r = 0; r < CONSTANTS.ROWS; r++) {
|
||||||
|
for (let c = 0; c < CONSTANTS.COLS; c++) {
|
||||||
|
const color = game.board[r][c];
|
||||||
|
if (color) drawCell(ctx, c * size, r * size, size, color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// flitsende rijen tijdens het wissen
|
||||||
|
if (game.flashLines.length) {
|
||||||
|
ctx.fillStyle = 'rgba(255,255,255,0.75)';
|
||||||
|
for (const r of game.flashLines) {
|
||||||
|
ctx.fillRect(0, r * size, W, size);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ghost + actief blok
|
||||||
|
if (game.piece && !game.over) {
|
||||||
|
if (!game.locking) {
|
||||||
|
const ghostY = game.ghostY();
|
||||||
|
if (ghostY !== game.piece.y) {
|
||||||
|
const m = game.piece.matrix;
|
||||||
|
for (let r = 0; r < m.length; r++) {
|
||||||
|
for (let c = 0; c < m[r].length; c++) {
|
||||||
|
if (!m[r][c]) continue;
|
||||||
|
drawGhostCell(ctx, (game.piece.x + c) * size, (ghostY + r) * size, size, game.piece.color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const m = game.piece.matrix;
|
||||||
|
for (let r = 0; r < m.length; r++) {
|
||||||
|
for (let c = 0; c < m[r].length; c++) {
|
||||||
|
if (!m[r][c]) continue;
|
||||||
|
const py = (game.piece.y + r) * size;
|
||||||
|
if (py < 0) continue; // boven het bord: niet tekenen
|
||||||
|
drawCell(ctx, (game.piece.x + c) * size, py, size, game.piece.color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Kleine preview (hold) */
|
||||||
|
function drawHold(canvas, type) {
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
const cell = CONSTANTS.PREVIEW_CELL;
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
if (!type) return;
|
||||||
|
const shape = SHAPES[type];
|
||||||
|
const w = shape[0].length * cell;
|
||||||
|
const h = shape.length * cell;
|
||||||
|
const ox = (canvas.width - w) / 2;
|
||||||
|
const oy = (canvas.height - h) / 2;
|
||||||
|
for (let r = 0; r < shape.length; r++) {
|
||||||
|
for (let c = 0; c < shape[r].length; c++) {
|
||||||
|
if (!shape[r][c]) continue;
|
||||||
|
drawCell(ctx, ox + c * cell, oy + r * cell, cell, CONSTANTS.COLORS[type]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Volgende blokken onder elkaar */
|
||||||
|
function drawNext(canvas, game) {
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
const cell = CONSTANTS.PREVIEW_CELL;
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
const list = game.preview;
|
||||||
|
const band = canvas.height / CONSTANTS.PREVIEW_COUNT;
|
||||||
|
for (let i = 0; i < list.length; i++) {
|
||||||
|
const type = list[i];
|
||||||
|
const shape = SHAPES[type];
|
||||||
|
const w = shape[0].length * cell;
|
||||||
|
const h = shape.length * cell;
|
||||||
|
const ox = (canvas.width - w) / 2;
|
||||||
|
const oy = i * band + (band - h) / 2;
|
||||||
|
for (let r = 0; r < shape.length; r++) {
|
||||||
|
for (let c = 0; c < shape[r].length; c++) {
|
||||||
|
if (!shape[r][c]) continue;
|
||||||
|
drawCell(ctx, ox + c * cell, oy + r * cell, cell, CONSTANTS.COLORS[type]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,263 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
/* Helpers */
|
||||||
|
function cloneMatrix(matrix) {
|
||||||
|
return matrix.map((row) => row.slice());
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Roteert een matrix 90 graden.
|
||||||
|
* dir = 1 : rechtsom (met de klok mee)
|
||||||
|
* dir = -1 : linksom (tegen de klok in)
|
||||||
|
*/
|
||||||
|
function rotateMatrix(matrix, dir) {
|
||||||
|
const n = matrix.length;
|
||||||
|
const m = matrix[0].length;
|
||||||
|
const out = Array.from({ length: m }, () => Array(n).fill(0));
|
||||||
|
for (let r = 0; r < n; r++) {
|
||||||
|
for (let c = 0; c < m; c++) {
|
||||||
|
if (!matrix[r][c]) continue;
|
||||||
|
if (dir > 0) out[c][n - 1 - r] = 1;
|
||||||
|
else out[m - 1 - c][r] = 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Volledige Tetris-spelstaat en -regels.
|
||||||
|
* De UI hangt een onUpdate-callback op voor het verversen van de panelen.
|
||||||
|
*/
|
||||||
|
class TetrisGame {
|
||||||
|
constructor() {
|
||||||
|
this.onUpdate = null;
|
||||||
|
this.reset();
|
||||||
|
}
|
||||||
|
|
||||||
|
notify() {
|
||||||
|
if (this.onUpdate) this.onUpdate();
|
||||||
|
}
|
||||||
|
|
||||||
|
reset() {
|
||||||
|
this.board = Array.from({ length: CONSTANTS.ROWS }, () =>
|
||||||
|
Array(CONSTANTS.COLS).fill(null)
|
||||||
|
);
|
||||||
|
this.queue = []; // komende bloktypes (7-bag)
|
||||||
|
this.hold = null; // vastgehouden bloktype
|
||||||
|
this.canHold = true; // mag er een keer vastgehouden worden?
|
||||||
|
this.piece = null; // actief blok
|
||||||
|
this.score = 0;
|
||||||
|
this.lines = 0;
|
||||||
|
this.level = 1;
|
||||||
|
this.over = false;
|
||||||
|
this.paused = false;
|
||||||
|
this.locking = false; // true tijdens wis-animatie
|
||||||
|
this.flashLines = []; // rijen die op dit moment flitsen
|
||||||
|
this.dropTimer = 0;
|
||||||
|
this.dropInterval = this.gravity();
|
||||||
|
this.spawn();
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- 7-bag generator: elk blok komt 1x per zak voor ---------- */
|
||||||
|
generateBag() {
|
||||||
|
const bag = PIECE_TYPES.slice();
|
||||||
|
for (let i = bag.length - 1; i > 0; i--) {
|
||||||
|
const j = Math.floor(Math.random() * (i + 1));
|
||||||
|
[bag[i], bag[j]] = [bag[j], bag[i]];
|
||||||
|
}
|
||||||
|
this.queue.push(...bag);
|
||||||
|
}
|
||||||
|
|
||||||
|
nextType() {
|
||||||
|
while (this.queue.length === 0) this.generateBag();
|
||||||
|
return this.queue.shift();
|
||||||
|
}
|
||||||
|
|
||||||
|
get preview() {
|
||||||
|
return this.queue.slice(0, CONSTANTS.PREVIEW_COUNT);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- spawn / plaatsing ---------- */
|
||||||
|
placePiece(type) {
|
||||||
|
const shape = cloneMatrix(SHAPES[type]);
|
||||||
|
this.piece = {
|
||||||
|
type,
|
||||||
|
matrix: shape,
|
||||||
|
x: Math.floor((CONSTANTS.COLS - shape[0].length) / 2),
|
||||||
|
y: 0,
|
||||||
|
color: CONSTANTS.COLORS[type]
|
||||||
|
};
|
||||||
|
if (this.collides(this.piece.matrix, this.piece.x, this.piece.y)) {
|
||||||
|
this.over = true; // bord is te vol: game over
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
spawn() {
|
||||||
|
const type = this.nextType();
|
||||||
|
this.placePiece(type);
|
||||||
|
this.canHold = true;
|
||||||
|
this.dropTimer = 0;
|
||||||
|
this.dropInterval = this.gravity();
|
||||||
|
}
|
||||||
|
|
||||||
|
gravity() {
|
||||||
|
return CONSTANTS.GRAVITY[Math.min(this.level - 1, CONSTANTS.GRAVITY.length - 1)];
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- botsing / beweging ---------- */
|
||||||
|
collides(matrix, x, y) {
|
||||||
|
for (let r = 0; r < matrix.length; r++) {
|
||||||
|
for (let c = 0; c < matrix[r].length; c++) {
|
||||||
|
if (!matrix[r][c]) continue;
|
||||||
|
const bx = x + c;
|
||||||
|
const by = y + r;
|
||||||
|
if (bx < 0 || bx >= CONSTANTS.COLS || by >= CONSTANTS.ROWS) return true;
|
||||||
|
if (by >= 0 && this.board[by][bx]) return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
ghostY() {
|
||||||
|
let y = this.piece.y;
|
||||||
|
while (!this.collides(this.piece.matrix, this.piece.x, y + 1)) y++;
|
||||||
|
return y;
|
||||||
|
}
|
||||||
|
|
||||||
|
move(dx) {
|
||||||
|
if (this.over || this.paused || this.locking) return false;
|
||||||
|
if (!this.collides(this.piece.matrix, this.piece.x + dx, this.piece.y)) {
|
||||||
|
this.piece.x += dx;
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
rotate(dir) {
|
||||||
|
if (this.over || this.paused || this.locking) return false;
|
||||||
|
const rotated = rotateMatrix(this.piece.matrix, dir);
|
||||||
|
for (const [xOff, yOff] of WALL_KICKS) {
|
||||||
|
if (!this.collides(rotated, this.piece.x + xOff, this.piece.y + yOff)) {
|
||||||
|
this.piece.matrix = rotated;
|
||||||
|
this.piece.x += xOff;
|
||||||
|
this.piece.y += yOff;
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
stepDown() {
|
||||||
|
if (this.collides(this.piece.matrix, this.piece.x, this.piece.y + 1)) {
|
||||||
|
this.lock();
|
||||||
|
return false; // kon niet verder: blok is vastgezet
|
||||||
|
}
|
||||||
|
this.piece.y++;
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
softDrop() {
|
||||||
|
if (this.over || this.paused || this.locking) return;
|
||||||
|
if (this.stepDown()) this.addScore(CONSTANTS.SCORE.SOFT_DROP);
|
||||||
|
}
|
||||||
|
|
||||||
|
hardDrop() {
|
||||||
|
if (this.over || this.paused || this.locking) return;
|
||||||
|
let dropped = 0;
|
||||||
|
while (this.stepDown()) dropped++;
|
||||||
|
this.addScore(dropped * CONSTANTS.SCORE.HARD_DROP);
|
||||||
|
}
|
||||||
|
|
||||||
|
holdPiece() {
|
||||||
|
if (this.over || this.paused || this.locking || !this.canHold) return;
|
||||||
|
const current = this.piece.type;
|
||||||
|
this.canHold = false;
|
||||||
|
if (this.hold) {
|
||||||
|
const swap = this.hold;
|
||||||
|
this.hold = current;
|
||||||
|
this.placePiece(swap);
|
||||||
|
} else {
|
||||||
|
this.hold = current;
|
||||||
|
this.spawn();
|
||||||
|
this.canHold = false; // spawn() zet dit weer op true; hier terugzetten
|
||||||
|
}
|
||||||
|
this.dropTimer = 0;
|
||||||
|
this.notify();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
addScore(pts) {
|
||||||
|
this.score += pts;
|
||||||
|
this.notify();
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- vastzetten + rijen wissen ---------- */
|
||||||
|
lock() {
|
||||||
|
const { matrix, x, y, color } = this.piece;
|
||||||
|
for (let r = 0; r < matrix.length; r++) {
|
||||||
|
for (let c = 0; c < matrix[r].length; c++) {
|
||||||
|
if (!matrix[r][c]) continue;
|
||||||
|
const by = y + r;
|
||||||
|
if (by < 0) {
|
||||||
|
this.over = true; // blok steekt te ver boven het bord uit
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.board[by][x + c] = color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const fullRows = [];
|
||||||
|
for (let r = 0; r < CONSTANTS.ROWS; r++) {
|
||||||
|
if (this.board[r].every((cell) => cell !== null)) fullRows.push(r);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (fullRows.length === 0) {
|
||||||
|
this.spawn();
|
||||||
|
this.notify();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// wis-animatie: kort flitsen, daarna pas de rijen daadwerkelijk verwijderen
|
||||||
|
this.locking = true;
|
||||||
|
this.flashLines = fullRows.slice();
|
||||||
|
const cleared = fullRows.length;
|
||||||
|
const rowsToRemove = fullRows.slice();
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
this.locking = false;
|
||||||
|
this.flashLines = [];
|
||||||
|
|
||||||
|
const kept = this.board.filter((row, r) => !rowsToRemove.includes(r));
|
||||||
|
while (kept.length < CONSTANTS.ROWS) {
|
||||||
|
kept.unshift(Array(CONSTANTS.COLS).fill(null));
|
||||||
|
}
|
||||||
|
this.board = kept;
|
||||||
|
|
||||||
|
this.lines += cleared;
|
||||||
|
this.addScore(SCORE_POINTS[cleared] * this.level);
|
||||||
|
|
||||||
|
const newLevel = Math.floor(this.lines / CONSTANTS.SCORE.LINES_PER_LEVEL) + 1;
|
||||||
|
if (newLevel !== this.level) {
|
||||||
|
this.level = newLevel;
|
||||||
|
this.dropInterval = this.gravity();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.over) this.spawn();
|
||||||
|
this.notify();
|
||||||
|
}, 140);
|
||||||
|
|
||||||
|
this.notify();
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- updates door de game-loop (delta-tijd in ms) ---------- */
|
||||||
|
update(dtMs) {
|
||||||
|
if (this.over || this.paused || this.locking) return;
|
||||||
|
this.dropTimer += dtMs;
|
||||||
|
while (this.dropTimer >= this.dropInterval) {
|
||||||
|
this.dropTimer -= this.dropInterval;
|
||||||
|
if (this.locking || this.over) return;
|
||||||
|
this.stepDown();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@@ -0,0 +1,57 @@
|
|||||||
|
apiVersion: apps/v1
|
||||||
|
kind: Deployment
|
||||||
|
metadata:
|
||||||
|
name: neo-tetris
|
||||||
|
namespace: games
|
||||||
|
labels:
|
||||||
|
app: neo-tetris
|
||||||
|
spec:
|
||||||
|
replicas: 2
|
||||||
|
selector:
|
||||||
|
matchLabels:
|
||||||
|
app: neo-tetris
|
||||||
|
strategy:
|
||||||
|
type: RollingUpdate
|
||||||
|
rollingUpdate:
|
||||||
|
maxUnavailable: 0
|
||||||
|
maxSurge: 1
|
||||||
|
template:
|
||||||
|
metadata:
|
||||||
|
labels:
|
||||||
|
app: neo-tetris
|
||||||
|
spec:
|
||||||
|
containers:
|
||||||
|
- name: game
|
||||||
|
# Pas dit aan naar je registry (bijv. ghcr.io/<user>/neo-tetris:latest)
|
||||||
|
image: neo-tetris:latest
|
||||||
|
imagePullPolicy: IfNotPresent
|
||||||
|
ports:
|
||||||
|
- name: http
|
||||||
|
containerPort: 80
|
||||||
|
resources:
|
||||||
|
requests:
|
||||||
|
cpu: 50m
|
||||||
|
memory: 64Mi
|
||||||
|
limits:
|
||||||
|
cpu: 250m
|
||||||
|
memory: 128Mi
|
||||||
|
readinessProbe:
|
||||||
|
httpGet:
|
||||||
|
path: /
|
||||||
|
port: http
|
||||||
|
initialDelaySeconds: 2
|
||||||
|
periodSeconds: 5
|
||||||
|
failureThreshold: 3
|
||||||
|
livenessProbe:
|
||||||
|
httpGet:
|
||||||
|
path: /
|
||||||
|
port: http
|
||||||
|
initialDelaySeconds: 10
|
||||||
|
periodSeconds: 10
|
||||||
|
failureThreshold: 3
|
||||||
|
securityContext:
|
||||||
|
# nginx-master draait als root en wisselt zelf naar de 'nginx'-user;
|
||||||
|
# daarom geen readOnlyRootFilesystem of capabilities.drop hier.
|
||||||
|
allowPrivilegeEscalation: false
|
||||||
|
readOnlyRootFilesystem: false
|
||||||
|
runAsNonRoot: false
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
apiVersion: kustomize.config.k8s.io/v1beta1
|
||||||
|
kind: Kustomization
|
||||||
|
|
||||||
|
resources:
|
||||||
|
- namespace.yaml
|
||||||
|
- deployment.yaml
|
||||||
|
- service.yaml
|
||||||
|
|
||||||
|
# Optioneel: eigen namespace naast 'games' kiezen via:
|
||||||
|
# namespace: games
|
||||||
|
|
||||||
|
labels:
|
||||||
|
- pairs:
|
||||||
|
app: neo-tetris
|
||||||
|
includeSelectors: true
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
apiVersion: v1
|
||||||
|
kind: Namespace
|
||||||
|
metadata:
|
||||||
|
name: games
|
||||||
|
labels:
|
||||||
|
app.kubernetes.io/name: neo-tetris
|
||||||
|
app.kubernetes.io/part-of: browser-games
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
apiVersion: v1
|
||||||
|
kind: Service
|
||||||
|
metadata:
|
||||||
|
name: neo-tetris
|
||||||
|
namespace: games
|
||||||
|
labels:
|
||||||
|
app: neo-tetris
|
||||||
|
spec:
|
||||||
|
type: NodePort
|
||||||
|
selector:
|
||||||
|
app: neo-tetris
|
||||||
|
ports:
|
||||||
|
- name: http
|
||||||
|
port: 80
|
||||||
|
targetPort: http
|
||||||
|
nodePort: 30080
|
||||||
|
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
# Lokale kind-clusterconfig voor neo-tetris.
|
||||||
|
# Map poort 30080 (NodePort) en 80/443 (optioneel, voor een toekomstige ingress)
|
||||||
|
# door naar de host, zodat de game vanaf de Mac bereikbaar is.
|
||||||
|
kind: Cluster
|
||||||
|
apiVersion: kind.x-k8s.io/v1alpha4
|
||||||
|
name: kind
|
||||||
|
nodes:
|
||||||
|
- role: control-plane
|
||||||
|
extraPortMappings:
|
||||||
|
- containerPort: 30080
|
||||||
|
hostPort: 30080
|
||||||
|
protocol: TCP
|
||||||
|
listenAddress: "127.0.0.1"
|
||||||
Reference in New Issue
Block a user