Array for tilemap.

madmenyo · May 22, 2010

Hey,

I am totally new to javascript and i want to create a interactive map for my PHP game. Obviously i will not be able to just code it instantly so i wanna do this step by step and first let java draw a map from an Array for me. Unfortunately but expected i can't even pull this off .

Firebug gives me (error: parentDiv is null) stated in the function addImage this function gets called by another function renderTileMap div parent stated in this function should feed the attribute. Mind, i rewritten the code from another another file that has a simple tile map and lets a player move a character. I have looked thorugh the whole code for things i forgot to include but can't find anything. Offcourse i did include the open.jp and wall.jpg.

Am i close? Or am i totally off with this and should i start javascript with something more easy?

-EDIT-Error: parentDiv is null

Source File: file:///C:/xampp/htdocs/projects/java/myfirstmap/tilemap.html

Line: 31

<html>
<title>My first tile map</title>
<head>

<script language="JavaScript">

function addImage(parentDiv, elementName, filename, x, y, height, width)
{
   elementName = document.createElement("img");
   elementName.src = filename;
   elementName.style.position = 'absolute';
   elementName.style.left = x + 'px';
   elementName.style.top = y + 'px';
   elementName.style.width = width + 'px';
   elementName.style.height = height + 'px';
   elementName.style.right = x + width + 'px';
   elementName.style.bottom = y + height + 'px';
   parentDiv.appendChild(elementName);
}

tileMap = [
[1 ,1 ,1 ,1 ,1],
[1 ,0 ,0 ,0 ,1],
[1, 0, 0, 0, 1],
[1, 0, 0, 0, 1],
[1, 1 ,1 ,1 ,1],
];

images = new Array();
images[0] = "open.jpg";
images[1] = "wall.jpg";


function renderTileMap(tileMap, tiles, width, height, tileWidth, tileHeight)
{
   var divParent = document.getElementById('ParentImage');
   for(y = 0; y < height; y++) //Loop Height
      for(x = 0; x < width; x++) //Loop Width
      {            
         addImage(divParent, tiles[y * width + x], images[tileMap[y][x]], 
            x * tileWidth, y * tileHeight, tileWidth, tileHeight);
      }
}
   
window.onload = renderTileMap(tileMap, images, 5, 5, 32, 32);

</SCRIPT>
</HEAD>
<BODY>
<DIV ID="ParentImage"></DIV>
</BODY>
</HTML>

madmenyo · May 22, 2010

It seems i have solved it.

window.onload = renderTileMap(tileMap, images, 5, 5, 32, 32); //last line of the script

If i delete this and put a onload in the body element it DOES show the map i have drawn.

<BODY onLoad="renderTileMap(tileMap,images,5,5,32,32)">

Whats the difference between the 2? why won't my images get loaded with the javascript and they do if i put the function in the body?

Does this have consequences in the future for when i want to make a character move or have the window only show 3*3 images? Or for anything else related to further build with this script?

Sign In

Array for tilemap.

Recommended Posts

madmenyo

Link to comment

Share on other sites

madmenyo

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information