Updating game board tile with new text

[evilwizard]

I'm building a Number Tumbler game. The original work, which is not mine is at

https://lumoludo.com/numbertumbler/

However, I thought it made for some good practice, so I've tried to code my own version as an exercise from scratch.

I have my create function here

create: function() {
        //this.initScores();
        this.makeBoard();
        this.generateTiles();
        //this.startTimer();
    },

The only two functions relevant to my problem are the makeBoard and generateTiles ones.

This is the makeBoard function, which draws the game board.

 makeBoard: function() {
        
        cells = this.game.add.group();
        var xPos = 50;
        var yPos = 100;
        
        for (var i = 0; i < 5; i++) {
            for (var j = 0; j < 5; j++) {
                cell = this.game.add.graphics(0, 0);
                cell.lineStyle(1, 0x0000FF, 1);
                cell.beginFill(0xC71585, 1);
                cell.drawRect(xPos, yPos, 90, 90);
                cell.endFill();
                cell.inputEnabled = true;
                cell.visited = false;
                xPos += 90;
                cells.add(cell);
            }
            yPos += 90;
            xPos = 50;
        }
		
        gameStats.target = this.randNumber();
    },

I started out by creating a group to store the tiles/squares/cells. Since this is a 5 x 5 game board, I decided to create a nested for loop, that will first iterate over the rows and then the columns. Since the tiles/squares are rectangles, the appropriate type is Phaser.Graphics. This allows the important drawRect function.

I'm also calling the generateTiles function to add number text to each rectangle.

generateTiles: function() {
        cells.forEach(function(cell) {
            var centerX = cell.getBounds().x + 30;
            var centerY = cell.getBounds().y + 20;
            var num = this.game.add.text(centerX, centerY, gameState.randDigit(), { "fontSize": 40 });
            cell.addChild(num);
            var number = +(num.text);
            
            cell.events.onInputOver.add(function() {
                console.log("Number: " + number);
                if (game.input.mousePointer.isDown && !cell.visited) {
                    cell.visited = true;
                    gameStats.selectedTiles.push(cells.getIndex(cell));
                    gameStats.currentSum += number;
                }
            }, this);
            
            cell.events.onInputDown.add(function() {
                cell.visited = true;
                gameStats.selectedTiles.push(cells.getIndex(cell));
                gameStats.currentSum += number;
            }, this);
            
            cell.events.onInputUp.add(function() {
                console.log(gameStats.currentSum);
                if (gameStats.currentSum == gameStats.target) {
                    gameStats.score++;
                    gameStats.target = gameState.randNumber();

                    gameStats.selectedTiles.forEach(function(index) {
                        //console.log(gameStats.selectedTiles);
                        if (index >= 5) {
                            var shiftedNum = cells.getChildAt(index - 5).getChildAt(0).text;
                            cells.getChildAt(index).getChildAt(0).setText(shiftedNum);
                            /*if (index - 5 >= 5) {
                                cells.getChildAt(prevIndex).getChildAt(0).setText(cells.getChildAt(index - 5).getChildAt(0).text);
                            }*/
                        }
                        else {
                            cells.getChildAt(index).getChildAt(0).setText(gameState.randDigit());
                        }
                    });
    
                }
                
                cells.setAll('visited', false);
                gameStats.currentSum = 0;
                gameStats.selectedTiles = [];
            }, this);
            
        });
    },

Recall that in the makeBoard function, I created a new variable called cells which is a group of rectangles. For each cell, I need an initial number, which will be stored as a text object. I also need to add event listeners on each of the rectangles to test if a user clicked down on a tile, hovered over a tile while the cursor was down, or released the mouse button.

The first go around, it works as expected. The original numbers are replaced with new numbers on the screen. However, on subsequent tries, the numbers retained their own values.

Not sure why this happens though as I called the setText method on the text object to update the text value.