AI game creator

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

No:36311

←

Prev Next

→

Generative Art
Developer User16775｜Date and time 24/1/17 8:54:10
Build time 10.407 sec｜Game capacity 3.136KB｜

Script

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

This game creates a canvas and allows players to generate colorful particles by touching and dragging on the screen. The particles move and fade out over time, creating a generative art effect.

←

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 in a single HTML file using JavaScript.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Generative Art Game</title>
  <style>
    canvas {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: #000;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

// Initialize the game
    function init() {
      canvas = document.getElementById("gameCanvas");
      ctx = canvas.getContext("2d");
      particles = [];

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

// Handle touch events
      canvas.addEventListener("touchmove", handleTouchMove, false);
      canvas.addEventListener("touchstart", handleTouchStart, false);

// Start game loop
      setInterval(update, 16);

// Generate initial particles
      generateParticles();
    }

// Handle touch move event
    function handleTouchMove(event) {
      event.preventDefault();
      var touch = event.touches[0];
      var x = touch.clientX;
      var y = touch.clientY;
      particles.push(new Particle(x, y));
    }

// Handle touch start event
    function handleTouchStart(event) {
      event.preventDefault();
      var touch = event.touches[0];
      var x = touch.clientX;
      var y = touch.clientY;
      particles.push(new Particle(x, y));
    }

// Update game state
    function update() {
      // Clear canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Update and draw particles
      for (var i = 0; i < particles.length; i++) {
        var particle = particles[i];
        particle.update();
        particle.draw();
        if (particle.alpha < 0.01) {
          particles.splice(i, 1);
          i--;
        }
      }
    }

// Generate particles at random positions
    function generateParticles() {
      for (var i = 0; i < 100; i++) {
        var x = Math.random() * canvas.width;
        var y = Math.random() * canvas.height;
        particles.push(new Particle(x, y));
      }
    }

// Particle object
    function Particle(x, y) {
      this.x = x;
      this.y = y;
      this.size = Math.random() * 5 + 1;
      this.speedX = Math.random() * 3 - 1.5;
      this.speedY = Math.random() * 3 - 1.5;
      this.color = "#" + ((1 << 24) * Math.random() | 0).toString(16);
      this.alpha = 1;

this.update = function() {
        this.x += this.speedX;
        this.y += this.speedY;
        this.alpha -= 0.01;
      };

this.draw = function() {
        ctx.fillStyle = this.color;
        ctx.globalAlpha = this.alpha;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();
      };
    }

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

This game creates a canvas and allows players to generate colorful particles by touching and dragging on the screen. The particles move and fade out over time, creating a generative art effect.