Tower heroes is a tower defense game. You start with the wizard hero and chef hero. Enemies will spawn and when they touch the wizard or chef hero, they will die.'s game

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

No:12448

254

←

Prev Next

→

Tower heroes is a tower defense game. You start wi..ALL
Developer User3709｜Date and time 23/8/17 9:02:44
Build time 24.487 sec｜Game capacity 3.766KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Tower Heroes Game</title>
</head>
<body>
  <canvas id="gameCanvas"></canvas>
 
  <script>
    // Set up the game canvas and context
    const canvas = document.getElementById("gameCanvas");
    const context = canvas.getContext("2d");
  
    // Initialize game variables
    let score = 0;
    let gameOver = false;
    const wizardX = 50;
    const wizardY = canvas.height / 2;
    const chefX = canvas.width - 50;
    const chefY = canvas.height / 2;
    const enemySpeed = 2;
    const enemies = [];
  
    // Create the wizard hero
    const wizardImage = new Image();
    wizardImage.src = "wizard.png";
  
    // Create the chef hero
    const chefImage = new Image();
    chefImage.src = "chef.png";
  
    // Create the enemy
    const enemyImage = new Image();
    enemyImage.src = "enemy.png";
  
    // Handle player input (touch events for smartphones)
    canvas.addEventListener("touchstart", handleTouchStart, false);
  
    // Update game state
    function update() {
      if (gameOver) {
        return;
      }
  
      // Update enemy position
      for (let i = 0; i < enemies.length; i++) {
        enemies[i].x -= enemySpeed;
  
        // Check collision with heroes
        if (
          (enemies[i].x < wizardX + wizardImage.width &&
            enemies[i].y > wizardY - (wizardImage.height / 2) &&
            enemies[i].y < wizardY + (wizardImage.height / 2)) ||
          (enemies[i].x > chefX - chefImage.width &&
            enemies[i].y > chefY - (chefImage.height / 2) &&
            enemies[i].y < chefY + (chefImage.height / 2))
        ) {
          // Enemy collides with hero, game over
          gameOver = true;
        }
  
        // Remove enemies that are off screen
        if (enemies[i].x + enemyImage.width < 0) {
          enemies.splice(i, 1);
          i--;
        }
      }
  
      // Spawn new enemies randomly
      if (Math.random() < 0.01) {
        const newEnemy = {
          x: canvas.width,
          y: Math.random() * canvas.height
        };
        enemies.push(newEnemy);
      }
  
      // Update score
      score++;
    }
  
    // Draw game objects
    function draw() {
      // Clear the canvas
      context.clearRect(0, 0, canvas.width, canvas.height);
  
      // Draw heroes
      context.drawImage(wizardImage, wizardX, wizardY - (wizardImage.height / 2));
      context.drawImage(chefImage, chefX - chefImage.width, chefY - (chefImage.height / 2));
  
      // Draw enemies
      for (let i = 0; i < enemies.length; i++) {
        context.drawImage(enemyImage, enemies[i].x, enemies[i].y);
      }
  
      // Display score
      context.fillStyle = "white";
      context.font = "24px Arial";
      context.fillText("Score: " + score, 10, 30);
  
      // Display game over message
      if (gameOver) {
        context.fillText("Game Over", canvas.width / 2 - 60, canvas.height / 2);
      }
    }
  
    // Game loop
    function gameLoop() {
      update();
      draw();
  
      if (!gameOver) {
        requestAnimationFrame(gameLoop);
      }
    }
  
    // Start the game
    gameLoop();
  
    // Helper function to handle touch events
    function handleTouchStart(event) {
      if (event.touches[0].clientX < canvas.width / 2) {
        // Touch on left side of the screen, move wizard up or down
        const touchY = event.touches[0].clientY;
        if (touchY < wizardY) {
          wizardY -= 50;
        } else {
          wizardY += 50;
        }
      } else {
        // Touch on right side of the screen, move chef up or down
        const touchY = event.touches[0].clientY;
        if (touchY < chefY) {
          chefY -= 50;
        } else {
          chefY += 50;
        }
      }
    }
  </script>
</body>
</html>