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

html stuff

Browse source
This commit is contained in:
Dominic DiTaranto 2025-09-04 17:17:48 -04:00
parent d2f0ef40d0
commit de6f46b36d
3 changed files with 46 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
assets/maps/microban.js
View file

@ -22,7 +22,7 @@ var level_2 = `
var level_3_par = 100; var level_3_par = 100;
var level_3 = ` var level_3 = `
#### ######
### #### ### ####
# 0 # # 0 #
# # #0 # # # #0 #
@ -58,7 +58,7 @@ var level_6 = `
# 00 #@# # 00 #@#
# 0 #... # # 0 #... #
# ######## # ########
##### ############
`; `;
var level_7_par = 100; var level_7_par = 100;

16
assets/script.js
View file

@ -1,7 +1,7 @@
class Game { class Game {
constructor() { constructor() {
this.mapInstance = null; this.mapInstance = null;
this.level = 0; this.level = 1;
this.lives = 10; this.lives = 10;
this.points = 0; this.points = 0;
this.totalMoves = 0; this.totalMoves = 0;
@ -99,10 +99,15 @@ class Map {
} }
display() { display() {
let grillChar = false;
for (let i = 0; i < this.storageLocations.length; i++) { for (let i = 0; i < this.storageLocations.length; i++) {
if (this.mapArray[this.storageLocations[i][0]][this.storageLocations[i][1]] === ' ') { if (this.mapArray[this.storageLocations[i][0]][this.storageLocations[i][1]] === ' ') {
this.mapArray[this.storageLocations[i][0]][this.storageLocations[i][1]] = '.'; this.mapArray[this.storageLocations[i][0]][this.storageLocations[i][1]] = '.';
} }
if (this.mapArray[this.storageLocations[i][0]][this.storageLocations[i][1]] === '@') {
grillChar = true;
}
} }
let map = ""; let map = "";
@ -117,7 +122,11 @@ class Map {
} else if (this.mapArray[i][j] === "*") { } else if (this.mapArray[i][j] === "*") {
map += '<img src="assets/img/sprites/fire_coal.png">'; map += '<img src="assets/img/sprites/fire_coal.png">';
} else if (this.mapArray[i][j] === "@") { } else if (this.mapArray[i][j] === "@") {
map += `<img src="assets/img/sprites/char${this.playerDir}.png">`; if (!grillChar) {
map += `<img src="assets/img/sprites/char${this.playerDir}.png">`;
} else {
map += `<img src="assets/img/sprites/grill-char${this.playerDir}.png">`;
}
} else if (this.mapArray[i][j] === ".") { } else if (this.mapArray[i][j] === ".") {
map += '<img src="assets/img/sprites/grill.png">'; map += '<img src="assets/img/sprites/grill.png">';
} }
@ -128,6 +137,9 @@ class Map {
let mapDiv = document.getElementById("map"); let mapDiv = document.getElementById("map");
mapDiv.innerHTML = ''; mapDiv.innerHTML = '';
mapDiv.innerHTML = 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}`
} }
move(direction) { move(direction) {

31
index.html
View file

@ -1,4 +1,5 @@
<html> <html>
<meta charset="UTF-8">
<head> <head>
<script src="assets/maps/microban.js"></script> <script src="assets/maps/microban.js"></script>
</head> </head>
@ -11,6 +12,12 @@
background-color: #efd4af; background-color: #efd4af;
} }
.container {
display: flex;
justify-content: center;
width: 100%;
}
#map { #map {
white-space: pre; white-space: pre;
} }
@ -19,11 +26,33 @@
height: 50px; height: 50px;
width: 50px; width: 50px;
} }
#stats {
font-size: 20px;
margin-bottom: 8px;
}
pre {
color: darkblue;
margin-bottom: -19px;
}
</style> </style>
<center> <center>
<div id="map"></div> <pre>
█▀ █▀█ █▄▀ █▀█ █▄▄ ▄▀█ █▄░█ █▄█ ▄▀█
▄█ █▄█ █░█ █▄█ █▄█ █▀█ █░▀█ ░█░ █▀█
</pre>
<div id="stats">
LEVEL: 0 |
MOVES: 0 |
LIVES: 10 |
POINTS: 0
</div>
</center> </center>
<div class="container">
<div id="map"></div>
</div>
<script src="assets/script.js"></script> <script src="assets/script.js"></script>
</body> </body>
</html> </html>