Connect-n #

Por Santiago Bohorquez Rodriguez, Santiago Mayorga y Valentina Muñoz Rodriguez, estudiantes de ingeniería mecatrónica.

Connect-n is a game that combines and extends Connect Four and Tic-Tac-Toe. Players aim to align a sequence of n symbols either horizontally, vertically, or diagonally. This game offers various difficulty levels, including a dynamic Ninja level for an unpredictable and amusing experience.

(click the mouse to position pieces; press r to reset)

Design Overview #

Key design choices include:

Dynamic Quadrille System: Adapts to different game levels and player selections.
Customizable Difficulty Levels: Includes predefined levels and a random Ninja level.
Interactive User Interface: Simple and intuitive design, ensuring a smooth user experience.
Gravity Feature: An optional game mode where symbols fall to the bottom of the quadrille, adding an extra layer of strategy.

Code Insights #

setup #

The setup initializes the GUI elements:

let turn
let selection, gravity
// Difficulty levels configuration
// Edit here to modify, remove, or add new levels
const levels = {
  'Beginner': [3, 3],
  'Intermediate': [5, 6],
  'Advanced': [7, 9],
  'Ninja': ['🎲', '🎲']
}

function setup() {
  turn = '✖️' // Initializes the player's turn
  createCanvas(400, 450) // Creates a 400x450 px canvas
  selection = createSelect() // Dropdown for game level selection
  selection.position(5, 5)
  for (let level in levels) {
    selection.option(level) // Adds levels to dropdown
  }
  selection.changed(reset) // Resets game on level change
  gravity = createCheckbox('gravity') // gravity feature checkbox
  gravity.position(170, 5)
  reset() // Calls the reset function to initialize the game
  textSize(20)
}

reset #

The reset function initializes the game based on the selected level. For the Ninja level, it randomly determines the values of n and size for an amusing gameplay experience. It also prepares various patterns (lines and diagonals) that are used for checking the winning condition.

let n, size, gameOver

function reset() {
  // set n and size
  const currentLevel = levels[selection.value()]
  n = currentLevel[0]
  size = currentLevel[1]
  isNaN(size) && (size = int(random(1, 20)))
  isNaN(n) && (n = int(random(1, size)))
  // Initialization of quadrille and line patterns
  // ...
  gameOver = false
}

update #

The update function checks for a winning condition after every move. It searches the quadrille for any completed lines or diagonals matching the required length n. If a winning pattern is detected, it announces the winner and sets the game state to ‘over’.

function update() {
  const results = [
    // Search for winning patterns within the quadrille
    // using quadrille.search
    // ...
  ];
  // Check if any winning patterns are found
  if (results.some(elt => elt.length > 0)) {
    text((turn === '✖️' ? '🟢' : '✖️') + ' wins', 210, 45);
    gameOver = true;
  }
}

p5.quadrille.js API references #

Connect N