-
Notifications
You must be signed in to change notification settings - Fork 841
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #4872 from heli0707/main
Added Four_In_Row
- Loading branch information
Showing
7 changed files
with
823 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
# **Four_In_Row** | ||
|
||
## **Description 📃** | ||
<!-- add your game description here --> | ||
- Four in a Row is a two-player strategy game where players take turns dropping colored discs into a vertical grid. The objective is to connect four of their own discs in a row—either horizontally, vertically, or diagonally—before the opponent does. | ||
|
||
## **Functionalities 🎮** | ||
<!-- add functionalities over here --> | ||
- Two-Player Mode: Designed for two players, either competitively or cooperatively. | ||
- Vertical Grid: Features a vertical grid with slots where discs are dropped. | ||
- Disc Colors: Players use different colored discs to differentiate between their moves. | ||
- Winning Condition: The goal is to connect four discs in a row, either horizontally, vertically, or diagonally. | ||
- Turn-Based Play: Players take turns dropping discs into the grid. | ||
- Game Over Detection: The game ends when a player achieves four in a row or when the grid is full. | ||
<br> | ||
|
||
## **How to play? 🕹️** | ||
<!-- add the steps how to play games --> | ||
- Players take turns dropping colored discs into a vertical grid. | ||
- The objective is to connect four of your discs in a row horizontally, vertically, or diagonally. | ||
- The game ends when a player connects four in a row or the grid is full. | ||
|
||
<br> | ||
|
||
## **Screenshots 📸** | ||
![image](https://github.com/user-attachments/assets/613f20e4-153f-4c1c-ba84-7fb04a95b293) | ||
|
||
![image](https://github.com/user-attachments/assets/08d88616-d097-4f5e-ac36-cd93f3f97ac2) | ||
|
||
<h4 align='center'>Happy Coding 🧑💻</h4> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,313 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Four In Row</title> | ||
|
||
<!-- Google Fonts --> | ||
<link rel="preconnect" href="https://fonts.gstatic.com"> | ||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet"> | ||
|
||
<!-- CSS --> | ||
<link rel="stylesheet" href="style.css"> | ||
|
||
</head> | ||
<body> | ||
|
||
<div id="main-container"> | ||
|
||
<div id="player"> | ||
|
||
<h1 id="player-type">Player - 1</h1> | ||
|
||
</div> | ||
|
||
<div id="grid"> | ||
|
||
<div class="row"> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-1"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-2"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-3"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-4"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-5"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-6"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-7"></button> | ||
|
||
</div> | ||
|
||
</div> | ||
|
||
<div class="row"> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-8"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-9"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-10"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-11"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-12"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-13"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-14"></button> | ||
|
||
</div> | ||
|
||
</div> | ||
|
||
<div class="row"> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-15"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-16"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-17"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-18"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-19"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-20"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-21"></button> | ||
|
||
</div> | ||
|
||
</div> | ||
|
||
<div class="row"> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-22"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-23"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-24"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-25"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-26"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-27"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-28"></button> | ||
|
||
</div> | ||
|
||
</div> | ||
|
||
<div class="row"> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-29"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-30"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-31"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-32"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-33"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-34"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-35"></button> | ||
|
||
</div> | ||
|
||
</div> | ||
|
||
<div class="row"> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-36"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-37"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-38"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-39"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-40"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-41"></button> | ||
|
||
</div> | ||
|
||
<div class="col"> | ||
|
||
<button class="btn btn-42"></button> | ||
|
||
</div> | ||
|
||
</div> | ||
|
||
</div> | ||
|
||
<button type="button" id="reset-btn">Play Again</button> | ||
|
||
</div> | ||
|
||
<script src="script.js"></script> | ||
|
||
</body> | ||
</html> |
Oops, something went wrong.