Merge pull request #4286 from bhumika-1127/soccer

soccer game added
kunjgit · Jun 10, 2024 · 0d81e56 · 0d81e56
2 parents a0e3005 + aaaf1df
commit 0d81e56
Show file tree

Hide file tree

Showing 8 changed files with 586 additions and 5 deletions.
diff --git a/Games/Soccer/README.md b/Games/Soccer/README.md
@@ -0,0 +1,38 @@
+# **Soccer** 
+
+
+## **Description 📃**
+It is a two player soccer game where the player with maximum number of goals is declared the winner.
+
+
+<br>
+
+## **Functionalities 🎮**
+
+Player must use the arrow keys and the a/s/d/w keys to move your player and aim a goal. The player with higher number of goals in the set time limit is declared as the winner. Enjoy a strategic and fun-filled challenge with dynamic movement of the players!
+
+<br>
+
+## **How to play? 🕹️**
+
+1. Start the game on your preferred platform.
+2. Click on the start button to start the game.
+3. Each player's goal is to aim a goal. Player with maximum goal is the winner.
+4. Click on play again to play again.
+
+<br>
+
+## **Installation**
+1. Clone or download the repository.
+2. Navigate to the downloaded repository. 
+3. Open index.html with live server.
+
+
+
+
+<br>
+
+## **Screenshots 📸**
+
+<br>
+<img src="assets\images\Soccer.png" alt="Game Screenshot">
diff --git a/Games/Soccer/index.html b/Games/Soccer/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Soccer Penalty Shootout</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+    <div class="game-container">
+        <div id="instructions">
+            <h2>Instructions</h2>
+            <p>Player 1 uses keys W/A/S/D to move</p>
+            <p>Player 2 uses Arrow keys to move</p>
+            <p>The player with the most goals in 3 minutes wins!</p>
+            <button id="startButton">Start Game</button>
+        </div>
+        <canvas id="canvas" width="700" height="500" style="display:none;"></canvas>
+        <div id="out" style="display:none;"></div>
+        <div id="timer" style="display:none;">Time Left: 3:00</div>
+    </div>
+    <script type="text/javascript" src="script.js"></script>    
+</body>
+</html>