diff --git a/Aim-training/index.html b/Aim-training/index.html new file mode 100644 index 00000000..968acd01 --- /dev/null +++ b/Aim-training/index.html @@ -0,0 +1,27 @@ + + + + + + + Aim training + + + + +
+

Aim training

+
+
Score: 0
+
High Score: 0
+
Time Left: 30 seconds
+
+
+ + + + + + \ No newline at end of file diff --git a/Aim-training/script.js b/Aim-training/script.js new file mode 100644 index 00000000..e54be0d1 --- /dev/null +++ b/Aim-training/script.js @@ -0,0 +1,139 @@ +// Variables +let score = 0; +let highScore = 0; +let timeLeft = 30; +let timerId; +let level = 1; +let bubbleInterval = 1000; +let gameInProgress = false; // Track if the game is in progress +let bubbleGenerationTimeout; // Store the timeout for bubble generation + +// Function to create a bubble +function createBubble() { + const bubble = document.createElement("div"); + bubble.className = "bubble"; + + // Generate random position + const posX = Math.random() * 500 + 50; + const posY = Math.random() * 300 + 50; + + bubble.style.top = `${posY}px`; + bubble.style.left = `${posX}px`; + + // Generate random size and color + const size = Math.floor(Math.random() * 30) + 20; + const color = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`; + + bubble.style.width = `${size}px`; + bubble.style.height = `${size}px`; + bubble.style.backgroundColor = color; + + // Event listener to pop the bubble + bubble.addEventListener("click", function () { + if (bubble.parentNode) { + score++; + document.getElementById("scoreValue").textContent = score; + bubble.parentNode.removeChild(bubble); + playPopSound(); + } + }); + + return bubble; +} + +// Function to start the game +function startGame() { + if (gameInProgress) { + return; // Return if game is already in progress + } + + const bubblesContainer = document.getElementById("bubbles"); + const timerElement = document.getElementById("timerValue"); + const startButton = document.getElementById("startButton"); + + // Clear previous bubbles + while (bubblesContainer.firstChild) { + bubblesContainer.firstChild.remove(); + } + + // Reset game state + score = 0; + timeLeft = 30; + level = 1; + bubbleInterval = 1000; + document.getElementById("scoreValue").textContent = score; + document.getElementById("timerValue").textContent = timeLeft; + gameInProgress = true; + + // Start the timer + timerId = setInterval(function () { + timeLeft--; + timerElement.textContent = timeLeft; + + if (timeLeft === 0) { + clearInterval(timerId); + endGame(); + } + }, 1000); + + // Start generating bubbles + generateBubble(bubblesContainer); + + // Disable start button during gameplay + startButton.disabled = true; +} + +// Function to generate bubbles +function generateBubble(container) { + if (!gameInProgress) { + return; // Return if game is not in progress + } + + const bubble = createBubble(); + container.appendChild(bubble); + + // Schedule next bubble generation + bubbleGenerationTimeout = setTimeout(function () { + generateBubble(container); + }, bubbleInterval); +} + +// Function to end the game +function endGame() { + gameInProgress = false; // Set gameInProgress to false + + // Clear bubble generation timeout + clearTimeout(bubbleGenerationTimeout); + + const startButton = document.getElementById("startButton"); + startButton.disabled = false; + playEndSound(); + + // Update high score + if (score > highScore) { + highScore = score; + document.getElementById("highScoreValue").textContent = highScore; + } + + // Display game over message + setTimeout(function () { + alert("Game Over! Your score: " + score); + }, 100); +} + +// Function to play bubble pop sound +function playPopSound() { + const popSound = document.getElementById("popSound"); + popSound.currentTime = 0; + popSound.play(); +} + +// Function to play game end sound +function playEndSound() { + const endSound = document.getElementById("endSound"); + endSound.currentTime = 0; + endSound.play(); +} + +// Event listener for start button +document.getElementById("startButton").addEventListener("click", startGame); \ No newline at end of file diff --git a/Aim-training/styles.css b/Aim-training/styles.css new file mode 100644 index 00000000..d4f15a71 --- /dev/null +++ b/Aim-training/styles.css @@ -0,0 +1,85 @@ +body { + text-align: center; + } + + h1 { + color: #333; + } + + #gameContainer { + margin-top: 50px; + position: relative; + } + + #score, + #highScore, + #timer { + font-size: 20px; + color: #333; + margin-bottom: 10px; + } + + #bubbles { + position: relative; + width: 600px; + height: 400px; + margin: 0 auto; + background-color: #ccc; + border: 2px solid #333; + border-radius: 10px; + overflow: hidden; + } + + .bubble { + position: absolute; + width: 50px; + height: 50px; + border-radius: 50%; + background-color: #f00; + cursor: pointer; + transition: top 0.5s ease-in-out, left 0.5s ease-in-out; + } + + .bubble:hover { + background-color: #f00; + transform: scale(1.2); + } + + #scoreValue, + #highScoreValue { + font-weight: bold; + } + + #timerValue { + font-weight: bold; + animation: blink 1s infinite; + } + + .start-button { + padding: 10px 20px; + font-size: 16px; + background-color: #333; + color: #fff; + border: none; + cursor: pointer; + margin-top: 20px; + } + + @keyframes countdown { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.1); + } + 100% { + transform: scale(1); + } + } + + @media (max-width: 768px) { + #bubbles { + width: 80%; + height: 300px; + } + } \ No newline at end of file diff --git a/README.md b/README.md index 9c0cd376..56ae1a98 100644 --- a/README.md +++ b/README.md @@ -481,7 +481,7 @@ More information about the pack can be found here [Github Student Developer Pack | [QR Code Generator](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/Qr_Code_Generator) | [Quiz](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/Quiz) | [Random Background Generator](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/Random-Background-Generator) | [Recipe Finder](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/Recipe-Finder) | | [Scannable QR Code Generator](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/Scannable%20QR%20CODE%20Generator) | [Table Tennis Scorekeeper](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/Table%20Tennis%20scorekeeper) | [Task Management App](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/task-management-app) | [Temperature Convertor](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/tempreture-converter) | [Tic Tac Toe](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/TicTacToe%20Game) | [To Do List](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/to-do-list) | [Typing Progress Bar](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/Typing%20Progress%20Bar) | [Weather App](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/WeatherApp) | -| [Wix Template](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/WixTemplate) | [URL Shortner](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/url-shortner) | | | +| [Wix Template](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/WixTemplate) | [URL Shortner](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/url-shortner) | [Aim Training](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/Aim-training) | | Please note that the links provided are the GitHub repository URLs for each project.