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