Walkable Terrain Map

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

JavascriptGameTerrain2DWithJS.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

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

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

<body>

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

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

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

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

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

<img src="Man.png" style="left:200px; top:200px; position:absolute; width:100px; height:100px;" />
</div>

</body>
</html>

XoaXGameTerrain2D.js

var qpBkdg = null;
var qppBoard = null;
var qppMap = null;
var iLocX = 10;
var iLocY = 10;
var qpGrass = null;
var qpForest = null;
var qpWater = null;
var qpBushes = null;

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;
        }
    }
    FillBoard();
    return false;
}

function GetRandomTerrain() {
    var iRnd = Math.floor(Math.random()*10);
    switch(iRnd) {
        case 0:
        {
            return qpWater;
        }
        case 1:
        {
            return qpForest;
        }
        case 2:
        {
            return qpBushes;
        }
        default:
        {
            return qpGrass;
        }
    }
}

function FillBoard() {
    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].src = null;
            } else {
                qppBoard[iY - iLocY + 2][iX - iLocX + 2].src = qppMap[iY][iX].src;
            }
        }
    }
}

function Initialize() {
    qpGrass = new Image();
    qpGrass.src = "Grass.png"
    qpForest = new Image();
    qpForest.src = "Forest.png"
    qpWater = new Image();
    qpWater.src = "Water.png"
    qpBushes = new Image();
    qpBushes.src = "Bushes.png"

    // 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] = GetRandomTerrain();
        }
    }

    // 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)));
        }
    }
    FillBoard();

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

window.onload = Initialize;

Core JavaScript

Walkable Terrain Map

JavascriptGameTerrain2DWithJS.html

XoaXGameTerrain2D.js

Output