OK, ok, ok...here we go.
Because we will need to get the exact position of the div objects, I use the following two functions (In all fairness there are better, faster, more accurate ways to get the position of a div tag, but this has worked for me and is simple enough for my simple mind to grasp.)
You pass them an object and they give you back the position of the object.
function getTop(obj)
{
if(obj)
{
return parseInt(obj.style.top.replace("px",""));
}
return 0;
}
function getLeft(obj)
{
if(obj)
{
return parseInt(obj.style.left.replace("px",""));
}
return 0;
}
A bit boring, nothing to fascinating in those functions. However here is where things get a bit more exciting. The following function will move any unit object to the desired Tile position.
We pass in the unitID we want to move, and the TILE x and y we want to move to. The function will:
- Get the unit's and the tile's position
- Compare the two positions and move the unit closer to the tile by one pixel.
- At the very end of the function, if we have not reached our destination, we call the same function in 5 milliseconds.
function moveUnit(unitID, tileDestX, tileDestY)
{
var unit = document.getElementById("unit_" + unitID);
var tile = document.getElementById("tile_" + tileDestX + "_" + tileDestY)
x = getLeft(unit);
y = getTop(unit);
destX = getLeft(tile);
destY = getTop(tile);
newX = x;
newY = y;
if(x > destX) newX--;
if(x <> destY) newY--;
if(y < left =" newX;" top =" newY;">
Now that moves the unit around, but no one is actually calling this function so
Full Code:
<html>
<style>
.tile {
background:#BBB;
border:1px solid #999;
position:absolute;
top:0px;left:0px;
width:5px;height:5px;
overflow:hidden
}
.unit {
background:green;
border:1px solid #999;
position:absolute;
top:0px;left:0px;
width:5px;height:5px;
overflow:hidden
}
</style>
<script language=javascript>
var originX = 0;
var originY = 0;
var tileSize = 32;
function buildMap(width, height)
{
for(x=0;x<width;x++)
for(y=0;y<height;y++)
{
var d = document.createElement("DIV");
d.className="tile";
d.setAttribute("ID","tile_" + x + "_" + y);
d.style.top = originY + (y*tileSize);
d.style.left = originX + (x*tileSize);
d.style.width = tileSize;
d.style.height = tileSize;
d.setAttribute("onclick","tileClicked(" + x + "," + y + ")")
document.getElementById("divMap").appendChild(d);
}
}
function tileClicked(x,y)
{
//var tile = document.getElementById("tile_" + x + "_" + y)
//tile.style.background = "yellow"
moveUnit(1000, x, y);
}
function addUnit(unitID, x,y)
{
var d = document.createElement("DIV");
var tile = document.getElementById("tile_" + x + "_" + y)
d.className="unit";
d.setAttribute("ID","unit_" + unitID);
d.style.top = tile.style.top;
d.style.left = tile.style.left;
d.style.width = tileSize;
d.style.height = tileSize;
document.getElementById("divMap").appendChild(d);
}
function moveUnit(unitID, tileDestX, tileDestY)
{
var unit = document.getElementById("unit_" + unitID);
var tile = document.getElementById("tile_" + tileDestX + "_" + tileDestY)
x = getLeft(unit);
y = getTop(unit);
destX = getLeft(tile);
destY = getTop(tile);
newX = x;
newY = y;
if(x > destX) newX--;
if(x < destX) newX++;
if(y > destY) newY--;
if(y < destY) newY++;
unit.style.left = newX;
unit.style.top = newY;
if(newX != destX || newY != destY)
{
setTimeout("moveUnit(" + unitID + "," + tileDestX +"," + tileDestY+")",5);
}
}
function getTop(obj)
{
if(obj)
{
return parseInt(obj.style.top.replace("px",""));
}
return 0;
}
function getLeft(obj)
{
if(obj)
{
return parseInt(obj.style.left.replace("px",""));
}
return 0;
}
</script>
<body onload="buildMap(10,10); addUnit(1000,4,4)">
<div id="divMap"></div>
</body>
</html>
For giggles, I used this quick function to test play it. The function adds a number of units and randomly moves them around the screen. My desktop (Intel 2 Duo 2.2GH with 2GB Ram) can handle about 20 units in firefox, before it gets a bit odd.
var playSpeed = 3000;
var numUnits = 0;
var maxNumUnits = 5;
function play()
{
while(numUnits < i="0;i
0 comments:
Post a Comment