From 43c688a12f3e8539b4f549f4f0c84af1a33d710a Mon Sep 17 00:00:00 2001 From: ANKIT KUMAR Date: Sun, 9 Feb 2025 01:10:09 +0530 Subject: [PATCH 1/2] 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 4ee1d7f3b725001c8c6b7b9dc25269be8228f1bc Mon Sep 17 00:00:00 2001 From: Ankit Kumar Date: Mon, 10 Feb 2025 16:58:27 +0530 Subject: [PATCH 2/2] flappy --- HTML+CSS+JS Apps/Flappy Block/index.html | 21 ++++ HTML+CSS+JS Apps/Flappy Block/script.js | 140 +++++++++++++++++++++++ HTML+CSS+JS Apps/Flappy Block/style.css | 79 +++++++++++++ 3 files changed, 240 insertions(+) create mode 100644 HTML+CSS+JS Apps/Flappy Block/index.html create mode 100644 HTML+CSS+JS Apps/Flappy Block/script.js create mode 100644 HTML+CSS+JS Apps/Flappy Block/style.css diff --git a/HTML+CSS+JS Apps/Flappy Block/index.html b/HTML+CSS+JS Apps/Flappy Block/index.html new file mode 100644 index 0000000..07e38f1 --- /dev/null +++ b/HTML+CSS+JS Apps/Flappy Block/index.html @@ -0,0 +1,21 @@ + + + + Flappy Block + + + +
Score: 0
+
Click or tap to float up gently!
+
+
+
+ Game Over!
+ Click Start to play again +
+
+ + + + + diff --git a/HTML+CSS+JS Apps/Flappy Block/script.js b/HTML+CSS+JS Apps/Flappy Block/script.js new file mode 100644 index 0000000..c9bc9ae --- /dev/null +++ b/HTML+CSS+JS Apps/Flappy Block/script.js @@ -0,0 +1,140 @@ +const gameContainer = document.getElementById('game-container'); +const block = document.getElementById('block'); +const scoreDisplay = document.getElementById('score'); +const startButton = document.getElementById('start-button'); +const gameOverDisplay = document.getElementById('game-over'); + +let blockY = 300; +let velocity = 0; +let gravity = 0.15; // Much lower gravity +let jump = -4; // Much gentler jump +let score = 0; +let gameLoop; +let obstacles = []; +let gameActive = false; + +function startGame() { + blockY = 300; + velocity = 0; + score = 0; + scoreDisplay.textContent = `Score: ${score}`; + obstacles.forEach(obstacle => obstacle.remove()); + obstacles = []; + gameOverDisplay.style.display = 'none'; + gameActive = true; + + gameLoop = setInterval(updateGame, 20); + setInterval(createObstacle, 3000); // Much longer delay between obstacles +} + +function updateGame() { + if (!gameActive) return; + + velocity += gravity; + velocity = Math.min(velocity, 5); // Limit falling speed + blockY += velocity; + block.style.top = blockY + 'px'; + + const blockRect = block.getBoundingClientRect(); + + // More forgiving boundary checking + if (blockY < -30 || blockY > gameContainer.clientHeight - 30) { + gameOver(); + } + + obstacles.forEach(obstacle => { + const obstacleRect = obstacle.getBoundingClientRect(); + // More forgiving collision detection + if ( + blockRect.right - 10 > obstacleRect.left && + blockRect.left + 10 < obstacleRect.right && + (blockRect.top + 10 < obstacleRect.top + obstacleRect.height && + blockRect.bottom - 10 > obstacleRect.top) + ) { + gameOver(); + } + }); +} + +function createObstacle() { + if (!gameActive) return; + + const gapHeight = 300; // Much larger gap + const gapPosition = Math.random() * (gameContainer.clientHeight - gapHeight - 100) + 50; + + const topObstacle = document.createElement('div'); + topObstacle.className = 'obstacle'; + topObstacle.style.height = gapPosition + 'px'; + topObstacle.style.top = '0'; + gameContainer.appendChild(topObstacle); + + const bottomObstacle = document.createElement('div'); + bottomObstacle.className = 'obstacle'; + bottomObstacle.style.height = (gameContainer.clientHeight - gapPosition - gapHeight) + 'px'; + bottomObstacle.style.bottom = '0'; + gameContainer.appendChild(bottomObstacle); + + obstacles.push(topObstacle, bottomObstacle); + + let position = gameContainer.clientWidth; + const moveObstacles = setInterval(() => { + if (!gameActive) { + clearInterval(moveObstacles); + return; + } + + position -= 1; // Much slower obstacle movement + topObstacle.style.right = gameContainer.clientWidth - position + 'px'; + bottomObstacle.style.right = gameContainer.clientWidth - position + 'px'; + + if (position < -80) { + topObstacle.remove(); + bottomObstacle.remove(); + obstacles = obstacles.filter(obs => obs !== topObstacle && obs !== bottomObstacle); + clearInterval(moveObstacles); + score++; + scoreDisplay.textContent = `Score: ${score}`; + } + }, 20); +} + +function gameOver() { + gameActive = false; + clearInterval(gameLoop); + gameOverDisplay.style.display = 'block'; +} + +gameContainer.addEventListener('click', () => { + if (gameActive) { + velocity = jump; + } +}); + +// Add continuous floating while mouse/finger is held down +let floatInterval; +gameContainer.addEventListener('mousedown', () => { + if (gameActive) { + floatInterval = setInterval(() => { + velocity = Math.max(velocity, -2); // Gentle floating + }, 50); + } +}); + +gameContainer.addEventListener('mouseup', () => { + clearInterval(floatInterval); +}); + +gameContainer.addEventListener('touchstart', (e) => { + e.preventDefault(); + if (gameActive) { + floatInterval = setInterval(() => { + velocity = Math.max(velocity, -2); + }, 50); + } +}); + +gameContainer.addEventListener('touchend', () => { + clearInterval(floatInterval); +}); + +startButton.addEventListener('click', startGame); \ No newline at end of file diff --git a/HTML+CSS+JS Apps/Flappy Block/style.css b/HTML+CSS+JS Apps/Flappy Block/style.css new file mode 100644 index 0000000..91303b1 --- /dev/null +++ b/HTML+CSS+JS Apps/Flappy Block/style.css @@ -0,0 +1,79 @@ +body { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + margin: 0; + background: linear-gradient(45deg, #FF61D8, #6B5DFF); + font-family: Arial, sans-serif; +} +#game-container { + width: 500px; + height: 600px; + position: relative; + overflow: hidden; + background: linear-gradient(180deg, #00C6FF, #0072FF); + border: 3px solid #ffffff; + border-radius: 10px; + box-shadow: 0 0 20px rgba(0,0,0,0.3); +} +#block { + width: 60px; + height: 60px; + background: linear-gradient(45deg, #FF5E5E, #FFB459); + position: absolute; + left: 100px; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0,0,0,0.2); +} +.obstacle { + width: 80px; + background: linear-gradient(180deg, #00FF87, #60EFFF); + position: absolute; + right: -80px; + border: 2px solid rgba(255,255,255,0.5); + opacity: 0.8; +} +#score { + font-size: 32px; + color: white; + margin: 20px; + text-shadow: 2px 2px 4px rgba(0,0,0,0.3); +} +#start-button { + padding: 15px 30px; + font-size: 24px; + background: linear-gradient(45deg, #FF61D8, #6B5DFF); + color: white; + border: none; + border-radius: 25px; + cursor: pointer; + margin: 15px; + box-shadow: 0 4px 15px rgba(0,0,0,0.2); + transition: transform 0.2s; +} +#start-button:hover { + transform: scale(1.05); +} +#game-over { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: linear-gradient(45deg, rgba(0,0,0,0.8), rgba(0,0,0,0.9)); + color: white; + padding: 30px; + border-radius: 15px; + text-align: center; + display: none; + font-size: 24px; + box-shadow: 0 0 20px rgba(0,0,0,0.5); +} +#instructions { + color: white; + text-align: center; + margin-bottom: 10px; + font-size: 18px; + text-shadow: 1px 1px 2px rgba(0,0,0,0.3); +} \ No newline at end of file