Tower defence idle ai vs ai's game | AI game creator

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

No:52512

174

Tower defence idle ai vs ai
Developer User18896｜Date and time 24/3/22 11:32:45
Build time 10.966 sec｜Game capacity 2.037KB｜

→ 　

0　

0　

[PR]現在の売れ筋グッズランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tower Defence Game</title>
<style>
  body {
    font-family: Arial, sans-serif;
    text-align: center;
  }
  canvas {
    border: 2px solid black;
    display: block;
    margin: 0 auto;
  }
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>

<script>
  const canvas = document.getElementById('gameCanvas');
  const ctx = canvas.getContext('2d');
  
  let playerHealth = 3;
  let aiHealth = 3;
  
  function drawPictogram(x, y, pictogram) {
    const img = new Image();
    img.src = `${pictogram}.png`;
    img.onload = function() {
      ctx.drawImage(img, x, y, 50, 50);
    };
  }
  
  function drawGame() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawPictogram(100, 100, 'tower'); // Drawing player's tower
    drawPictogram(600, 100, 'tower'); // Drawing AI's tower
    drawPictogram(200, 300, 'enemy'); // Drawing enemy AI
    drawPictogram(500, 300, 'enemy'); // Drawing enemy player
    
    ctx.font = '24px Arial';
    ctx.fillText(`Player Health: ${playerHealth}`, 10, 30);
    ctx.fillText(`AI Health: ${aiHealth}`, 650, 30);
  }
  
  function playerAttack() {
    aiHealth--;
    if(aiHealth === 0) {
      alert('Player Wins!');
      aiHealth = 3;
      playerHealth = 3;
    }
  }
  
  function aiAttack() {
    playerHealth--;
    if(playerHealth === 0) {
      alert('AI Wins!');
      aiHealth = 3;
      playerHealth = 3;
    }
  }
  
  canvas.addEventListener('click', function(event) {
    const rect = canvas.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    
    if(x >= 100 && x <= 150 && y >= 100 && y <= 150) {
      playerAttack();
    }
  });
  
  function gameLoop() {
    drawGame();
    aiAttack();
    setTimeout(gameLoop, 1000); // Adjust speed here
  }
  
  gameLoop();
</script>
</body>
</html>