From c300a4e6aece6b73379d97b9baac6f2e01f07652 Mon Sep 17 00:00:00 2001 From: Sangram Das <121278559+Sangram03@users.noreply.github.com> Date: Tue, 22 Oct 2024 18:19:38 +0530 Subject: [PATCH] NEW GAMING FOLDER --- index.html | 25 +++++++ script.js | 203 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 59 ++++++++++++++++ 3 files changed, 287 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..48772dd --- /dev/null +++ b/index.html @@ -0,0 +1,25 @@ + + + + + + Shooting Game with Control Panel + + + +
+ +
Score: 0
+
Lives: 3
+ + + +
+ + + +
+
+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..4be35cb --- /dev/null +++ b/script.js @@ -0,0 +1,203 @@ +// script.js +const canvas = document.getElementById('gameCanvas'); +const ctx = canvas.getContext('2d'); + +canvas.width = 400; +canvas.height = 500; + +// Spaceship variables +let spaceshipWidth = 40; +let spaceshipHeight = 20; +let spaceshipX = (canvas.width - spaceshipWidth) / 2; +let spaceshipY = canvas.height - spaceshipHeight - 10; + +// Movement controls +let rightPressed = false; +let leftPressed = false; + +// Bullets and enemies +let bullets = []; +let enemies = []; +let bulletSpeed = 5; +let enemySpeed = 2; +let enemySpawnInterval = 1000; // Spawn an enemy every second + +let score = 0; +let lives = 3; +let gameOver = false; + +// Control buttons +const leftButton = document.getElementById('move-left'); +const rightButton = document.getElementById('move-right'); +const shootButton = document.getElementById('shoot'); + +// Add button event listeners +leftButton.addEventListener('mousedown', () => moveLeft()); +rightButton.addEventListener('mousedown', () => moveRight()); +shootButton.addEventListener('mousedown', shootBullet); + +// Stop movement when button is released +leftButton.addEventListener('mouseup', stopMove); +rightButton.addEventListener('mouseup', stopMove); + +// Event listeners for keyboard controls +document.addEventListener("keydown", keyDownHandler, false); +document.addEventListener("keyup", keyUpHandler, false); + +// Keyboard controls +function keyDownHandler(e) { + if (e.key === "Right" || e.key === "ArrowRight") { + rightPressed = true; + } else if (e.key === "Left" || e.key === "ArrowLeft") { + leftPressed = true; + } +} + +function keyUpHandler(e) { + if (e.key === "Right" || e.key === "ArrowRight") { + rightPressed = false; + } else if (e.key === "Left" || e.key === "ArrowLeft") { + leftPressed = false; + } +} + +// Functions for control buttons +function moveLeft() { + leftPressed = true; +} + +function moveRight() { + rightPressed = true; +} + +function stopMove() { + leftPressed = false; + rightPressed = false; +} + +// Draw the spaceship +function drawSpaceship() { + ctx.beginPath(); + ctx.rect(spaceshipX, spaceshipY, spaceshipWidth, spaceshipHeight); + ctx.fillStyle = "#00ff00"; + ctx.fill(); + ctx.closePath(); +} + +// Shoot bullets +function shootBullet() { + bullets.push({ + x: spaceshipX + spaceshipWidth / 2 - 2, + y: spaceshipY, + width: 4, + height: 10 + }); +} + +// Draw bullets +function drawBullets() { + bullets.forEach((bullet, index) => { + ctx.beginPath(); + ctx.rect(bullet.x, bullet.y, bullet.width, bullet.height); + ctx.fillStyle = "#ff0"; + ctx.fill(); + ctx.closePath(); + + // Move bullets + bullet.y -= bulletSpeed; + + // Remove off-screen bullets + if (bullet.y < 0) { + bullets.splice(index, 1); + } + }); +} + +// Spawn enemies +function spawnEnemy() { + enemies.push({ + x: Math.random() * (canvas.width - 30), + y: 0, + width: 30, + height: 30 + }); +} + +// Draw enemies +function drawEnemies() { + enemies.forEach((enemy, index) => { + ctx.beginPath(); + ctx.rect(enemy.x, enemy.y, enemy.width, enemy.height); + ctx.fillStyle = "#ff0000"; + ctx.fill(); + ctx.closePath(); + + // Move enemies + enemy.y += enemySpeed; + + // Check if the enemy reaches the bottom + if (enemy.y + enemy.height > canvas.height) { + lives--; + document.getElementById("lives").textContent = `Lives: ${lives}`; + enemies.splice(index, 1); + + if (lives <= 0) { + endGame(); + } + } + + // Check for collisions with bullets + bullets.forEach((bullet, bulletIndex) => { + if (bullet.x < enemy.x + enemy.width && + bullet.x + bullet.width > enemy.x && + bullet.y < enemy.y + enemy.height && + bullet.y + bullet.height > enemy.y) { + + // Remove the enemy and the bullet + enemies.splice(index, 1); + bullets.splice(bulletIndex, 1); + score++; + document.getElementById("score").textContent = `Score: ${score}`; + } + }); + }); +} + +// End the game +function endGame() { + gameOver = true; + document.getElementById("game-over").classList.remove('hidden'); + document.getElementById("final-score").textContent = score; + document.getElementById("score").classList.add('hidden'); + document.getElementById("lives").classList.add('hidden'); +} + +// Game loop +function draw() { + if (!gameOver) { + ctx.clearRect(0, 0, canvas.width, canvas.height); + + // Draw and move spaceship + drawSpaceship(); + if (rightPressed && spaceshipX < canvas.width - spaceshipWidth) { + spaceshipX += 7; + } else if (leftPressed && spaceshipX > 0) { + spaceshipX -= 7; + } + + // Draw bullets and enemies + drawBullets(); + drawEnemies(); + + requestAnimationFrame(draw); + } +} + +// Spawn enemies periodically +setInterval(() => { + if (!gameOver) { + spawnEnemy(); + } +}, enemySpawnInterval); + +draw(); diff --git a/style.css b/style.css new file mode 100644 index 0000000..cdd86d7 --- /dev/null +++ b/style.css @@ -0,0 +1,59 @@ +/* style.css */ +body { + margin: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #222; + font-family: Arial, sans-serif; +} + +.game-container { + position: relative; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +#gameCanvas { + border: 2px solid white; + background-color: #000; +} + +#score, #lives { + margin-top: 10px; + font-size: 24px; + color: white; +} + +#game-over { + font-size: 28px; + color: red; + margin-top: 20px; +} + +.hidden { + display: none; +} + +/* Control Panel Styling */ +.control-panel { + margin-top: 20px; +} + +.control-panel button { + font-size: 18px; + padding: 10px 20px; + margin: 5px; + background-color: #555; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +.control-panel button:hover { + background-color: #777; +}