AI game creator

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

No:40186

←

Prev Next

→

Generative Art
Developer User18010｜Date and time 24/2/1 15:33:09
Build time 13.488 sec｜Game capacity 2.966KB｜

Script

Sure! Here's an example of a simple generative art game implemented as a single HTML file:

This game features a player represented by a rocket ship emoji (🚀) and an enemy represented by an explosion emoji (💥). The player's goal is to avoid getting hit by the enemy. The enemy moves randomly around the screen, and if the player collides with the enemy, a game over message is shown. The game supports touch and mouse input for controlling the player. The canvas is redrawn regularly to update the positions of the player and the enemy, creating an animated effect. Feel free to modify the code and add more features to make it more interesting or visually appealing.

←

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 generative art game implemented as a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background-color: black;
    }
  </style>
</head>
<body>
  <script>
    // Pictograms representing game objects
    const playerIcon = "🚀";
    const enemyIcon = "💥";

// Canvas size
    const canvasWidth = window.innerWidth;
    const canvasHeight = window.innerHeight;

// Player position
    let playerX = canvasWidth / 2;
    let playerY = canvasHeight / 2;

// Enemy position
    let enemyX = Math.random() * canvasWidth;
    let enemyY = Math.random() * canvasHeight;

// Update game state
    function updateGame() {
      // Move enemy randomly
      enemyX += (Math.random() - 0.5) * 10;
      enemyY += (Math.random() - 0.5) * 10;

// Check collision between player and enemy
      const distance = Math.sqrt((playerX - enemyX) ** 2 + (playerY - enemyY) ** 2);
      if (distance < 30) {
        alert("Game Over! You got hit by an enemy.");
        resetGame();
      }

// Redraw canvas
      const canvas = document.createElement("canvas");
      canvas.width = canvasWidth;
      canvas.height = canvasHeight;
      const ctx = canvas.getContext("2d");
      ctx.font = "48px sans-serif";
      ctx.fillStyle = "white";
      ctx.fillText(playerIcon, playerX, playerY);
      ctx.fillText(enemyIcon, enemyX, enemyY);

// Replace existing canvas with updated one
      const existingCanvas = document.querySelector("canvas");
      if (existingCanvas) {
        document.body.removeChild(existingCanvas);
      }
      document.body.appendChild(canvas);
    }

// Reset game state
    function resetGame() {
      playerX = canvasWidth / 2;
      playerY = canvasHeight / 2;
      enemyX = Math.random() * canvasWidth;
      enemyY = Math.random() * canvasHeight;
    }

// Handle touch/mouse move events
    function handleMove(event) {
      const touch = event.targetTouches ? event.targetTouches[0] : event;
      playerX = touch.clientX;
      playerY = touch.clientY;
    }

// Start game loop
    setInterval(updateGame, 100);

// Event listeners for touch/mouse move
    window.addEventListener("touchmove", handleMove);
    window.addEventListener("mousemove", handleMove);
  </script>
</body>
</html>
```

This game features a player represented by a rocket ship emoji (🚀) and an enemy represented by an explosion emoji (💥). The player's goal is to avoid getting hit by the enemy. The enemy moves randomly around the screen, and if the player collides with the enemy, a game over message is shown.

The game supports touch and mouse input for controlling the player. The canvas is redrawn regularly to update the positions of the player and the enemy, creating an animated effect.

Feel free to modify the code and add more features to make it more interesting or visually appealing.