Click here for free DL of the app version that can save data.

No:33707

Make a game that you have to avoid the bad guy.pre..ALL
Developer User12467｜Date and time 24/1/6 11:22:01
Build time 45.402 sec｜Game capacity 4.41KB｜

Script

Avoid the Bad Guy

👤

😈

🔫

To play the game: - Use the left and right arrow keys to move the player. - Press the spacebar to shoot the bad guy. - Avoid touching the bad guy, as it will cause you to lose. - Defeat the bad guy by reducing its health to 0 to win.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

Click here for free DL of the app version that can save data.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Avoid the Bad Guy</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
      font-family: Arial, sans-serif;
    }

#game {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
      border: 2px solid #333;
      background-color: white;
    }

.pictogram {
      width: 50px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

#player {
      background-color: green;
      color: white;
    }

#bad-guy {
      background-color: red;
      color: white;
    }

#bullet {
      background-color: blue;
      color: white;
    }
  </style>
</head>

<body>
  <div id="game">
    <h1>Avoid the Bad Guy</h1>
    <div id="player" class="pictogram">👤</div>
    <div id="bad-guy" class="pictogram">😈</div>
    <div id="bullet" class="pictogram">🔫</div>
    <button id="play">Play</button>
    <button id="how-to-play">How to Play</button>
  </div>
  
  <script>
    // Initialize game variables
    let playerPosition = 0;
    let bulletPosition = -1;
    let badGuyHealth = 100;
    let gameInterval;

function updatePlayerPosition(position) {
      document.getElementById("player").style.marginLeft = position + "px";
    }

function createBullet(position) {
      document.getElementById("bullet").style.marginLeft = position + "px";
    }

function updateBadGuyHealth(health) {
      document.getElementById("bad-guy").innerText = "😈 " + health;
    }

function stopGame() {
      clearInterval(gameInterval);
      document.removeEventListener("keydown", handleKeyPress);
    }

function startGame() {
      document.getElementById("play").disabled = true;
      document.getElementById("how-to-play").disabled = true;

updatePlayerPosition(playerPosition);
      updateBadGuyHealth(badGuyHealth);
      document.addEventListener("keydown", handleKeyPress);

gameInterval = setInterval(() => {
        if (bulletPosition !== -1) {
          bulletPosition += 10;
          createBullet(bulletPosition);

if (bulletPosition >= 250) {
            bulletPosition = -1;
            createBullet(bulletPosition);
          }

if (bulletPosition === playerPosition) {
            bulletPosition = -1;
            createBullet(bulletPosition);
            badGuyHealth -= 10;
            updateBadGuyHealth(badGuyHealth);
          }
        }

if (badGuyHealth <= 0) {
          stopGame();
          alert("Congratulations! You defeated the bad guy and won!");
          resetGame();
        }
      }, 100);
    }

function showInstructions() {
      alert("How to Play:\n\n- Use left and right arrow keys to move the player.\n- Press space to shoot the bad guy.\n- Avoid touching the bad guy, or you'll lose.\n- Defeat the bad guy by reducing its health to 0 to win.");
    }

function resetGame() {
      playerPosition = 0;
      bulletPosition = -1;
      badGuyHealth = 100;

updatePlayerPosition(playerPosition);
      updateBadGuyHealth(badGuyHealth);
      document.getElementById("play").disabled = false;
      document.getElementById("how-to-play").disabled = false;
    }

document.getElementById("play").addEventListener("click", startGame);
    document.getElementById("how-to-play").addEventListener("click", showInstructions);

resetGame();
  </script>
</body>
</html>
```

To play the game:
- Use the left and right arrow keys to move the player.
- Press the spacebar to shoot the bad guy.
- Avoid touching the bad guy, as it will cause you to lose.
- Defeat the bad guy by reducing its health to 0 to win.