AI game creator

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

No:27459

←

Prev Next

→

Generative Art
Developer User13658｜Date and time 23/12/7 3:51:20
Build time 43.946 sec｜Game capacity 3.429KB｜

Script

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

This HTML file sets up a canvas element and a JavaScript block to generate and draw random shapes (rectangles and circles) on the canvas. The shapes are filled with random colors, generated using the `getRandomColor()` function. The `drawShapes()` function is called initially and whenever the canvas is clicked. To play the game, simply open the HTML file in a smartphone browser and tap on the canvas to generate new random shapes. Note: This is a very basic example of generative art as a game. You can modify and enhance it as per your requirements, adding more game mechanics, rules, and interactions.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

Sure! Here's a simple example of generative art implemented as a game in 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"></canvas>

// Define the width and height of the canvas
            var canvasWidth = window.innerWidth;
            var canvasHeight = window.innerHeight;

// Set the canvas dimensions
            canvas.width = canvasWidth;
            canvas.height = canvasHeight;

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

// Function to draw random shapes on the canvas
            function drawShapes() {
                ctx.clearRect(0, 0, canvasWidth, canvasHeight);

// Generate and draw 10 random shapes
                for (var i = 0; i < 10; i++) {
                    var shape = Math.floor(Math.random() * 2); // Randomly choose a shape type (0 or 1)

if (shape === 0) {
                        // Draw a rectangle
                        var x = Math.random() * canvasWidth;
                        var y = Math.random() * canvasHeight;
                        var width = Math.random() * 100 + 10;
                        var height = Math.random() * 100 + 10;
                        ctx.fillStyle = getRandomColor();
                        ctx.fillRect(x, y, width, height);
                    } else {
                        // Draw a circle
                        var x = Math.random() * canvasWidth;
                        var y = Math.random() * canvasHeight;
                        var radius = Math.random() * 50 + 10;
                        ctx.fillStyle = getRandomColor();
                        ctx.beginPath();
                        ctx.arc(x, y, radius, 0, 2 * Math.PI);
                        ctx.fill();
                    }
                }
            }

// Call the drawShapes function initially
            drawShapes();

// Call the drawShapes function when the canvas is clicked
            canvas.addEventListener("click", drawShapes);
        });
    </script>
</body>
</html>
```

To play the game, simply open the HTML file in a smartphone browser and tap on the canvas to generate new random shapes.

Note: This is a very basic example of generative art as a game. You can modify and enhance it as per your requirements, adding more game mechanics, rules, and interactions.