81 lines
2.0 KiB
HTML
81 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Retro Arcade</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<style>
|
|
.game-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.game-tile {
|
|
border: 2px solid #4ecca3;
|
|
padding: 24px 20px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: background 0.15s;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.game-tile:hover { background: rgba(78, 204, 163, 0.08); }
|
|
|
|
.game-title {
|
|
color: #4ecca3;
|
|
font-size: 1rem;
|
|
letter-spacing: 3px;
|
|
}
|
|
|
|
.hs-label {
|
|
color: #555;
|
|
font-size: 0.7rem;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.hs-value {
|
|
color: #a0a0c0;
|
|
font-size: 0.9rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>RETRO ARCADE</h1>
|
|
<div class="game-grid">
|
|
<a class="game-tile" href="snake.html">
|
|
<div class="game-title">SNAKE</div>
|
|
<div class="hs-label">HIGHSCORE</div>
|
|
<div class="hs-value" id="hs-snake">—</div>
|
|
</a>
|
|
<a class="game-tile" href="tetris.html">
|
|
<div class="game-title">TETRIS</div>
|
|
<div class="hs-label">HIGHSCORE</div>
|
|
<div class="hs-value" id="hs-tetris">—</div>
|
|
</a>
|
|
<a class="game-tile" href="breakout.html">
|
|
<div class="game-title">BREAKOUT</div>
|
|
<div class="hs-label">HIGHSCORE</div>
|
|
<div class="hs-value" id="hs-breakout">—</div>
|
|
</a>
|
|
<a class="game-tile" href="spaceinvaders.html">
|
|
<div class="game-title">SPACE INV.</div>
|
|
<div class="hs-label">HIGHSCORE</div>
|
|
<div class="hs-value" id="hs-spaceinvaders">—</div>
|
|
</a>
|
|
</div>
|
|
|
|
<script src="scores.js"></script>
|
|
<script>
|
|
['snake', 'tetris', 'breakout', 'spaceinvaders'].forEach(game => {
|
|
const hs = getHighscore(game);
|
|
document.getElementById('hs-' + game).textContent = hs > 0 ? hs.toLocaleString('de-DE') : '—';
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|