AI game creator

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

No:37324

←

Prev Next

→

in towers
Developer User17003｜Date and time 24/1/21 1:10:46
Build time 12.301 sec｜Game capacity 3.182KB｜

Script

Sure, here's an example of a simple tower defense game implemented as a single HTML file using JavaScript:

This example sets up a simple tower defense game where the player controls a blue square using arrow keys, trying to avoid collision with a red enemy square. The game canvas is rendered using the HTML5 Canvas element, and the game state is updated in the `updateCanvas` function which is called recursively using `requestAnimationFrame` until the game is over.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

Sure, here's an example of a simple tower defense game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tower Defense Game</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  
  <script>
    // Tower Defense Game

// Create canvas and context
    const canvas = document.getElementById("gameCanvas");
    const context = canvas.getContext("2d");

// Game variables
    let score = 0;
    let gameOver = false;

// Player object
    const player = {
      x: 50,
      y: 50,
      width: 50,
      height: 50,
      color: "blue"
    };

// Enemy object
    const enemy = {
      x: 300,
      y: 300,
      width: 50,
      height: 50,
      color: "red",
      speedX: 2,
      speedY: 2
    };

// Handle player movement
    function movePlayer(event) {
      switch (event.keyCode) {
        case 37:
          player.x -= 10; // Left arrow key
          break;
        case 38:
          player.y -= 10; // Up arrow key
          break;
        case 39:
          player.x += 10; // Right arrow key
          break;
        case 40:
          player.y += 10; // Down arrow key
          break;
      }
    }

// Detect collision between two objects
    function detectCollision(obj1, obj2) {
      return (
        obj1.x < obj2.x + obj2.width &&
        obj1.x + obj1.width > obj2.x &&
        obj1.y < obj2.y + obj2.height &&
        obj1.y + obj1.height > obj2.y
      );
    }

// Update game canvas
    function updateCanvas() {
      // Clear canvas
      context.clearRect(0, 0, canvas.width, canvas.height);

// Draw player
      context.fillStyle = player.color;
      context.fillRect(player.x, player.y, player.width, player.height);

// Draw enemy
      context.fillStyle = enemy.color;
      context.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);

// Game over if collision occurs
      if (detectCollision(player, enemy)) {
        gameOver = true;
      }

// Update enemy position
      enemy.x += enemy.speedX;
      enemy.y += enemy.speedY;

// Change enemy direction if out of bounds
      if (enemy.x <= 0 || enemy.x + enemy.width >= canvas.width) {
        enemy.speedX *= -1;
      }
      if (enemy.y <= 0 || enemy.y + enemy.height >= canvas.height) {
        enemy.speedY *= -1;
      }

// Game loop
      if (!gameOver) {
        requestAnimationFrame(updateCanvas);
      }
    }

// Start the game
    document.addEventListener("keydown", movePlayer);
    updateCanvas();
  </script>
</body>
</html>
```