diff --git a/SinglePlayer - Games/Catch_and_avoid_game/index.html b/SinglePlayer - Games/Catch_and_avoid_game/index.html new file mode 100644 index 00000000..3fbf8027 --- /dev/null +++ b/SinglePlayer - Games/Catch_and_avoid_game/index.html @@ -0,0 +1,27 @@ + + + + + + 2D Multi-Level Game + + + +
+
+

Welcome to the Game

+ + + + +
+
+ + + + diff --git a/SinglePlayer - Games/Catch_and_avoid_game/script.js b/SinglePlayer - Games/Catch_and_avoid_game/script.js new file mode 100644 index 00000000..3713ef42 --- /dev/null +++ b/SinglePlayer - Games/Catch_and_avoid_game/script.js @@ -0,0 +1,153 @@ +// script.js +const canvas = document.getElementById('gameCanvas'); +const ctx = canvas.getContext('2d'); +canvas.width = 800; +canvas.height = 600; + +let player = { x: 375, y: 550, width: 50, height: 50, speed: 5, color: '#61dafb' }; +let items = []; +let obstacles = []; +let score = 0; +let level = 1; +let missed = 0; +let gameOver = false; +let gameStarted = false; + +document.getElementById('login-form').addEventListener('submit', function(e) { + e.preventDefault(); + document.getElementById('login-container').style.display = 'none'; + document.getElementById('game-container').style.display = 'block'; + gameStarted = true; + update(); +}); + +function drawPlayer() { + ctx.fillStyle = player.color; + ctx.fillRect(player.x, player.y, player.width, player.height); +} + +function createItem() { + const x = Math.random() * (canvas.width - 20); + items.push({ x, y: 0, width: 20, height: 20, color: '#4caf50' }); +} + +function createObstacle() { + const x = Math.random() * (canvas.width - 20); + obstacles.push({ x, y: 0, width: 20, height: 20, color: '#f44336' }); +} + +function createSpeedItem() { + const x = Math.random() * (canvas.width - 20); + items.push({ x, y: 0, width: 20, height: 20, color: '#ffeb3b', type: 'speed' }); +} + +function drawItems() { + items.forEach(item => { + ctx.fillStyle = item.color; + ctx.fillRect(item.x, item.y, item.width, item.height); + item.y += 3; + }); +} + +function drawObstacles() { + obstacles.forEach(obstacle => { + ctx.fillStyle = obstacle.color; + ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height); + obstacle.y += 5; + }); +} + +function update() { + if (!gameStarted || gameOver) return; + ctx.clearRect(0, 0, canvas.width, canvas.height); + drawPlayer(); + drawItems(); + drawObstacles(); + checkCollisions(); + requestAnimationFrame(update); +} + +function checkCollisions() { + items = items.filter(item => { + if (item.y > canvas.height) { + missed++; + document.getElementById('missed').textContent = missed; + if (missed > 3) { + gameOver = true; + alert(`Game Over! You missed more than 3 blocks. Your score: ${score}`); + } + return false; + } + if (isColliding(player, item)) { + if (item.type === 'speed') { + player.speed += 2; + setTimeout(() => player.speed -= 2, 5000); + } else { + score++; + document.getElementById('score').textContent = score; + player.color = '#' + Math.floor(Math.random() * 16777215).toString(16); + } + return false; + } + return true; + }); + + obstacles = obstacles.filter(obstacle => { + if (obstacle.y > canvas.height) return false; + if (isColliding(player, obstacle)) { + gameOver = true; + alert(`Game Over! Your score: ${score}`); + return false; + } + return true; + }); + + if (score >= 10 && level === 1) { + nextLevel(); + } else if (score >= 20 && level === 2) { + nextLevel(); + } +} + +function isColliding(rect1, rect2) { + return rect1.x < rect2.x + rect2.width && + rect1.x + rect1.width > rect2.x && + rect1.y < rect2.y + rect2.height && + rect1.height + rect1.y > rect2.y; +} + +function nextLevel() { + level++; + document.getElementById('level').textContent = level; + if (level === 2) { + items = []; + obstacles = []; + player.speed = 5; + createNewChallenge(); + } else if (level === 3) { + items = []; + obstacles = []; + startMiniGame(); + } +} + +function createNewChallenge() { + setInterval(createItem, 800); + setInterval(createObstacle, 1500); + setInterval(createSpeedItem, 8000); +} + +function startMiniGame() { + alert("Welcome to Level 3! Survive the incoming obstacles!"); + player.color = '#ff6347'; + setInterval(createObstacle, 1000); +} + +document.addEventListener('keydown', e => { + if (e.key === 'ArrowLeft' && player.x > 0) player.x -= player.speed; + if (e.key === 'ArrowRight' && player.x < canvas.width - player.width) player.x += player.speed; +}); + +setInterval(createItem, 1000); +setInterval(createObstacle, 2000); +setInterval(createSpeedItem, 10000); diff --git a/SinglePlayer - Games/Catch_and_avoid_game/styles.css b/SinglePlayer - Games/Catch_and_avoid_game/styles.css new file mode 100644 index 00000000..5eecdab4 --- /dev/null +++ b/SinglePlayer - Games/Catch_and_avoid_game/styles.css @@ -0,0 +1,107 @@ +/* styles.css */ +body { + margin: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background: linear-gradient(135deg, #1f1c2c, #928dab); + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + overflow: hidden; +} + +#login-container { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + background: rgba(0, 0, 0, 0.8); + padding: 40px; + border-radius: 10px; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); + animation: fadeIn 1s ease-in-out; +} + +#login-form { + display: flex; + flex-direction: column; + gap: 10px; + text-align: center; +} + +#login-form h2 { + color: #61dafb; + margin-bottom: 20px; +} + +#login-form input { + padding: 10px; + border: none; + border-radius: 5px; + font-size: 16px; +} + +#login-form button { + padding: 10px; + border: none; + border-radius: 5px; + background-color: #61dafb; + color: #20232a; + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +#login-form button:hover { + background-color: #21a1f1; +} + +#game-container { + position: relative; + border: 5px solid #61dafb; + background-color: #20232a; + width: 800px; + height: 600px; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); + animation: glow 2s infinite; +} + +#gameCanvas { + display: block; + width: 100%; + height: 100%; +} + +#score-board, #level-board, #missed-board { + position: absolute; + top: 10px; + color: #61dafb; + font-size: 24px; + background: rgba(0, 0, 0, 0.5); + padding: 10px; + border-radius: 8px; +} + +#score-board { + left: 10px; +} + +#level-board { + right: 10px; +} + +#missed-board { + right: 10px; + top: 50px; +} + +@keyframes glow { + 0% { box-shadow: 0 0 5px #61dafb; } + 50% { box-shadow: 0 0 20px #61dafb; } + 100% { box-shadow: 0 0 5px #61dafb; } +} + +@keyframes fadeIn { + 0% { opacity: 0; } + 100% { opacity: 1; } +}