AI game creator

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

No:34253

←

Prev Next

→

Generative Art
Developer User16187｜Date and time 24/1/9 12:04:25
Build time 20.732 sec｜Game capacity 2.144KB｜

Script

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

This game will generate random colored rectangles on the canvas whenever the user touches the screen. Each touch will regenerate the art, creating a new composition of rectangles. Note that the code snippet above assumes that the smartphone will be used for touch input. If you prefer to use mouse input on a computer, you can replace `'mousedown'` with `'mousedown'` to trigger art generation on mouse click instead. Feel free to modify and enhance the generative art game according to your preferences and design ideas!

←

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:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Generative Art Game</title>
    <style>
        html, body {
          margin: 0;
          padding: 0;
          overflow: hidden;
        }
        canvas {
          display: block;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

// Set canvas size to match the screen
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

// Generate random colored rectangles
        function generateArt() {
          context.clearRect(0, 0, canvas.width, canvas.height);

for (let i = 0; i < 100; i++) {
            const x = Math.random() * canvas.width;
            const y = Math.random() * canvas.height;
            const width = Math.random() * 200;
            const height = Math.random() * 200;

const red = Math.floor(Math.random() * 256);
            const green = Math.floor(Math.random() * 256);
            const blue = Math.floor(Math.random() * 256);

context.fillStyle = `rgb(${red}, ${green}, ${blue})`;
            context.fillRect(x, y, width, height);
          }
        }

// Regenerate art on user input (touch)
        canvas.addEventListener('touchstart', generateArt);

// Initial art generation on game start
        generateArt();
    </script>
</body>
</html>
```

This game will generate random colored rectangles on the canvas whenever the user touches the screen. Each touch will regenerate the art, creating a new composition of rectangles.

Note that the code snippet above assumes that the smartphone will be used for touch input. If you prefer to use mouse input on a computer, you can replace `'touchstart'` with `'mousedown'` to trigger art generation on mouse click instead.

Feel free to modify and enhance the generative art game according to your preferences and design ideas!