ferdi2go/testprojekt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: integrate snake into arcade platform

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ferdinand
2026-03-31 14:26:10 +02:00
parent 94ceb47b01
commit 25830de5aa
1 changed files with 8 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
snake.html
View File

@@ -2,64 +2,15 @@
<html lang="de">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<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; }
.overlay.hidden { display: none; }
button {
margin-top: 8px;
@@ -84,14 +35,15 @@
</style>
</head>
<body>
<a class="menu-link" href="index.html">← Menü</a>
<h1>SNAKE</h1>
<div id="hud">
<div class="hud">
Score: <span id="score">0</span> &nbsp;&nbsp; Highscore: <span id="highscore">0</span>
</div>
<div style="position:relative;">
<canvas id="canvas" width="400" height="400"></canvas>
<div id="overlay">
<div class="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>
@@ -100,10 +52,11 @@
<div id="controls">Pfeiltasten / WASD &nbsp;|&nbsp; P = Pause</div>
<script src="scores.js"></script>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const overlay = document.getElementById('overlay');
const overlay = document.querySelector('.overlay');
const overlayTitle = document.getElementById('overlay-title');
const overlayMsg = document.getElementById('overlay-msg');
const btn = document.getElementById('btn');
@@ -238,6 +191,7 @@
function gameOver() {
running = false;
cancelAnimationFrame(animId);
setHighscore('snake', score);
overlayTitle.textContent = 'GAME OVER';
overlayTitle.style.color = '#ff6b6b';
overlayMsg.textContent = `Punkte: ${score}`;