AI game creator

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

No:32070

←

Prev Next

→

Generative Art
Developer User15336｜Date and time 23/12/29 21:35:25
Build time 35.052 sec｜Game capacity 5.003KB｜

Script

Sure! Here's a simple example of generative art implemented as a game using JavaScript and enclosed in script tags. This game allows you to generate random shapes by clicking on the screen and displays them as pictograms. You can play it as a finished game by trying to create interesting patterns or designs.

To play the game, you can open the HTML file in a web browser, preferably on a smartphone, and start clicking on the screen to generate the random shapes. Each click will create a circle, square, or triangle at the clicked position with random colors and sizes. The shapes will continuously animate and change colors over time due to the `animate` function being called repeatedly using `requestAnimationFrame`. Have fun creating generative art patterns!

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

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

// Generate a random shape
            function generateShape(x, y) {
                var shapeType = Math.random();

if (shapeType < 0.3) { // Circle
                    var radius = Math.random() * 50 + 10;
                    context.beginPath();
                    context.arc(x, y, radius, 0, 2 * Math.PI);
                    context.fillStyle = getRandomColor();
                    context.fill();
                    context.closePath();
                    shapes.push({
                        type: "circle",
                        x: x,
                        y: y,
                        radius: radius
                    });
                } else if (shapeType < 0.6) { // Square
                    var size = Math.random() * 80 + 20;
                    context.fillStyle = getRandomColor();
                    context.fillRect(x - size/2, y - size/2, size, size);
                    shapes.push({
                        type: "square",
                        x: x,
                        y: y,
                        size: size
                    });
                } else { // Triangle
                    var size = Math.random() * 80 + 20;
                    context.beginPath();
                    context.moveTo(x, y - size / 2);
                    context.lineTo(x + size / 2, y + size / 2);
                    context.lineTo(x - size / 2, y + size / 2);
                    context.fillStyle = getRandomColor();
                    context.fill();
                    context.closePath();
                    shapes.push({
                        type: "triangle",
                        x: x,
                        y: y,
                        size: size
                    });
                }
            }

canvas.addEventListener("click", function(event) {
                var x = event.clientX;
                var y = event.clientY;

generateShape(x, y);
            });

requestAnimationFrame(animate);
            }

animate();
        };
    </script>
</body>
</html>
```