krz/micro-roguelike

A micro roguelike web game in 1kb and 1mb versions. game javascript roguelike size-limited https://rogue.krz.sh

Commit 595fb6e0c5

595fb6e0c54d58b915d3cf5946a44a1eb67b5d5f

parent: 31eb491152

Verified · cmc

cmc <hello@cleberg.net> · 2026-03-23 22:04 UTC 

add start screen, single-view state system, and unified death node

Layout: unified · split

index.html +28 −21
@@ -4,8 +4,27 @@
4<meta name="viewport" content="width=device-width,initial-scale=1"> 4<meta name="viewport" content="width=device-width,initial-scale=1">
5<title>Micro Roguelike</title> 5<title>Micro Roguelike</title>
6 6
7<h1>Micro Roguelike</h1> 7<style>
8<p>Choose a path. Learn the dungeon. Die often.</p> 8section{display:none;min-height:100vh}
9#start:target,
10#gate:target,
11#bones:target,
12#beast:target,
13#hall:target,
14#pit:target,
15#idol:target,
16#crack:target,
17#vault:target,
18#death:target,
19#win:target{display:block}
20body:not(:target) #start{display:block}
21</style>
22
23<section id="start">
24 <h1>Micro Roguelike</h1>
25 <p>Choose a path. Learn the dungeon. Die often.</p>
26 <p><a href="#gate">Start</a></p>
27</section>
9 28
10<section id="gate"> 29<section id="gate">
11 <h2>Gate</h2> 30 <h2>Gate</h2>
@@ -29,8 +48,7 @@
29<section id="beast"> 48<section id="beast">
30 <h2>Beast</h2> 49 <h2>Beast</h2>
31 <p>A sleeping beast opens one eye.</p> 50 <p>A sleeping beast opens one eye.</p>
32 <p><strong>Eaten.</strong></p> 51 <p><a href="#death">Continue</a></p>
33 <p><a href="#gate">Again</a></p>
34</section> 52</section>
35 53
36<section id="hall"> 54<section id="hall">
@@ -47,7 +65,7 @@
47 <h2>Pit</h2> 65 <h2>Pit</h2>
48 <p>A black pit cuts the room in two. Too wide. Dark below.</p> 66 <p>A black pit cuts the room in two. Too wide. Dark below.</p>
49 <p> 67 <p>
50 <a href="#fell">Jump</a><br> 68 <a href="#death">Jump</a><br>
51 <a href="#vault">Edge along wall</a> 69 <a href="#vault">Edge along wall</a>
52 </p> 70 </p>
53</section> 71</section>
@@ -56,7 +74,7 @@
56 <h2>Idol</h2> 74 <h2>Idol</h2>
57 <p>A gold idol watches. Coins glitter at its feet. Its head is bowed.</p> 75 <p>A gold idol watches. Coins glitter at its feet. Its head is bowed.</p>
58 <p> 76 <p>
59 <a href="#cursed">Take gold</a><br> 77 <a href="#death">Take gold</a><br>
60 <a href="#crack">Bow</a><br> 78 <a href="#crack">Bow</a><br>
61 <a href="#hall">Back</a> 79 <a href="#hall">Back</a>
62 </p> 80 </p>
@@ -75,27 +93,15 @@
75 <h2>Vault</h2> 93 <h2>Vault</h2>
76 <p>A crown on stone. A small key beside it.</p> 94 <p>A crown on stone. A small key beside it.</p>
77 <p> 95 <p>
78 <a href="#wrongking">Take crown</a><br> 96 <a href="#death">Take crown</a><br>
79 <a href="#win">Take key</a><br> 97 <a href="#win">Take key</a><br>
80 <a href="#gate">Leave</a> 98 <a href="#gate">Leave</a>
81 </p> 99 </p>
82</section> 100</section>
83 101
84<section id="fell"> 102<section id="death">
85 <h2>Death</h2>
86 <p><strong>Fell.</strong></p>
87 <p><a href="#gate">Again</a></p>
88</section>
89
90<section id="cursed">
91 <h2>Death</h2>
92 <p><strong>Cursed.</strong></p>
93 <p><a href="#gate">Again</a></p>
94</section>
95
96<section id="wrongking">
97 <h2>Death</h2> 103 <h2>Death</h2>
98 <p><strong>Wrong king.</strong></p> 104 <p>You died.</p>
99 <p><a href="#gate">Again</a></p> 105 <p><a href="#gate">Again</a></p>
100</section> 106</section>
101 107
@@ -105,4 +111,5 @@
105 <p>The outer gate opens. Dawn.</p> 111 <p>The outer gate opens. Dawn.</p>
106 <p><a href="#gate">Again</a></p> 112 <p><a href="#gate">Again</a></p>
107</section> 113</section>
114
108</html> 115</html>