Here's a Jing Cast of what I've got so far:
http://screencast.com/t/eu92aBUMAPS
Here's the code for it:
<html>
<head>
<title>Image Manipulation Test</title>
<style type = "text/css">
#Obj_roomSprite {
visibility:visible;
position:absolute;
left:5;
top:5;
z-index:1;
}
#Obj_enemySprite {
visibility:visible;
position:absolute;
left:489;
top:489;
z-index:2;
}
#Obj_playerSprite {
visibility:visible;
position:absolute;
left:181;
top:181;
z-index:3;
}
</style>
<script type = "text/javascript">
// Set grid vars.
gridMap$ = new Array (14);
gridMap$ [1] = " 11111111111111";
gridMap$ [2] = " 11110011110011";
gridMap$ [3] = " 11000001000001";
gridMap$ [4] = " 10000020000001";
gridMap$ [5] = " 10000000000101";
gridMap$ [6] = " 11111100000000";
gridMap$ [7] = " 11000000010001";
gridMap$ [8] = " 10100111111001";
gridMap$ [9] = " 10000001001111";
gridMap$ [10] = " 10010000001001";
gridMap$ [11] = " 11000100100101";
gridMap$ [12] = " 10010010000001";
gridMap$ [13] = " 11001000010011";
gridMap$ [14] = " 11111111111111";
var gridSize = 14
// Set player vars.
var playerSpriteX;
var playerSpriteY;
//var playerNewSpriteX
//var playerNewSpriteY
var playerGridX = 14;
var playerGridY = 6;
//var playerNewGridX;
//var playerNewGridX;
var enemySpriteX = 93;
var enemySpriteY = 93;
// Determine the player's sprite coordinates based on its grid coordinates.
playerSpriteX = playerGridX * 44
playerSpriteX = playerSpriteX - 39
playerSpriteY = playerGridY * 44
playerSpriteY = playerSpriteY - 39
function handleKeydown (ev) {
// Work out which keyboard key was typed and store it in the "key" variable.
df = document.forms [0];
key = ( (ev.which) || (ev.keyCode) );
// Reset the newTile$ related vars.
playerNewGridX = playerGridX;
playerNewGridY = playerGridY;
// Check which direction the player is trying to move in.
switch (key) {
case 38: // Up Arrow was pressed.
playerNewGridY = playerGridY - 1;
break;
case 40: // Down Arrow was pressed.
playerNewGridY = playerGridY + 1;
break;
case 37: // Left Arrow was pressed.
playerNewGridX = playerGridX - 1;
break;
case 39: // Right Arrow was pressed.
playerNewGridX = playerGridX + 1;
break;
}
// Check what kind of tile the player is trying to move onto.
gridMapRowX$ = gridMap$ [playerNewGridY];
playerTile$ = gridMapRowX$.charAt (playerNewGridX);
if (playerTile$ == "0") {playerTile$ = "Empty"}
if (playerTile$ == "1") {playerTile$ = "Wall"}
if (playerTile$ == "2") {playerTile$ = "Signpost"}
// Check if the player is walking off the grid.
if (playerNewGridX < 1) {playerTile$ = "Wall"}
if (playerNewGridX > gridSize) {playerTile$ = "Wall"}
if (playerNewGridY < 1) {playerTile$ = "Wall"}
if (playerNewGridY > gridSize) {playerTile$ = "Wall"}
// If the new tile is traversable, move the player onto it.
if (playerTile$ == "Signpost") {
alert ("Signpost: Silver was 'ere!")
}
if (playerTile$ == "Empty") {
playerGridX = playerNewGridX;
playerGridY = playerNewGridY;
}
if (playerTile$ == "Wall") {
playerNewGridX = playerGridX;
playerNewGridY = playerGridY;
}
// Determine the player's sprite coordinates based on its grid coordinates.
playerSpriteY = playerGridY * 44;
playerSpriteY = playerSpriteY - 39;
playerSpriteX = playerGridX * 44;
playerSpriteX = playerSpriteX - 39;
// Reposition the player sprite.
if (key >= 37 && key <= 40) {
element = document.getElementById ("Obj_playerSprite");
element.style.left = playerSpriteX;
element.style.top = playerSpriteY;
}
}
</script>
</head>
<body onkeydown = "handleKeydown (event)" >
<span id = "Obj_roomSprite"> <img src = "http://209.85.48.12/11610/159/upload/p4557688.gif" /> </span>
<span id = "Obj_enemySprite"> <img src = "http://209.85.48.12/11610/159/upload/p4557408.gif" /> </span>
<span id = "Obj_playerSprite"> <img src = "http://209.85.48.12/11610/159/upload/p4557156.gif" /> </span>
</body>
</html>
If anyone's got the hankering to get cranking on an online game, learn with me! I'll gladly explain anything I've learnt so far and I assure you that JavaScript is not hard, the language just looks a little confusing at first if (like me) you're only used to GM or SC syntax.
Check out W3S for some brilliant tutorials on both HTML and JavaScript: http://www.w3schools.com/JS/default.asp
Man, I can't believe I'm finally making an online RPG! ;D