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 = `
####
######
### ####
# 0 #
# # #0 #
@ -58,7 +58,7 @@ var level_6 = `
# 00 #@#
# 0 #... #
# ########
#####
############
`;
var level_7_par = 100;

14
assets/script.js
View file

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

31
index.html
View file

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