diff --git a/Games/Connect_4/README.md b/Games/Connect_4/README.md new file mode 100644 index 0000000000..d4c1716d93 --- /dev/null +++ b/Games/Connect_4/README.md @@ -0,0 +1,30 @@ +# **Game_Name** + +Connect 4 + +
+ +## **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 + +
+ +## **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. +
+ +## **Screenshots 📸** + +
+[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 new file mode 100644 index 0000000000..ee4e1ae8dc Binary files /dev/null and b/Games/Connect_4/assets/images/Connect_4.png differ diff --git a/Games/Connect_4/index.html b/Games/Connect_4/index.html new file mode 100644 index 0000000000..bde3aa1af6 --- /dev/null +++ b/Games/Connect_4/index.html @@ -0,0 +1,17 @@ + + + + + + + Connect 4 + + + +

Connect 4

+

+
+ + + + \ No newline at end of file diff --git a/Games/Connect_4/script.js b/Games/Connect_4/script.js new file mode 100644 index 0000000000..5242fdd34b --- /dev/null +++ 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 new file mode 100644 index 0000000000..55c71f04ef --- /dev/null +++ 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; + } \ No newline at end of file diff --git a/README.md b/README.md index 7cc9462cc1..54160c1935 100644 --- 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 new file mode 100644 index 0000000000..ee4e1ae8dc Binary files /dev/null and b/assets/images/Connect_4.png differ