iamrahulmahato · iamrahulmahato · Nov 10, 2024 · Nov 10, 2024 · Nov 10, 2024
diff --git a/EndlessRunner/ReadMe.md b/EndlessRunner/ReadMe.md
@@ -0,0 +1,83 @@
+# Endless Runner Game
+
+Welcome to the **Endless Runner** game! This is a fun, simple game where you control a chicken navigating through obstacles. The game ends when the chicken collides with an obstacle. 
+
+## Table of Contents
+
+- [Features](#features)
+- [Demo](#demo)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Contributing](#contributing)
+- [License](#license)
+- [Acknowledgments](#acknowledgments)
+
+## Features
+
+- **Dynamic Gameplay**: Navigate a chicken through obstacles.
+- **Jump Mechanics**: Jump to avoid obstacles.
+- **Responsive Design**: Adapts to different screen sizes.
+- **Scoring System**: Displays score when the game ends.
+- **Background Animation**: Dynamic background for a better visual experience.
+
+## Demo
+
+![Endless Runner Demo](path_to_your_demo_image.gif)
+
+You can play the game live [here](link_to_your_live_demo).
+
+## Installation
+
+To set up and run the Endless Runner game locally:
+
+1. **Clone the repository**:
+    ```bash
+    git clone https://github.com/yourusername/endless-runner.git
+    ```
+
+2. **Navigate to the project directory**:
+    ```bash
+    cd endless-runner
+    ```
+
+3. **Open `index.html` in your web browser**:
+    Simply open the `index.html` file to start playing the game.
+
+## Usage
+
+- **Jump**: Click anywhere on the page to make the chicken jump and avoid obstacles.
+- **Score**: The game displays your score when the chicken collides with an obstacle.
+
+## Contributing
+
+We welcome contributions to improve the Endless Runner game. To contribute:
+
+1. **Fork the repository**.
+2. **Create a new branch**:
+    ```bash
+    git checkout -b feature-branch
+    ```
+3. **Commit your changes**:
+    ```bash
+    git commit -m 'Add new feature'
+    ```
+4. **Push to the branch**:
+    ```bash
+    git push origin feature-branch
+    ```
+5. **Create a Pull Request**.
+
+Please make sure to follow the existing coding style and write tests for any new features or fixes.
+
+## License
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
+.
+
+## Contact
+
+For any questions or feedback, feel free to contact me at [[email protected]].
+
+---
+
+Happy coding and enjoy the game!
diff --git a/EndlessRunner/Readme.md b/EndlessRunner/Readme.md
diff --git a/EndlessRunner/images/images.jpeg b/EndlessRunner/images/images.jpeg
diff --git a/EndlessRunner/images/one-piece-desktop-kids-running-b5b3kgp79e5rebgg.jpg b/EndlessRunner/images/one-piece-desktop-kids-running-b5b3kgp79e5rebgg.jpg
diff --git a/...lipart-chicken-pou-pro-chicken-pou-pro-soccer-bird-chicken-liver-game-white.png b/...lipart-chicken-pou-pro-chicken-pou-pro-soccer-bird-chicken-liver-game-white.png
diff --git a/EndlessRunner/images/pngtree-game-pixel-scene-with-stone-png-image_2952040.jpg b/EndlessRunner/images/pngtree-game-pixel-scene-with-stone-png-image_2952040.jpg
diff --git a/EndlessRunner/images/sky.jpg b/EndlessRunner/images/sky.jpg
diff --git a/EndlessRunner/images/sky2.jpg b/EndlessRunner/images/sky2.jpg
diff --git a/EndlessRunner/index.html b/EndlessRunner/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en" onclick="jump()">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>EndlessRunner</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+     <h1>Endless Runner</h1>
+    <div id="container">
+
+        <div id="game">
+            <img style="position: absolute;opacity: .6; width: 350px; height: 250px; "  src="images/sky2.jpg" alt="">
+            <img style="position: absolute; left:350px;opacity: .6; width: 350px; height: 270px; " src="images/sky.jpg"
+                alt="kop">
+            <div id="chicken">
+                <img src="images/png-clipart-chicken-pou-pro-chicken-pou-pro-soccer-bird-chicken-liver-game-white.png"
+                    width="60px" height="60px">
+            </div>
+            <div id="obstacle">
+                <img src="images/images.jpeg" width="50px" height="50px" alt="">
+
+            </div>
+        </div>
+        <div id="ground">
+            <img src="images/pngtree-game-pixel-scene-with-stone-png-image_2952040.jpg" width="700px" height="50px" >
+        </div>
+    </div>
+    <p>© 2024 Priya Ashu.</p>
+</body>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
+integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
+crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="script.js"></script>
+
+</html>
diff --git a/EndlessRunner/script.js b/EndlessRunner/script.js
@@ -0,0 +1,41 @@
+var chicken=document.getElementById("chicken");
+var obstacle=document.getElementById("obstacle");
+var counter=0;
+
+function jump(){
+    if (chicken.classList !="animate"){
+        chicken.classList.add("animate");
+    }
+    setTimeout(function(){
+        chicken.classList.remove("animate");
+    },500)
+    counter++;
+}
+var lose =setInterval(function(){
+    var chickenTop =
+    parseInt(window.getComputedStyle(chicken).
+        getPropertyValue("top"));
+    var blockLeft=
+    parseInt(window.getComputedStyle(obstacle).
+    getPropertyValue("left"));
+    if (blockLeft<20 && blockLeft>0 && chickenTop>=130){
+        obstacle.style.animation="none";
+        obstacle.style.display="none";
+        alert("SCORE:" + counter);
+        counter = 0;
+    }
+
+},10);
+var tl=gsap.timeline()
+tl.from("h1",{
+    y:-50,
+    opacity:0,
+    delay:0.4,
+    duration:0.8,
+})
+tl.from("p",{
+    y:60,
+    opacity:0,
+    duration:0.5,
+    stagger:0.5,
+})
diff --git a/EndlessRunner/style.css b/EndlessRunner/style.css
@@ -0,0 +1,99 @@
+body{
+    background: url(images/one-piece-desktop-kids-running-b5b3kgp79e5rebgg.jpg);
+    margin: 0;
+            padding: 0;
+
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+           /* Replace with your image path */
+            background-size: cover; /* Ensures the image covers the entire background */
+            background-position: center; /* Centers the image */
+            background-repeat: no-repeat;
+}
+#container{
+    display: flex;
+    flex-direction: column;
+            justify-content: center;
+            align-items: center;
+
+            background-color: #111;
+}
+h1{
+    text-align: center;
+            font-size: 50px;
+            color: #fff;
+            font-family: 'Arial', sans-serif;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
+            letter-spacing: 2px;
+            line-height: 1.2;
+            margin-bottom: 20px;
+            padding: 10px 20px;
+            border-radius: 10px;
+            background: linear-gradient(45deg, #b7d605, #f09d03);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+#game{
+    width:700px;
+    height:250px;
+    background-color:#111;
+    position: relative;
+    top:50px;
+
+
+
+
+
+}
+#chicken{
+    width:60px;
+    height:60px;
+    background: red;
+    position:relative;
+    top:190px;
+    left:100px;
+
+}
+.animate{
+    animation:jump .5s linear 0s;
+}
+@keyframes jump{
+    0%{top:150px};
+    30%{top: 100px;}
+    70%{top: 100px;}
+    100%{top:100px}
+
+}
+#obstacle{
+    width:50px;
+    height:50px;
+    background: green;
+    position: relative;
+
+    top:150px;
+    left:100%;
+    animation:block 1.3s infinite linear;
+
+
+}
+@keyframes block{
+    0%{left:680px;}
+    100%{left:-50px;}
+
+}
+#ground{
+    width:700px;
+    height:50px;
+    background: brown;
+    position: relative;
+    top:50px;
+
+}
+p{
+    color: aliceblue;
+    text-align: center;
+    font-size: larger;
+    margin-top: 100px;
+}