From 43c688a12f3e8539b4f549f4f0c84af1a33d710a Mon Sep 17 00:00:00 2001 From: ANKIT KUMAR Date: Sun, 9 Feb 2025 01:10:09 +0530 Subject: [PATCH 1/4] Create static.yml --- .github/workflows/static.yml | 43 ++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 .github/workflows/static.yml 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 From db27e3d6de8a8ea7b3a737d00ee4a05dfc1b5ae7 Mon Sep 17 00:00:00 2001 From: Ankit Kumar Date: Sun, 9 Feb 2025 11:02:00 +0530 Subject: [PATCH 2/4] added catching game --- .../Catch the Falling Object/index.html | 20 ++++ .../Catch the Falling Object/script.js | 108 ++++++++++++++++++ .../Catch the Falling Object/styles.css | 98 ++++++++++++++++ 3 files changed, 226 insertions(+) create mode 100644 HTML+CSS+JS Apps/Catch the Falling Object/index.html create mode 100644 HTML+CSS+JS Apps/Catch the Falling Object/script.js create mode 100644 HTML+CSS+JS Apps/Catch the Falling Object/styles.css 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..de1c809 --- /dev/null +++ b/HTML+CSS+JS Apps/Catch the Falling Object/index.html @@ -0,0 +1,20 @@ + + + + + + Catch the Falling Objects + + + +

Catch the Falling Objects

+ +
+
+
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..3289acb --- /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 = []; + +// Move Basket +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 to create falling objects +function createFallingObject() { + if (gameOver) return; + + const object = document.createElement("div"); + object.classList.add("falling-object"); + + // Randomly choose fruit 🍎 or bomb 💣 + const isFruit = Math.random() > 0.3; + object.innerText = isFruit ? "🍎" : "💣"; + object.classList.add(isFruit ? "fruit" : "bomb"); + + object.style.left = Math.random() * 370 + "px"; // Random position + object.style.top = "0px"; + gameContainer.appendChild(object); + + // Move the object down + let fallInterval = setInterval(() => { + if (gameOver) { + clearInterval(fallInterval); + return; + } + + let topPosition = parseInt(object.style.top) + 5; + object.style.top = topPosition + "px"; + + // Check if object reached the basket + 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"; // Show reset button + } + + scoreDisplay.innerText = "Score: " + score; + } + + // Remove object if it falls off the screen + if (topPosition >= 500) { + clearInterval(fallInterval); + object.remove(); + } + }, 50); + + objectIntervals.push(fallInterval); +} + +// Function to start game loop +function startGame() { + gameOver = false; + score = 0; + scoreDisplay.innerText = "Score: 0"; + resetBtn.style.display = "none"; + + objectIntervals.forEach(interval => clearInterval(interval)); // Clear old intervals + objectIntervals = []; + + // Remove all falling objects + document.querySelectorAll(".falling-object").forEach(obj => obj.remove()); + + // Start new objects falling + let gameLoop = setInterval(() => { + if (gameOver) { + clearInterval(gameLoop); + } else { + createFallingObject(); + } + }, 1000); +} + +// Reset game when the reset button is clicked +function resetGame() { + startGame(); +} + +// Start game on page load +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..dbabdcf --- /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; /* Stack elements vertically */ + align-items: center; + justify-content: flex-start; /* Align at the top */ + height: 100vh; + background-color: lightblue; + overflow: hidden; +} + +#game-title { + font-size: 28px; + font-weight: bold; + margin: 20px 0; /* Add space below the title */ + 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; +} From 087bbb1d7a43fc5c72161f7e49dd6fb46f0b2fb5 Mon Sep 17 00:00:00 2001 From: Ankit Kumar Date: Sun, 9 Feb 2025 11:04:13 +0530 Subject: [PATCH 3/4] catching game ready --- .../Catch the Falling Object/index.html | 3 +- .../Catch the Falling Object/script.js | 28 +++++++++---------- .../Catch the Falling Object/styles.css | 6 ++-- 3 files changed, 18 insertions(+), 19 deletions(-) diff --git a/HTML+CSS+JS Apps/Catch the Falling Object/index.html b/HTML+CSS+JS Apps/Catch the Falling Object/index.html index de1c809..eda4a45 100644 --- a/HTML+CSS+JS Apps/Catch the Falling Object/index.html +++ b/HTML+CSS+JS Apps/Catch the Falling Object/index.html @@ -7,8 +7,7 @@ -

Catch the Falling Objects

- +

Catch the Falling Objects

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 index 3289acb..8c30a7b 100644 --- a/HTML+CSS+JS Apps/Catch the Falling Object/script.js +++ b/HTML+CSS+JS Apps/Catch the Falling Object/script.js @@ -7,7 +7,7 @@ let score = 0; let gameOver = false; let objectIntervals = []; -// Move Basket + document.addEventListener("keydown", (event) => { if (event.key === "ArrowLeft" && basketPosition > 0) { basketPosition -= 20; @@ -17,23 +17,23 @@ document.addEventListener("keydown", (event) => { basket.style.left = basketPosition + "px"; }); -// Function to create falling objects + function createFallingObject() { if (gameOver) return; const object = document.createElement("div"); object.classList.add("falling-object"); - // Randomly choose fruit 🍎 or bomb 💣 + const isFruit = Math.random() > 0.3; object.innerText = isFruit ? "🍎" : "💣"; object.classList.add(isFruit ? "fruit" : "bomb"); - object.style.left = Math.random() * 370 + "px"; // Random position + object.style.left = Math.random() * 370 + "px"; object.style.top = "0px"; gameContainer.appendChild(object); - // Move the object down + let fallInterval = setInterval(() => { if (gameOver) { clearInterval(fallInterval); @@ -43,7 +43,7 @@ function createFallingObject() { let topPosition = parseInt(object.style.top) + 5; object.style.top = topPosition + "px"; - // Check if object reached the basket + let basketRect = basket.getBoundingClientRect(); let objectRect = object.getBoundingClientRect(); @@ -60,13 +60,13 @@ function createFallingObject() { } else { alert("Game Over! Your Score: " + score); gameOver = true; - resetBtn.style.display = "block"; // Show reset button + resetBtn.style.display = "block"; } scoreDisplay.innerText = "Score: " + score; } - // Remove object if it falls off the screen + if (topPosition >= 500) { clearInterval(fallInterval); object.remove(); @@ -76,20 +76,20 @@ function createFallingObject() { objectIntervals.push(fallInterval); } -// Function to start game loop + function startGame() { gameOver = false; score = 0; scoreDisplay.innerText = "Score: 0"; resetBtn.style.display = "none"; - objectIntervals.forEach(interval => clearInterval(interval)); // Clear old intervals + objectIntervals.forEach(interval => clearInterval(interval)); objectIntervals = []; - // Remove all falling objects + document.querySelectorAll(".falling-object").forEach(obj => obj.remove()); - // Start new objects falling + let gameLoop = setInterval(() => { if (gameOver) { clearInterval(gameLoop); @@ -99,10 +99,10 @@ function startGame() { }, 1000); } -// Reset game when the reset button is clicked + function resetGame() { startGame(); } -// Start game on page load + 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 index dbabdcf..321ce92 100644 --- a/HTML+CSS+JS Apps/Catch the Falling Object/styles.css +++ b/HTML+CSS+JS Apps/Catch the Falling Object/styles.css @@ -7,9 +7,9 @@ body { display: flex; - flex-direction: column; /* Stack elements vertically */ + flex-direction: column; align-items: center; - justify-content: flex-start; /* Align at the top */ + justify-content: flex-start; height: 100vh; background-color: lightblue; overflow: hidden; @@ -18,7 +18,7 @@ body { #game-title { font-size: 28px; font-weight: bold; - margin: 20px 0; /* Add space below the title */ + margin: 20px 0; color: #333; text-align: center; } From 1cdb2537ad7fe066ce73e2f97cc02369112519f4 Mon Sep 17 00:00:00 2001 From: ANKIT KUMAR Date: Mon, 10 Feb 2025 16:25:46 +0530 Subject: [PATCH 4/4] Update index.html --- HTML+CSS+JS Apps/Catch the Falling Object/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/HTML+CSS+JS Apps/Catch the Falling Object/index.html b/HTML+CSS+JS Apps/Catch the Falling Object/index.html index eda4a45..4463e3e 100644 --- a/HTML+CSS+JS Apps/Catch the Falling Object/index.html +++ b/HTML+CSS+JS Apps/Catch the Falling Object/index.html @@ -3,11 +3,11 @@ - Catch the Falling Objects + Catch the Falling -

Catch the Falling Objects

+

Catch the Falling

Score: 0