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

No:34828

Create me a ai fight game
Developer User9045｜Date and time 24/1/11 18:29:20
Build time 19.957 sec｜Game capacity 4.042KB｜

Script

Sure! Here's an example of a simple AI fight game implemented as a single HTML file. The game features two characters that can attack each other, and the player can choose various attack moves using pictograms. The health and attack power of each character are displayed, and the game continues until one character's health reaches zero.

AI Fight Game

You

100

AI

100

Please note that in order to run this code and see the game in action, you would need to replace the `emozi_all/game.png` and `emozi_apple.png` image paths with actual image URLs or provide relevant image files in the same directory as the HTML file.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      text-align: center;
      font-family: Arial, sans-serif;
    }
    
    .game-container {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      margin: 20px auto;
    }
    
    .character-container {
      padding: 20px;
    }
    
    .attack-buttons {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 10px;
    }
    
    .attack-button {
      width: 50px;
      height: 50px;
      margin: 5px;
      border: none;
      background-color: #1abc9c;
      color: #fff;
      font-size: 16px;
      cursor: pointer;
      text-align: center;
      line-height: 50px;
    }
    
    .attack-button:hover {
      background-color: #16a085;
    }
    
    .result {
      margin-top: 20px;
      font-size: 20px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>AI Fight Game</h1>
  
  <div class="game-container">
    <div class="character-container">
      <h2>You</h2>
      <div>
        <img src="player.png" alt="Player">
        <span id="playerHealth">100</span>
      </div>
      <div class="attack-buttons">
        <button class="attack-button" onclick="attackPlayer('punch')">👊</button>
        <button class="attack-button" onclick="attackPlayer('kick')">🦵</button>
        <button class="attack-button" onclick="attackPlayer('slap')">👋</button>
      </div>
    </div>
    
    <div class="character-container">
      <h2>AI</h2>
      <div>
        <img src="ai.png" alt="AI">
        <span id="aiHealth">100</span>
      </div>
    </div>
  </div>
  
  <div id="result" class="result"></div>
  
  <script>
    const playerHealthElement = document.getElementById("playerHealth");
    const aiHealthElement = document.getElementById("aiHealth");
    const resultElement = document.getElementById("result");
    
    let playerHealth = 100;
    let aiHealth = 100;
    
    function attackPlayer(move) {
      const aiMove = getRandomMove();
      const playerAttackPower = getRandomAttackPower();
      const aiAttackPower = getRandomAttackPower();
      
      playerHealth -= aiAttackPower;
      aiHealth -= playerAttackPower;
      
      updateHealth();
      displayResult(move, aiMove, playerAttackPower, aiAttackPower);
      
      if (playerHealth <= 0 || aiHealth <= 0) {
        endGame();
      }
    }
    
    function getRandomMove() {
      const moves = ['punch', 'kick', 'slap'];
      return moves[Math.floor(Math.random() * moves.length)];
    }
    
    function getRandomAttackPower() {
      return Math.floor(Math.random() * 20) + 10;
    }
    
    function updateHealth() {
      playerHealthElement.textContent = playerHealth;
      aiHealthElement.textContent = aiHealth;
    }
    
    function displayResult(playerMove, aiMove, playerAttackPower, aiAttackPower) {
      resultElement.textContent = `You used ${playerMove} (Power: ${playerAttackPower}). AI used ${aiMove} (Power: ${aiAttackPower}).`;
    }
    
    function endGame() {
      const winner = playerHealth <= 0 ? "AI" : "You";
      resultElement.textContent = `${winner} won the game!`;
      disableButtons();
    }
    
    function disableButtons() {
      const attackButtons = document.querySelectorAll(".attack-button");
      attackButtons.forEach(button => {
        button.disabled = true;
        button.classList.add('disabled');
      });
    }
  </script>
</body>
</html>
```

Please note that in order to run this code and see the game in action, you would need to replace the `player.png` and `ai.png` image paths with actual image URLs or provide relevant image files in the same directory as the HTML file.