AI game creator

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

No:22835

←

Prev Next

→

Generative Art
Developer User10546｜Date and time 23/10/25 20:14:02
Build time 50.418 sec｜Game capacity 2.853KB｜

Script

Sure! Here's an example of a simple generative art game implemented as a single HTML file using JavaScript. This game allows the user to control a character using smartphone gestures (touch events) to create generative art patterns on the screen.

In this game, the user can control the position of the character by touching and moving their finger on the smartphone screen. The character leaves a trail behind it, creating generative art patterns on the canvas. The color of the character changes randomly every 500 milliseconds using the `generateRandomColor` function. Please note that this is a basic example, and you can enhance the game by adding more features and visual elements as per your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Generative Art Game</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #000;
    }

canvas {
      display: block;
    }
  </style>
</head>
<body>
<canvas id="gameCanvas"></canvas>

// Character properties
  var characterRadius = 10;
  var characterX = width / 2;
  var characterY = height / 2;
  var characterColor = "#fff";

// Event listeners for touch events on the canvas
  canvas.addEventListener("touchstart", handleTouchStart);
  canvas.addEventListener("touchmove", handleTouchMove);

// Function to handle touch start event
  function handleTouchStart(event) {
    event.preventDefault();
    characterX = event.touches[0].clientX;
    characterY = event.touches[0].clientY;
  }

// Function to handle touch move event
  function handleTouchMove(event) {
    event.preventDefault();
    characterX = event.touches[0].clientX;
    characterY = event.touches[0].clientY;
    drawCharacter();
  }

// Function to draw the character on the canvas
  function drawCharacter() {
    context.clearRect(0, 0, width, height);
    context.beginPath();
    context.arc(characterX, characterY, characterRadius, 0, 2 * Math.PI, false);
    context.fillStyle = characterColor;
    context.fill();
    context.closePath();
  }

// Function to generate random color
  function generateRandomColor() {
    var letters = "0123456789ABCDEF";
    var color = "#";
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }

// Function to create generative art on canvas
  function createGenerativeArt() {
    setInterval(function () {
      characterColor = generateRandomColor();
      drawCharacter();
    }, 500);
  }

// Start the game
  createGenerativeArt();
  drawCharacter();
</script>
</body>
</html>
```

Please note that this is a basic example, and you can enhance the game by adding more features and visual elements as per your requirements.