kunjgit · ThisIsSahaj · Jun 17, 2024
diff --git a/Games/Connect_4/README.md b/Games/Connect_4/README.md
@@ -0,0 +1,30 @@
+# **Game_Name** 
+
+Connect 4
+
+<br>
+
+## **Description 📃**
+- A strategy board game played by two players who take turns dropping colored discs from the top into a vertically suspended grid.
+
+
+## **functionalities 🎮**
+- Click on a tile to drop a disc
+- Restart button to restart the game when ends
+
+<br>
+
+## **How to play? 🕹️**
+- Each player chooses a color (red goes first) and takes turns.
+- Players alternate turns, dropping one disc of their color into any empty column from the top.
+- The disc drops to the lowest empty spot in that column.
+- The game ends as soon as a player successfully connects four of their discs in a row
+- The connection can be vertical, horizontal, or diagonal.
+- If the entire grid fills up without either player connecting four discs in a row, the game ends in a draw.
+<br>
+
+## **Screenshots 📸**
+
+<br>
+[image](/Games/Connect_4/assets/images/Connect_4.png)
+
diff --git a/Games/Connect_4/assets/images/Connect_4.png b/Games/Connect_4/assets/images/Connect_4.png
diff --git a/Games/Connect_4/index.html b/Games/Connect_4/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <title>Connect 4</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <h1>Connect 4</h1>
+    <h2 id="winner"></h2>
+    <div id="board"></div>
+    <button id="restartBtn" class="button-85" role="button" onclick="restartGame()">Restart Game</button>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Connect_4/script.js b/Games/Connect_4/script.js
@@ -0,0 +1,138 @@
+var playerRed = "R";
+var playerYellow = "Y";
+var currPlayer = playerRed;
+
+var gameOver = false;
+var board;
+
+var rows = 6;
+var columns = 7;
+var currColumns = [];
+
+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() {
+     // horizontal
+     for (let r = 0; r < rows; r++) {
+         for (let c = 0; c < columns - 3; c++){
+            if (board[r][c] != ' ') {
+                if (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;
+                }
+            }
+         }
+    }
+
+    // vertical
+    for (let c = 0; c < columns; c++) {
+        for (let r = 0; r < rows - 3; r++) {
+            if (board[r][c] != ' ') {
+                if (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;
+                }
+            }
+        }
+    }
+
+    // anti diagonal
+    for (let r = 0; r < rows - 3; r++) {
+        for (let c = 0; c < columns - 3; c++) {
+            if (board[r][c] != ' ') {
+                if (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;
+                }
+            }
+        }
+    }
+
+    // diagonal
+    for (let r = 3; r < rows; r++) {
+        for (let c = 0; c < columns - 3; c++) {
+            if (board[r][c] != ' ') {
+                if (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;
+}
+
+function restartGame() {   
+    document.getElementById("board").innerHTML = "";
+
+    currPlayer = playerRed;
+    gameOver = false;
+    board = [];
+    currColumns = [5, 5, 5, 5, 5, 5, 5];
+
+    document.getElementById("winner").innerText = "";
+
+    setGame();
+}
diff --git a/Games/Connect_4/styles.css b/Games/Connect_4/styles.css
@@ -0,0 +1,116 @@
+body {
+    font-family: Arial, Helvetica, sans-serif;
+    text-align: center;
+    background-color: #111;
+    color: white;
+}
+
+
+h1 {
+    background-clip: text;
+    background-image: linear-gradient(to right, #09f1b8, #00a2ff, #ff00d2, #fed90f);
+    color: #000119;
+    font-size: 10vmin;
+    font-weight:700;
+    letter-spacing: calc(1em / 8);
+    padding: calc(calc(1em / 16)/2);
+    -webkit-text-stroke-color: transparent;
+    -webkit-text-stroke-width: calc(1em / 16);;
+  }
+
+#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: #111;
+    border-radius: 50%;
+    border: 5px solid navy;
+}
+
+.red-piece {
+    background-color: red;
+}
+
+.yellow-piece {
+    background-color: yellow;
+}
+
+
+.button-85 {
+    padding: 10px 20px;
+    margin-top: 20px;
+    border: none;
+    outline: none;
+    color: rgb(255, 255, 255);
+    background: #111;
+    cursor: pointer;
+    position: relative;
+    z-index: 0;
+    border-radius: 10px;
+    user-select: none;
+    -webkit-user-select: none;
+    touch-action: manipulation;
+  }
+
+  .button-85:before {
+    content: "";
+    background: linear-gradient(
+      45deg,
+      #ff0000,
+      #ff7300,
+      #fffb00,
+      #48ff00,
+      #00ffd5,
+      #002bff,
+      #7a00ff,
+      #ff00c8,
+      #ff0000
+    );
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    background-size: 400%;
+    z-index: -1;
+    filter: blur(5px);
+    -webkit-filter: blur(5px);
+    width: calc(100% + 4px);
+    height: calc(100% + 4px);
+    animation: glowing-button-85 20s linear infinite;
+    transition: opacity 0.3s ease-in-out;
+    border-radius: 10px;
+  }
+
+  @keyframes glowing-button-85 {
+    0% {
+      background-position: 0 0;
+    }
+    50% {
+      background-position: 400% 0;
+    }
+    100% {
+      background-position: 0 0;
+    }
+  }
+
+  .button-85:after {
+    z-index: -1;
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: #222;
+    left: 0;
+    top: 0;
+    border-radius: 10px;
+  }
diff --git a/README.md b/README.md
@@ -201,7 +201,7 @@ This repository also provides one such platforms where contributers come over an
 | [Ball_Shooting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ball_Shooting_Game) | [CatchTheBall](https://github.com/kunjgit/GameZone/tree/main/Games/CatchTheBall) |
 | [Ball_Shooting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ball_Shooting_Game) | [DoraemonRun ](https://github.com/kunjgit/GameZone/tree/main/Games/DoraemonRun) |
 | [Memory_Cards_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Memory_Cards_Game) |
-| [Typing_Speed_Test2](https://github.com/kunjgit/GameZone/tree/main/Games/Typing_Speed_Test2) | [Tic Tac Toe Responsive ](https://github.com/kunjgit/GameZone/tree/main/Games/Tic_tac_toe_responsive) | [Minesweeper Easy ](https://github.com/kunjgit/GameZone/tree/main/Games/MineSweeper_Easy) | [Pong](https://github.com/kunjgit/GameZone/tree/main/Games/Pong) | 
+| [Typing_Speed_Test2](https://github.com/kunjgit/GameZone/tree/main/Games/Typing_Speed_Test2) | [Tic Tac Toe Responsive ](https://github.com/kunjgit/GameZone/tree/main/Games/Tic_tac_toe_responsive) | [Minesweeper Easy ](https://github.com/kunjgit/GameZone/tree/main/Games/MineSweeper_Easy) | [Pong](https://github.com/kunjgit/GameZone/tree/main/Games/Pong) |  [Connect 4](https://github.com/kunjgit/GameZone/tree/main/Games/Connect_4)
 | [Technical_Mind_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Technical_Mind_Game) |
 [Slide_Master_Puzzle](https://github.com/kunjgit/GameZone/tree/Main/Games/Slide_Master_Puzz)| |
 | [Ball_Shooting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ball_Shooting_Game) | [Letter_Sleuth](https://github.com/swetha5157/GameZone/tree/main/Games/Letter_Sleuth)

diff --git a/assets/images/Connect_4.png b/assets/images/Connect_4.png