Merge pull request #2399 from pavitraag/goal_rush

Added Goal rush game
Sulagna-Dutta-Roy · Jul 15, 2024 · 6984cb9 · 6984cb9
2 parents cf62037 + 263e7b3
commit 6984cb9
Show file tree

Hide file tree

Showing 16 changed files with 1,773 additions and 0 deletions.
diff --git a/Goal Rush/Readme.md b/Goal Rush/Readme.md
@@ -0,0 +1,38 @@
+# **Goal Rush** 
+
+---
+
+<br>
+Your Goal!
+
+## **Description 📃**
+A web version of Soccer game implemented using html, css and javascript
+
+
+## **functionalities 🎮**
+There is a pitch just like a soccer Field, players of 2 teams and a soccer ball. 
+
+<br>
+
+## **How to play? 🕹️**
+Each player has a goal at one end of the field that they need to defend.
+The ball, represented by white ball, moves automatically and can bounce off the walls and players.
+The ability to move a player's character horizontally allows them to intercept the ball and try to score goals into the opponent's goal.
+the functionality of keys mentioned on the screen.
+If a player successfully made a goal, they earn a point.
+The game continues for a predetermined duration or until a specific number of goals is reached.
+Players can restart the game by refreshing the page.
+- 
+
+<br>
+
+## **Screenshots 📸**
+
+<br><img src="./img/04.png" alt="Image Description">
+<br>
+<img src="./img/03.png" alt="Image Description">
+<br>
+<img src="./img/01.png" alt="Image Description">
+
+<br>
+<img src="./img/02.png" alt="Image Description">
diff --git a/Goal Rush/css/style.css b/Goal Rush/css/style.css
@@ -0,0 +1,138 @@
+#container {
+    width: 720px;
+    height: 720px;
+    border-style: solid;
+    border-width: 10px;
+    margin: 0 auto;
+    position: relative;
+}
+canvas {
+    background: url("../img/pitch3.png") center;
+    float: left;
+    z-index: 1;
+}
+#startScreen {
+    z-index: 2;
+    width: 720px;
+    height: 720px;
+    background-image: url('../img/splash.png');
+    position: absolute;
+    font-family: verdana;
+    color: white;
+}
+#gameOverScreen {
+    z-index: -1;
+    width: 480px;
+    height: 720px;
+    background-image: url('../img/splash.png');
+    position: absolute;
+    font-family: verdana;
+    color: white;
+}
+#score {
+    background-image: url('../img/background.png');
+    float: right;
+    width: 240px;
+    height: 690px;
+    font-family: verdana;
+    text-align: center;
+    padding-top: 30px;
+    z-index: 1;
+}
+#blue {
+    color: greenyellow;
+}
+#red {
+    color: #E03333;
+}
+#home,
+#away {
+    font-size: 48px;
+    font-weight: bold;
+}
+#timer {
+    padding-bottom: 100px;
+    font-size: 28px;
+    font-weight: bold;
+}
+#credits {
+    padding-top: 100px;
+    font-size: 12px;
+    font-weight: bold;
+    position: fixed;
+    height: 50px;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    margin-bottom: 50px;
+    margin-left: 475px;
+}
+a {
+    text-decoration: none;
+    color: #01BBE4;
+}
+#title {
+    font-size: 50px;
+    font-weight: bold;
+    font-family: verdana;
+    color: white;
+    text-align: center;
+    padding-top: 100px;
+}
+#play {
+    margin-left: 300px;
+    margin-top: 100px;
+    width: auto;
+    margin-bottom: 100px;
+    padding: 20px 35px;
+    background: white;
+    border: 0;
+    font-size: 20px;
+    color: #424242;
+    font-weight: bold;
+    font-family: verdana;
+    border-radius: 4px;
+    margin-bottom: 10px;
+}
+#playagain {
+    margin-left: 140px;
+    margin-top: 100px;
+    width: auto;
+    margin-bottom: 100px;
+    padding: 20px 35px;
+    background: white;
+    border: 0;
+    font-size: 20px;
+    color: #424242;
+    font-weight: bold;
+    font-family: verdana;
+    border-radius: 4px;
+    margin-bottom: 10px;
+}
+#help {
+    padding-left: 285px;
+    opacity: 0.7;
+}
+#instructions {
+    font-size: 12px;
+    padding-left: 250px;
+    text-align: center;
+    opacity: 0.7;
+}
+#right {
+    padding-left: 70px;
+    font-size: 12px;
+    text-align: center;
+    opacity: 0.7;
+}
+#foot {
+    margin-top: 160px;
+    text-align: center;
+    font-size: 10px;
+    opacity: 0.5;
+}
+#status {
+    margin-top: 100px;
+    font-weight: bold;
+    font-size: 20px;
+}
diff --git a/Goal Rush/img/01.png b/Goal Rush/img/01.png
diff --git a/Goal Rush/img/02.png b/Goal Rush/img/02.png
diff --git a/Goal Rush/img/03.png b/Goal Rush/img/03.png
diff --git a/Goal Rush/img/04.png b/Goal Rush/img/04.png
diff --git a/Goal Rush/img/awayPlayer.png b/Goal Rush/img/awayPlayer.png
diff --git a/Goal Rush/img/background.png b/Goal Rush/img/background.png
diff --git a/Goal Rush/img/help.png b/Goal Rush/img/help.png
diff --git a/Goal Rush/img/homePlayer.png b/Goal Rush/img/homePlayer.png
diff --git a/Goal Rush/img/pitch3.png b/Goal Rush/img/pitch3.png
diff --git a/Goal Rush/img/splash.png b/Goal Rush/img/splash.png
diff --git a/Goal Rush/index.html b/Goal Rush/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>Goal Rush Game</title>
+    <script src="js/SAT.js"></script>
+   <link rel="stylesheet" type="text/css" href="css/style.css" />
+   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
+</head>
+<body>
+    <div style="text-align:center;
+    margin-top: 10px;
+    font-size: 30px;
+    padding: 5px; "><a><i style="color:black;" class="fas fa-home home-icon"></i></a></div>
+<div id = "container">
+
+
+    <div id ="startScreen">
+        <div id="title">Goal Rush</div>
+        <button id="play" onclick="init()">PLAY</button>
+        <br><br><br>
+        <img src="img/help.png" height="100" width="150" id="help">
+        <br>
+        <span id ="instructions">(Use left and right arrow keys to play)</span>
+
+    </div>
+
+    <div id ="gameOverScreen">
+        <div id="title">Goal Rush</div>
+        <button id="playagain" onclick="init()">PLAY AGAIN</button>
+        <br><br><br>
+    </div>
+
+
+    <canvas id="myCanvas" width="480" height="720"></canvas>
+    <div id="score">
+        <div id = "timer">
+            Time Left
+            <div id = "countdown">02:00</div>
+        </div>
+        <h3 id = "blue">Juventus </h3>
+        <div id="away">0</div>
+        <h3 id = "red">Me</h3>
+        <div id="home">0</div>
+        <div id = "status"></div>
+
+    </div>
+
+</div>
+</body>
+<script src="js/football.js"></script>
+</html>