dominic/sokobanya
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

final

Browse source
This commit is contained in:
Dominic DiTaranto 2025-09-04 22:50:27 -04:00
parent 69e1912b25
commit db68dba9b8
4 changed files with 96 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
assets/img/sprites/reset.pixil Normal file
View file

File diff suppressed because one or more lines are too long

BIN
assets/img/sprites/reset.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.2 KiB

26
assets/script.js
View file

@ -1,3 +1,5 @@
var _listener;
class Game { class Game {
constructor() { constructor() {
this.mapInstance = null; this.mapInstance = null;
@ -9,6 +11,7 @@ class Game {
} }
initializeLevel() { initializeLevel() {
document.removeEventListener("keydown", _listener);
this.mapInstance = new Map(); this.mapInstance = new Map();
this.mapInstance.getKeystroke(); this.mapInstance.getKeystroke();
this.mapInstance.generateMapArray(); this.mapInstance.generateMapArray();
@ -16,6 +19,7 @@ class Game {
} }
reset() { reset() {
document.removeEventListener("keydown", _listener);
g.levelMoves[this.level] = 0; g.levelMoves[this.level] = 0;
this.lives -= 1; this.lives -= 1;
// handle points // handle points
@ -80,8 +84,8 @@ class Map {
getKeystroke() { getKeystroke() {
var self = this; var self = this;
document.addEventListener("keydown", function handler(event) { _listener = function (event) {
console.log("hi"); var dontLoop = false;
if (event.key === "h" || event.key === "a" || event.key === "ArrowLeft") { if (event.key === "h" || event.key === "a" || event.key === "ArrowLeft") {
self.playerDir = "l"; self.playerDir = "l";
self.move("left"); self.move("left");
@ -106,15 +110,24 @@ class Map {
) { ) {
self.playerDir = "r"; self.playerDir = "r";
self.move("right"); self.move("right");
} else if (event.key === "r") {
dontLoop = true;
g.reset();
} else if (event.key === "c" && self.win) {
dontLoop = true;
self.continue();
} }
self.loop(); if (!dontLoop) {
this.removeEventListener("keydown", handler); self.loop();
}); }
};
document.addEventListener("keydown", _listener);
} }
loop() { loop() {
this.display(); this.display();
this.checkWin(); this.checkWin();
document.removeEventListener("keydown", _listener);
this.getKeystroke(); this.getKeystroke();
} }
@ -169,7 +182,7 @@ class Map {
mapDiv.innerHTML = map; mapDiv.innerHTML = map;
let statsDiv = document.getElementById("stats"); let statsDiv = document.getElementById("stats");
statsDiv.innerHTML = `LEVEL: ${this.level} | MOVES: ${g.levelMoves[this.level]} | LIVES: ${g.lives} | POINTS: ${g.points}`; statsDiv.innerHTML = `LEVEL: ${this.level}/155 | MOVES: ${g.levelMoves[this.level]}`;
} }
move(direction) { move(direction) {
@ -266,7 +279,6 @@ class Map {
} }
continue() { continue() {
// handle points
g.level += 1; g.level += 1;
g.initializeLevel(); g.initializeLevel();
let continueLink = document.getElementById("continueLink"); let continueLink = document.getElementById("continueLink");

83
index.html
View file

@ -1,5 +1,5 @@
<html> <html>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<head> <head>
<script src="assets/maps/microban.js"></script> <script src="assets/maps/microban.js"></script>
</head> </head>
@ -36,6 +36,31 @@
color: darkblue; color: darkblue;
margin-bottom: -19px; margin-bottom: -19px;
} }
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;
}
</style> </style>
<center> <center>
@ -43,16 +68,60 @@
█▀ █▀█ █▄▀ █▀█ █▄▄ ▄▀█ █▄░█ █▄█ ▄▀█ █▀ █▀█ █▄▀ █▀█ █▄▄ ▄▀█ █▄░█ █▄█ ▄▀█
▄█ █▄█ █░█ █▄█ █▄█ █▀█ █░▀█ ░█░ █▀█ ▄█ █▄█ █░█ █▄█ █▄█ █▀█ █░▀█ ░█░ █▀█
</pre> </pre>
<div id="stats"> <div id="stats">LEVEL: 0 | MOVES: 0 | LIVES: 10 | POINTS: 0</div>
LEVEL: 0 |
MOVES: 0 |
LIVES: 10 |
POINTS: 0
</div>
</center> </center>
<div class="container"> <div class="container">
<div id="map"></div> <div id="map"></div>
</div> </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 a Sokobanya, a 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>TODO:</h4>
<ul>
<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>
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>
</div>
<script src="assets/script.js"></script> <script src="assets/script.js"></script>
</body> </body>
</html> </html>