feat: Implement pixel-art rendering with new level loading, tile maps, palettes, and pixel fonts, alongside a game over screen.

This commit is contained in:
Juan Sebastián Montoya 2026-01-06 17:21:15 -05:00
parent 5b15e63ac3
commit cf04677511
41 changed files with 793 additions and 331 deletions

View file

@ -1,31 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slime Genesis - PoC</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #1a1a1a;
font-family: 'Courier New', monospace;
overflow: hidden;
}
#game-container {
border: 2px solid #4a4a4a;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #000;
}
#game-canvas {
display: block;
image-rendering: pixelated;
box-shadow: 0 0 20px rgba(0, 255, 150, 0.3);
border: 2px solid #4a4a4a;
/* Simplified scaling: Aspect ratio determines size, strictly contained */
width: calc(100% - 500px);
height: auto;
aspect-ratio: 4 / 3;
}
</style>
</head>
<body>
<div id="game-container">
<canvas id="game-canvas" tabindex="0"></canvas>
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
</html>