Tower defence's game | AI game creator

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

No:11034

96

Tower defence
Developer User4769｜Date and time 23/8/6 23:52:35
Build time 37.699 sec｜Game capacity 3.72KB｜

→ 　

0　

0　

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

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
  <title>Tower Defence Game</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="800" height="400"></canvas>

<script>
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    
    const enemyImage = new Image();
    enemyImage.src = "enemy.png";
    
    const towerImage = new Image();
    towerImage.src = "tower.png";
    
    const bulletImage = new Image();
    bulletImage.src = "bullet.png";
    
    const turretImage = new Image();
    turretImage.src = "turret.png";
    
    const scoreElement = document.getElementById("score");
    
    let score = 0;
    
    class Enemy {
      constructor(x, y) {
        this.x = x;
        this.y = y;
        this.width = 40;
        this.height = 40;
        this.speed = Math.random() * 3 + 1;
      }
      
      update() {
        this.x -= this.speed;
      }
      
      draw() {
        ctx.drawImage(enemyImage, this.x, this.y, this.width, this.height);
      }
    }
    
    class Tower {
      constructor(x, y) {
        this.x = x;
        this.y = y;
        this.width = 50;
        this.height = 50;
        this.readyToShoot = true;
      }
      
      shoot() {
        const bullet = new Bullet(this.x, this.y);
        bullets.push(bullet);
        
        this.readyToShoot = false;
        setTimeout(() => this.readyToShoot = true, 1000);
      }
      
      draw() {
        ctx.drawImage(towerImage, this.x, this.y, this.width, this.height);
      }
    }
    
    class Bullet {
      constructor(x, y) {
        this.x = x;
        this.y = y;
        this.width = 10;
        this.height = 10;
        this.speed = 5;
      }
      
      update() {
        this.x += this.speed;
      }
      
      draw() {
        ctx.drawImage(bulletImage, this.x, this.y, this.width, this.height);
      }
    }
    
    const enemies = [];
    const towers = [];
    const bullets = [];
    
    function createEnemy() {
      const y = Math.random() * (canvas.height - 40);
      const enemy = new Enemy(canvas.width, y);
      enemies.push(enemy);
    }
    
    function update() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      enemies.forEach((enemy, index) => {
        enemy.update();
        enemy.draw();
        
        if (enemy.x + enemy.width < 0) {
          enemies.splice(index, 1);
          score++;
        }
      });
      
      towers.forEach((tower) => {
        tower.draw();
        
        if (tower.readyToShoot) {
          tower.shoot();
        }
      });
      
      bullets.forEach((bullet, bulletIndex) => {
        bullet.update();
        bullet.draw();
        
        if (bullet.x > canvas.width) {
          bullets.splice(bulletIndex, 1);
        }
        
        enemies.forEach((enemy, enemyIndex) => {
          if (
            bullet.x < enemy.x + enemy.width &&
            bullet.x + bullet.width > enemy.x &&
            bullet.y < enemy.y + enemy.height &&
            bullet.y + bullet.height > enemy.y
          ) {
            enemies.splice(enemyIndex, 1);
            bullets.splice(bulletIndex, 1);
            score += 10;
          }
        });
      });
      
      requestAnimationFrame(update);
      scoreElement.innerHTML = score;
    }
    
    canvas.addEventListener("click", (e) => {
      const rect = canvas.getBoundingClientRect();
      const mouseX = e.clientX - rect.left;
      const mouseY = e.clientY - rect.top;
      
      const tower = new Tower(mouseX - 25, mouseY - 25);
      towers.push(tower);
    });
    
    setInterval(createEnemy, 2000);
    update();
  </script>
</body>
</html>