Top-Down Shooter Game

Sure! Let’s create a more **complex and heavy game** using HTML, CSS, and JavaScript. This time, we’ll build a **Top-Down Shooter Game** where the player controls a spaceship, shoots enemies, and survives as long as possible. This game will include:

- Player movement (WASD or arrow keys).
- Shooting mechanics.
- Enemy spawning and AI.
- Collision detection.
- Score tracking.
- Increasing difficulty over time.
---

### **Top-Down Shooter Game**

#### **HTML (index.html)**
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Top-Down Shooter</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Top-Down Shooter</h1>
  <p>Survive as long as you can! Use WASD or Arrow Keys to move, and Space to shoot.</p>
  <div id="game-container">
    <div id="player"></div>
  </div>
  <p>Score: <span id="score">0</span></p>
  <p>Lives: <span id="lives">3</span></p>
  <button id="reset-button">Reset</button>
  <script src="script.js"></script>
</body>
</html>
```

---

#### **CSS (styles.css)**
```css
body {
  font-family: Arial, sans-serif;
  text-align: center;
  background-color: #f0f0f0;
  margin: 0;
  padding: 20px;
}

#game-container {
  position: relative;
  width: 800px;
  height: 600px;
  background-color: #000;
  border: 2px solid #fff;
  margin: 20px auto;
  overflow: hidden;
}

#player {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #00f;
  border-radius: 50%;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.bullet {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #ff0;
  border-radius: 50%;
}

.enemy {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #f00;
  border-radius: 50%;
}

#reset-button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  margin-top: 20px;
}

#reset-button:hover {
  background-color: #0056b3;
}
```

---

#### **JavaScript (script.js)**
```javascript
const gameContainer = document.getElementById('game-container');
const player = document.getElementById('player');
const scoreDisplay = document.getElementById('score');
const livesDisplay = document.getElementById('lives');
const resetButton = document.getElementById('reset-button');

let playerX = 380;
let playerY = 540;
let score = 0;
let lives = 3;
let bullets = [];
let enemies = [];
let gameInterval;
let enemySpawnInterval;

// Move player
document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowLeft' || e.key === 'a') playerX = Math.max(playerX - 10, 0);
  if (e.key === 'ArrowRight' || e.key === 'd') playerX = Math.min(playerX + 10, 760);
  if (e.key === 'ArrowUp' || e.key === 'w') playerY = Math.max(playerY - 10, 0);
  if (e.key === 'ArrowDown' || e.key === 's') playerY = Math.min(playerY + 10, 560);
  player.style.left = `${playerX}px`;
  player.style.top = `${playerY}px`;
});

// Shoot bullet
document.addEventListener('keydown', (e) => {
  if (e.key === ' ') {
    const bullet = document.createElement('div');
    bullet.classList.add('bullet');
    bullet.style.left = `${playerX + 15}px`;
    bullet.style.top = `${playerY}px`;
    gameContainer.appendChild(bullet);
    bullets.push(bullet);
  }
});

// Move bullets
function moveBullets() {
  bullets.forEach((bullet, index) => {
    const bulletY = parseInt(bullet.style.top);
    if (bulletY > 0) {
      bullet.style.top = `${bulletY - 10}px`;
    } else {
      bullet.remove();
      bullets.splice(index, 1);
    }
  });
}

// Spawn enemies
function spawnEnemy() {
  const enemy = document.createElement('div');
  enemy.classList.add('enemy');
  enemy.style.left = `${Math.random() * 770}px`;
  enemy.style.top = `0px`;
  gameContainer.appendChild(enemy);
  enemies.push(enemy);
}

// Move enemies
function moveEnemies() {
  enemies.forEach((enemy, index) => {
    const enemyY = parseInt(enemy.style.top);
    if (enemyY < 600) {
      enemy.style.top = `${enemyY + 5}px`;
    } else {
      enemy.remove();
      enemies.splice(index, 1);
      lives--;
      livesDisplay.textContent = lives;
      if (lives <= 0) endGame();
    }
  });
}

// Check collisions
function checkCollisions() {
  bullets.forEach((bullet, bulletIndex) => {
    const bulletRect = bullet.getBoundingClientRect();
    enemies.forEach((enemy, enemyIndex) => {
      const enemyRect = enemy.getBoundingClientRect();
      if (
        bulletRect.left < enemyRect.right &&
        bulletRect.right > enemyRect.left &&
        bulletRect.top < enemyRect.bottom &&
        bulletRect.bottom > enemyRect.top
      ) {
        bullet.remove();
        bullets.splice(bulletIndex, 1);
        enemy.remove();
        enemies.splice(enemyIndex, 1);
        score++;
        scoreDisplay.textContent = score;
      }
    });
  });
}

// End the game
function endGame() {
  clearInterval(gameInterval);
  clearInterval(enemySpawnInterval);
  alert(`Game over! Your score: ${score}`);
  resetGame();
}

// Reset the game
function resetGame() {
  playerX = 380;
  playerY = 540;
  score = 0;
  lives = 3;
  bullets = [];
  enemies = [];
  scoreDisplay.textContent = score;
  livesDisplay.textContent = lives;
  gameContainer.innerHTML = '<div id="player"></div>';
  player.style.left = `${playerX}px`;
  player.style.top = `${playerY}px`;
  startGame();
}

// Start the game
function startGame() {
  gameInterval = setInterval(() => {
    moveBullets();
    moveEnemies();
    checkCollisions();
  }, 50);
  enemySpawnInterval = setInterval(spawnEnemy, 1000);
}

// Reset button
resetButton.addEventListener('click', resetGame);

// Initialize the game
startGame();
```

---

### **How It Works**
1. **HTML**: Creates the structure for the game, including the player, score, lives, and reset button.
2. **CSS**: Styles the game container, player, bullets, and enemies.
3. **JavaScript**:
   - Allows the player to move using WASD or arrow keys.
   - Enables shooting bullets with the spacebar.
   - Spawns enemies at random positions and moves them downward.
   - Detects collisions between bullets and enemies, and between enemies and the player.
   - Tracks the score and lives, and ends the game if the player loses all lives.

---

### **How to Run**
1. Save the code into three files: `index.html`, `styles.css`, and `script.js`.
2. Open `index.html` in Chrome.
3. Play the game by moving the player, shooting enemies, and surviving as long as possible!
---

This game is more complex and includes multiple mechanics like movement, shooting, enemy AI, and collision detection. Let me know if you’d like me to implement another game! 🚀

Comments

Post a Comment

Popular posts from this blog

Games From Deepseek

These games were generate from deepseek and in first go. They all were generated correctly with no syntax or execution errors. This was not the case with other AI tools there were many syntax error and issues, I am sure you may have your own such experience too. Do share your experience here and dont try these codes it works out of the chat on windows 10 plaform. I used simple notepad to copy & paste the code and renamed the file per instrucions generated.  Learn Games Html Ads Will try and create more complex and utility type projects which can help users too.  So enjoy and really in my very brief and limited usage the deepseek is a providing more workable and comprehensive solutions.  The solutions provided by deepseek tool was usable as is. It was not possible with other AI tools otherwise and at times they didn't quite got many simple task right the first time.  Learn More Ads
Read more

Scramble Words

Image
Great! Let’s implement the **Word Scramble** game (Game #3 from the list). In this game, the player is given a scrambled word and must unscramble it within a time limit. The game will have multiple levels with increasing difficulty. --- ### **Word Scramble Game** #### **HTML (index.html)** ```html <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Word Scramble</title>   <link rel="stylesheet" href="styles.css"> </head> <body>   <h1>Word Scramble</h1>   <p>Unscramble the word before time runs out!</p>   <div id="game-container">     <p>Level: <span id="level">1</span></p>     <p>Time Left: <span id="timer">30</span>s</p>     <p>Scrambled ...
Read more

Memory Match Game

Image
 Let’s go with **Memory Match** (Game #2 from the list). If you’d like the code for the others, let me know, and I can provide them one at a time! --- Naav Electronics Learn More Ads ### **Memory Match Game** #### **HTML (index.html)** ```html <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Memory Match Game</title>   <link rel="stylesheet" href="styles.css"> </head> <body>   <h1>Memory Match Game</h1>   <p>Find all matching pairs!</p>   <div id="game-board"></div>   <p>Moves: <span id="move-count">0</span></p>   <button id="reset-button">Reset</button>   <script src="script.js"></script> </body> </html> ``` --- #### **CSS (s...
Read more