AI game creator

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

No:11869

2708

←

Prev Next

→

Generative Art
Developer anonymous｜Date and time 70/1/1 9:38:35
Build time unknown sec｜Game capacity 2.315KB｜

Script

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

This code sets up a simple generative art game where particles are randomly generated and move around the canvas. The particles slowly shrink in size and eventually disappear. The game continuously loops to generate new particles and update/draw existing particles. You can open this HTML file on a smartphone browser to play the game. The particles will be represented by red circles on the canvas. Each time you play, you'll get a unique generative art pattern.

←

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="game-canvas" width="400" height="400"></canvas>
  
  <script>
    // Game variables
    var canvas = document.getElementById("game-canvas");
    var ctx = canvas.getContext("2d");
    var particles = [];

// Particle object
    function Particle(x, y) {
      this.x = x;
      this.y = y;
      this.size = Math.random() * 10 + 1;
      this.xSpeed = Math.random() * 3 - 1.5;
      this.ySpeed = Math.random() * 3 - 1.5;
    }
    
    Particle.prototype.update = function() {
      this.x += this.xSpeed;
      this.y += this.ySpeed;
      this.size -= 0.1;
    }
    
    Particle.prototype.draw = function() {
      ctx.fillStyle = "rgba(255, 0, 0, " + this.size + ")";
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
      ctx.closePath();
      ctx.fill();
    }

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

// Generate new particles
      if (particles.length < 100) {
        var x = Math.random() * canvas.width;
        var y = Math.random() * canvas.height;
        particles.push(new Particle(x, y));
      }

// Update and draw particles
      particles.forEach(function(particle) {
        particle.update();
        particle.draw();
      });

// Remove small particles
      particles = particles.filter(function(particle) {
        return particle.size > 0;
      });

// Repeat game loop
      requestAnimationFrame(gameLoop);
    }

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

You can open this HTML file on a smartphone browser to play the game. The particles will be represented by red circles on the canvas. Each time you play, you'll get a unique generative art pattern.