243 lines
6.1 KiB
HTML
243 lines
6.1 KiB
HTML
<html>
|
|
<meta charset="UTF-8" />
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Sokobanya</title>
|
|
<script src="assets/maps/microban.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<style>
|
|
body {
|
|
font-family: monospace;
|
|
font-size: 30px;
|
|
background-color: #efd4af;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.opts {
|
|
position: absolute;
|
|
top: 10;
|
|
right: 10;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.opts-menu {
|
|
text-align: right;
|
|
padding: 5px;
|
|
position: absolute;
|
|
top: 40;
|
|
right: 10;
|
|
font-size: 15px;
|
|
width: auto;
|
|
height: auto;
|
|
background-color: ghostwhite;
|
|
display: none;
|
|
}
|
|
|
|
#map {
|
|
white-space: pre;
|
|
}
|
|
|
|
#map > img {
|
|
height: 50px;
|
|
width: 50px;
|
|
}
|
|
|
|
#dpad {
|
|
margin-top: 20px;
|
|
display: none;
|
|
}
|
|
|
|
#stats {
|
|
font-size: 20px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
pre {
|
|
color: darkblue;
|
|
margin-bottom: -19px;
|
|
}
|
|
|
|
@media (max-width: 481px) {
|
|
pre {
|
|
font-size: 12px;
|
|
}
|
|
|
|
#map > img {
|
|
height: 25px;
|
|
width: 25px;
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: black;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
color: darkblue;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a.disabled {
|
|
color: grey;
|
|
text-decoration: none;
|
|
pointer-events: none;
|
|
}
|
|
.info a {
|
|
color: darkblue;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.info a:hover {
|
|
color: green;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#level-select-container {
|
|
font-size: 15px;
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|
|
<div class="opts">
|
|
<a href="#" onclick="toggleDisplay('opts-menu')">settings</a>
|
|
</div>
|
|
<div class="opts-menu" id="opts-menu">
|
|
<a href="#" onclick="toggleDisplay('dpad')">toggle D-Pad</a><br />
|
|
<a href="#" onclick="g.toggleTraditional()">toggle Graphics</a>
|
|
</div>
|
|
<center>
|
|
<pre style="margin-top: 30px">
|
|
█▀ █▀█ █▄▀ █▀█ █▄▄ ▄▀█ █▄░█ █▄█ ▄▀█
|
|
▄█ █▄█ █░█ █▄█ █▄█ █▀█ █░▀█ ░█░ █▀█
|
|
</pre>
|
|
<div id="stats">LEVEL: 0 | MOVES: 0 | LIVES: 10 | POINTS: 0</div>
|
|
<div id="level-select-container">
|
|
SELECT LEVEL:
|
|
<select name="level" id="level-selector"></select>
|
|
</div>
|
|
</center>
|
|
<div class="container">
|
|
<div id="map"></div>
|
|
</div>
|
|
<div class="container">
|
|
<img id="dpad" src="assets/img/sprites/dpad.png" usemap="#dpadmap" />
|
|
<map name="dpadmap">
|
|
<!-- up -->
|
|
<area
|
|
shape="rect"
|
|
coords="50,1,130,50"
|
|
alt="Computer"
|
|
href="#"
|
|
onclick="g.mapInstance.move('up'); g.mapInstance.loop()"
|
|
/>
|
|
<!-- down -->
|
|
<area
|
|
shape="rect"
|
|
coords="50,125,130,190"
|
|
alt="Computer"
|
|
href="#"
|
|
onclick="g.mapInstance.move('down'); g.mapInstance.loop()"
|
|
/>
|
|
<!-- left -->
|
|
<area
|
|
shape="rect"
|
|
coords="1,55,58,120"
|
|
alt="Computer"
|
|
href="#"
|
|
onclick="g.mapInstance.move('left'); g.mapInstance.loop()"
|
|
/>
|
|
<!-- right -->
|
|
<area
|
|
shape="rect"
|
|
coords="130,55,180,120"
|
|
alt="Computer"
|
|
href="#"
|
|
onclick="g.mapInstance.move('right'); g.mapInstance.loop()"
|
|
/>
|
|
</map>
|
|
</div>
|
|
<div class="container" style="margin-top: 20px; margin-bottom: 80px">
|
|
<a href="#" onclick="g.reset()" style="margin-right: 50px">[r]eset</a>
|
|
<a
|
|
href="#"
|
|
onclick="g.mapInstance.continue()"
|
|
class="disabled"
|
|
id="continueLink"
|
|
>[c]ontinue</a
|
|
>
|
|
</div>
|
|
<hr />
|
|
<div style="padding: 20px" class="info">
|
|
<h4>How To Play:</h4>
|
|
You are an old man working in Sokobanya, a luxury Russian bath house. You
|
|
need to move pieces of coal to the stoves in order to keep the saunas hot.
|
|
Try to move all pieces of coal in the shortest amount of moves possible!
|
|
<h4>Controls:</h4>
|
|
<ul>
|
|
<li>WASD</li>
|
|
<li>Arrow Keys</li>
|
|
<li>VIM keys [hjkl]</li>
|
|
</ul>
|
|
<h4>Credits:</h4>
|
|
<ul>
|
|
<li>
|
|
All levels STOLEN from
|
|
<a
|
|
href="http://www.sneezingtiger.com/sokoban/levels.html"
|
|
target="_blank"
|
|
>here</a
|
|
>
|
|
</li>
|
|
<li>
|
|
Code and Sprites by
|
|
<a href="https://www.domdit.com" target="_blank">Dominic DiTaranto</a>
|
|
</li>
|
|
<li>
|
|
Check out the code
|
|
<a href="https://git.domdit.com/dominic/sokobanya">here</a>
|
|
</li>
|
|
</ul>
|
|
<h4>UPDATES:</h4>
|
|
<li>
|
|
(09/10/25) v1.2: added level selector so you can pick up where you left
|
|
off (unless you delete your cookies or use a privacy browser).
|
|
</li>
|
|
<li>
|
|
(09/07/25) v1.1: released mobile support via toggleable Dpad, see
|
|
settings at top right of page! Also added support for traditional
|
|
graphics... also see settings.
|
|
</li>
|
|
<h4>TODO:</h4>
|
|
<ul>
|
|
<li><s>Mobile Support</s></li>
|
|
<li><s>Selectable levels upon completion</s></li>
|
|
<li>Create a cool song and SFX</li>
|
|
<li>Points system (I probably will not do this, seems unnecessary)</li>
|
|
<li>Steam animation when you beat a level</li>
|
|
<li>Add more level sets (worlds)</li>
|
|
</ul>
|
|
</div>
|
|
<script src="assets/script.js"></script>
|
|
<script>
|
|
function toggleDisplay(elemId) {
|
|
let elem = document.getElementById(elemId);
|
|
if (elem.style.display === "none" || elem.style.display === "") {
|
|
elem.style.display = "block";
|
|
} else {
|
|
elem.style.display = "none";
|
|
}
|
|
}
|
|
|
|
if (window.innerWidth < 481) {
|
|
toggleDisplay("dpad");
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|