AI game creator

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

No:24390

←

Prev Next

→

Generative Art
Developer User11529｜Date and time 23/11/8 10:54:18
Build time 44.367 sec｜Game capacity 2.026KB｜

Script

Sure! Here's an example of a simple generative art game implemented as a single HTML file using JavaScript. The game is designed for smartphone operation and includes pictograms.

When the game is loaded in a smartphone browser, it will create a canvas that covers the entire screen. Every time you touch the screen, it will generate a random color and a random position and then draw a pictogram (represented as a colored square) at that position on the canvas. You can continue touching the screen to create more pictograms and create your own generative art composition.

←

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 using JavaScript. The game is designed for smartphone operation and includes pictograms.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Generative Art Game</title>
    <style>
      canvas {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script>
      // Setup canvas
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

// Generate random color
      function getRandomColor() {
        const letters = "0123456789ABCDEF";
        let color = "#";
        for (let i = 0; i < 6; i++) {
          color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
      }

// Generate random position
      function getRandomPosition() {
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height;
        return { x, y };
      }

// Draw a pictogram
      function drawPictogram(x, y, color) {
        ctx.fillStyle = color;
        ctx.fillRect(x, y, 50, 50);
      }

// Handle touch event
      function onTouch(event) {
        const color = getRandomColor();
        const { x, y } = getRandomPosition();
        drawPictogram(x, y, color);
      }

// Start game
      function startGame() {
        canvas.addEventListener("touchend", onTouch);
      }

// Call startGame to begin
      startGame();
    </script>
  </body>
</html>
```