diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml new file mode 100644 index 0000000..f2c9e97 --- /dev/null +++ b/.github/workflows/static.yml @@ -0,0 +1,43 @@ +# Simple workflow for deploying static content to GitHub Pages +name: Deploy static content to Pages + +on: + # Runs on pushes targeting the default branch + push: + branches: ["main"] + + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: + +# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages +permissions: + contents: read + pages: write + id-token: write + +# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. +# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. +concurrency: + group: "pages" + cancel-in-progress: false + +jobs: + # Single deploy job since we're just deploying + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + - name: Setup Pages + uses: actions/configure-pages@v5 + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + # Upload entire repository + path: '.' + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/HTML+CSS+JS Apps/Catch the Falling Object/index.html b/HTML+CSS+JS Apps/Catch the Falling Object/index.html new file mode 100644 index 0000000..4463e3e --- /dev/null +++ b/HTML+CSS+JS Apps/Catch the Falling Object/index.html @@ -0,0 +1,19 @@ + + + + + + Catch the Falling + + + +

Catch the Falling

+
+
+
Score: 0
+ +
+ + + + diff --git a/HTML+CSS+JS Apps/Catch the Falling Object/script.js b/HTML+CSS+JS Apps/Catch the Falling Object/script.js new file mode 100644 index 0000000..8c30a7b --- /dev/null +++ b/HTML+CSS+JS Apps/Catch the Falling Object/script.js @@ -0,0 +1,108 @@ +const gameContainer = document.getElementById("game-container"); +const basket = document.getElementById("basket"); +const scoreDisplay = document.getElementById("score"); +const resetBtn = document.getElementById("reset-btn"); +let basketPosition = 170; +let score = 0; +let gameOver = false; +let objectIntervals = []; + + +document.addEventListener("keydown", (event) => { + if (event.key === "ArrowLeft" && basketPosition > 0) { + basketPosition -= 20; + } else if (event.key === "ArrowRight" && basketPosition < 340) { + basketPosition += 20; + } + basket.style.left = basketPosition + "px"; +}); + + +function createFallingObject() { + if (gameOver) return; + + const object = document.createElement("div"); + object.classList.add("falling-object"); + + + const isFruit = Math.random() > 0.3; + object.innerText = isFruit ? "🍎" : "💣"; + object.classList.add(isFruit ? "fruit" : "bomb"); + + object.style.left = Math.random() * 370 + "px"; + object.style.top = "0px"; + gameContainer.appendChild(object); + + + let fallInterval = setInterval(() => { + if (gameOver) { + clearInterval(fallInterval); + return; + } + + let topPosition = parseInt(object.style.top) + 5; + object.style.top = topPosition + "px"; + + + let basketRect = basket.getBoundingClientRect(); + let objectRect = object.getBoundingClientRect(); + + if ( + topPosition >= 460 && + objectRect.left < basketRect.right && + objectRect.right > basketRect.left + ) { + clearInterval(fallInterval); + object.remove(); + + if (object.innerText === "🍎") { + score += 10; + } else { + alert("Game Over! Your Score: " + score); + gameOver = true; + resetBtn.style.display = "block"; + } + + scoreDisplay.innerText = "Score: " + score; + } + + + if (topPosition >= 500) { + clearInterval(fallInterval); + object.remove(); + } + }, 50); + + objectIntervals.push(fallInterval); +} + + +function startGame() { + gameOver = false; + score = 0; + scoreDisplay.innerText = "Score: 0"; + resetBtn.style.display = "none"; + + objectIntervals.forEach(interval => clearInterval(interval)); + objectIntervals = []; + + + document.querySelectorAll(".falling-object").forEach(obj => obj.remove()); + + + let gameLoop = setInterval(() => { + if (gameOver) { + clearInterval(gameLoop); + } else { + createFallingObject(); + } + }, 1000); +} + + +function resetGame() { + startGame(); +} + + +startGame(); diff --git a/HTML+CSS+JS Apps/Catch the Falling Object/styles.css b/HTML+CSS+JS Apps/Catch the Falling Object/styles.css new file mode 100644 index 0000000..321ce92 --- /dev/null +++ b/HTML+CSS+JS Apps/Catch the Falling Object/styles.css @@ -0,0 +1,98 @@ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + height: 100vh; + background-color: lightblue; + overflow: hidden; +} + +#game-title { + font-size: 28px; + font-weight: bold; + margin: 20px 0; + color: #333; + text-align: center; +} + +#game-container { + position: relative; + width: 400px; + height: 500px; + background-color: white; + border: 2px solid black; + overflow: hidden; +} + + +#game-container { + position: relative; + width: 400px; + height: 500px; + background-color: white; + border: 2px solid black; + overflow: hidden; +} + +#basket { + position: absolute; + bottom: 10px; + width: 60px; + height: 30px; + background-color: brown; + border-radius: 10px; + left: 50%; + transform: translateX(-50%); +} + +.falling-object { + position: absolute; + width: 30px; + height: 30px; + text-align: center; + font-size: 24px; + line-height: 30px; +} + +.fruit { + color: green; +} + +.bomb { + color: red; +} + +#score { + position: absolute; + top: 10px; + left: 10px; + font-size: 20px; + font-weight: bold; +} + +#reset-btn { + position: absolute; + bottom: 10px; + left: 50%; + transform: translateX(-50%); + padding: 10px 20px; + font-size: 16px; + background-color: red; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + display: none; +} + +#reset-btn:hover { + background-color: darkred; +}