2d movement demo for CSS Clicker training (https://lyra.horse/slides/#2025-congress), based on Corncycle's coquest! game (https://cohost.org/Corncycle/post/362844-div-style-line-hei)

2d-movement-demo.html

<!--
2d movement demo for CSS Clicker training
>>> https://lyra.horse/slides/#2025-congress

based on Corncycle's coquest! game
>>> https://cohost.org/Corncycle/post/362844-div-style-line-hei
-->

<div style="display:inline-flex;position:relative;overflow:visible;border:1px solid red">
	<!-- game map -->
	<img style="position:absolute" src="map.png">
	<!-- player location -->
	<img src="link.png" style="position:absolute;top:100%;left:100%">
	<!-- movement buttons -->
	<details>
		<summary style="width:36px;height:36px;background:#F00;cursor:pointer;
						position:absolute;left:calc(-200% + 100px + 1 * 36px);top:200px"></summary>
		<div style="width:36px"></div>
	</details>
	<details>
		<summary style="width:36px;height:36px;background:#FA0;cursor:pointer;
						position:absolute;left:calc(-200% + 100px + 3 * 36px);top:200px"></summary>
		<div style="width:36px"></div>
	</details>
	<details>
		<summary style="width:36px;height:36px;background:#AF0;cursor:pointer;
						position:absolute;left:calc(-200% + 100px + 5 * 36px);top:200px"></summary>
		<div style="width:36px"></div>
	</details>
	<div style="display: inline-flex;flex-direction: column;">
		<details>
			<summary style="width:36px;height:36px;background:#0F0;cursor:pointer;
							position:absolute;top:calc(-200% + 200px + 1 * 36px);left:100px"></summary>
			<div style="height:36px"></div>
		</details>
		<details>
			<summary style="width:36px;height:36px;background:#0FA;cursor:pointer;
							position:absolute;top:calc(-200% + 200px + 3 * 36px);left:100px"></summary>
			<div style="height:36px"></div>
		</details>
		<details>
			<summary style="width:36px;height:36px;background:#0AF;cursor:pointer;
							position:absolute;top:calc(-200% + 200px + 5 * 36px);left:100px"></summary>
			<div style="height:36px"></div>
		</details>
	</div>
	<!-- movement blockers (fences) -->
	<div style="position:absolute;background:brown;width:72px;height:72px;top:calc(-200% + 200px + 1 * 72px - 36px);left:calc(-200% + 100px + 0 * 72px)"></div>
	<div style="position:absolute;background:brown;width:72px;height:72px;top:calc(-200% + 200px + 1 * 72px - 36px);left:calc(-200% + 100px + 2 * 72px)"></div>
	<div style="position:absolute;background:brown;width:72px;height:72px;top:calc(-200% + 200px + 2 * 72px - 36px);left:calc(-200% + 100px + 2 * 72px)"></div>
	<div style="position:absolute;background:brown;width:72px;height:72px;top:calc(-200% + 200px + 2 * 72px - 36px);left:calc(-200% + 100px + 3 * 72px)"></div>
	<!-- key and door system -->
	<details open>
		<!-- key -->
		<summary style="position:absolute;background:yellow;width:72px;height:72px;top:calc(-200% + 200px + 1 * 72px - 36px);left:calc(-200% + 100px + 3 * 72px);cursor:pointer"></summary>
		<!-- door -->
		<div style="position:absolute;background:yellow;width:72px;height:72px;top:calc(-200% + 200px + 1 * 72px - 36px);left:calc(-200% + 100px + 1 * 72px)"></div>
		<!-- map graphics -->
		<img style="position:absolute;left:0;top:0" src="lock.png">
	</details>
	<!-- bone (win condition) -->
	<details>
		<!-- bone block -->
		<summary style="position:absolute;background:whitesmoke;width:72px;height:72px;top:calc(-200% + 200px + 3 * 72px - 36px);left:calc(-200% + 100px + 0 * 72px);cursor:pointer"></summary>
		<!-- win message -->
		<div style="display: block;background: white;padding: 2px 8px;border:yellow 2px solid;box-shadow: 0 0 0 2px #000;z-index:15;top:60px;left:8px;position: absolute;min-width: max-content;">u win the game!</div>
	</details>
	<!-- dpad overlay -->
	<img src="dpad.png" style="position:absolute;left: 61px;top: 160px;pointer-events:none;filter:invert(50%) sepia(100%) hue-rotate(180deg);mix-blend-mode:darken;z-index: 110;">
	<!-- anti-click edges -->
	<div style="position:absolute;top:0;left:0;width:64px;height:500px"></div>
	<div style="position:absolute;top:0;left:172px;width:300px;height:500px"></div>
	<div style="position:absolute;top:0;left:0;width:200px;height:164px"></div>
	<div style="position:absolute;top:272px;left:0;width:200px;height:228px"></div>
	<!-- anti-click corners -->
	<div style="position:absolute;top:164px;left:64px;width:36px;height:36px"></div>
	<div style="position:absolute;top:164px;left:136px;width:36px;height:36px"></div>
	<div style="position:absolute;top:236px;left:64px;width:36px;height:36px"></div>
	<div style="position:absolute;top:236px;left:136px;width:36px;height:36px"></div>
</div>

<!-- QoL styles, not required for gameplay -->
<style>
body { background: #FFD }
img { image-rendering: pixelated }
* { user-select: none }
</style>

dpad.png

link.png

lock.png

map.png