final
This commit is contained in:
parent
69e1912b25
commit
db68dba9b8
4 changed files with 96 additions and 14 deletions
1
assets/img/sprites/reset.pixil
Normal file
1
assets/img/sprites/reset.pixil
Normal file
File diff suppressed because one or more lines are too long
BIN
assets/img/sprites/reset.png
Normal file
BIN
assets/img/sprites/reset.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
|
|
@ -1,3 +1,5 @@
|
|||
var _listener;
|
||||
|
||||
class Game {
|
||||
constructor() {
|
||||
this.mapInstance = null;
|
||||
|
|
@ -9,6 +11,7 @@ class Game {
|
|||
}
|
||||
|
||||
initializeLevel() {
|
||||
document.removeEventListener("keydown", _listener);
|
||||
this.mapInstance = new Map();
|
||||
this.mapInstance.getKeystroke();
|
||||
this.mapInstance.generateMapArray();
|
||||
|
|
@ -16,6 +19,7 @@ class Game {
|
|||
}
|
||||
|
||||
reset() {
|
||||
document.removeEventListener("keydown", _listener);
|
||||
g.levelMoves[this.level] = 0;
|
||||
this.lives -= 1;
|
||||
// handle points
|
||||
|
|
@ -80,8 +84,8 @@ class Map {
|
|||
|
||||
getKeystroke() {
|
||||
var self = this;
|
||||
document.addEventListener("keydown", function handler(event) {
|
||||
console.log("hi");
|
||||
_listener = function (event) {
|
||||
var dontLoop = false;
|
||||
if (event.key === "h" || event.key === "a" || event.key === "ArrowLeft") {
|
||||
self.playerDir = "l";
|
||||
self.move("left");
|
||||
|
|
@ -106,15 +110,24 @@ class Map {
|
|||
) {
|
||||
self.playerDir = "r";
|
||||
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();
|
||||
this.removeEventListener("keydown", handler);
|
||||
});
|
||||
if (!dontLoop) {
|
||||
self.loop();
|
||||
}
|
||||
};
|
||||
document.addEventListener("keydown", _listener);
|
||||
}
|
||||
|
||||
loop() {
|
||||
this.display();
|
||||
this.checkWin();
|
||||
document.removeEventListener("keydown", _listener);
|
||||
this.getKeystroke();
|
||||
}
|
||||
|
||||
|
|
@ -169,7 +182,7 @@ class Map {
|
|||
mapDiv.innerHTML = map;
|
||||
|
||||
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) {
|
||||
|
|
@ -266,7 +279,6 @@ class Map {
|
|||
}
|
||||
|
||||
continue() {
|
||||
// handle points
|
||||
g.level += 1;
|
||||
g.initializeLevel();
|
||||
let continueLink = document.getElementById("continueLink");
|
||||
|
|
|
|||
83
index.html
83
index.html
|
|
@ -1,5 +1,5 @@
|
|||
<html>
|
||||
<meta charset="UTF-8">
|
||||
<meta charset="UTF-8" />
|
||||
<head>
|
||||
<script src="assets/maps/microban.js"></script>
|
||||
</head>
|
||||
|
|
@ -36,6 +36,31 @@
|
|||
color: darkblue;
|
||||
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>
|
||||
|
||||
<center>
|
||||
|
|
@ -43,16 +68,60 @@
|
|||
█▀ █▀█ █▄▀ █▀█ █▄▄ ▄▀█ █▄░█ █▄█ ▄▀█
|
||||
▄█ █▄█ █░█ █▄█ █▄█ █▀█ █░▀█ ░█░ █▀█
|
||||
</pre>
|
||||
<div id="stats">
|
||||
LEVEL: 0 |
|
||||
MOVES: 0 |
|
||||
LIVES: 10 |
|
||||
POINTS: 0
|
||||
</div>
|
||||
<div id="stats">LEVEL: 0 | MOVES: 0 | LIVES: 10 | POINTS: 0</div>
|
||||
</center>
|
||||
<div class="container">
|
||||
<div id="map"></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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue