Cube Matcher Step 12 & 13

This is the project https://www.codecademy.com/paths/create-video-games-with-phaser/tracks/game-dev-learn-javascript-higher-order-functions-and-iterators/modules/game-dev-project-iterators/projects/cube-matcher

I’m not sure what’s going on here, I do what it tells me to but when I click on cubes nothing happens.

Here are the steps:

Remove the matching cubes from the board. Find the conditional that checks neighborCubes.length > 0 below the line where you declared neighborCubes . We’ve given you the code that updates the score, but the code to update the board by removing matching cubes needs to be added. Under the code for the score, use an iterator on neighborCubes to visit each neighboring cube and for each cube run some code. Pass in a callback function to the iterator with neighbor as the only parameter.

Once you’ve done that, add this code to the callback function’s body:

// Remove neighboring cube from displayneighbor.destroy();

This Phaser code will remove the neighbor cube from the display.

The last step of this section is to move the remaining cubes down after their neighbor is removed from the board:

// Shift remaining cubes downrenderCubes(neighbor);

Check your work by restarting the game and clicking on cubes. Any cube that has at least one other matching cube connected to it should now disappear and any cubes above them should move down the board.

my code:

if (neighborCubes.length > 0) {

        // Update score

        score += neighborCubes.length;

        scoreText.setText(`Score: ${score}`);

        // Update each cube in neighborCubes here

        neighborCubes.forEach(neighbor => {

          neighbor.destroy();

          renderCubes(neighbor);

        });

        removeCols();

      }

Can someone help me?

The snippet of code you posted looks fine, so the error must be occurring somewhere else.

Have you checked the browser’s console to see if there are any clues?

1 Like

I don’t see any errors but I’m not 100% sure I’m looking at the right thing. I clicked on inspect element, then I clicked on console. Then I ran the code and there are no errors, but there are 5 warnings.
I’m not sure that I’m looking at the right thing though.

It sounds like you’re looking at the right thing if you clicked Console

I copy/pasted your snippet into my completed project and it still worked fine:

cubes

1 Like

Removing extra columns doesn’t begin until Step 14 so I’m not sure what behavior you’re supposed to see yet, but I can tell you that your block of code is fine

1 Like

I’m going to try to run all the code locally and see what comes up

Thanks for your help by the way

I’m not sure what to do this isn’t working.
my get neighbor function seems to be okay:

const getNeighbors = (cube) => {

  // Variables

  let start = cube;

  let cubesToCheck = [start];

  let validNeighborCubes = [];

  // Check cubes in cubesToCheck for valid neighborCubes

  while (cubesToCheck.length > 0) {

    let curr = cubesToCheck.shift();

    // Only collect cubes we haven't already removed as a valid neighbor

    if (curr.removed === false) {

      validNeighborCubes.push(curr);

      curr.removed = true;

    }

    // Add code to get matching cubes, below

    const matches = checkClosest(curr);

    matches.forEach(match => {

      match.removed = true;

      validNeighborCubes.push(match);

      cubesToCheck.push(match);

    });

  }

Is that the full function?

1 Like

Yes. Is that wrong did I forget something.

You didn’t include the return line when you copy/pasted. It isn’t in the screenshot either, but I assume you have one or there would likely be other errors. Maybe it would be good to share the whole thing with the link from this so we can look it over holistically:
image

1 Like

Here’s what I see in the console when I start the game and click a cube:

image

1 Like

Ohhhhhh :joy: I forgot to click a on a cube when I got to the console. I just hit run. I feel really dumb! I get the same thing

These things happen!

So do you want to take a crack at debugging this?

1 Like

When I define: const neighborCubes = getNeighbors(); I don’t include a parameter.

1 Like

Thanks for all your help!

1 Like

You got it! Nice find

1 Like

I don’t get the same error but nothing is happening either. I just don’t get it at this stage.// Global variables const cubeSize = 38; let board; let score = 0; class GameScene extends Phaser.Scene { constructor() { super({ key: 'GameScene' }); } preload() { // Load images for board and cubes this.load.spritesheet('blocks', 'https://content.codecademy.com/courses/learn-phaser/cube-matcher/blocks.png', { frameWidth: cubeSize, frameHeight: cubeSize }); this.load.image('grid', 'https://content.codecademy.com/courses/learn-phaser/cube-matcher/grid.png'); } create() { // Add background this.add.image(0, 0, 'grid').setOrigin(0).setScale(0.50); // Set boundaries of the game this.physics.world.setBounds(0, 0, 480, 600); // Create a 12 x 12 board board = this.makeBoard(12); // Create and display score score = 0; let scoreText = this.add.text(15, 610, Score: ${score}, { fontSize: '25px', fill: '#fff' }); // Start and display a timer this.initialTime = 60; // in seconds let timerText = this.add.text( 250, 610, Time Left: ${formatTime(this.initialTime)}`,
{ fontSize: ‘25px’, fill: ‘#fff’ }
);
// Phaser timer event
this.time.addEvent({
delay: 1000, // in milliseconds = 1 second
callback: onTimedEvent,
callbackScope: this,
loop: true
});
// Helper function to format time in minutes and seconds
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
seconds %= 60;
const secondsString = seconds.toString().padStart(2, ‘0’);

  return `${minutes}:${secondsString}`; // 08:00 for example	
}	
// Callback function for timer counts down or ends game	
function onTimedEvent() {	
  if (this.initialTime === 0) {	
    this.endGame();	
  } else {	
    this.initialTime--;	
    timerText.setText(`Time Left: ${formatTime(this.initialTime)}`);	
  }	
}	
// Listener for clicks on cubes	
this.input.on('gameobjectdown', function(pointer, cube, event) {	
  // Declare a constant, neighborCubes, below	
  const neighborCubes = getNeighbors(cube);	
  // Remove matching cubes from game if there's at least 2 of them	
  if (neighborCubes.length > 0) {	
    // Update score	
    score += neighborCubes.length;	
    scoreText.setText(`Score: ${score}`);	
    // Update each cube in neighborCubes here	
    neighborCubes.forEach(neighbor => {	
      neighbor.destroy();	
      renderCubes(neighbor);	
    });	
    removeCols();	
  }	
  // Helper function moves cube sprites down	
  function renderCubes(cube) {	
    for (let row = 0; row < cube.row; row++) {	
      // Move cube sprite down by 30px	
      board[cube.col][row].y += cubeSize;	
      // Update the row of cube	
      board[cube.col][row].row += 1;	
    }	
    // Update board array	
    let removed = board[cube.col].splice(cube.row, 1);	
    board[cube.col] = removed.concat(board[cube.col]);	
  }	
});	

}
update() {
// If no more remaining valid moves, end game below
if (remainingMoves() === false) {
this.endGame();
}
}
makeBoard(size) {
// A nested array, inner arrays represent empty columns
const board = Array(size).fill(Array(size).fill(‘x’));

// Add code to fill board array with cube sprites and return it	
return board.map((col, i) => {	
  col.map((row, j) => {	
    return this.makeCube(i, j);	
  })	
});	

}

makeCube(colIndex, rowIndex) {
const sideMargin = 31;
const topMargin = 30;
// Create a Phaser sprite
const cube = this.physics.add.sprite(
colIndex * cubeSize + sideMargin,
rowIndex * cubeSize + topMargin,
‘blocks’
);
// Choose color randomly
const max = 3;
const min = 0;
const color = Math.floor(Math.random() * (max - min + 1)) + min;
// Don’t let cube move beyond edges of board
cube.setCollideWorldBounds(true);
cube.body.collideWorldBounds = true;
// Set the cube to a specific color
cube.setFrame(color);
// Make the cube clickable
cube.setInteractive();
// Add some information to make it easier to find a cube
cube.col = colIndex;
cube.row = rowIndex;
cube.removed = false;
return cube;
}

endGame() {
// Stop sprites moving
this.physics.pause();
// Transition to end scene w/fade
this.cameras.main.fade(800, 0, 0, 0, false, function(camera, progress) {
if (progress > 0.5) {
this.scene.stop(‘GameScene’);
this.scene.start(‘EndScene’);
}
});
}
}
// Helper function that only checks the immediate neighbors of a cube
const checkClosest = (cube) => {
const results = ;
// Coordinates of up, down, left, right cubes to check
const directions = [
{ row: 0, col: -1 },
{ row: 0, col: 1 },
{ row: -1, col: 0 },
{ row: 1, col: 0 }
];
const currCol = cube.col;
const currRow = cube.row;
const color = cube.frame.name;
// Look for matching cube in 4 directions
directions.forEach(direction => {
// Coordinates of neighbor cube to check
const newCol = currCol + direction.col;
const newRow = currRow + direction.row;
// Exit if the new col or row doesn’t exist or will be removed
if (
!board[newCol] ||
!board[newCol][newRow] ||
board[newCol][newRow].removed
) {
return;
}
// Check color of neighboring cube
if (color === board[newCol][newRow].frame.name) {
results.push(board[newCol][newRow]);
}
});

// Return an array of neighboring cubes with the same color
return results;
}
// Helper function to get neighborCubes of a block
const getNeighbors = (cube) => {
// Variables
let start = cube;
let cubesToCheck = [start];
let validNeighborCubes = ;
// Check cubes in cubesToCheck for valid neighborCubes
while (cubesToCheck.length > 0) {
let curr = cubesToCheck.shift();
// Only collect cubes we haven’t already removed as a valid neighbor
if (curr.removed === false) {
validNeighborCubes.push(curr);
curr.removed = true;
}
// Add code to get matching cubes, below
const matches = checkClosest(curr);
matches.forEach(match => {
match.removed = true;
validNeighborCubes.push(match);
cubesToCheck.push(match);
});
}
// If not enough matching cubes, clear and reset the clicked cube
if (validNeighborCubes.length === 1) {
validNeighborCubes[0].removed = false;
validNeighborCubes = ;
}
return validNeighborCubes;
}
// Helper function shifts removes empty columns
const removeCols = () => {
// Declare a emptyCols here:
// For each empty column, shift all remaining columns to the left
emptyCols.forEach(emptyCol => {
const columnsToMove = board.slice(emptyCol + 1);
// Update the properties of cubes of moved column
columnsToMove.forEach(col => {
col.forEach(cube => {
cube.x -= cubeSize;
cube.col–;
});
});
});
// Remove all empty columns from the board array
board.splice(emptyCols[0], emptyCols.length);
}
// Helper function to check remaining moves
const remainingMoves = () => {
// Add code to return true or false at least 1 remaining move in board

}
const doesColumnContainValidMoves = (column) => {
return column.find(cube => !cube.removed && checkClosest(cube).length > 0) !== undefined;
}`