diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000000..6f3a2913e1 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/Games/8_Puzzle/README.md b/Games/8_Puzzle/README.md new file mode 100644 index 0000000000..959f8ef900 --- /dev/null +++ b/Games/8_Puzzle/README.md @@ -0,0 +1,61 @@ +# Number Puzzle Game + +An interactive 8-puzzle game built with HTML, CSS, and JavaScript. The objective of the game is to arrange the tiles in numerical order by sliding them into the empty space. + +## Features +- Shuffle the puzzle tiles. +- Reset the puzzle to the solved state. +- Timer to track the time taken to solve the puzzle. + +## How to Play + +1. Open the game in your web browser. +2. Click the "Shuffle" button to start a new game. +3. Slide the tiles by clicking on them to move them into the empty space. +4. Arrange the tiles in numerical order (1 to 8) with the empty space in the bottom-right corner. +5. The game ends when you have arranged all the tiles correctly. Your score will be displayed based on the number of moves and time taken. + +### Installation + +1. Clone the repository or download the files. +2. Open the `index.html` file in your preferred web browser. + +### Files + +- `index.html`: The main HTML file that contains the structure of the game. +- `style.css`: The CSS file that styles the game. +- `script.js`: The JavaScript file that contains the game logic. + + +### Usage + +1. Open `index.html` in your browser. +2. Click the **Shuffle** button to shuffle the tiles. +3. Arrange the tiles in numerical order by clicking on them to slide them into the empty space. +4. The timer starts when you click the **Shuffle** button and stops when you solve the puzzle. +5. Click the **Reset** button to reset the puzzle to the solved state and reset the timer. + +## Code Structure + +### HTML + +The HTML file sets up the structure of the game with a container for the puzzle and buttons for shuffling and resetting the tiles. + +### CSS + +The CSS file styles the game elements, including the puzzle tiles and buttons, and provides a responsive layout. + +### JavaScript + +The JavaScript file contains the game logic: +- `createTiles()`: Creates and displays the puzzle tiles. +- `moveTile(index)`: Moves a tile if it is adjacent to the empty space. +- `canMove(index)`: Checks if a tile can be moved. +- `shuffleTiles()`: Shuffles the tiles. +- `resetTiles()`: Resets the tiles to the solved state. +- `startTimer()`: Starts the timer. +- `resetTimer()`: Resets the timer. + +## Credits + +This game was created by Nikita Saini [github - @katarianikita2003] as a simple project. \ No newline at end of file diff --git a/Games/8_Puzzle/index.html b/Games/8_Puzzle/index.html new file mode 100644 index 0000000000..8780eebef2 --- /dev/null +++ b/Games/8_Puzzle/index.html @@ -0,0 +1,21 @@ + + + + + + 8 Puzzle Game + + + +
+

8 Puzzle Game

+
Time: 0s
+
+
+ + +
+
+ + + diff --git a/Games/8_Puzzle/script.js b/Games/8_Puzzle/script.js new file mode 100644 index 0000000000..5322ac4bd2 --- /dev/null +++ b/Games/8_Puzzle/script.js @@ -0,0 +1,89 @@ +document.addEventListener('DOMContentLoaded', () => { + const puzzleContainer = document.getElementById('puzzle-container'); + const shuffleButton = document.getElementById('shuffle-button'); + const resetButton = document.getElementById('reset-button'); + const timerElement = document.getElementById('timer'); + + let tiles = [...Array(9).keys()]; + let emptyIndex = 8; + let timer; + let startTime; + + function createTiles() { + puzzleContainer.innerHTML = ''; + tiles.forEach((tile, index) => { + const tileElement = document.createElement('div'); + tileElement.className = 'tile'; + if (tile === 8) { + tileElement.classList.add('empty'); + } else { + tileElement.textContent = tile + 1; + tileElement.addEventListener('click', () => moveTile(index)); + } + puzzleContainer.appendChild(tileElement); + }); + } + + function moveTile(index) { + if (canMove(index)) { + [tiles[emptyIndex], tiles[index]] = [tiles[index], tiles[emptyIndex]]; + emptyIndex = index; + createTiles(); + if (isSolved()) { + clearInterval(timer); + alert(`Congratulations, you solved the puzzle in ${Math.floor((Date.now() - startTime) / 1000)} seconds!`); + } + } + } + + function canMove(index) { + const emptyRow = Math.floor(emptyIndex / 3); + const emptyCol = emptyIndex % 3; + const row = Math.floor(index / 3); + const col = index % 3; + return (emptyRow === row && Math.abs(emptyCol - col) === 1) || (emptyCol === col && Math.abs(emptyRow - row) === 1); + } + + function shuffleTiles() { + do { + for (let i = tiles.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [tiles[i], tiles[j]] = [tiles[j], tiles[i]]; + } + } while (isSolved()); + emptyIndex = tiles.indexOf(8); + createTiles(); + startTimer(); + } + + function resetTiles() { + tiles = [...Array(9).keys()]; + emptyIndex = 8; + createTiles(); + resetTimer(); + } + + function isSolved() { + return tiles.every((tile, index) => tile === index); + } + + function startTimer() { + resetTimer(); + startTime = Date.now(); + timer = setInterval(() => { + + const elapsedTime = Math.floor((Date.now() - startTime) / 1000); + timerElement.textContent = `Time: ${elapsedTime}s`; + }, 1000); + } + + function resetTimer() { + clearInterval(timer); + timerElement.textContent = 'Time: 0s'; + } + + shuffleButton.addEventListener('click', shuffleTiles); + resetButton.addEventListener('click', resetTiles); + + createTiles(); +}); diff --git a/Games/8_Puzzle/style.css b/Games/8_Puzzle/style.css new file mode 100644 index 0000000000..4216b9fae5 --- /dev/null +++ b/Games/8_Puzzle/style.css @@ -0,0 +1,80 @@ +body { + display: flex; + background-image: linear-gradient(#f0d7ed, #b8dddd); + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + font-family: Arial, sans-serif; +} + +#game-container { + display: flex; + flex-direction: column; + align-items: center; +} + +#puzzle-container { + display: grid; + grid-template-columns: repeat(3, 100px); + gap: 5px; + background-color: #cf837d84; + padding: 10px; + box-shadow: 10px 10px rgb(196, 117, 117); +} + +.tile { + width: 100px; + height: 100px; + background-color: rgba(145, 216, 188, 0.621); + color: #f9f9f9; + display: flex; + justify-content: center; + align-items: center; + font-size: 2em; + cursor: pointer; + user-select: none; +} + +.tile.empty { + background-color: transparent; + cursor: default; +} + +#shuffle-button { + margin-top: 20px; + padding: 7px 50px; + font-size: 1.5em; + cursor: pointer; + color: whitesmoke; + background-color: rgb(135, 30, 12); + border: 2px solid rgb(0, 0, 0); + border-radius: 5px; +} + +#shuffle-button:hover { + margin-top: 20px; + padding: 7px 50px; + font-size: 1.5em; + cursor: pointer; + color: whitesmoke; + background-color: rgb(135, 30, 12); + border: 2px solid rgb(0, 0, 0); + border-radius: 5px; +} + +#reset-button { + margin-top: 20px; + padding: 7px 50px; + font-size: 1.5em; + cursor: pointer; + color: whitesmoke; + background-color: rgb(135, 30, 12); + border: 2px solid rgb(0, 0, 0); + border-radius: 5px; +} + +#timer { + font-size: 1.5em; + margin-bottom: 20px; +} diff --git a/Games/Aero_Acrobat/about.html b/Games/Aero_Acrobat/about.html new file mode 100644 index 0000000000..55f9a3228a --- /dev/null +++ b/Games/Aero_Acrobat/about.html @@ -0,0 +1,73 @@ + + + + + About Us - Aero Acrobat + + + + + + +

About Us

+ +
+
+
ABOUT US
+
+ Welcome to Aero Acrobat! Our game development team is dedicated to creating thrilling and entertaining experiences for players of all ages. Aero Acrobat is a fun and challenging game that combines skill and precision to test your acrobatic abilities in the sky. Our goal is to deliver high-quality gaming experiences that keep you engaged and coming back for more. Thank you for playing Aero Acrobat. If you have any questions or feedback, please reach out to us at support@aeroacrobat.com. +
+ +
+
+ + diff --git a/Games/Aero_Acrobat/index.html b/Games/Aero_Acrobat/index.html index 8eafb3574e..06975da80d 100644 --- a/Games/Aero_Acrobat/index.html +++ b/Games/Aero_Acrobat/index.html @@ -2,12 +2,11 @@ - + Aero Acrobat - +

Aero Acrobat

@@ -19,6 +18,6 @@

Aero Acrobat

volume_up
-
info_outline
+
info_outline
diff --git a/Games/Ant_Smasher/Readme.md b/Games/Ant_Smasher/Readme.md new file mode 100644 index 0000000000..7551ca027f --- /dev/null +++ b/Games/Ant_Smasher/Readme.md @@ -0,0 +1,20 @@ +# **Game_Name** + +Ant Smasher + +## **Description 📃** + +Frontend game developed using HTML, CSS, JavaScript. Player has to kill all the Ants + +## **functionalities 🎮** + +- Player has to kill all the Ants by Smashing it. + +## **How to play? 🕹️** + +- Click the Start button to start the game +- When players hits the ant the score will get increased. + +## **Screenshots 📸** + +![alt text](./img/image.png) diff --git a/Games/Ant_Smasher/index.html b/Games/Ant_Smasher/index.html new file mode 100644 index 0000000000..6bd4b1f777 --- /dev/null +++ b/Games/Ant_Smasher/index.html @@ -0,0 +1,37 @@ + + + + + Ant Smasher Game + + + + + +

Ant Smasher0

+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + diff --git a/Games/Ant_Smasher/script.js b/Games/Ant_Smasher/script.js new file mode 100644 index 0000000000..6f02773bf5 --- /dev/null +++ b/Games/Ant_Smasher/script.js @@ -0,0 +1,47 @@ +const holes = document.querySelectorAll(".hole"); +const scoreBoard = document.querySelector(".score"); +const moles = document.querySelectorAll(".mole"); +let lastHole; +let timeUp = false; +let score = 0; + +function randomTime(min, max) { + return Math.round(Math.random() * (max - min) + min); +} + +function randomHole(holes) { + const idx = Math.floor(Math.random() * holes.length); + const hole = holes[idx]; + if (hole === lastHole) { + return randomHole(holes); + } + lastHole = hole; + return hole; +} + +function peep() { + const time = randomTime(500, 2000); + const hole = randomHole(holes); + hole.classList.add("up"); + setTimeout(() => { + hole.classList.remove("up"); + if (!timeUp) peep(); + }, time); +} + +function startGame() { + scoreBoard.textContent = 0; + timeUp = false; + score = 0; + peep(); + setTimeout(() => (timeUp = true), 10000); +} + +function bonk(e) { + if (!e.isTrusted) return; // cheater! + score++; + this.parentNode.classList.remove("up"); + scoreBoard.textContent = score; +} + +moles.forEach((mole) => mole.addEventListener("click", bonk)); diff --git a/Games/Ant_Smasher/style.css b/Games/Ant_Smasher/style.css new file mode 100644 index 0000000000..494f974094 --- /dev/null +++ b/Games/Ant_Smasher/style.css @@ -0,0 +1,72 @@ +html { + box-sizing: border-box; + font-size: 10px; + background: #9b7653; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +body { + padding: 0; + margin: 0; + font-family: "Amatic SC", cursive; +} + +h1 { + text-align: center; + font-size: 10rem; + line-height: 1; + margin-bottom: 0; +} + +.score { + background: rgba(255, 255, 255, 0.2); + padding: 0 3rem; + line-height: 1; + border-radius: 1rem; +} + +.game { + width: 600px; + height: 400px; + display: flex; + flex-wrap: wrap; + margin: 0 auto; +} + +.hole { + flex: 1 0 33.33%; + overflow: hidden; + position: relative; +} + +.hole:after { + display: block; + background: url(../../assets/images/Ant_Smasher_dirt.svg) bottom center + no-repeat; + background-size: contain; + content: ""; + width: 100%; + height: 70px; + position: absolute; + z-index: 2; + bottom: -30px; +} + +.mole { + background: url("../../assets/images/Ant_Smasher.png") bottom center no-repeat; + background-size: 60%; + position: absolute; + top: 100%; + width: 100%; + height: 100%; + transition: all 0.4s; +} + +.hole.up .mole { + top: 0; +} diff --git a/Games/AquaSort_Game/aboutus.html b/Games/AquaSort_Game/aboutus.html new file mode 100644 index 0000000000..9df384b037 --- /dev/null +++ b/Games/AquaSort_Game/aboutus.html @@ -0,0 +1,20 @@ + + + + About Us - Water Sort Puzzle + + + +
+
+
ABOUT US
+
+ Welcome to Water Sort Puzzle! We are passionate about creating fun and challenging puzzle games that entertain and engage players of all ages. Our team of developers is dedicated to providing high-quality gaming experiences. Water Sort Puzzle is our attempt to bring a simple yet addictive game to your fingertips. We hope you enjoy playing it as much as we enjoyed creating it. For any inquiries or feedback, feel free to contact us at support@watersortpuzzle.com. +
+ +
+
+ + diff --git a/Games/AquaSort_Game/index.html b/Games/AquaSort_Game/index.html index 24f380c67c..c51da977e9 100644 --- a/Games/AquaSort_Game/index.html +++ b/Games/AquaSort_Game/index.html @@ -5,23 +5,26 @@ -
-