kunjgit · kunjgit · May 24, 2024 · May 16, 2024 · May 16, 2024 · May 16, 2024
diff --git a/Games/Astronaunt_runner/README.md b/Games/Astronaunt_runner/README.md
@@ -0,0 +1,37 @@
+# **Astronaut_runner** 
+
+---
+
+<br>
+
+## **Description 📃**
+<!-- add your game description here  -->
+- A pure HTML,CSS and javascript game where the user controls the astronaut using arrow keys. 
+
+## **functionalities 🎮**
+<!-- add functionalities over here -->
+
+- **Simple and easy to play**: The game is very simple to play, and it is easy to get started. The user just need to control the astronaut using the arrow keys and avoid the obstacle.
+- **Challenging**: The game can be challenging to play, and it can be difficult to avoid the obstacle.
+<br>
+
+## **How to play? 🕹️**
+<!-- add the steps how to play games -->
+- Use the ArrowUp to jump And Arrowright and arrrowleft to move right and left.
+- Try to avoid the obstacles by clicking arrow up and arrow right at the same time.
+- the more obstacles you avoid the better the score will be.
+
+
+<br>
+
+## **Screenshots 📸**
+
+<br>
+<!-- add your screenshots like this -->
+<!-- ![image](url) -->
+[image](Screenshot 2024-05-16 184235.png)
+
+<br>
+
+## **Working video 📹**
+<!-- add your working video over here -->
diff --git a/Games/Astronaunt_runner/Screenshot 2024-05-16 184235.png b/Games/Astronaunt_runner/Screenshot 2024-05-16 184235.png
diff --git a/...stronaunt_runner/[removal.ai]_7c44869d-9a02-4ea6-a955-04cbe0cbaad7-meteroid.png b/...stronaunt_runner/[removal.ai]_7c44869d-9a02-4ea6-a955-04cbe0cbaad7-meteroid.png
diff --git a/Games/Astronaunt_runner/astronanut2-unscreen.gif b/Games/Astronaunt_runner/astronanut2-unscreen.gif
diff --git a/Games/Astronaunt_runner/backgroundimagespace.jpg b/Games/Astronaunt_runner/backgroundimagespace.jpg
diff --git a/Games/Astronaunt_runner/index.html b/Games/Astronaunt_runner/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>ASTRONAUT 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 the space<br>Use ArrowUp & ArrowRight strategically to dodge the obstacle<br> </div>
+
+        <div class="dino"></div>
+        <div id="scoreCont">Your Score: 0</div>
+        <div class="obstacle obstacleAni"></div>
+    </div>
+</body>
+</html>
diff --git a/Games/Astronaunt_runner/script.js b/Games/Astronaunt_runner/script.js
@@ -0,0 +1,66 @@
+score = 0;
+cross = true;
+
+
+
+document.onkeydown = function (e) {
+    console.log("Key code is: ", e.key)
+    if (e.key == "ArrowUp") {
+        dino = document.querySelector('.dino');
+        dino.classList.add('animateDino');
+        setTimeout(() => {
+            dino.classList.remove('animateDino')
+        }, 700);
+    }
+    if (e.key == "ArrowRight") {
+        dino = document.querySelector('.dino');
+        dinoX = parseInt(window.getComputedStyle(dino, null).getPropertyValue('left'));
+        dino.style.left = dinoX + 112 + "px";
+    }
+    if (e.key == "ArrowLeft") {
+        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);
+    // console.log(offsetX, offsetY)
+    if (offsetX < 73 && offsetY < 52) {
+        gameOver.innerHTML = "Game Over - Reload to Play Again"
+        obstacle.classList.remove('obstacleAni')
+
+    }
+    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/Games/Astronaunt_runner/style.css b/Games/Astronaunt_runner/style.css
@@ -0,0 +1,87 @@
+*{
+    margin: 0;
+    padding:0;
+}
+body{
+    background-color: rgb(254, 251, 251);
+    overflow: hidden;
+}
+.gameContainer{
+    background-image: url(backgroundimagespace.jpg) ;
+    background-repeat: no-repeat;
+    background-size: 100vw 100vh;
+    width: 100%;
+    height: 100vh;
+}
+
+.dino{
+    background-image: url(astronanut2-unscreen.gif);
+    background-repeat: no-repeat;
+    background-size: cover;
+    width: 250px;
+    height: 200px;
+    position: absolute;
+    bottom:0;
+    left: 52px;
+}
+
+.obstacle{
+    width: 100px;
+    height: 150px;
+    background-image: url([removal.ai]_7c44869d-9a02-4ea6-a955-04cbe0cbaad7-meteroid.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: 43px;
+    color: #f2f0f0;
+    text-align: center; 
+    font-family: 'Ubuntu', sans-serif;
+}
+
+#scoreCont{
+    font-size: 35px;
+    color: #f2f0f0;
+    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/README.md b/README.md
@@ -186,7 +186,7 @@ This repository also provides one such platforms where contributers come over an
 | [CSS Select](https://github.com/kunjgit/GameZone/tree/main/Games/CSS_Select)                                     | [Squid](https://github.com/kunjgit/GameZone/tree/main/Games/Squid_Game)                                 | [Flip Coin](https://github.com/kunjgit/GameZone/tree/main/Games/Flip_Coin)                                   | [Witty Word Quest](https://github.com/kunjgit/GameZone/tree/main/Games/witty_word_quest)                           | [Typing Game](https://github.com/Ishan-77/GameZone/tree/main/Games/Typing_Game)                             |
 | [numeral-whiz](https://github.com/Ishan-77/GameZone/tree/main/Games/numeral-whiz)                                | [candy_match](https://github.com/kunjgit/GameZone/tree/main/Games/Candy_Match_Saga)                     | [Crossy_Road](https://github.com/tanujbordikar/GameZone/tree/Crossy_Road)                                    | [HueHero](https://github.com/kunjgit/GameZone/tree/main/Games/HueHero)                                             | [Puzzel_Winner](https://github.com/kunjgit/GameZone/tree/main/Games/Puzzel_Winner)                          |
 | [Emoji_Intruder](https://github.com/kunjgit/GameZone/tree/main/Games/Emoji_Intruder)                             | [Guess The Weapon](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_The_Weapon)                | [Guess Who](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_Who)                                                               | [Pop My Balloon](https://github.com/kunjgit/GameZone/tree/main/Games/Pop_My_Balloon)                                                                                                                   |                                                                                                             |
-| [Maze_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Maze_Game)                               |
+| [Maze_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Maze_Game)                               |[Astronaut_runner](https://github.com/kunjgit/GameZone/tree/main/Astronaut_runner)
 
  </center>
 

diff --git a/assets/images/Screenshot 2024-05-16 184235.png b/assets/images/Screenshot 2024-05-16 184235.png
diff --git a/assets/images/[removal.ai]_7c44869d-9a02-4ea6-a955-04cbe0cbaad7-meteroid.png b/assets/images/[removal.ai]_7c44869d-9a02-4ea6-a955-04cbe0cbaad7-meteroid.png
diff --git a/assets/images/astronanut2-unscreen.gif b/assets/images/astronanut2-unscreen.gif
diff --git a/assets/images/backgroundimagespace.jpg b/assets/images/backgroundimagespace.jpg