diff --git a/Games/Tower_Defence_Game/README.md b/Games/Tower_Defence_Game/README.md new file mode 100644 index 0000000000..232e40e89b --- /dev/null +++ b/Games/Tower_Defence_Game/README.md @@ -0,0 +1,94 @@ +# Tower Defense Game + +## Introduction + +This is a simple tower defense game where players place towers to defend against waves of enemies. The objective is to prevent enemies from reaching the end of the path. The player loses if more than 3 enemies reach the end. + +## How to Play + +1. **Start the Game**: + - Open `index.html` in your web browser. + +2. **Select a Tower**: + - On the left sidebar, there are buttons to select different types of towers: + - **Basic Tower**: A standard tower with balanced stats. + - **Sniper Tower**: A tower with long range and high damage but slower attack speed. + - **Rapid Fire Tower**: A tower with a high attack speed but lower damage. + - **Splash Damage Tower**: A tower that deals damage in an area, useful against groups of enemies. + +3. **Place a Tower**: + - After selecting a tower, click on the desired location on the canvas to place it. + +4. **Gameplay**: + - Enemies will start spawning from the left and move towards the right. + - Towers will automatically attack enemies within their range. + - You earn points for each enemy defeated. + - The game progresses in levels, with each level introducing more or tougher enemies. + +5. **Score and Lives**: + - The scoreboard on the left shows your current score, lives, and level. + - You start with 3 lives. Each enemy that reaches the end of the path reduces your lives by 1. + - If your lives reach 0, the game is over. + +## Game Elements + +### Towers + +1. **Basic Tower**: + - Range: 100 units + - Damage: 10 + - Attack Speed: 60 frames + +2. **Sniper Tower**: + - Range: 200 units + - Damage: 30 + - Attack Speed: 120 frames + +3. **Rapid Fire Tower**: + - Range: 80 units + - Damage: 5 + - Attack Speed: 20 frames + +4. **Splash Damage Tower**: + - Range: 100 units + - Damage: 20 + - Attack Speed: 90 frames + +### Enemies + +1. **Basic Enemy**: + - Health: 100 + - Speed: 1 unit/frame + - Radius: 10 units + +2. **Fast Enemy**: + - Health: 50 + - Speed: 2 units/frame + - Radius: 10 units + +3. **Tank Enemy**: + - Health: 300 + - Speed: 0.5 units/frame + - Radius: 10 units + +4. **Flying Enemy**: + - Health: 70 + - Speed: 1.5 units/frame + - Radius: 5 units + +## Development + +### Prerequisites + +- A modern web browser (Google Chrome, Mozilla Firefox, etc.) + +### Files + +- `index.html`: The main HTML file. +- `styles.css`: The CSS file for styling the game. +- `game.js`: The JavaScript file containing the game logic. + +### Running the Game + +1. Download or clone the repository. +2. Open `index.html` in a web browser. diff --git a/Games/Tower_Defence_Game/Tower_Game.png b/Games/Tower_Defence_Game/Tower_Game.png new file mode 100644 index 0000000000..9a1838947c Binary files /dev/null and b/Games/Tower_Defence_Game/Tower_Game.png differ diff --git a/Games/Tower_Defence_Game/game.js b/Games/Tower_Defence_Game/game.js new file mode 100644 index 0000000000..d229387181 --- /dev/null +++ b/Games/Tower_Defence_Game/game.js @@ -0,0 +1,306 @@ +const canvas = document.getElementById('gameCanvas'); +const ctx = canvas.getContext('2d'); +canvas.width = 800; +canvas.height = 600; + +let selectedTowerType = null; +let towers = []; +let enemies = []; +let projectiles = []; +let frame = 0; +let score = 0; +let lives = 3; +let level = 1; +let gameOver = false; + +// Set the selected tower type +function setTowerType(type) { + selectedTowerType = type; + console.log(`Selected Tower Type: ${selectedTowerType}`); +} + +// Handle canvas click for placing towers +canvas.addEventListener('click', (event) => { + if (selectedTowerType) { + const rect = canvas.getBoundingClientRect(); + const x = event.clientX - rect.left; + const y = event.clientY - rect.top; + towers.push(new Tower(x, y, selectedTowerType)); + console.log(`Placed ${selectedTowerType} at (${x}, ${y})`); + selectedTowerType = null; // Reset the selected tower type after placing + } +}); + +// Show slide +function showSlide(slideNumber) { + const slides = document.querySelectorAll('.slide'); + slides.forEach(slide => slide.classList.remove('active')); + document.getElementById(`slide-${slideNumber}`).classList.add('active'); +} + +// Start game and hide slides +function startGame() { + document.getElementById('slides').style.display = 'none'; + document.getElementById('game-info').style.display = 'flex'; + init(); +} + +// Restart game +function restartGame() { + document.getElementById('game-over').classList.add('hidden'); + score = 0; + lives = 3; + level = 1; + gameOver = false; + towers = []; + enemies = []; + projectiles = []; + frame = 0; + document.getElementById('score').innerText = score; + document.getElementById('lives').innerText = lives; + document.getElementById('level').innerText = level; + init(); +} + +// Tower Types +const towerTypes = { + BASIC: 'Basic Tower', + SNIPER: 'Sniper Tower', + RAPID_FIRE: 'Rapid Fire Tower', + SPLASH_DAMAGE: 'Splash Damage Tower' +}; + +// Enemy Types +const enemyTypes = { + BASIC: 'Basic Enemy', + FAST: 'Fast Enemy', + TANK: 'Tank Enemy', + FLYING: 'Flying Enemy' +}; + +// Tower class +class Tower { + constructor(x, y, type) { + this.x = x; + this.y = y; + this.type = type; + this.range = 100; + this.attackSpeed = 60; // Frames per attack + this.damage = 10; + this.lastAttackFrame = 0; + + if (type === towerTypes.SNIPER) { + this.range = 200; + this.damage = 30; + this.attackSpeed = 120; + } else if (type === towerTypes.RAPID_FIRE) { + this.range = 80; + this.damage = 5; + this.attackSpeed = 20; + } else if (type === towerTypes.SPLASH_DAMAGE) { + this.range = 100; + this.damage = 20; + this.attackSpeed = 90; + } + } + + draw() { + if (this.type === towerTypes.BASIC) { + ctx.fillStyle = 'blue'; + ctx.beginPath(); + ctx.arc(this.x, this.y, 15, 0, Math.PI * 2); + ctx.closePath(); + ctx.fill(); + } else if (this.type === towerTypes.SNIPER) { + ctx.fillStyle = 'green'; + ctx.fillRect(this.x - 15, this.y - 15, 30, 30); + } else if (this.type === towerTypes.RAPID_FIRE) { + ctx.fillStyle = 'yellow'; + ctx.beginPath(); + ctx.moveTo(this.x, this.y - 15); + ctx.lineTo(this.x + 15, this.y + 15); + ctx.lineTo(this.x - 15, this.y + 15); + ctx.closePath(); + ctx.fill(); + } else if (this.type === towerTypes.SPLASH_DAMAGE) { + ctx.fillStyle = 'red'; + ctx.beginPath(); + ctx.arc(this.x, this.y, 15, 0, Math.PI * 2); + ctx.closePath(); + ctx.fill(); + ctx.fillStyle = 'orange'; + ctx.beginPath(); + ctx.arc(this.x, this.y, 10, 0, Math.PI * 2); + ctx.closePath(); + ctx.fill(); + } + } + + attack() { + if (frame - this.lastAttackFrame >= this.attackSpeed) { + this.lastAttackFrame = frame; + let target = null; + + for (let enemy of enemies) { + const distance = Math.hypot(this.x - enemy.x, this.y - enemy.y); + if (distance <= this.range) { + target = enemy; + break; + } + } + + if (target) { + projectiles.push(new Projectile(this.x, this.y, target, this.damage, this.type)); + } + } + } +} + +// Enemy class +class Enemy { + constructor(x, y, type) { + this.x = x; + this.y = y; + this.type = type; + this.health = 100; + this.speed = 1; + this.radius = 10; + + if (type === enemyTypes.FAST) { + this.health = 50; + this.speed = 2; + } else if (type === enemyTypes.TANK) { + this.health = 300; + this.speed = 0.5; + } else if (type === enemyTypes.FLYING) { + this.health = 70; + this.speed = 1.5; + this.radius = 5; + } + } + + draw() { + ctx.fillStyle = 'red'; + ctx.beginPath(); + ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); + ctx.closePath(); + ctx.fill(); + } + + update() { + this.x += this.speed; + + // Check if the enemy reaches the end of the canvas (or designated exit point) + if (this.x >= canvas.width) { + this.x = canvas.width; + lives -= 1; + this.health = 0; + if (lives <= 0) { + endGame(); + } + } + } +} + +// Projectile class +class Projectile { + constructor(x, y, target, damage, type) { + this.x = x; + this.y = y; + this.target = target; + this.damage = damage; + this.type = type; + this.speed = 4; + } + + draw() { + ctx.fillStyle = 'black'; + ctx.beginPath(); + ctx.arc(this.x, this.y, 5, 0, Math.PI * 2); + ctx.closePath(); + ctx.fill(); + } + + update() { + const angle = Math.atan2(this.target.y - this.y, this.target.x - this.x); + this.x += this.speed * Math.cos(angle); + this.y += this.speed * Math.sin(angle); + + // Check if the projectile hits the target + const distance = Math.hypot(this.x - this.target.x, this.y - this.target.y); + if (distance < this.target.radius) { + this.target.health -= this.damage; + if (this.target.health <= 0) { + const index = enemies.indexOf(this.target); + if (index > -1) { + enemies.splice(index, 1); + score += 10; + document.getElementById('score').innerText = score; + } + } + const index = projectiles.indexOf(this); + if (index > -1) { + projectiles.splice(index, 1); + } + } + } +} + +function init() { + updateGameInfo(); + spawnEnemies(); + animate(); +} + +function updateGameInfo() { + document.getElementById('score').innerText = score; + document.getElementById('lives').innerText = lives; + document.getElementById('level').innerText = level; +} + +function endGame() { + gameOver = true; + document.getElementById('game-over').classList.remove('hidden'); + document.getElementById('game-over').classList.add('visible'); +} + +function spawnEnemies() { + const spawnInterval = 60; // Adjust this value for difficulty + if (frame % spawnInterval === 0) { + const type = Object.values(enemyTypes)[Math.floor(Math.random() * Object.values(enemyTypes).length)]; + enemies.push(new Enemy(0, Math.random() * canvas.height, type)); + } +} + +function animate() { + if (gameOver) return; + frame++; + ctx.clearRect(0, 0, canvas.width, canvas.height); + + // Draw and update towers + towers.forEach(tower => { + tower.draw(); + tower.attack(); + }); + + // Draw and update enemies + enemies.forEach(enemy => { + enemy.draw(); + enemy.update(); + }); + + // Draw and update projectiles + projectiles.forEach(projectile => { + projectile.draw(); + projectile.update(); + }); + + // Check for next level + if (enemies.length === 0) { + level++; + document.getElementById('level').innerText = level; + spawnEnemies(); + } + + requestAnimationFrame(animate); +} diff --git a/Games/Tower_Defence_Game/index.html b/Games/Tower_Defence_Game/index.html new file mode 100644 index 0000000000..fe5acd8071 --- /dev/null +++ b/Games/Tower_Defence_Game/index.html @@ -0,0 +1,44 @@ + + + + + + Tower Defense Game + + + +
+
+
+

Welcome to Tower Defense Game

+

Defend your base by placing towers strategically to defeat incoming enemies.

+ +
+
+

Select Your Tower

+
+ + + + +
+ + +
+
+
+
+

Level: 1

+

Score: 0

+

Lives: 3

+
+ +
+ +
+ + + diff --git a/Games/Tower_Defence_Game/styles.css b/Games/Tower_Defence_Game/styles.css new file mode 100644 index 0000000000..4219507ae9 --- /dev/null +++ b/Games/Tower_Defence_Game/styles.css @@ -0,0 +1,182 @@ +body { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; + background: linear-gradient(to bottom, #2c3e50, #3498db); + color: white; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +#game-container { + text-align: center; + position: relative; + width: 800px; + height: 600px; +} + +#slides { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.8); + display: flex; + justify-content: center; + align-items: center; + z-index: 2; +} + +.slide { + display: none; + width: 100%; + text-align: center; +} + +.slide.active { + display: block; +} + +#controls { + display: flex; + justify-content: center; + margin-bottom: 10px; +} + +#controls button { + margin: 0 5px; + padding: 10px; + background-color: #007BFF; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +#controls button:hover { + background-color: #0056b3; +} + +canvas { + background-color: #f3f3f3; + border: 2px solid #333; +} + +button { + padding: 10px 20px; + margin: 10px; + background-color: #007BFF; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} + +#game-info { + position: absolute; + top: 0; + left: 0; + width: 100%; + display: flex; + justify-content: space-between; + padding: 10px; +} + +#scoreboard { + display: flex; + flex-direction: column; + align-items: flex-start; +} + +#game-over { + display: none; + flex-direction: column; + align-items: center; +} + +#game-over.hidden { + display: none; +} + +#game-over.visible { + display: flex; +} +body { + font-family: Arial, sans-serif; + display: flex; + margin: 0; + padding: 0; +} + +.sidebar { + width: 200px; + padding: 20px; + background-color: #f4f4f4; + box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); +} + +.sidebar h2 { + color: #333; +} + +.sidebar button { + width: 100%; + padding: 10px; + margin: 5px 0; + background-color: #007bff; + color: white; + border: none; + cursor: pointer; +} + +.sidebar button:hover { + background-color: #0056b3; +} + +.sidebar p { + color: #333; + margin: 10px 0; +} + +.sidebar p span { + color: #ff0000; /* Default color for spans */ +} + +#level { + color: #ff00ff; /* Magenta for level */ +} + +#score { + color: #00ff00; /* Green for score */ +} + +#lives { + color: #0000ff; /* Blue for lives */ +} + +#gameCanvas { + border: 1px solid black; + background: linear-gradient(to right, #99ccff, #ffcc99); + flex-grow: 1; +} + +#game-over { + color: red; + font-size: 24px; + display: none; +} + +.visible { + display: block; +} + +.hidden { + display: none; +} diff --git a/README.md b/README.md index 52c5bd6c83..cb89517586 100644 --- a/README.md +++ b/README.md @@ -337,11 +337,18 @@ This repository also provides one such platforms where contributers come over an |[Turn_on_the_light](https://github.com/kunjgit/GameZone/tree/main/Games/Turn_on_the_light) | | [Tic-Tac-Toe Game](https://github.com/kunjgit/GameZone/tree/main/Games/Tic-Tac-Toe) | + +| [Dsa_quiz_game](https://github.com/kunjgit/GameZone/tree/main/Games/Dsa_quiz_game) | +| [Gravity_Simulation_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Gravity_Simulation_Game) | + | [Rapid_click_frenzy](https://github.com/kunjgit/GameZone/tree/main/Games/Rapid_click_frenzy) | [Ball_in_Maze](https://github.com/kunjgit/GameZone/tree/main/Games/Ball_in_Maze) | |[Dsa_quiz_game](https://github.com/kunjgit/GameZone/tree/main/Games/Dsa_quiz_game) | | [Gravity_Simulation_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Gravity_Simulation_Game) + | [Anagarm-Word-Game](https://github.com/kunjgit/GameZone/tree/main/Games/Anagarm-Word-Game) | +| [Brick Buster Game](https://github.com/kunjgit/GameZone/tree/main/Games/Brick Buster) | +| [Rapid_click_frenzy](https://github.com/kunjgit/GameZone/tree/main/Games/Rapid_click_frenzy) | [Alphabet-and-Vowels](https://github.com/kunjgit/GameZone/tree/main/Games/Alphabet-and-Vowels) | | [Taash_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Taash_Game)| @@ -349,17 +356,16 @@ This repository also provides one such platforms where contributers come over an | [Brick Buster Game](https://github.com/kunjgit/GameZone/tree/main/Games/Brick%20Buster) | | [Penguins Can't Fly](https://github.com/Will2Jacks/GameZoneForked/tree/Task/Games/Penguins_Can't_Fly) | + | [Intellect Quest](https://github.com/Will2Jacks/GameZoneForked/tree/Task/Games/Intellect_Quest) | -| [Taash_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Taash_Game) | -| [Intellect Quest](https://github.com/Will2Jacks/GameZoneForked/tree/Task/Games/Intellect_Quest) | -| [Taash_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Taash_Game) | | [Number_Guessing_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Number_Guessing_Game) | | [Tower_Block_Game](https://github.com/Saipradyumnagoud/GameZone/tree/main/Games/Tower_Block_Game) | | [Modulo_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Modulo_Game) | +|[Penguins Can't Fly](https://github.com/Will2Jacks/GameZoneForked/tree/Task/Games/Penguins_Can't_Fly)| | [Block_Ninja] (https://github.com/kunjgit/GameZone/tree/main/Games/Block_Ninja) | | [Disney_Trivia](https://github.com/manmita/GameZone/tree/Disney_Trivia/Games/Disney_Trivia)| |[Harmony_Mixer](https://github.com/kunjgit/GameZone/tree/main/Games/Harmony_Mixer)| - +|[Tower Defence Game](https://github.com/Will2Jacks/GameZoneForked/tree/Task/Games/Tower_Defence_Game)| diff --git a/assets/images/Tower_Game.png b/assets/images/Tower_Game.png new file mode 100644 index 0000000000..9a1838947c Binary files /dev/null and b/assets/images/Tower_Game.png differ