2D array: swapping texture of particular picked item

[casey]

I'm having a brainfart. I've got a grid of 6x6 tiles. When the user clicks a tile, I want to turn it on (if it's off) and off (if it's on). 

While I can get the right tile picked and change the array value, I'm having trouble updating the image of the picked tile: instead, it always changes the last tile created.  How do I fix my pickMe function so that the correct tile changes image from off to on?

 

ar titles ={
	
	preload: function(){
		this.game.load.image('on', 'on.png');
		this.game.load.image('off', 'off.png');
	},
 
create: function(){
	    
	var cols = 6; //number of columns
	var rows = 6; //number of rows
	
    var tilesize = 45; //size of tile in px
	
	//game grid
  this.grid = [];

  var i,j;
  for(i = 0; i < rows; i++) {
	  //push in empty array
    this.grid.push([]);

    for(j = 0; j < cols; j++) {
		//set initial value to zero
      this.grid[i].push(0);
		this.addTile(i, j);
    }
  }

},
	
//creates the initial grid
	addTile: function(row, col){
		//position according to tile size
		var tileXPos = (col * 45) + (45/2);
		var tileYPos = (row * 45) + (45/2);
		
		//add image, set to off at start
		this.myTile = this.game.add.image(tileXPos, tileYPos, "off");
		//set anchor to centre
		this.myTile.anchor.set(0.5);
		this.myTile.inputEnabled = true;
		this.myTile.events.onInputDown.add(this.pickMe, this);
			
	},
	
	pickMe: function(e){
		
		var pickedCol = Math.floor(e.x / 45);
		var pickedRow = Math.floor(e.y / 45);
		
		//this returns value of tile at pickedTile in grid
		this.pickedTile = this.grid[pickedRow][pickedCol];
		
		//if it's off, turn it on, and vice versa
		if(this.pickedTile === 0){
			this.grid[pickedRow][pickedCol] = 1;
			
		}
		else{
			this.grid[pickedRow][pickedCol] = 0;
			
		}

		console.log(this.grid);
			
	}
	

};

 

[casey]

Nobody?
I'm correctly getting the right tile to change in pickedTile, but if I do this.grid.indexOf(this.pickedTile) it always just returns -1. 

[samme]

1 hour ago, casey said:

if I do this.grid.indexOf(this.pickedTile) it always just returns -1

I think that's correct because the array members are arrays, not numbers.

[casey]

38 minutes ago, samme said:

I think that's correct because the array members are arrays, not numbers.

Thanks, so..... how do I get the right index in order to change the texture of that particular tile?

[samme]

Can you do it inside pickMe, with e?

[casey]

On 5/12/2018 at 12:20 PM, samme said:

Can you do it inside pickMe, with e?

That's what I'm trying to do. I'm not able to get the index of the tile. I can log out the column and the row, and get the value of the tile picked, but I'm not able to refer to the texture of the tile at the index.

[samme]

The picked tile texture key would be 

e.texture.key

If you need to track all of them, you make store a second "grid":

{
  create: function () {
    // ...
    this.objGrid = [];

    var i, j;
    for (i = 0; i < rows; i++) {
      // ...
      this.objGrid.push([]);

      for (j = 0; j < cols; j++) {
        // ...
        this.objGrid[i].push(0);
        // ...
      }
    }
  },

  addTile: function (row, col) {
    // ...
    this.objGrid[col][row] = this.myTile;
  }
}

 

[casey]

Actually I just needed to do  e.loadTexture("on") in the pickMe function.  Thanks for your help samme