diff --git a/Games/Helicopter_Game/Emotion_Helicopter_5x.gif b/Games/Helicopter_Game/Emotion_Helicopter_5x.gif new file mode 100644 index 0000000000..97ef58a4da Binary files /dev/null and b/Games/Helicopter_Game/Emotion_Helicopter_5x.gif differ diff --git a/Games/Helicopter_Game/assets/bgyes.gif b/Games/Helicopter_Game/assets/bgyes.gif new file mode 100644 index 0000000000..ca818d04c9 Binary files /dev/null and b/Games/Helicopter_Game/assets/bgyes.gif differ diff --git a/Games/Helicopter_Game/assets/bkg.jpg b/Games/Helicopter_Game/assets/bkg.jpg new file mode 100644 index 0000000000..bdb8f66dde Binary files /dev/null and b/Games/Helicopter_Game/assets/bkg.jpg differ diff --git a/Games/Helicopter_Game/assets/helicopter-game.png b/Games/Helicopter_Game/assets/helicopter-game.png new file mode 100644 index 0000000000..bf9176674a Binary files /dev/null and b/Games/Helicopter_Game/assets/helicopter-game.png differ diff --git a/Games/Helicopter_Game/assets/helicopter.png b/Games/Helicopter_Game/assets/helicopter.png new file mode 100644 index 0000000000..ea98268e76 Binary files /dev/null and b/Games/Helicopter_Game/assets/helicopter.png differ diff --git a/Games/Helicopter_Game/heli2.gif b/Games/Helicopter_Game/heli2.gif new file mode 100644 index 0000000000..389dca61df Binary files /dev/null and b/Games/Helicopter_Game/heli2.gif differ diff --git a/Games/Helicopter_Game/index.html b/Games/Helicopter_Game/index.html new file mode 100644 index 0000000000..8b486d0da6 --- /dev/null +++ b/Games/Helicopter_Game/index.html @@ -0,0 +1,39 @@ + + + + Helicopter Game + + + + + + +
+
+
+
Score 0
+
Life 3
+ +
+
+

Start New Game

+ +
+ + + + +
+ +
+ + + + + + diff --git a/Games/Helicopter_Game/oil.png b/Games/Helicopter_Game/oil.png new file mode 100644 index 0000000000..3991948d14 Binary files /dev/null and b/Games/Helicopter_Game/oil.png differ diff --git a/Games/Helicopter_Game/readme.md b/Games/Helicopter_Game/readme.md new file mode 100644 index 0000000000..bb0bb7fda7 --- /dev/null +++ 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) \ No newline at end of file diff --git a/Games/Helicopter_Game/script.js b/Games/Helicopter_Game/script.js new file mode 100644 index 0000000000..1ca3f6d682 --- /dev/null +++ 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 (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 new file mode 100644 index 0000000000..bfcf06b23e --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/README.md b/README.md index 42a59684be..7f85183fa7 100644 --- 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)| -
diff --git a/assets/images/helicopter-game.png b/assets/images/helicopter-game.png new file mode 100644 index 0000000000..bf9176674a Binary files /dev/null and b/assets/images/helicopter-game.png differ