feat: add Tetris game
This commit is contained in:
Ferdinand
237
tetris.html
Normal file
237
tetris.html
Normal file
@@ -0,0 +1,237 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Tetris</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<style>
|
||||||
|
#wrapper {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
gap: 24px;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
#sidebar {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
color: #a0a0c0;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
padding-top: 4px;
|
||||||
|
min-width: 80px;
|
||||||
|
}
|
||||||
|
#sidebar .label { color: #555; font-size: 0.7rem; letter-spacing: 2px; }
|
||||||
|
#sidebar .value { color: #4ecca3; font-size: 1.1rem; font-weight: bold; }
|
||||||
|
#next-canvas { border: 1px solid #2a2a4a; display: block; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<a class="menu-link" href="index.html">← Menü</a>
|
||||||
|
<h1>TETRIS</h1>
|
||||||
|
|
||||||
|
<div id="wrapper">
|
||||||
|
<canvas id="canvas" width="300" height="600"></canvas>
|
||||||
|
<div id="sidebar">
|
||||||
|
<div>
|
||||||
|
<div class="label">SCORE</div>
|
||||||
|
<div class="value" id="score-display">0</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="label">LEVEL</div>
|
||||||
|
<div class="value" id="level-display">1</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="label">LINES</div>
|
||||||
|
<div class="value" id="lines-display">0</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="label">BEST</div>
|
||||||
|
<div class="value" id="hs-display">0</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="label">NÄCHSTES</div>
|
||||||
|
<canvas id="next-canvas" width="80" height="80"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="overlay" id="overlay">
|
||||||
|
<h2>GAME OVER</h2>
|
||||||
|
<p id="final-score"></p>
|
||||||
|
<button class="retro-btn" onclick="startGame()">NEU STARTEN</button>
|
||||||
|
<a class="retro-btn" href="index.html" style="text-decoration:none;text-align:center;">← MENÜ</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="scores.js"></script>
|
||||||
|
<script>
|
||||||
|
const COLS = 10, ROWS = 20, BLOCK = 30;
|
||||||
|
const COLORS = ['', '#ff6b6b','#ffd93d','#6bcb77','#4d96ff','#ff9f43','#a29bfe','#fd79a8'];
|
||||||
|
const SHAPES = [
|
||||||
|
[],
|
||||||
|
[[1,1,1,1]],
|
||||||
|
[[2,2],[2,2]],
|
||||||
|
[[0,3,0],[3,3,3]],
|
||||||
|
[[0,4,4],[4,4,0]],
|
||||||
|
[[5,5,0],[0,5,5]],
|
||||||
|
[[6,0,0],[6,6,6]],
|
||||||
|
[[0,0,7],[7,7,7]],
|
||||||
|
];
|
||||||
|
|
||||||
|
const canvas = document.getElementById('canvas');
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
const nextCanvas = document.getElementById('next-canvas');
|
||||||
|
const nextCtx = nextCanvas.getContext('2d');
|
||||||
|
const overlay = document.getElementById('overlay');
|
||||||
|
|
||||||
|
let board, piece, nextPiece, score, level, lines, dropInterval, lastTime, animId;
|
||||||
|
|
||||||
|
function createBoard() {
|
||||||
|
return Array.from({length: ROWS}, () => Array(COLS).fill(0));
|
||||||
|
}
|
||||||
|
|
||||||
|
function randomPiece() {
|
||||||
|
const id = Math.ceil(Math.random() * 7);
|
||||||
|
const shape = SHAPES[id].map(r => [...r]);
|
||||||
|
return { id, shape, x: Math.floor(COLS / 2) - Math.floor(shape[0].length / 2), y: 0 };
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawBlock(context, x, y, colorId, size) {
|
||||||
|
context.fillStyle = COLORS[colorId];
|
||||||
|
context.fillRect(x * size + 1, y * size + 1, size - 2, size - 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawBoard() {
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
board.forEach((row, y) => row.forEach((val, x) => { if (val) drawBlock(ctx, x, y, val, BLOCK); }));
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawPiece(p) {
|
||||||
|
p.shape.forEach((row, dy) => row.forEach((val, dx) => {
|
||||||
|
if (val) drawBlock(ctx, p.x + dx, p.y + dy, val, BLOCK);
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawNext() {
|
||||||
|
nextCtx.clearRect(0, 0, nextCanvas.width, nextCanvas.height);
|
||||||
|
const size = 20;
|
||||||
|
const offX = Math.floor((4 - nextPiece.shape[0].length) / 2);
|
||||||
|
const offY = Math.floor((4 - nextPiece.shape.length) / 2);
|
||||||
|
nextPiece.shape.forEach((row, dy) => row.forEach((val, dx) => {
|
||||||
|
if (val) drawBlock(nextCtx, offX + dx, offY + dy, val, size);
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
function collides(p, board) {
|
||||||
|
return p.shape.some((row, dy) => row.some((val, dx) => {
|
||||||
|
if (!val) return false;
|
||||||
|
const nx = p.x + dx, ny = p.y + dy;
|
||||||
|
return nx < 0 || nx >= COLS || ny >= ROWS || (ny >= 0 && board[ny][nx]);
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
function merge(p) {
|
||||||
|
p.shape.forEach((row, dy) => row.forEach((val, dx) => {
|
||||||
|
if (val) board[p.y + dy][p.x + dx] = val;
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearLines() {
|
||||||
|
let cleared = 0;
|
||||||
|
for (let y = ROWS - 1; y >= 0; y--) {
|
||||||
|
if (board[y].every(v => v)) {
|
||||||
|
board.splice(y, 1);
|
||||||
|
board.unshift(Array(COLS).fill(0));
|
||||||
|
cleared++;
|
||||||
|
y++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (cleared) {
|
||||||
|
const pts = [0, 100, 300, 500, 800][cleared] * level;
|
||||||
|
score += pts;
|
||||||
|
lines += cleared;
|
||||||
|
level = Math.floor(lines / 10) + 1;
|
||||||
|
dropInterval = Math.max(100, 1000 - (level - 1) * 90);
|
||||||
|
updateHUD();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function rotate(shape) {
|
||||||
|
return shape[0].map((_, i) => shape.map(row => row[i]).reverse());
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateHUD() {
|
||||||
|
document.getElementById('score-display').textContent = score.toLocaleString('de-DE');
|
||||||
|
document.getElementById('level-display').textContent = level;
|
||||||
|
document.getElementById('lines-display').textContent = lines;
|
||||||
|
document.getElementById('hs-display').textContent = getHighscore('tetris').toLocaleString('de-DE');
|
||||||
|
}
|
||||||
|
|
||||||
|
function gameOver() {
|
||||||
|
cancelAnimationFrame(animId);
|
||||||
|
setHighscore('tetris', score);
|
||||||
|
document.getElementById('final-score').textContent = 'SCORE: ' + score.toLocaleString('de-DE');
|
||||||
|
document.getElementById('hs-display').textContent = getHighscore('tetris').toLocaleString('de-DE');
|
||||||
|
overlay.style.display = 'flex';
|
||||||
|
}
|
||||||
|
|
||||||
|
function startGame() {
|
||||||
|
board = createBoard();
|
||||||
|
score = 0; level = 1; lines = 0; dropInterval = 1000; lastTime = 0;
|
||||||
|
piece = randomPiece();
|
||||||
|
nextPiece = randomPiece();
|
||||||
|
overlay.style.display = 'none';
|
||||||
|
updateHUD();
|
||||||
|
drawNext();
|
||||||
|
animId = requestAnimationFrame(loop);
|
||||||
|
}
|
||||||
|
|
||||||
|
function loop(timestamp) {
|
||||||
|
const delta = timestamp - lastTime;
|
||||||
|
if (delta > dropInterval) {
|
||||||
|
lastTime = timestamp;
|
||||||
|
const moved = { ...piece, shape: piece.shape.map(r => [...r]), y: piece.y + 1 };
|
||||||
|
if (!collides(moved, board)) {
|
||||||
|
piece = moved;
|
||||||
|
} else {
|
||||||
|
merge(piece);
|
||||||
|
clearLines();
|
||||||
|
piece = nextPiece;
|
||||||
|
nextPiece = randomPiece();
|
||||||
|
drawNext();
|
||||||
|
if (collides(piece, board)) { gameOver(); return; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
drawBoard();
|
||||||
|
drawPiece(piece);
|
||||||
|
animId = requestAnimationFrame(loop);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('keydown', e => {
|
||||||
|
if (overlay.style.display === 'flex') return;
|
||||||
|
if (e.key === 'ArrowLeft') {
|
||||||
|
const m = { ...piece, shape: piece.shape.map(r => [...r]), x: piece.x - 1 };
|
||||||
|
if (!collides(m, board)) piece = m;
|
||||||
|
} else if (e.key === 'ArrowRight') {
|
||||||
|
const m = { ...piece, shape: piece.shape.map(r => [...r]), x: piece.x + 1 };
|
||||||
|
if (!collides(m, board)) piece = m;
|
||||||
|
} else if (e.key === 'ArrowDown') {
|
||||||
|
const m = { ...piece, shape: piece.shape.map(r => [...r]), y: piece.y + 1 };
|
||||||
|
if (!collides(m, board)) piece = m; else { merge(piece); clearLines(); piece = nextPiece; nextPiece = randomPiece(); drawNext(); if (collides(piece, board)) { gameOver(); return; } }
|
||||||
|
} else if (e.key === 'ArrowUp') {
|
||||||
|
const rotated = rotate(piece.shape);
|
||||||
|
const m = { ...piece, shape: rotated };
|
||||||
|
if (!collides(m, board)) piece = m;
|
||||||
|
} else if (e.key === ' ') {
|
||||||
|
e.preventDefault();
|
||||||
|
while (true) {
|
||||||
|
const m = { ...piece, shape: piece.shape.map(r => [...r]), y: piece.y + 1 };
|
||||||
|
if (collides(m, board)) { merge(piece); clearLines(); piece = nextPiece; nextPiece = randomPiece(); drawNext(); if (collides(piece, board)) gameOver(); break; }
|
||||||
|
piece = m;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
startGame();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user