Compare commits
No commits in common. "670b05ec2d874c12531b535f17688b64ad94745b" and "d7ea7f359648ac0af8574e399dc474253c6bb275" have entirely different histories.
670b05ec2d
...
d7ea7f3596
3 changed files with 14 additions and 107 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 KiB |
|
|
@ -90,24 +90,28 @@ class Map {
|
|||
}
|
||||
var dontLoop = false;
|
||||
if (event.key === "h" || event.key === "a" || event.key === "ArrowLeft") {
|
||||
self.playerDir = "l";
|
||||
self.move("left");
|
||||
} else if (
|
||||
event.key === "j" ||
|
||||
event.key === "s" ||
|
||||
event.key === "ArrowDown"
|
||||
) {
|
||||
self.playerDir = "f";
|
||||
self.move("down");
|
||||
} else if (
|
||||
event.key === "k" ||
|
||||
event.key === "w" ||
|
||||
event.key === "ArrowUp"
|
||||
) {
|
||||
self.playerDir = "b";
|
||||
self.move("up");
|
||||
} else if (
|
||||
event.key === "l" ||
|
||||
event.key === "d" ||
|
||||
event.key === "ArrowRight"
|
||||
) {
|
||||
self.playerDir = "r";
|
||||
self.move("right");
|
||||
} else if (event.key === "r") {
|
||||
dontLoop = true;
|
||||
|
|
@ -185,15 +189,6 @@ class Map {
|
|||
}
|
||||
|
||||
move(direction) {
|
||||
if (direction === "left") {
|
||||
this.playerDir = "l";
|
||||
} else if (direction === "right") {
|
||||
this.playerDir = "r";
|
||||
} else if (direction === "down") {
|
||||
this.playerDir = "f";
|
||||
} else {
|
||||
this.playerDir = "b";
|
||||
}
|
||||
g.levelMoves[this.level] += 1;
|
||||
g.totalMoves += 1;
|
||||
|
||||
|
|
|
|||
108
index.html
108
index.html
|
|
@ -20,26 +20,6 @@
|
|||
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;
|
||||
}
|
||||
|
|
@ -49,11 +29,6 @@
|
|||
width: 50px;
|
||||
}
|
||||
|
||||
#dpad {
|
||||
margin-top: 20px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#stats {
|
||||
font-size: 20px;
|
||||
margin-bottom: 8px;
|
||||
|
|
@ -64,12 +39,6 @@
|
|||
margin-bottom: -19px;
|
||||
}
|
||||
|
||||
@media (max-width: 481px) {
|
||||
pre {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
|
|
@ -95,14 +64,9 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<center>
|
||||
<pre style="margin-top: 30px">
|
||||
<pre>
|
||||
█▀ █▀█ █▄▀ █▀█ █▄▄ ▄▀█ █▄░█ █▄█ ▄▀█
|
||||
▄█ █▄█ █░█ █▄█ █▄█ █▀█ █░▀█ ░█░ █▀█
|
||||
</pre>
|
||||
|
|
@ -111,43 +75,6 @@
|
|||
<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
|
||||
|
|
@ -170,6 +97,14 @@
|
|||
<li>Arrow Keys</li>
|
||||
<li>VIM keys [hjkl]</li>
|
||||
</ul>
|
||||
<h4>TODO:</h4>
|
||||
<ul>
|
||||
<li>Mobile Support</li>
|
||||
<li>Create a cool song and SFX</li>
|
||||
<li>Points system</li>
|
||||
<li>Steam animation when you beat a level</li>
|
||||
<li>Add more level sets (worlds)</li>
|
||||
</ul>
|
||||
<h4>Credits:</h4>
|
||||
<ul>
|
||||
<li>
|
||||
|
|
@ -189,30 +124,7 @@
|
|||
<a href="https://git.domdit.com/dominic/sokobanya">here</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h4>UPDATES:</h4>
|
||||
<li>
|
||||
(09/07/25) v1.1: released mobile support via toggleable Dpad, see settings at top right of page!
|
||||
</li>
|
||||
<h4>TODO:</h4>
|
||||
<ul>
|
||||
<li><s>Mobile Support</s></li>
|
||||
<li>Selectable levels upon completion</li>
|
||||
<li>Create a cool song and SFX</li>
|
||||
<li>Points system</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";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue