I've managed to get a text-based game up and running, featuring two arrays: the main array (mainArray) that contains information for displaying a bordered map, and a collision array (colArray) that prevents the player from walking off the map.
Everything seems to be working fine, except for one issue. I am trying to store the collision information in the mainArray as a 3D array instead of a 2D array, but every attempt I've made has failed.
I've been thinking that it should be as simple as adding another [] next to mainArray[i][j] within the if statements in the initMap function, something like mainArray[i][j][k], and then storing the "solid" strings there. However, this approach doesn't seem to work.
Here is a link to a different version where I'm attempting to implement the third dimension and test for it without checking for "solid," testing only for k instead
Below is the operational code of the game using 2D arrays mainArray and colArray, which I am looking to merge into a single 3D array. You can also run the code here. After running the code, you may need to click fullscreen to see what's going on.
function gameloop() {
var mainArray = [];
var colArray = [];
var mapSizeX = 32;
var mapSizeY = 128;
var idPos = {
x: 0,
y: 0
};
function initMap(mainArray, mapSizeX, mapSizeY) {
for (var i = 0; i < mapSizeX; i++) {
mainArray.push([])
colArray.push([])
for (var j = 0; j < mapSizeY; j++) {
mainArray[i][j] = ".";
colArray[i][j] = "";
if (j == 0) {
mainArray[i][j] = "#";
colArray[i][j] = "Solid";
}
if (j == mapSizeY - 1) {
mainArray[i][j] = "#";
colArray[i][j] = "Solid";
}
if (i == 0) {
mainArray[i][j] = "#";
colArray[i][j] = "Solid";
}
if (i == mapSizeX - 1) {
mainArray[i][j] = "#";
colArray[i][j] = "Solid";
}
}
}
}
function nl() {
GameScreen.innerText += "\n";
}
function render() {
GameScreen.innerText = mainArray.map(arr => arr.join("")).join("\n");
nl();
nl();
}
function reposition(xChange, yChange, strA) {
if (colArray[idPos.x + xChange][idPos.y + yChange] === "Solid") {
GameLog.innerText = "You can not travel in that direction"
} else {
mainArray[idPos.x][idPos.y] = ".";
idPos.x = idPos.x + xChange;
idPos.y = idPos.y + yChange;
mainArray[idPos.x][idPos.y] = "@";
GameLog.innerText = "You take a step to the " + strA
}
render();
}
//Startup
initMap(mainArray, mapSizeX, mapSizeY);
idPos.x = mapSizeX / 2;
idPos.y = mapSizeY / 2;
mainArray[idPos.x][idPos.y] = "@";
//First Render
render();
document.addEventListener('keydown', function(event) {
if (event.keyCode === 38) {
reposition(-1, 0, "North");
}
if (event.keyCode === 40) {
reposition(1, 0, "South");
}
if (event.keyCode === 37) {
reposition(0, -1, "West");
}
if (event.keyCode === 39) {
reposition(0, 1, "East");
}
//alert(event.keyCode);
});
}
gameloop();<p style="color:#7d7d7d;font-family:Lucida Console;">Dungeon Valley.<br>
<font style="color:#ABABAB;font-family:Lucida Console;font-size:0.5em" ;>
Taming the Borderlands.<br> v0.005 By heromedel. </P>
</font>
<P>
<section id="GameScreen" style="color:#000000;font-family:Lucida Console;"></section>
<P>
<section id="GameLog" style="color:#000000;font-family:Lucida Console;">Arrow Keys to move.<br></section>
<script src="main.js"></script>