Skip to content

Commit

Permalink
Merge pull request #4872 from heli0707/main
Browse files Browse the repository at this point in the history
Added Four_In_Row
  • Loading branch information
kunjgit authored Jul 24, 2024
2 parents 8530eb4 + 41f09dd commit fa7587c
Show file tree
Hide file tree
Showing 7 changed files with 823 additions and 25 deletions.
30 changes: 30 additions & 0 deletions Games/Four_In_Row/README.md
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>
313 changes: 313 additions & 0 deletions Games/Four_In_Row/index.html
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>
Loading

0 comments on commit fa7587c

Please sign in to comment.