Skip to content

Commit

Permalink
Merge pull request #4472 from manikumarreddyu/mani
Browse files Browse the repository at this point in the history
Shoot_Duck_Game
  • Loading branch information
kunjgit authored Jun 15, 2024
2 parents 53028a3 + 0cb1a36 commit 9cdda3c
Show file tree
Hide file tree
Showing 6 changed files with 197 additions and 1 deletion.
4 changes: 4 additions & 0 deletions Games/Shoot_Duck_Game/README.md
Original file line number Diff line number Diff line change
@@ -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
30 changes: 30 additions & 0 deletions Games/Shoot_Duck_Game/main.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shoot the Duck Game</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="game-container">

<div class="box-duck">
<div class="pond"></div>
<div class="duck">
<div class="body-duck"></div>
<div class="head">
<div class="left-eye"></div>
<div class="left-cheek"></div>
<div class="right-eye"></div>
<div class="right-cheek"></div>
<div class="beak"></div>
</div>
</div>
</div>

<p id="score">Score: <span id="scoreValue">0</span></p>
</div>
<script src="script.js"></script>
</body>
</html>
24 changes: 24 additions & 0 deletions Games/Shoot_Duck_Game/script.js
Original file line number Diff line number Diff line change
@@ -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();
136 changes: 136 additions & 0 deletions Games/Shoot_Duck_Game/styles.css
Original file line number Diff line number Diff line change
@@ -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;
}
4 changes: 3 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)|


</center>

<br>
Expand Down
Binary file added assets/images/Shoot_Duck_Game.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 9cdda3c

Please sign in to comment.