krz/micro-roguelike
A micro roguelike web game in 1kb and 1mb versions.
clone: git clone https://gitbay.org/krz/micro-roguelike.git
826cbd08bbd74b2d3f4c19ebf4021ccbcfd6353d
verified · cmc
author: Christian Cleberg <hello@cleberg.net> · 2026-03-23T22:04:59Z
index.html | 134 +++++++++++++++++++++---------------------------------------- 1 file changed, 46 insertions(+), 88 deletions(-) @@ -1,115 +1,73 @@ <!doctype html> -<html lang="en"> -<meta charset="utf-8"> -<meta name="viewport" content="width=device-width,initial-scale=1"> +<html lang=en> +<meta charset=utf-8> +<meta name=viewport content="width=device-width,initial-scale=1"> <title>Micro Roguelike</title> - <style> -section{display:none;min-height:100vh} -#start:target, -#gate:target, -#bones:target, -#beast:target, -#hall:target, -#pit:target, -#idol:target, -#crack:target, -#vault:target, -#death:target, -#win:target{display:block} -body:not(:target) #start{display:block} +section{display:none;min-height:100vh}#s:target,#g:target,#b:target,#e:target,#h:target,#p:target,#i:target,#c:target,#v:target,#d:target,#w:target{display:block}html:not(:has(:target))#s{display:block} </style> -<section id="start"> - <h1>Micro Roguelike</h1> - <p>Choose a path. Learn the dungeon. Die often.</p> - <p><a href="#gate">Start</a></p> +<section id=s> + <p>micro roguelike</p> + <p>learn fast. die often.</p> + <p><a href=#g>start</a></p> </section> -<section id="gate"> - <h2>Gate</h2> - <p>You stand at a ruined gate.</p> - <p> - <a href="#bones">Left</a><br> - <a href="#beast">Right</a><br> - <a href="#hall">Forward</a> - </p> +<section id=g> + <p>gate</p> + <p>ruin. dark ahead.</p> + <p><a href=#b>left</a> <a href=#e>right</a> <a href=#h>in</a></p> </section> -<section id="bones"> - <h2>Bones</h2> - <p>Bones on the floor. A torch still burns. Dark favors walls.</p> - <p> - <a href="#hall">Take torch</a><br> - <a href="#pit">Move on</a> - </p> +<section id=b> + <p>bones</p> + <p>torch burns. dark favors walls.</p> + <p><a href=#h>take torch</a> <a href=#p>move on</a></p> </section> -<section id="beast"> - <h2>Beast</h2> - <p>A sleeping beast opens one eye.</p> - <p><a href="#death">Continue</a></p> +<section id=e> + <p>beast</p> + <p>one eye opens. <a href=#d>eaten</a></p> </section> -<section id="hall"> - <h2>Hall</h2> - <p>A stone hall. Stairs descend. A bronze door waits. A crack splits the wall.</p> - <p> - <a href="#pit">Stairs</a><br> - <a href="#idol">Door</a><br> - <a href="#crack">Crack</a> - </p> +<section id=h> + <p>hall</p> + <p>stairs. bronze door. wall crack.</p> + <p><a href=#p>stairs</a> <a href=#i>door</a> <a href=#c>crack</a></p> </section> -<section id="pit"> - <h2>Pit</h2> - <p>A black pit cuts the room in two. Too wide. Dark below.</p> - <p> - <a href="#death">Jump</a><br> - <a href="#vault">Edge along wall</a> - </p> +<section id=p> + <p>pit</p> + <p>too wide. dark below.</p> + <p><a href=#d>jump</a> <a href=#v>edge</a></p> </section> -<section id="idol"> - <h2>Idol</h2> - <p>A gold idol watches. Coins glitter at its feet. Its head is bowed.</p> - <p> - <a href="#death">Take gold</a><br> - <a href="#crack">Bow</a><br> - <a href="#hall">Back</a> - </p> +<section id=i> + <p>idol</p> + <p>gold at its feet. head bowed.</p> + <p><a href=#d>gold</a> <a href=#c>bow</a> <a href=#h>back</a></p> </section> -<section id="crack"> - <h2>Crack</h2> - <p>Barely wide enough. Cold air slips through.</p> - <p> - <a href="#vault">Squeeze through</a><br> - <a href="#hall">Return</a> - </p> +<section id=c> + <p>crack</p> + <p>cold air. barely wide enough.</p> + <p><a href=#v>squeeze</a> <a href=#h>return</a></p> </section> -<section id="vault"> - <h2>Vault</h2> - <p>A crown on stone. A small key beside it.</p> - <p> - <a href="#death">Take crown</a><br> - <a href="#win">Take key</a><br> - <a href="#gate">Leave</a> - </p> +<section id=v> + <p>vault</p> + <p>crown. small key.</p> + <p><a href=#d>crown</a> <a href=#w>key</a> <a href=#g>leave</a></p> </section> -<section id="death"> - <h2>Death</h2> - <p>You died.</p> - <p><a href="#gate">Again</a></p> +<section id=d> + <p>dead</p> + <p><a href=#g>again</a></p> </section> -<section id="win"> - <h2>Win</h2> - <p>You take the key.</p> - <p>The outer gate opens. Dawn.</p> - <p><a href="#gate">Again</a></p> +<section id=w> + <p>key taken</p> + <p>the gate opens. dawn.</p> + <p><a href=#g>again</a></p> </section> - </html>