diff --git a/Games/Shoot_Duck_Game/README.md b/Games/Shoot_Duck_Game/README.md new file mode 100644 index 0000000000..1bef137733 --- /dev/null +++ b/Games/Shoot_Duck_Game/README.md @@ -0,0 +1,4 @@ +# Shoot_Duck_Game + +All you need to do is shoot the duck +Game points will be awarded on the basis of duck shot diff --git a/Games/Shoot_Duck_Game/main.html b/Games/Shoot_Duck_Game/main.html new file mode 100644 index 0000000000..6ddbd7f7b6 --- /dev/null +++ b/Games/Shoot_Duck_Game/main.html @@ -0,0 +1,30 @@ + + + + + + Shoot the Duck Game + + + +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ +

Score: 0

+
+ + + \ No newline at end of file diff --git a/Games/Shoot_Duck_Game/script.js b/Games/Shoot_Duck_Game/script.js new file mode 100644 index 0000000000..614314198e --- /dev/null +++ b/Games/Shoot_Duck_Game/script.js @@ -0,0 +1,24 @@ +const duck = document.querySelector('.box-duck'); +const scoreValue = document.getElementById('scoreValue'); +const score = document.getElementById('score'); + +let currentScore = 0; + +duck.addEventListener('click', () => { + currentScore++; + scoreValue.textContent = currentScore; + moveDuckRandomly(); +}); + +function moveDuckRandomly() { + const maxWidth = window.innerWidth - duck.clientWidth; + const maxHeight = window.innerHeight - duck.clientHeight; + + const randomX = Math.random() * maxWidth; + const randomY = Math.random() * maxHeight; + + duck.style.left = randomX + 'px'; + duck.style.top = randomY + 'px'; +} + +moveDuckRandomly(); \ No newline at end of file diff --git a/Games/Shoot_Duck_Game/styles.css b/Games/Shoot_Duck_Game/styles.css new file mode 100644 index 0000000000..2851035b2d --- /dev/null +++ b/Games/Shoot_Duck_Game/styles.css @@ -0,0 +1,136 @@ +/* Basic styling, layout, and animations go here */ +body { + font-family: Arial, sans-serif; + text-align: center; + background-color: #f5f5f5; + margin: 0; + padding: 0; +} + +.game-container { + position: relative; + width: 400px; + height: 400px; + margin: 50px auto; +} + +.duck { + z-index: 0; + display: block; + position: absolute; + height: 200px; + width: 200px; + top: 30%; + left: 20%; + animation-name: horizontal-move; + animation-duration: 2s; + animation-iteration-count: infinite; + animation-timing-function: ease-in; + background-size: cover; + position: absolute; + cursor: pointer; +} +.box-duck { + position: relative; + display: block; + width: 500px; + height: 500px; + background: #f5f5f5; + margin: 0 auto; + } + .beak { + position: absolute; + top: 44%; + left: 47%; + background: #FFA500; + border-radius: 50%; + width: 37px; + height: 20%; + } + .body-duck { + position: absolute; + top: 45%; + left: 15%; + background: #caa444; + border-radius: 50%; + width: 150px; + height: 39%; + } + .greetings { + position: absolute; + display: block; + width: 100%; + bottom: 0; + text-align: center; + } + .head { + position: absolute; + top: 29%; + left: 36%; + background: #af8c32; + border-radius: 50%; + width: 90px; + height: 30%; + } + .left-cheek { + position: absolute; + top: 41%; + left: 19%; + background: #FFA07A; + border-radius: 50%; + width: 16px; + height: 10px; + } + .left-eye { + position: absolute; + top: 27%; + left: 35%; + background: #000; + border-radius: 50%; + width: 10px; + height: 10px; + animation-name: blink; + animation-duration: 1.5s; + animation-iteration-count: infinite; + animation-timing-function: step-end; + } + .pond { + position: absolute; + top: 50%; + left: 5%; + background: #9ff6ff; + border-radius: 50%; + width: 325px; + height: 20%; + animation-name: rgb(5, 5, 170); + animation-duration: 3s; + animation-iteration-count: infinite; + } + .right-cheek { + position: absolute; + top: 41%; + left: 90%; + background: #FFA07A; + border-radius: 50%; + width: 13px; + height: 10px; + } + .right-eye { + position: absolute; + top: 27%; + left: 80%; + background: #000; + border-radius: 50%; + width: 10px; + height: 10px; + animation-name: blink; + animation-duration: 1.5s; + animation-iteration-count: infinite; + animation-timing-function: step-end; + } + +#score { + z-index: 1; + font-size: 24px; + margin-top: 20px; +} \ No newline at end of file diff --git a/README.md b/README.md index 1cbb3e29c1..d9ffb4c2c4 100644 --- a/README.md +++ b/README.md @@ -356,13 +356,15 @@ This repository also provides one such platforms where contributers come over an | [Memory_Matching_Game](https://github.com/Saipradyumnagoud/GameZone/tree/main/Games/Memory_Matching_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) | +| [Shoot_Duck_Game] (https://github.com/kunjgit/GameZone/tree/main/Games/Shoot_Duck_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)| | [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/Shoot_Duck_Game.png b/assets/images/Shoot_Duck_Game.png new file mode 100644 index 0000000000..ab3e504209 Binary files /dev/null and b/assets/images/Shoot_Duck_Game.png differ