Phaser 3

4 in a row game template using Phaser 3

4 in a row game is a two player game. Where each player has a chance to place a ball in columns. Any player who makes 4 balls in a row horizontally, vertically or diagonally wins the round.

Below is a basic setup for a 4 in a row game using phaser 3 framework

import Phaser from 'phaser';

const config = {
  type: Phaser.AUTO,
  width: 640,
  height: 480,
  scene: {
    preload: preload,
    create: create
  }
};

const game = new Phaser.Game(config);

const numRows = 6;
const numCols = 7;
const cellSize = 80;
const balls = []; // To store placed balls
let currentPlayer = 1;

function preload() {
  this.load.image('ball1', 'assets/particles/blue.png');
  this.load.image('ball2', 'assets/particles/green.png');
}

function create() {
  for (let row = 0; row < numRows; row++) {
    balls[row] = [];
    for (let col = 0; col < numCols; col++) {
      const cell = this.add.rectangle(
        col * cellSize + cellSize / 2,
        row * cellSize + cellSize / 2,
        cellSize,
        cellSize,
        0xAAAAAA
      );
      cell.setInteractive();
      cell.col = col;
      cell.on('pointerdown', onCellClicked);
      balls[row][col] = null;
    }
  }
}

function onCellClicked() {
  const emptyRow = getEmptyRow(this.col);
  if (emptyRow !== -1) {
    const ballTexture = currentPlayer === 1 ? 'ball1' : 'ball2';
    const ball = this.scene.add.image(
      this.col * cellSize + cellSize / 2,
      emptyRow * cellSize + cellSize / 2,
      ballTexture
    ).setScale(0.4);
    balls[emptyRow][this.col] = currentPlayer;
    checkForWin(emptyRow, this.col);
    currentPlayer = 3 - currentPlayer; // Switch players (1 <-> 2)
  }
}

function getEmptyRow(col) {
  for (let row = numRows - 1; row >= 0; row--) {
    if (!balls[row][col]) {
      return row;
    }
  }
  return -1; // Column is full
}

function checkForWin(row, col) {
  if (
    checkHorizontalWin(row, col) ||
    checkVerticalWin(row, col) ||
    checkDiagonalWin(row, col)
  ) {
    console.log(`Player ${balls[row][col]} wins!`);
    // Implement game over logic here
  }
}

function checkHorizontalWin(row, col) {
  // Implement horizontal win check
  const player = balls[row][col];
  let count = 0;

  // Check left
  for (let i = col; i >= 0; i--) {
    if (balls[row][i] === player) {
      count++;
    } else {
      break;
    }
  }

  // Check right
  for (let i = col + 1; i < numCols; i++) {
    if (balls[row][i] === player) {
      count++;
    } else {
      break;
    }
  }

  return count >= 4;
}

function checkVerticalWin(row, col) {
  // Implement vertical win check
  const player = balls[row][col];
  let count = 0;

  // Check below
  for (let i = row; i < numRows; i++) {
    if (balls[i][col] === player) {
      count++;
    } else {
      break;
    }
  }

  return count >= 4;
}

function checkDiagonalWin(row, col) {
  // Implement diagonal win check
  const player = balls[row][col];

  // Check bottom-left to top-right diagonal
  let count = 1;
  let r = row + 1;
  let c = col - 1;
  while (r < numRows && c >= 0 && balls[r][c] === player) {
    count++;
    r++;
    c--;
  }
  r = row - 1;
  c = col + 1;
  while (r >= 0 && c < numCols && balls[r][c] === player) {
    count++;
    r--;
    c++;
  }
  if (count >= 4) {
    return true;
  }

  // Check top-left to bottom-right diagonal
  count = 1;
  r = row - 1;
  c = col - 1;
  while (r >= 0 && c >= 0 && balls[r][c] === player) {
    count++;
    r--;
    c--;
  }
  r = row + 1;
  c = col + 1;
  while (r < numRows && c < numCols && balls[r][c] === player) {
    count++;
    r++;
    c++;
  }
  return count >= 4;
}

Both diagonal checks follow a similar pattern. They start from the current ball position and traverse diagonally in two directions, counting consecutive balls of the same player type. If the count reaches 4 or more in either diagonal direction, the function returns true, indicating a win.

With this diagonal win checking logic in place, you’ll have a complete win condition checking mechanism for your “4 in a row” game. Keep in mind that this example is a simplified version, and you can enhance the game with animations, better user interfaces, and more advanced gameplay mechanics.

Happy gaming!

Leave a Reply

Your email address will not be published. Required fields are marked *.

*
*
You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>