diff --git a/EndlessRunner/ReadMe.md b/EndlessRunner/ReadMe.md new file mode 100644 index 00000000..381126be --- /dev/null +++ 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 [codewithpriyaa@gmail.com]. + +--- + +Happy coding and enjoy the game! diff --git a/EndlessRunner/Readme.md b/EndlessRunner/Readme.md new file mode 100644 index 00000000..e69de29b diff --git a/EndlessRunner/images/images.jpeg b/EndlessRunner/images/images.jpeg new file mode 100644 index 00000000..c6d82193 Binary files /dev/null and b/EndlessRunner/images/images.jpeg differ diff --git a/EndlessRunner/images/one-piece-desktop-kids-running-b5b3kgp79e5rebgg.jpg b/EndlessRunner/images/one-piece-desktop-kids-running-b5b3kgp79e5rebgg.jpg new file mode 100644 index 00000000..0dd190d5 Binary files /dev/null and b/EndlessRunner/images/one-piece-desktop-kids-running-b5b3kgp79e5rebgg.jpg differ diff --git a/EndlessRunner/images/png-clipart-chicken-pou-pro-chicken-pou-pro-soccer-bird-chicken-liver-game-white.png b/EndlessRunner/images/png-clipart-chicken-pou-pro-chicken-pou-pro-soccer-bird-chicken-liver-game-white.png new file mode 100644 index 00000000..087765f3 Binary files /dev/null and b/EndlessRunner/images/png-clipart-chicken-pou-pro-chicken-pou-pro-soccer-bird-chicken-liver-game-white.png differ 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 new file mode 100644 index 00000000..481d1184 Binary files /dev/null and b/EndlessRunner/images/pngtree-game-pixel-scene-with-stone-png-image_2952040.jpg differ diff --git a/EndlessRunner/images/sky.jpg b/EndlessRunner/images/sky.jpg new file mode 100644 index 00000000..807e2e3d Binary files /dev/null and b/EndlessRunner/images/sky.jpg differ diff --git a/EndlessRunner/images/sky2.jpg b/EndlessRunner/images/sky2.jpg new file mode 100644 index 00000000..6a33179c Binary files /dev/null and b/EndlessRunner/images/sky2.jpg differ diff --git a/EndlessRunner/index.html b/EndlessRunner/index.html new file mode 100644 index 00000000..c9bad52f --- /dev/null +++ b/EndlessRunner/index.html @@ -0,0 +1,39 @@ + + + + + + + EndlessRunner + + + + +

Endless Runner

+
+ +
+ + kop +
+ +
+
+ + +
+
+
+ +
+
+

© 2024 Priya Ashu.

+ + + + + \ No newline at end of file diff --git a/EndlessRunner/script.js b/EndlessRunner/script.js new file mode 100644 index 00000000..8d5939e3 --- /dev/null +++ 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, +}) \ No newline at end of file diff --git a/EndlessRunner/style.css b/EndlessRunner/style.css new file mode 100644 index 00000000..94bc97c0 --- /dev/null +++ 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; +} \ No newline at end of file