AI game creator

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

No:37041

←

Prev Next

→

Generative Art
Developer User16967｜Date and time 24/1/20 0:28:29
Build time 10.94 sec｜Game capacity 2.397KB｜

Script

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

In this game, a canvas element is used to display randomly generated colorful shapes. The `getRandomColor` function generates a random color, and the `generateArt` function generates random squares on the canvas. The game continuously generates art by calling itself using the `requestAnimationFrame` method. The resulting art will keep changing as new shapes are generated. You can test this game by saving the code in a file with a `.html` extension (e.g., `generative-art-game.html`) and opening it in a web browser. The browser will render the canvas and continuously update the displayed art. You can also customize the size and appearance of the canvas by modifying the `canvas` element's attributes and the `context` properties in the JavaScript code.

←

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>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="300" height="300"></canvas>

// Generate random colors
        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 shapes on the canvas
        function generateArt() {
            context.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas
            
            for (let i = 0; i < 10; i++) {
                const x = Math.random() * canvas.width;
                const y = Math.random() * canvas.height;
                const size = Math.random() * 50 + 10;
                const color = getRandomColor();

context.fillStyle = color;
                context.fillRect(x, y, size, size);
                context.strokeStyle = getRandomColor();
                context.strokeRect(x, y, size, size);
            }

requestAnimationFrame(generateArt); // Continuously generate art
        }

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

You can test this game by saving the code in a file with a `.html` extension (e.g., `generative-art-game.html`) and opening it in a web browser. The browser will render the canvas and continuously update the displayed art. You can also customize the size and appearance of the canvas by modifying the `canvas` element's attributes and the `context` properties in the JavaScript code.