AI game creator

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

No:52757

254

←

Prev Next

→

Generative Art
Developer User22126｜Date and time 24/3/24 14:04:39
Build time 8.769 sec｜Game capacity 2.087KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Generative Art Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

const colors = ['#FF5733', '#33FF57', '#3366FF', '#FF33E8','#FFFF33'];
        let shapes = [];

function drawShape(x, y, radius, color) {
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, Math.PI * 2);
            ctx.fillStyle = color;
            ctx.fill();
        }

function clearCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

function updateShapes() {
            clearCanvas();
            shapes.forEach(shape => {
                drawShape(shape.x, shape.y, shape.radius, shape.color);
            });
        }

canvas.addEventListener('click', function(event) {
            const rect = canvas.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;

shapes.forEach(shape => {
                if(x >= shape.x - shape.radius && x <= shape.x + shape.radius && y >= shape.y - shape.radius && y <= shape.y + shape.radius) {
                    shape.radius += 5;
                    if(shape.radius > 50) {
                        const index = shapes.indexOf(shape);
                        shapes.splice(index, 1);
                    }
                }
            });

updateShapes();
        });

generateShapes();
        updateShapes();
    </script>
</body>
</html>