...

View Full Version : Need some help - loop array appendChild o- code attached



dreamcaster
11-14-2012, 08:40 PM
Here I am. I'm trying to append a tile that was dynamically created by tileSet into a dynamically created tr and table. The tileSet works. Map breaks. Why? :'(


function map(numCellsX, numCellsY, tileset, mapData)
{
this.map = document.createElement('table');
this.map.style.position = 'absolute';
this.map.style.top = '0px';
this.map.style.left = '0px';
this.tileset = tileset;
this.row = [];
this.mapData = mapData;
this.popMap = function()
{
this.tileset.makeTiles();
alert(this.tileset.tile[3] + 'gyff');
var yCount = 0;
var xCount = 0;
for(i = 0; i <= ((numCellsX * numCellsY) - 1); i++)
{
if (i <= 0)
{
this.row[yCount] = document.createElement('tr');
}

if (xCount >= numCellsX)
{
alert('stage1');
this.map.appendChild(this.row[yCount]);
xCount = 0;
yCount++;
//alert(this.map.row[yCount] + '$$$');
}

this.row[yCount].appendChild(this.tileset.tile[this.mapData[i]]);
//alert(this.row.hasChildNodes());
xCount++;
}
}

this.showMap = function()
{
this.popMap();
document.getElementById('main').appendChild(this.map);
}
}
function tileSet(imgSrc, numCellsX, numCellsY)
{
this.img = [];
this.tile = [];
this.makeTiles = function()
{
var xCount = 0;
var yCount = 0;
for (i = 0; i <= ((numCellsX * numCellsY) - 1); i++ )
{

//alert(xCount);

if (xCount >= numCellsX)
{
yCount++;
xCount = 0;
}

this.img[i] = new Image();
this.img[i].src = imgSrc;
this.img[i].style.position = 'relative';
this.img[i].style.left = ((this.img[i].width/numCellsX) * (-xCount)) + 'px';
//alert(this.img[i].style.left);
this.img[i].style.top = ((this.img[i].height/numCellsY) * (-yCount)) + 'px';
this.tile[i] = document.createElement('td');
this.tile[i].style.width = (this.img[i].width/numCellsX) + 'px';
this.tile[i].style.height = (this.img[i].height/numCellsY) + 'px';
this.tile[i].style.overflow = 'hidden';
this.tile[i].appendChild(this.img[i]);

xCount++
}
}
}
//------once Icall showMap(), it breaks.------
var out = new tileSet('tiles.png', 16, 12);
var thing = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var town = new map(3, 3, out, thing);
town.showMap();

AndrewGSW
11-14-2012, 09:43 PM
I believe that 'this' will refer to 'window' in 'this.popMap()'.


this.showMap = function()
{
var that = this;
that.popMap();
document.getElementById('main').appendChild(that.map);
}

Goos
11-14-2012, 10:08 PM
I believe that 'this' will refer to 'window' in 'this.popMap()'.

The showmap function is called on the town object, so this will refer to town.popmap function.

The problem is in the popmap function, were you only define this.row[0] and then try to use this.row[0 to 9] later on.

The following should work.


this.popMap = function() {
this.tileset.makeTiles();
var yCount;
for(var i=0; i<mapData.length; i++){
yCount = Math.floor(i/3);
if(i % numCellsX === 0){
this.row[yCount] = document.createElement('tr');
this.map.appendChild(this.row[yCount]);
}
this.row[yCount].appendChild(this.tileset.tile[this.mapData[i]]);
}
};

dreamcaster
11-15-2012, 10:13 PM
Thanks for the replies everyone!

Sorry for taking so long to reply.

Turns out that my loop was breaking once it tried to append the row to the table.
I changed the code a little, and the loop completes. Yay!

But when I try to append the tile to the row, all I get is 'undefined'. Why is that?

this.popMap = function()
{
tileset.makeTiles();
this.tileset = tileset.tile;


var yCount = 0;
var xCount = 0;
var swtch = 0;
for(i = 0; i <= (this.mapData.length); i++)
{
var data = mapData[i]
switch (swtch)
{
case 0:
this.row[yCount] = document.createElement('tr');
alert('lame');
swtch = 1;
break;
case 1:
break;
case 2:


xCount = 0;
yCount++;
swtch = 1;
this.row[yCount] = document.createElement('td');

break;
}
if (xCount >= numCellsX)
{
swtch = 2;
}


this.row[yCount].appendChild(this.tileset[data]);
alert(this.row[yCount].tileset[i]);
xCount++;
}
alert('done!!!');
}

Goos
11-17-2012, 12:02 PM
You're running your loop one time too many.


var arr = ['A','B','C'];
arr.length; //3
for(var i=0; i < arr.length; i++){} // arr[0]: A, arr[1]: B, arr[2]: C



this.popMap = function()
{
tileset.makeTiles();
this.tileset = tileset.tile;


var yCount = 0;
var xCount = 0;
var swtch = 0;
for(i = 0; i < (this.mapData.length); i++)
{
var data = mapData[i]
switch (swtch)
{
case 0:
this.row[yCount] = document.createElement('tr');
this.map.appendChild(this.row[yCount]);
swtch = 1;
break;
case 1:
break;
case 2:
xCount = 0;
yCount++;
swtch = 1;
this.row[yCount] = document.createElement('tr');
this.map.appendChild(this.row[yCount]);
break;
}
xCount++;
if (xCount >= numCellsX)
{
swtch = 2;
}


this.row[yCount].appendChild(this.tileset[data]);
alert(this.row[yCount].tileset[i]);
//xCount++;
}
alert('done!!!');
}

dreamcaster
11-19-2012, 04:43 PM
Goos, thanks. You'be helped a lot. Changing the code up again...
Now here is the new problem... Why can't I append img to cell?all the alerts fire off but when I try to append img to cell, it comes back undefined.
There was also the fact that I was missing tbody. Shame on me for not studying the table dom structure.


this.showMap = function()
{
tileset.makeTiles();

alert(tileset.img[2] + 'gyff');

var yCount = 0;
var xCount = 0;
var count = 0;
var tbody = document.createElement('tbody');
alert(tbody);
for(i = 0; i <= (cellsY - 1); i++)
{
this.row[yCount] = document.createElement('tr');
alert(this.row[yCount] + ' stg1');
for(j = 0; j <= (cellsX - 1); j++)
{
var cell = document.createElement('td');
//alert(cell[xCount]);

alert(cell + ' lame');

var data = mapData[count];
var img = tileset.img[data];

alert(img + '+ image');
//here is where im stuck now--
cell.appendChild(img);
alert(cell.img + ' g');
this.row[yCount].appendChild(cell[xCount]);
alert(this.row[yCount].cell[xCount] + ' walks');
count++;
xCount++;

}
tbody.appendChild(row);
yCount++;
}
this.map.appendChild(tbody);
document.getElementById('main').appendChild(this.map);
}

Goos
11-19-2012, 05:48 PM
alert(cell.img + ' g'); // will throw an error. // alert(cell.getElementsByTagName('img')[0] == img)
this.row[yCount].appendChild(cell[xCount]); // cell already points to the current cell. // this.row[yCount].appendChild(cell);
alert(this.row[yCount].cell[xCount] + ' walks'); // idem // alert(this.row[yCount].cell + ' walks');
count++;
xCount++;
}
tbody.appendChild(row); // you don't have a variable called row // tbody.appendChild(this.row[yCount]);

dreamcaster
11-20-2012, 04:37 PM
HA!!! It's alive!

The goal of this script was to to take a tileset image, slice it up and keep note of the position of each tile, then take that tile and arrange it in a table to make a map. It's all dynamic. All you give for the tileset is the image source, how many cells x and how many cells y. The map object does all the work with slicing and positioning. Thanks to everyone! Especially goos!

Final product:


function map(cellsX, cellsY, tileset, mapData)
{
this.map = document.createElement('table');
this.map.cellPadding = '0';
this.map.cellSpacing = '0';
this.map.style.position = 'absolute';
this.map.style.top = '0px';
this.map.style.left = '0px';
this.row = [];
this.cell = [];
this.showMap = function()
{
var count = 0;
var source = tileset.imgSrc;
var img = new Image();
img.src = source;
var y = [];
var x = [];
for(i = 0; i <= (tileset.cellsY - 1); i++)
{

for(j = 0; j <= (tileset.cellsX - 1); j++)
{
y[count] = (i * (img.height / tileset.cellsY));
x[count] = (j * (img.width / tileset.cellsX));
count++
}
}
var tbody = document.createElement('tbody');
count = 0;
for(i = 0; i <= (cellsY - 1); i++)
{
var row = document.createElement('tr');
for(j = 0; j <= (cellsX - 1); j++)
{
var cell = document.createElement('td');
var cellHeight = img.height / tileset.cellsY;
var cellWidth = img.width / tileset.cellsX;
cell.style.margin = 0;
cell.style.backgroundImage = 'url(' + source + ')';
cell.style.backgroundPosition = x[mapData[count]] + 'px ' + y[mapData[count]] + 'px';
cell.style.height = cellHeight + 'px';
cell.style.width = cellWidth + 'px';
row.appendChild(cell);
count++;

}
tbody.appendChild(row);
}
this.map.appendChild(tbody);
document.getElementById('main').appendChild(this.map);
}
}
function tileSet(imgSrc, cellsX, cellsY)
{
this.imgSrc = imgSrc;
this.cellsX = cellsX;
this.cellsY = cellsY;

}


To use:


var out = new tileSet('tiles.png', 16, 12);
var thing = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var town = new map(3, 3, out, thing);
town.showMap();



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum