kunjgit · VaibhavS0710 · May 12, 2024 · May 13, 2024 · May 13, 2024 · May 17, 2024
diff --git a/Dragon_Game/assets/Dragon_Game.png b/Dragon_Game/assets/Dragon_Game.png
diff --git a/Dragon_Game/assets/Dragon_GameOver.mp3 b/Dragon_Game/assets/Dragon_GameOver.mp3
diff --git a/Dragon_Game/assets/Dragon_Gamebg.png b/Dragon_Game/assets/Dragon_Gamebg.png
diff --git a/Dragon_Game/assets/Dragon_Gamee.png b/Dragon_Game/assets/Dragon_Gamee.png
diff --git a/Dragon_Game/assets/Dragon_Gamemusic.mp3 b/Dragon_Game/assets/Dragon_Gamemusic.mp3
diff --git a/Dragon_Game/assets/Dragon_Gameopp.png b/Dragon_Game/assets/Dragon_Gameopp.png
diff --git a/Dragon_Game/index.html b/Dragon_Game/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dragon_Game</title>
+    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+    <script src="script.js"></script>
+</head>
+<body>
+    <div class="gameContainer">
+        <div class="gameOver">Welcome to Dragon Adventures</div>
+        <!-- <div class="gameOver">Welcome to iDragon - Created by Harry</div> -->
+        <div class="dino"></div>
+        <div id="scoreCont">Your Score: 0</div>
+        <div class="obstacle obstacleAni"></div>
+    </div>
+</body>
+</html>
diff --git a/Dragon_Game/script.js b/Dragon_Game/script.js
@@ -0,0 +1,73 @@
+score = 0;
+cross = true;
+
+audio = new Audio('Dragon_Gamemusic.mp3');
+audiogo = new Audio('Dragon_GameOver.mp3');
+setTimeout(() => {
+    audio.play()
+}, 1000);
+document.onkeydown = function (e) {
+    console.log("Key code is: ", e.keyCode)
+    if (e.keyCode == 38) {
+        dino = document.querySelector('.dino');
+        dino.classList.add('animateDino');
+        setTimeout(() => {
+            dino.classList.remove('animateDino')
+        }, 700);
+    }
+    if (e.keyCode == 39) {
+        dino = document.querySelector('.dino');
+        dinoX = parseInt(window.getComputedStyle(dino, null).getPropertyValue('left'));
+        dino.style.left = dinoX + 112 + "px";
+    }
+    if (e.keyCode == 37) {
+        dino = document.querySelector('.dino');
+        dinoX = parseInt(window.getComputedStyle(dino, null).getPropertyValue('left'));
+        dino.style.left = (dinoX - 112) + "px";
+    }
+}
+
+setInterval(() => {
+    dino = document.querySelector('.dino');
+    gameOver = document.querySelector('.gameOver');
+    obstacle = document.querySelector('.obstacle');
+
+    dx = parseInt(window.getComputedStyle(dino, null).getPropertyValue('left'));
+    dy = parseInt(window.getComputedStyle(dino, null).getPropertyValue('top'));
+
+    ox = parseInt(window.getComputedStyle(obstacle, null).getPropertyValue('left'));
+    oy = parseInt(window.getComputedStyle(obstacle, null).getPropertyValue('top'));
+
+    offsetX = Math.abs(dx - ox);
+    offsetY = Math.abs(dy - oy);
+
+    if (offsetX < 73 && offsetY < 52) {
+        gameOver.innerHTML = "Game Over - Reload to Play Again"
+        obstacle.classList.remove('obstacleAni')
+        audiogo.play();
+        setTimeout(() => {
+            audiogo.pause();
+            audio.pause();
+        }, 1000);
+    }
+    else if (offsetX < 145 && cross) {
+        score += 1;
+        updateScore(score);
+        cross = false;
+        setTimeout(() => {
+            cross = true;
+        }, 1000);
+        setTimeout(() => {
+            aniDur = parseFloat(window.getComputedStyle(obstacle, null).getPropertyValue('animation-duration'));
+            newDur = aniDur - 0.1;
+            obstacle.style.animationDuration = newDur + 's';
+            console.log('New animation duration: ', newDur)
+        }, 500);
+
+    }
+
+}, 10);
+
+function updateScore(score) {
+    scoreCont.innerHTML = "Your Score: " + score
+}
diff --git a/Dragon_Game/style.css b/Dragon_Game/style.css
@@ -0,0 +1,86 @@
+*{
+    margin: 0;
+    padding:0;
+}
+body{
+    background-color: red;
+    overflow: hidden;
+}
+.gameContainer{
+    background-image: url(Dragon_Gamebg.png);
+    background-repeat: no-repeat;
+    background-size: 100vw 100vh;
+    width: 100%;
+    height: 100vh;
+}
+
+.dino{
+    background-image: url(Dragon_Game.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+    width: 233px;
+    height: 114px;
+    position: absolute;
+    bottom:0;
+    left: 52px;
+}
+
+.obstacle{
+    width: 166px;
+    height: 113px;
+    background-image: url(Dragon_Gameopp.png);
+    background-size: cover;
+    position: absolute;
+    bottom: 0;
+    left: 44vw;
+}
+
+.animateDino{
+    animation: dino 0.6s linear;
+}
+
+.obstacleAni{
+    animation: obstacleAni 5s linear infinite;
+}
+
+.gameOver{
+    position: relative;
+    top:63px;
+    font-size: 53px;
+    text-align: center; 
+    font-family: 'Ubuntu', sans-serif;
+}
+
+#scoreCont{
+    font-size: 25px;
+    color: #54212f;
+    font-weight: bold;
+    position: absolute;
+    right: 45px;
+    top: 31px;
+    border: 2px solid black;
+    padding: 10px;
+    font-family: 'Ubuntu', sans-serif;
+    border-radius: 10px;
+}
+
+@keyframes dino{
+    0%{
+        bottom: 0;
+    }
+    50%{
+        bottom: 422px;
+    }
+    100%{
+        bottom: 0; 
+    }
+}
+
+@keyframes obstacleAni{
+    0%{
+        left: 100vw;
+    }
+    100%{
+        left: -10vw;
+    }
+}
diff --git a/Games/FOLDER_README_TEMPLATE.md b/Games/FOLDER_README_TEMPLATE.md
@@ -1,29 +1,77 @@
 # **Game_Name** 
 
----
+Dragon World Game
 
 <br>
 
 ## **Description 📃**
-<!-- add your game description here  -->
+**Dragon World Game: Dodge, Defeat, Dominate!**
+
+Welcome to Dragon_Game, where you'll embody a majestic dragon on a daring quest. Dodge fierce attacks from mythical foes, showcasing your agility and wit. With stunning HTML, CSS, and JavaScript visuals, immerse yourself in a world of fantasy and magic. Collect allies, hone your reflexes, and conquer legendary treasures. Are you ready to unleash your inner dragon and etch your name in legend?
 - 
 
 ## **functionalities 🎮**
-<!-- add functionalities over here -->
+1. Dragon Movement: Allow players to control the dragon's movement using keyboard or touch controls, enabling them to dodge opponents' attacks.
+
+2. Opponent Movement: Implement opponents (e.g., other dragons) that move towards the player's dragon, posing a threat. Opponents move at varying speeds and trajectories to increase difficulty.
+
+3. Collision Detection: Detect collisions between the player's dragon and opponents to determine if the dragon successfully dodges or gets hit.
+
+4. Score System: Keep track of the player's score based on the time survived dodging opponents. The score increases incrementally as the player dodges opponents successfully.
+
+5. Background Sound: Include a relative background sound effect (SFX) to enhance the gaming atmosphere. This could be ambient dragon roars, mystical music, or sounds of the environment.
+
+6. Game Over Condition: Determine a game over condition, such as when the player's dragon gets hit by an opponent. Display a game over screen with the player's final score and an option to restart the game.
+
+7. Responsive Design: Ensure the game layout adjusts dynamically for different screen sizes and orientations, providing a consistent experience across devices.
+
+With these functionalities, players can enjoy a straightforward yet engaging gaming experience where they control a dragon dodging opponents while immersed in the background sounds of the game world.
 - 
 <br>
 
 ## **How to play? 🕹️**
-<!-- add the steps how to play games -->
+1. Control Your Dragon:
+ >>Movement:
+   Use the up arrow key to make your dragon jump.
+   Use the right and left arrow keys to move forward and backward respectively.
+ >>Dodging Opponents:
+   Press the up arrow key and the forward arrow key simultaneously to execute a dodge maneuver and avoid incoming opponents.
+
+2. Survive and Score:
+   Navigate your dragon through the playing field, dodging opponents and avoiding collisions.
+   The longer you survive without getting hit, the higher your score will be.
+
+3. Watch Out for Opponents:
+   Keep an eye out for opponents, such as other dragons, that will move towards your dragon.
+   Use your agility to dodge their attacks and stay in the game.
+
+4. Use Timing and Skill:
+   Master the timing of your jumps and dodges to evade opponents effectively.
+   Utilize your skills to maneuver through challenging situations and maximize your score.
+
+5. Enjoy the Adventure:
+   Immerse yourself in the mystical world of Dragon_Game, filled with excitement and adventure.
+   Challenge yourself to beat your high score with each playthrough.
+
+6. Game Over:
+   If your dragon collides with an opponent, it's game over.
+   Your final score will be displayed, allowing you to track your progress and compete for the highest score.
+
+7. Restart and Replay:
+   Press the restart button to begin a new game and embark on another thrilling adventure with your dragon.
+
+8. Have Fun!
+   Dragon_Game is all about having fun and testing your skills. So, jump, dodge, and survive as long as you can in this epic dragon adventure!
 - 
 
 <br>
 
 ## **Screenshots 📸**
 
 <br>
-<!-- add your screenshots like this -->
-<!-- ![image](url) -->
+[image_01]("C:\Users\VAIBHAV SRIVASTAVA\OneDrive - vitbhopal.ac.in\Desktop\Screenshot 2024-05-12 214052.png")
+
+[image_02]("C:\Users\VAIBHAV SRIVASTAVA\OneDrive - vitbhopal.ac.in\Desktop\Screenshot 2024-05-12 214118.png")
 
 <br>