Walkable Map

This JavaScript program shows how create a walkable map. Press the directions keys to move around the terrain.

JavascriptGameBoard2DWithJS.html

<!DOCTYPE html>

<html>

<head>
<title>XoaX.net's Javascript 2D Game Board Example</title>

<script type="text/javascript" src="XoaXGameBoard2D.js"></script>
</head>

<body>

<div id="gameboard" style="position:absolute; width:500px; height:500px; background:#aaaaaa; margin:30px;">
	<div id="A11" style="left:0px; top:0px; position:absolute; width:100px; height:100px;"></div>
	<div id="A12" style="left:100px; top:0px; position:absolute; width:100px; height:100px;"></div>
	<div id="A13" style="left:200px; top:0px; position:absolute; width:100px; height:100px;"></div>
	<div id="A14" style="left:300px; top:0px; position:absolute; width:100px; height:100px;"></div>
	<div id="A15" style="left:400px; top:0px; position:absolute; width:100px; height:100px;"></div>

	<div id="A21" style="left:0px; top:100px; position:absolute; width:100px; height:100px;"></div>
	<div id="A22" style="left:100px; top:100px; position:absolute; width:100px; height:100px;"></div>
	<div id="A23" style="left:200px; top:100px; position:absolute; width:100px; height:100px;"></div>
	<div id="A24" style="left:300px; top:100px; position:absolute; width:100px; height:100px;"></div>
	<div id="A25" style="left:400px; top:100px; position:absolute; width:100px; height:100px;"></div>

	<div id="A31" style="left:0px; top:200px; position:absolute; width:100px; height:100px;"></div>
	<div id="A32" style="left:100px; top:200px; position:absolute; width:100px; height:100px;"></div>
	<div id="A33" style="left:200px; top:200px; position:absolute; width:100px; height:100px;"></div>
	<div id="A34" style="left:300px; top:200px; position:absolute; width:100px; height:100px;"></div>
	<div id="A35" style="left:400px; top:200px; position:absolute; width:100px; height:100px;"></div>

	<div id="A41" style="left:0px; top:300px; position:absolute; width:100px; height:100px;"></div>
	<div id="A42" style="left:100px; top:300px; position:absolute; width:100px; height:100px;"></div>
	<div id="A43" style="left:200px; top:300px; position:absolute; width:100px; height:100px;"></div>
	<div id="A44" style="left:300px; top:300px; position:absolute; width:100px; height:100px;"></div>
	<div id="A45" style="left:400px; top:300px; position:absolute; width:100px; height:100px;"></div>

	<div id="A51" style="left:0px; top:400px; position:absolute; width:100px; height:100px;"></div>
	<div id="A52" style="left:100px; top:400px; position:absolute; width:100px; height:100px;"></div>
	<div id="A53" style="left:200px; top:400px; position:absolute; width:100px; height:100px;"></div>
	<div id="A54" style="left:300px; top:400px; position:absolute; width:100px; height:100px;"></div>
	<div id="A55" style="left:400px; top:400px; position:absolute; width:100px; height:100px;"></div>
</div>

</body>
</html>

XoaXGameBoard2D.js

var qpBkdg = null;
var qppBoard = null;
var qppMap = null;
var iLocX = 10;
var iLocY = 10;

function KeyHandler(qKeyEvent) {
    var iKeyDown = 0;
    var iLeftArrow = 37;
    var iUpArrow = 38;
    var iRightArrow = 39;
    var iDownArrow = 40;

    if (qKeyEvent) {
        iKeyDown = qKeyEvent.which;
    } else {
        iKeyDown = window.event.keyCode;
    }

    if (iKeyDown === iLeftArrow) {
	    if (iLocX > 0) {
 	       iLocX = iLocX - 1;
        }
    } else if (iKeyDown === iRightArrow) {
        if (iLocX < 19) {
			iLocX = iLocX + 1;
        }
    } else if (iKeyDown === iUpArrow) {
        if (iLocY > 0) {
		 	iLocY = iLocY - 1;
        }
    } else if (iKeyDown === iDownArrow) {
        if (iLocY < 19) {
			iLocY = iLocY + 1;
        }
    }
    ColorBoard();
    return false;
}

function GetRandomColor() {
	var iRnd = Math.floor(Math.random()*10);
	switch(iRnd) {
		case 0:
		{
			return 'gray';
		}
		case 1:
		{
			return 'brown';
		}
		case 2:
		{
			return 'lime';
		}
		default:
		{
			return 'green';
		}
	}
}

function ColorBoard() {
	for (var iY = iLocY - 2; iY < iLocY + 3; iY++) {
		for (var iX = iLocX - 2; iX < iLocX + 3; iX++) {
			if (iY < 0 || iX < 0 || iY > 19 || iX > 19) {
				qppBoard[iY - iLocY + 2][iX - iLocX + 2].style.backgroundColor = 'black';
			} else {
				qppBoard[iY - iLocY + 2][iX - iLocX + 2].style.backgroundColor = qppMap[iY][iX];
			}
		}
	}
}

function Initialize() {
	// Generate map
	qppMap = new Array(20);
	for (var iY = 0; iY < 20; iY++) {
		qppMap[iY] = new Array(20);
		for (var iX = 0; iX < 20; iX++) {
			qppMap[iY][iX] = GetRandomColor();
		}
	}

	// Allocate the visible board
	qppBoard = new Array(5);
	for (var iY = 0; iY < 5; iY++) {
		qppBoard[iY] = new Array(5);
		for (var iX = 0; iX < 5; iX++) {
			qppBoard[iY][iX] = document.getElementById('A'+((iY+1)*10+(iX+1)));
		}
	}
	ColorBoard();

	document.onkeydown = KeyHandler;
	qpBkdg = document.getElementById('gameboard');
}

window.onload = Initialize;

Core JavaScript

Walkable Map

JavascriptGameBoard2DWithJS.html

XoaXGameBoard2D.js

Output