chore: initial project state with snake and design docs
This commit is contained in:
Ferdinand
275
snake.html
Normal file
275
snake.html
Normal file
@@ -0,0 +1,275 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Snake</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
background: #1a1a2e;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
font-family: 'Courier New', monospace;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 12px;
|
||||
color: #4ecca3;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
|
||||
#hud {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 1rem;
|
||||
color: #a0a0c0;
|
||||
}
|
||||
|
||||
#hud span { color: #4ecca3; font-weight: bold; }
|
||||
|
||||
canvas {
|
||||
border: 2px solid #4ecca3;
|
||||
box-shadow: 0 0 20px rgba(78, 204, 163, 0.3);
|
||||
display: block;
|
||||
}
|
||||
|
||||
#overlay {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
#overlay h2 {
|
||||
font-size: 2.5rem;
|
||||
color: #ff6b6b;
|
||||
}
|
||||
|
||||
#overlay p {
|
||||
font-size: 1rem;
|
||||
color: #a0a0c0;
|
||||
}
|
||||
|
||||
#overlay.hidden { display: none; }
|
||||
|
||||
button {
|
||||
margin-top: 8px;
|
||||
padding: 10px 28px;
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
background: #4ecca3;
|
||||
color: #1a1a2e;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
letter-spacing: 2px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button:hover { background: #38b28a; }
|
||||
|
||||
#controls {
|
||||
margin-top: 12px;
|
||||
font-size: 0.75rem;
|
||||
color: #606080;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>SNAKE</h1>
|
||||
<div id="hud">
|
||||
Score: <span id="score">0</span> Highscore: <span id="highscore">0</span>
|
||||
</div>
|
||||
|
||||
<div style="position:relative;">
|
||||
<canvas id="canvas" width="400" height="400"></canvas>
|
||||
<div id="overlay">
|
||||
<h2 id="overlay-title">SNAKE</h2>
|
||||
<p id="overlay-msg">Steuere die Schlange mit den Pfeiltasten oder WASD</p>
|
||||
<button id="btn">STARTEN</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="controls">Pfeiltasten / WASD | P = Pause</div>
|
||||
|
||||
<script>
|
||||
const canvas = document.getElementById('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const overlay = document.getElementById('overlay');
|
||||
const overlayTitle = document.getElementById('overlay-title');
|
||||
const overlayMsg = document.getElementById('overlay-msg');
|
||||
const btn = document.getElementById('btn');
|
||||
const scoreEl = document.getElementById('score');
|
||||
const highscoreEl = document.getElementById('highscore');
|
||||
|
||||
const COLS = 20, ROWS = 20;
|
||||
const CELL = canvas.width / COLS;
|
||||
|
||||
let snake, dir, nextDir, food, score, highscore, running, paused, animId;
|
||||
|
||||
highscore = parseInt(localStorage.getItem('snake_hs') || '0');
|
||||
highscoreEl.textContent = highscore;
|
||||
|
||||
function init() {
|
||||
snake = [
|
||||
{ x: 10, y: 10 },
|
||||
{ x: 9, y: 10 },
|
||||
{ x: 8, y: 10 },
|
||||
];
|
||||
dir = { x: 1, y: 0 };
|
||||
nextDir = { x: 1, y: 0 };
|
||||
score = 0;
|
||||
scoreEl.textContent = 0;
|
||||
spawnFood();
|
||||
}
|
||||
|
||||
function spawnFood() {
|
||||
let pos;
|
||||
do {
|
||||
pos = { x: Math.floor(Math.random() * COLS), y: Math.floor(Math.random() * ROWS) };
|
||||
} while (snake.some(s => s.x === pos.x && s.y === pos.y));
|
||||
food = pos;
|
||||
}
|
||||
|
||||
function step() {
|
||||
dir = nextDir;
|
||||
const head = { x: snake[0].x + dir.x, y: snake[0].y + dir.y };
|
||||
|
||||
// Wall collision
|
||||
if (head.x < 0 || head.x >= COLS || head.y < 0 || head.y >= ROWS) return gameOver();
|
||||
// Self collision
|
||||
if (snake.some(s => s.x === head.x && s.y === head.y)) return gameOver();
|
||||
|
||||
snake.unshift(head);
|
||||
|
||||
if (head.x === food.x && head.y === food.y) {
|
||||
score++;
|
||||
scoreEl.textContent = score;
|
||||
if (score > highscore) {
|
||||
highscore = score;
|
||||
highscoreEl.textContent = highscore;
|
||||
localStorage.setItem('snake_hs', highscore);
|
||||
}
|
||||
spawnFood();
|
||||
} else {
|
||||
snake.pop();
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
// Background
|
||||
ctx.fillStyle = '#0f0f1a';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Grid (subtle)
|
||||
ctx.strokeStyle = 'rgba(255,255,255,0.03)';
|
||||
ctx.lineWidth = 0.5;
|
||||
for (let x = 0; x <= COLS; x++) {
|
||||
ctx.beginPath(); ctx.moveTo(x * CELL, 0); ctx.lineTo(x * CELL, canvas.height); ctx.stroke();
|
||||
}
|
||||
for (let y = 0; y <= ROWS; y++) {
|
||||
ctx.beginPath(); ctx.moveTo(0, y * CELL); ctx.lineTo(canvas.width, y * CELL); ctx.stroke();
|
||||
}
|
||||
|
||||
// Food
|
||||
const fx = food.x * CELL, fy = food.y * CELL;
|
||||
ctx.fillStyle = '#ff6b6b';
|
||||
ctx.beginPath();
|
||||
ctx.arc(fx + CELL / 2, fy + CELL / 2, CELL / 2 - 2, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
|
||||
// Snake
|
||||
snake.forEach((seg, i) => {
|
||||
const t = i / snake.length;
|
||||
const r = Math.round(78 + (30 - 78) * t);
|
||||
const g = Math.round(204 + (150 - 204) * t);
|
||||
const b = Math.round(163 + (80 - 163) * t);
|
||||
ctx.fillStyle = `rgb(${r},${g},${b})`;
|
||||
const pad = i === 0 ? 1 : 2;
|
||||
ctx.fillRect(seg.x * CELL + pad, seg.y * CELL + pad, CELL - pad * 2, CELL - pad * 2);
|
||||
|
||||
// Eyes on head
|
||||
if (i === 0) {
|
||||
ctx.fillStyle = '#1a1a2e';
|
||||
const ex = dir.y !== 0 ? [CELL * 0.3, CELL * 0.7] : [CELL * 0.6, CELL * 0.6];
|
||||
const ey = dir.x !== 0 ? [CELL * 0.3, CELL * 0.7] : [CELL * 0.6, CELL * 0.6];
|
||||
const ox = dir.x === -1 ? CELL * 0.2 : 0;
|
||||
const oy = dir.y === -1 ? CELL * 0.2 : 0;
|
||||
ctx.beginPath();
|
||||
ctx.arc(seg.x * CELL + ex[0] + ox, seg.y * CELL + ey[0] + oy, 2, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.beginPath();
|
||||
ctx.arc(seg.x * CELL + ex[1] + ox, seg.y * CELL + ey[1] + oy, 2, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
let lastTime = 0;
|
||||
const SPEED = 120; // ms per step
|
||||
|
||||
function loop(ts) {
|
||||
if (!running || paused) return;
|
||||
if (ts - lastTime >= SPEED) {
|
||||
step();
|
||||
lastTime = ts;
|
||||
}
|
||||
if (running) draw();
|
||||
animId = requestAnimationFrame(loop);
|
||||
}
|
||||
|
||||
function startGame() {
|
||||
init();
|
||||
running = true;
|
||||
paused = false;
|
||||
overlay.classList.add('hidden');
|
||||
lastTime = 0;
|
||||
animId = requestAnimationFrame(loop);
|
||||
}
|
||||
|
||||
function gameOver() {
|
||||
running = false;
|
||||
cancelAnimationFrame(animId);
|
||||
overlayTitle.textContent = 'GAME OVER';
|
||||
overlayTitle.style.color = '#ff6b6b';
|
||||
overlayMsg.textContent = `Punkte: ${score}`;
|
||||
btn.textContent = 'NEU STARTEN';
|
||||
overlay.classList.remove('hidden');
|
||||
}
|
||||
|
||||
btn.addEventListener('click', startGame);
|
||||
|
||||
document.addEventListener('keydown', e => {
|
||||
const keys = {
|
||||
ArrowUp: { x: 0, y: -1 }, w: { x: 0, y: -1 }, W: { x: 0, y: -1 },
|
||||
ArrowDown: { x: 0, y: 1 }, s: { x: 0, y: 1 }, S: { x: 0, y: 1 },
|
||||
ArrowLeft: { x: -1, y: 0 }, a: { x: -1, y: 0 }, A: { x: -1, y: 0 },
|
||||
ArrowRight: { x: 1, y: 0 }, d: { x: 1, y: 0 }, D: { x: 1, y: 0 },
|
||||
};
|
||||
if (keys[e.key]) {
|
||||
const d = keys[e.key];
|
||||
// Prevent 180 turn
|
||||
if (d.x !== -dir.x || d.y !== -dir.y) nextDir = d;
|
||||
e.preventDefault();
|
||||
}
|
||||
if (e.key === 'p' || e.key === 'P') {
|
||||
if (!running) return;
|
||||
paused = !paused;
|
||||
if (!paused) animId = requestAnimationFrame(loop);
|
||||
}
|
||||
});
|
||||
|
||||
// Initial draw
|
||||
init();
|
||||
draw();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user