Merge pull request #4460 from sau-mili/main

[New Game]: Helicopter_Game
kunjgit · Jun 15, 2024 · cdbf385 · cdbf385
2 parents 2926f32 + 080a6ed
commit cdbf385
Show file tree

Hide file tree

Showing 13 changed files with 313 additions and 1 deletion.
diff --git a/Games/Helicopter_Game/Emotion_Helicopter_5x.gif b/Games/Helicopter_Game/Emotion_Helicopter_5x.gif
diff --git a/Games/Helicopter_Game/assets/bgyes.gif b/Games/Helicopter_Game/assets/bgyes.gif
diff --git a/Games/Helicopter_Game/assets/bkg.jpg b/Games/Helicopter_Game/assets/bkg.jpg
diff --git a/Games/Helicopter_Game/assets/helicopter-game.png b/Games/Helicopter_Game/assets/helicopter-game.png
diff --git a/Games/Helicopter_Game/assets/helicopter.png b/Games/Helicopter_Game/assets/helicopter.png
diff --git a/Games/Helicopter_Game/heli2.gif b/Games/Helicopter_Game/heli2.gif
diff --git a/Games/Helicopter_Game/index.html b/Games/Helicopter_Game/index.html
@@ -0,0 +1,39 @@
+<html>
+
+<head>
+    <title>Helicopter Game</title>
+    <link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
+    <link type="text/css" href="styles.css" rel="stylesheet" media="screen"></link>
+</head>
+
+<body>
+
+	<div id="maincontent">
+		<div id="canvaswrap">
+			<div id="scoreboard">
+				<div>Score <span id="collisions">0</span></div>
+				<div>Life <span id="crashes">3</span></div>
+				<button class="btn" onclick="end()">Stop game</button>
+			</div>
+			<div id="user_action">
+				<h1 id="message">Start New Game</h1>
+				<button class="btn" onclick="startGame()">Start Game</button>
+			</div>
+
+			<canvas id="myFishingGame" width="800" height="450"></canvas>
+            <div id="gameOverModal" class="modal">
+                <div class="modal-content">
+                  <span class="close">&times;</span>
+                  <p id="finalScore"></p>
+                </div>
+              </div>
+
+        </div>
+
+	</div>
+      <script type="text/javascript" src="script.js"></script>
+
+
+</body>
+
+</html>
diff --git a/Games/Helicopter_Game/oil.png b/Games/Helicopter_Game/oil.png
diff --git a/Games/Helicopter_Game/readme.md b/Games/Helicopter_Game/readme.md
@@ -0,0 +1,31 @@
+# Helicopter Game
+
+## Description
+ This game can be played by single player. It is an interactive game which is made with HTML, CSS, Javascript. This is inspired by both helicopter game, and shooting games.
+
+## Features
+- Game Canvas consists of simple background
+- A yellow helicopter is the one the player needs to sav efrom crash
+- Red helicopters are the ones the player helicopter crashes with
+- Collect fuels to increase score. One fuel is equivalent to one point.
+
+## How to play
+
+- Open the game in browser
+- Click on start game
+- Use arrow keys to navigate the plane
+- On top-left corner, you can see the number of lives left and present score.
+- Once all lives end, a popup shows your score.
+- You can click the stop button to stop the game in the middle.
+
+## Files
+
+- [HTML FILE]('index.html')
+- [CSS FILE]('styles.css')
+- [GIFS and Images]('assets')
+
+## Screenshots
+
+![image](assets/helicopter.png)
+
+![image](assets/helicopter-game.png)
diff --git a/Games/Helicopter_Game/script.js b/Games/Helicopter_Game/script.js
@@ -0,0 +1,141 @@
+var myHero;
+var fish;
+var fishes = [];
+var fishCount = 8;
+var collisions = 0;
+var crashes = 3;
+var missiles = [];
+var missilesCount = 4;
+var myGameArea = {
+    canvas: document.getElementById("myFishingGame"),
+    start: function() {
+        this.context = this.canvas.getContext("2d");
+        this.interval = setInterval(updateGameArea, 50)
+    },
+    clear: function() {
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    },
+    stop: function() {
+        clearInterval(this.interval);
+    }
+
+}
+
+function startGame() {
+    crashes=3;
+    document.getElementById("crashes").innerHTML = crashes;
+    collisions=0;
+    document.getElementById("collisions").innerHTML = collisions;
+    myGameArea.start();
+
+    myHero = new Component(80, 60, "Emotion_Helicopter_5x.gif", 600, 120, 10, "image");
+    for (var i = 0; i < fishCount; i++) {
+        var myRandomNo = Math.floor(Math.random() * 450)
+        var RandomSpeed = Math.floor(Math.random() * 4 + 1)
+        fishes.push(new Component(20, 30, "oil.png", 0, myRandomNo, RandomSpeed, "image"));
+    }
+    missiles=[];
+    document.getElementById("user_action").style.display="none";
+    for (var i = 0; i < missilesCount; i++){
+        missiles.push(new Component(60, 40, "heli2.gif", 0, Math.floor(Math.random() * 450), Math.floor(Math.random() * 4 + 1), "image"));
+    }
+}
+
+function updateGameArea() {
+    myGameArea.clear();
+    if(crashes<1){
+       end();
+       return;
+    }
+    //try writing for loops in this way
+    for(let el of missiles){
+        el.x += el.speed
+        if (el.x >= 800) {
+            el.x = 0
+            el.y = Math.floor(Math.random() * 300)
+        }
+
+       if (el.x >= myHero.x && el.x <= myHero.x + myHero.width && el.y >= myHero.y && el.y <= myHero.y + myHero.height) {
+            el.x = 0
+            el.y = Math.floor(Math.random() * 300)
+            crashes--
+            console.log('crashes')
+            document.getElementById("crashes").innerHTML = crashes;
+        }
+        el.update()
+    }
+    for (var i = 0; i < fishCount; i++) {
+        fishes[i].x += fishes[i].speed;
+        if (fishes[i].x >= 800) {
+            fishes[i].x = 0;
+            fishes[i].y = Math.floor(Math.random() * 200)
+        };
+        if (fishes[i].x >= myHero.x && fishes[i].x <= myHero.x + myHero.width && fishes[i].y >= myHero.y && fishes[i].y <= myHero.y + myHero.height) {
+            fishes[i].x = 0;
+            collisions++;
+            fishes[i].y = Math.floor(Math.random() * 200)
+            document.getElementById("collisions").innerHTML = collisions;
+        }
+        fishes[i].update();
+    }
+    myHero.update();
+}
+
+function Component(width, height, src, x, y, speed, type) {
+    this.width = width;
+    this.height = height;
+    this.x = x;
+    this.y = y;
+    this.image = new Image();
+    this.image.src = src;
+    this.speed = speed;
+    this.update = function() {
+        var ctx = myGameArea.context;
+        ctx.drawImage(this.image,
+            this.x,
+            this.y,
+            this.width, this.height);
+    };
+
+}
+
+window.onkeydown = function(e) {
+    var keyCode = e.which;
+    if (keyCode == 38)
+        myHero.y = myHero.y - 10;
+    else if (keyCode == 40)
+        myHero.y = myHero.y + 10;
+    else if (keyCode == 37)
+        myHero.x = myHero.x - 10;
+    else if (keyCode == 39)
+        myHero.x = myHero.x + 10;
+}
+function end() {
+    myGameArea.stop();
+    myGameArea.clear();
+
+    document.getElementById("user_action").style.display = "block";
+    document.getElementById("message").innerHTML = "Game Over!";
+
+    // Display final score in the modal
+    var finalScore = "Final Score: " + collisions + " Crashes left = " + crashes;
+    document.getElementById("finalScore").innerHTML = finalScore;
+
+    // Show the modal
+    var modal = document.getElementById("gameOverModal");
+    var span = document.getElementsByClassName("close")[0];
+    modal.style.display = "block";
+
+    // Close the modal when the user clicks on <span> (x)
+    span.onclick = function() {
+        modal.style.display = "none";
+    }
+
+    // Close the modal when the user clicks anywhere outside of the modal
+    window.onclick = function(event) {
+        if (event.target == modal) {
+            modal.style.display = "none";
+        }
+    }
+}
+
diff --git a/Games/Helicopter_Game/styles.css b/Games/Helicopter_Game/styles.css
@@ -0,0 +1,101 @@
+body {
+   /* background-color: white; */
+   background: url(assets/bkg.jpg);
+   background-size: cover;
+   background-repeat: no-repeat;
+    font-family: 'Acme', sans-serif;
+    font-size: 20px;
+    color: white;
+    text-shadow: 0 0 4px #180369;
+    align-items: center;
+}
+#myFishingGame {
+    border: 1px solid #d3d3d3;
+    background-image: url(assets/bgyes.gif);
+}
+#maincontent{
+    width:auto;
+    margin:100px, auto;
+    padding:10px;
+    margin-left: 25%;
+    margin-top: 8%;
+}
+
+
+.btn {
+    padding: 10px;
+    background-color: #fafa61;
+    border-radius: 5px;
+    font-family: 'Acme', sans-serif;
+    cursor: pointer;
+    transition: all 0.2s;
+    border: 1px solid #cf0000; 
+}
+.btn:hover{
+    background-color: rgb(0, 116, 249);
+    color:aliceblue;
+    scale: 1.1;
+    border: 1px solid #fafa61; 
+}
+
+
+#canvaswrap{
+    display:grid;
+    grid-auto-flow: row;
+}
+
+#scoreboard{
+    position:absolute;
+    padding: 10px;
+    margin: 20px;
+    background-color: rgba(51, 51, 51, 0.22);
+    border-radius: 2px !important;
+    border: 1px solid #d3d3d3; 
+
+}
+#user_action{
+    position:absolute;
+    margin: 150px;
+}
+
+/* Modal styles */
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    /* margin: 15% 10%;  */
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    text-decoration: none!important;
+    text-shadow: none;
+    /* background-color: rgba(0, 0, 0, 0.4); */
+}
+
+.modal-content {
+    border-radius: 5px;
+    background-color: rgba(255, 255, 255, 0.996);
+    margin: 15% 25%; /* Center vertically */
+    margin-right:none;
+    padding: 10px;
+    border: 1px solid #c10300;
+    width: 50%;
+    text-align: center;
+    color: rgb(51, 0, 0);
+}
+
+.close {
+    color: #c20101;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: rgb(32, 0, 0);
+    text-decoration: none;
+    cursor: pointer;
+}
diff --git a/README.md b/README.md
@@ -362,12 +362,12 @@ This repository also provides one such platforms where contributers come over an
 | [Modulo_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Modulo_Game) |
 |[Penguins Can't Fly](https://github.com/Will2Jacks/GameZoneForked/tree/Task/Games/Penguins_Can't_Fly)|
 | [Block_Ninja] (https://github.com/kunjgit/GameZone/tree/main/Games/Block_Ninja) | 
+| [Helicopter_Game](https://github.com/kinjgit/GameZone/tree/main/Games/Helicopter_Game) |
 | [Bouncing Ball Game](https://github.com/kunjgit/GameZone/tree/main/Games/Bouncing_Ball_Game) |
 | [Disney_Trivia](https://github.com/manmita/GameZone/tree/Disney_Trivia/Games/Disney_Trivia)|
 |[Harmony_Mixer](https://github.com/kunjgit/GameZone/tree/main/Games/Harmony_Mixer)|
 |[Tower Defence Game](https://github.com/Will2Jacks/GameZoneForked/tree/Task/Games/Tower_Defence_Game)|
 
-
  </center>
 
 <br>

diff --git a/assets/images/helicopter-game.png b/assets/images/helicopter-game.png