Here's my code and i will attach the js map file
thanks a ton!
<html>
<body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">
<div id="player1" name="player1" style="position:absolute;top:0;left:0;z-index:2;"><img name="player1icon" src="guy_right.gif"></div>
<script>
//initial global variable for map and load map.js to set map values
scrn = new Array();
</script>
<script src="map.js"></script>
<script>
//isNS is true if the browser is Netscape, false if it is Internet Explorer
isIE = (document.all) ? 1 : 0;
isNS = (!document.getElementById && document.layers) ? 1 : 0;
isNS6 = (!document.all && document.getElementById) ? 1 : 0;
//set browser to capture keystrokes
if (isNS || isNS6) window.captureEvents(Event.KEYPRESS);
if (isNS || isNS6) document.captureEvents(Event.KEYPRESS);
window.onkeypress = getkeypress;
document.onkeypress = getkeypress;
rows = 10; //number of table rows and columns
iconsize = 31; //size of each grid cell
p1CurX=0; //player1 current x position
p1CurY=0; //player1 current y position
p1x=0; //player1 x movement
p1y=0; //player1 y movement
map=0; //current screen
//draw the map grid
document.write('<table background="grass.gif" cellspacing="0" cellpadding="0" border="0">');
for (i=0; i<rows; i++) {
document.write(' <tr>');
for (j=0; j<rows ;j++) {
document.write('<td><img name="r'+i+'c'+j+'" src="no.gif"></td>');
}
document.write(' </tr>');
}
document.write('</table>');
//initalize empty array to store the type of each map cell
iconType = new Array(rows);
for (i=0; i<rows; i++) {
iconType[i] = new Array(rows);
}
//p1 is a reference to the <div> player1
if (isNS) p1 = document.player1;
else if (isNS6) p1 = document.getElementById("player1").style;
else if (isIE) p1 = document.all.player1.style;
//p1icon is a reference to the player image icon
if (isNS) p1icon = document.player1.document.player1icon;
else if (isNS6) p1icon = document.getElementById("player1").getElementsByTagName("img")[0];
else if (isIE) p1icon = document.all.player1icon;
setstart(); //sets player starting position on map
showmap(); //draws the map
//every 100 miliseconds, call the animate function
setInterval('animate()',100);
function setstart() {
//set player starting position on map
p1icon.src = "guy_right.gif";
p1CurX = 1;
p1CurY = 1;
p1.left = p1CurX * iconsize;
p1.top = p1CurY * iconsize;
}
function showmap() {
for(i=0; i <= rows-1; i++) {
for(j=0; j <= rows-1; j++) {
if (scrn[map].split("\n")[i].split(";")[j*2] != "") {
eval('document.r' + i + 'c' + j + '.src="' + scrn[map].split("\n")[i].split(";")[j*2] + '.gif"');
} else {
eval('document.r' + i + 'c' + j + '.src="no.gif"');
}
iconType[i][j] = scrn[map].split("\n")[i].split(";")[(j*2)+1];
}
}
}
function animate() {
if (p1x != 0) {
if (p1x > 0) p1icon.src = "guy_right.gif";
if (p1x < 0) p1icon.src = "guy_left.gif";
if ((p1CurX + p1x >= 0) && (p1CurX + p1x < rows)) {
)
if (iconType[p1CurY][(p1CurX * 1) + (p1x * 1)] == 0) {
p1CurX += p1x;
p1.left = p1CurX * iconsize;
} else if (iconType[p1CurY][(p1CurX * 1) + (p1x * 1)].indexOf("2") == 0) {
doJump(iconType[p1CurY][(p1CurX * 1) + (p1x * 1)]);
}
}
p1x = 0;
}
if (p1y != 0) {
if (p1y > 0) p1icon.src = "guy_front.gif";
if (p1y < 0) p1icon.src = "guy_back.gif";
if ((p1CurY + p1y >= 0) && (p1CurY + p1y < rows)) {
if (iconType[(p1CurY * 1) + (p1y * 1)][p1CurX] == 0) {
p1CurY += p1y;
p1.top = p1CurY * iconsize;
} else if (iconType[(p1CurY * 1) + (p1y * 1)][p1CurX].indexOf("2") == 0) {
doJump(iconType[(p1CurY * 1) + (p1y * 1)][p1CurX]);
}
}
p1y = 0;
}
}
function doJump(tmpType) {
map = tmpType.split("-")[1] * 1;
p1CurX = tmpType.split('-')[2] * 1;
p1CurY = tmpType.split('-')[3] * 1;
p1.left = p1CurX * iconsize;
p1.top = p1CurY * iconsize;
showmap();
}
function getkeypress(keypress) {
keyp = (isNS || isNS6) ? keypress.which : window.event.keyCode;
//alert(keyp);
if (keyp == 38) p1y = -1; //K8
if (keyp == 40) p1y = 1; //K2
if (keyp == 39) p1x = -1; //K4
if (keyp == 37) p1x = 1; //K6
if (keyp == 55) {p1x = -1;p1y = -1;} //K7
if (keyp == 57) {p1x = 1;p1y = -1;} //K9
if (keyp == 49) {p1x = -1;p1y = 1;} //K1
if (keyp == 51) {p1x = 1;p1y = 1;} //K3
return false;
}
//this is a rpg game coded just for fun!
</script>
</body>
</html>