AI game creator

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

No:26587

←

Prev Next

→

Generative Art
Developer User13199｜Date and time 23/12/1 21:47:27
Build time 71.936 sec｜Game capacity 2.712KB｜

Script

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

This game creates draggable particles on the canvas whenever the user clicks or touches the screen. The particles move randomly and gradually shrink in size. Once a particle becomes too small, it disappears. The game loop continuously updates and redraws the particles. Please note that this is a simple example and can be expanded or modified to create more complex generative art games.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Generative Art Game</title>
    <style>
        canvas {
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Particle class
        function Particle(x, y, size) {
            this.x = x;
            this.y = y;
            this.size = size;
            this.velocityX = Math.random() * 2 - 1; // Random velocity between -1 and 1
            this.velocityY = Math.random() * 2 - 1;
        }

Particle.prototype.update = function() {
            this.x += this.velocityX;
            this.y += this.velocityY;
            this.size -= 0.01;

this.draw();
        };

Particle.prototype.draw = function() {
            ctx.fillStyle = "#000000";
            ctx.fillRect(this.x, this.y, this.size, this.size);
        };

// Function to generate particles on touch/click
        function generateParticles(event) {
            var rect = canvas.getBoundingClientRect();
            var x = event.clientX - rect.left;
            var y = event.clientY - rect.top;
            var size = Math.random() * 20 + 10; // Random size between 10 and 30

var particle = new Particle(x, y, size);
            particles.push(particle);
        }

// Game loop
        function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i < particles.length; i++) {
                var particle = particles[i];

if (particle.size > 0) {
                    particle.update();
                } else {
                    particles.splice(i, 1);
                    i--;
                }
            }

requestAnimationFrame(gameLoop);
        }

// Start the game
        canvas.addEventListener("click", generateParticles, false);
        canvas.addEventListener("touchstart", generateParticles, false);

gameLoop();
    </script>
</body>
</html>
```

Please note that this is a simple example and can be expanded or modified to create more complex generative art games.