Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Need some help - loop array appendChild o- code attached

    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? :'(
    Code:
     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();
    Last edited by dreamcaster; 11-14-2012 at 08:44 PM. Reason: added relevant code.

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I believe that 'this' will refer to 'window' in 'this.popMap()'.

    Code:
    this.showMap = function()
                               {
                                   var that = this;
                                   that.popMap();
                                   document.getElementById('main').appendChild(that.map);
                               }
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    New Coder
    Join Date
    Apr 2011
    Posts
    48
    Thanks
    0
    Thanked 13 Times in 12 Posts
    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.
    Code:
     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]]);
      }
     };

  • #4
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    Code:
     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!!!');
                               }
    Last edited by dreamcaster; 11-15-2012 at 10:15 PM. Reason: Posting code helps...

  • #5
    New Coder
    Join Date
    Apr 2011
    Posts
    48
    Thanks
    0
    Thanked 13 Times in 12 Posts
    You're running your loop one time too many.
    Code:
    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
    Code:
     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!!!');
                               }

  • #6
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Code:
     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);
                               }

  • #7
    New Coder
    Join Date
    Apr 2011
    Posts
    48
    Thanks
    0
    Thanked 13 Times in 12 Posts
    Code:
    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]);

  • #8
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
     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:
    Code:
     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();


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •