Merge pull request #185 from samriddhitiwary/feature/ConnectFour

Connect Four game
vansh-codes · Oct 28, 2024 · 3a54c25 · 3a54c25
2 parents 49e6e54 + c73f7cb
commit 3a54c25
Show file tree

Hide file tree

Showing 2 changed files with 242 additions and 0 deletions.
diff --git a/ConnectFour.html b/ConnectFour.html
@@ -0,0 +1,228 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Connect Four</title>
+<style>
+  /* General Styling */
+  body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-family: 'Roboto', sans-serif;
+    background-color: #222;
+    color: white;
+    margin: 0;
+    padding: 0;
+  }
+
+  /* Connect Four Layout */
+  .connect-four {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 50px;
+  }
+
+  /* Neon Board Styling */
+  .board {
+    display: flex;
+    flex-direction: column;
+    background-color: #003366;
+    padding: 20px;
+    border-radius: 15px;
+    border: 5px solid #00FFFF;
+    box-shadow: 0 0 20px #00FFFF;
+    animation: neonPulse 1.5s infinite alternate;
+  }
+
+  @keyframes neonPulse {
+    from { box-shadow: 0 0 10px #00FFFF, 0 0 20px #00FFFF; }
+    to { box-shadow: 0 0 20px #00FFFF, 0 0 40px #00FFFF; }
+  }
+
+  /* Row and Cell Styling */
+  .row {
+    display: flex;
+  }
+
+  .cell {
+    width: 80px;
+    height: 80px;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 2px;
+    cursor: pointer;
+  }
+
+  /* Hole Styling */
+  .hole {
+    width: 70px;
+    height: 70px;
+    background-color: #004080;
+    border-radius: 50%;
+    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6);
+    transition: transform 0.2s ease;
+  }
+
+  .hole:hover {
+    transform: scale(1.1);
+  }
+
+  /* Piece Colors */
+  .piece {
+    width: 70px;
+    height: 70px;
+    border-radius: 50%;
+    position: absolute;
+  }
+
+  .R { background: radial-gradient(circle at 30% 30%, #f48282, #cc0000, #330d0d); }
+  .Y { background: radial-gradient(circle at 30% 30%, #ffff99, #cccc00, #5b5b03); }
+
+  /* Title Styling */
+  .neon-title {
+    font-size: 3rem;
+    color: #8800ff;
+    text-align: center;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 5px;
+    margin-bottom: 20px;
+  }
+
+  /* Button Styling */
+  button {
+    margin-top: 20px;
+    padding: 12px 25px;
+    font-size: 18px;
+    background-color: #004080;
+    color: white;
+    border: none;
+    border-radius: 12px;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+  }
+
+  button:hover {
+    background-color: #0059b3;
+    transform: scale(1.05);
+  }
+</style>
+</head>
+<body>
+
+<div class="connect-four">
+  <h1 class="neon-title">CONNECT FOUR</h1>
+  <div id="board" class="board"></div>
+  <button onclick="restartGame()">Restart Game</button>
+  <div id="status" class="status"></div>
+</div>
+
+<script>
+  const ROWS = 6;
+  const COLS = 7;
+  let currentPlayer = 'R'; // Red starts
+  let board = Array(ROWS).fill().map(() => Array(COLS).fill(null));
+
+  // Create board layout
+  const boardElement = document.getElementById("board");
+
+  function createBoard() {
+    boardElement.innerHTML = '';
+    for (let row = 0; row < ROWS; row++) {
+      const rowElement = document.createElement('div');
+      rowElement.classList.add('row');
+      for (let col = 0; col < COLS; col++) {
+        const cellElement = document.createElement('div');
+        cellElement.classList.add('cell');
+        cellElement.addEventListener('click', () => handleClick(col));
+        const holeElement = document.createElement('div');
+        holeElement.classList.add('hole');
+        cellElement.appendChild(holeElement);
+        rowElement.appendChild(cellElement);
+      }
+      boardElement.appendChild(rowElement);
+    }
+  }
+
+  // Handle player click to place piece
+  function handleClick(col) {
+    for (let row = ROWS - 1; row >= 0; row--) {
+      if (!board[row][col]) {
+        board[row][col] = currentPlayer;
+        updateBoard();
+        if (checkWin(row, col)) {
+          document.getElementById('status').textContent = `${currentPlayer} wins!`;
+        } else {
+          switchPlayer();
+        }
+        return;
+      }
+    }
+  }
+
+  // Update the board UI
+  function updateBoard() {
+    for (let row = 0; row < ROWS; row++) {
+      for (let col = 0; col < COLS; col++) {
+        if (board[row][col]) {
+          const cell = boardElement.children[row].children[col];
+          const piece = document.createElement('div');
+          piece.classList.add('piece', board[row][col]);
+          cell.appendChild(piece);
+        }
+      }
+    }
+  }
+
+  // Switch current player
+  function switchPlayer() {
+    currentPlayer = currentPlayer === 'R' ? 'Y' : 'R';
+  }
+
+  // Check for win condition
+  function checkWin(row, col) {
+    const directions = [
+      { r: 1, c: 0 }, { r: 0, c: 1 }, { r: 1, c: 1 }, { r: 1, c: -1 }
+    ];
+    for (let {r, c} of directions) {
+      let count = 1;
+      count += countPieces(row, col, r, c);
+      count += countPieces(row, col, -r, -c);
+      if (count >= 4) return true;
+    }
+    return false;
+  }
+
+  // Count pieces in a direction
+  function countPieces(row, col, r, c) {
+    let count = 0;
+    let color = board[row][col];
+    let i = row + r;
+    let j = col + c;
+    while (i >= 0 && i < ROWS && j >= 0 && j < COLS && board[i][j] === color) {
+      count++;
+      i += r;
+      j += c;
+    }
+    return count;
+  }
+
+  // Restart the game
+  function restartGame() {
+    board = Array(ROWS).fill().map(() => Array(COLS).fill(null));
+    currentPlayer = 'R';
+    document.getElementById('status').textContent = '';
+    createBoard();
+  }
+
+  // Initialize the game
+  createBoard();
+</script>
+
+</body>
+</html>