Merge pull request #197 from Gaurav0203Shetty/connect

Connect 4
shrey141102 · Jan 4, 2024 · 76d779e · 76d779e
2 parents f27924b + 3ed802f
commit 76d779e
Show file tree

Hide file tree

Showing 6 changed files with 197 additions and 2 deletions.
diff --git a/Connect4/.DS_Store b/Connect4/.DS_Store
diff --git a/Connect4/README.md b/Connect4/README.md
@@ -0,0 +1,33 @@
+Connect 4 Game:
+This is a simple implementation of the Connect 4 game using HTML, CSS, and JavaScript.
+
+How to Play:
+1)Open the index.html file in a web browser.
+2)The game board will be displayed with a grid of circles.
+3)Click on any circle in a column to drop your piece. The piece will fall to the lowest available position in that column.
+4)Players take turns, and the goal is to connect four of their pieces vertically, horizontally, or diagonally before the opponent does.
+
+Game Interface:
+1)The game board is a 7x6 grid.
+2)The circles represent the positions where players can drop their pieces.
+3)Red and yellow pieces alternate turns.
+4)The current player is displayed at the top of the board.
+
+Styling:
+1)The game board has a blue background with navy borders.
+2)White circles represent empty spaces.
+3)Red circles represent player Red's pieces.
+4)Yellow circles represent player Yellow's pieces. 
+
+JavaScript Logic:
+1)The game logic is handled in the script.js file.
+2)Players can click on a tile to place their piece.
+3)The game checks for a winner after each move.
+4)The first player to connect four pieces in a row (horizontally, vertically, or diagonally) wins.
+5)The game ends when there is a winner or the board is full (a draw).
+
+Note:
+This implementation uses basic HTML, CSS, and JavaScript and does not include features like multiplayer, AI opponents, or additional animations.
+Feel free to modify and enhance the game based on your preferences or requirements.
+
+Have fun playing Connect 4!
diff --git a/Connect4/index.html b/Connect4/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=\, initial-scale=1.0">
+    <title>Connect 4</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="script.js"></script>
+</head>
+<body>
+    <h1>Connect 4</h1>
+    <h2 id="winner"></h2>
+    <div id="board"></div>
+</body>
+</html>
diff --git a/Connect4/script.js b/Connect4/script.js
@@ -0,0 +1,111 @@
+var playerRed = "R";
+var playerYellow = "Y";
+var currPlayer = playerRed;
+
+var gameOver = false;
+var board;
+var currColumns;
+
+var rows = 6;
+var columns = 7;
+
+window.onload = function () {
+    setGame();
+};
+
+function setGame() {
+    board = [];
+    currColumns = [5, 5, 5, 5, 5, 5, 5];
+
+    for (let r = 0; r < rows; r++) {
+        let row = [];
+        for (let c = 0; c < columns; c++) {
+            row.push(' ');
+
+            let tile = document.createElement("div");
+            tile.id = r.toString() + "-" + c.toString();
+            tile.classList.add("tile");
+            tile.addEventListener("click", setPiece);
+            document.getElementById("board").append(tile);
+        }
+        board.push(row);
+    }
+}
+
+function setPiece() {
+    if (gameOver) {
+        return;
+    }
+
+    let coords = this.id.split("-");
+    let r = parseInt(coords[0]);
+    let c = parseInt(coords[1]);
+
+    r = currColumns[c];
+    if (r < 0) {
+        return;
+    }
+
+    board[r][c] = currPlayer;
+    let tile = document.getElementById(r.toString() + "-" + c.toString());
+    if (currPlayer == playerRed) {
+        tile.classList.add("red-piece");
+        currPlayer = playerYellow;
+    } 
+    else {
+        tile.classList.add("yellow-piece");
+        currPlayer = playerRed;
+    }
+
+    r -= 1;
+    currColumns[c] = r;
+
+    checkWinner();
+}
+
+function checkWinner() {
+    for (let r = 0; r < rows; r++) {
+        for (let c = 0; c < columns - 3; c++) {
+            if (board[r][c] != ' ' && board[r][c] == board[r][c + 1] && board[r][c + 1] == board[r][c + 2] && board[r][c + 2] == board[r][c + 3]) {
+                setWinner(r, c);
+                return;
+            }
+        }
+    }
+    for (let c = 0; c < columns; c++) {
+        for (let r = 0; r < rows - 3; r++) {
+            if (board[r][c] != ' ' && board[r][c] == board[r + 1][c] && board[r + 1][c] == board[r + 2][c] && board[r + 2][c] == board[r + 3][c]) {
+                setWinner(r, c);
+                return;
+            }
+        }
+    }
+    for (let r = 0; r < rows - 3; r++) {
+        for (let c = 0; c < columns - 3; c++) {
+            if (board[r][c] != ' ' && board[r][c] == board[r + 1][c + 1] && board[r + 1][c + 1] == board[r + 2][c + 2] && board[r + 2][c + 2] == board[r + 3][c + 3]) {
+                setWinner(r, c);
+                return;
+            }
+        }
+    }
+    for (let r = 3; r < rows; r++) {
+        for (let c = 0; c < columns - 3; c++) {
+            if (board[r][c] != ' ' && board[r][c] == board[r - 1][c + 1] && board[r - 1][c + 1] == board[r - 2][c + 2] && board[r - 2][c + 2] == board[r - 3][c + 3]) {
+                setWinner(r, c);
+                return;
+            }
+        }
+    }
+}
+
+function setWinner(r, c) {
+    let winner = document.getElementById("winner");
+    if (board[r][c] == playerRed) {
+        winner.innerText = "Red Wins";
+    } 
+    else {
+        winner.innerText = "Yellow Wins";
+    }
+
+    gameOver = true;
+}
diff --git a/Connect4/style.css b/Connect4/style.css
@@ -0,0 +1,32 @@
+body{
+    font-family: Arial, Helvetica, sans-serif;
+    text-align: center;
+}
+
+#board{
+    height: 540px;
+    width: 630px;
+    background-color: blue;
+    border: 10px solid navy;
+    margin: 0 auto;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.tile{
+    height: 70px;
+    width: 70px;
+    margin: 5px;
+
+    background-color: white;
+    border-radius: 50%;
+    border: 5px solid navy;
+}
+
+.red-piece{
+    background-color: red;
+}
+
+.yellow-piece{
+    background-color: yellow;
+}