AI game creator

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

No:36996

←

Prev Next

→

Generative Art
Developer User16938｜Date and time 24/1/19 17:51:05
Build time 15.964 sec｜Game capacity 3.623KB｜

Script

Sure! Here's an example of how you can create a simple generative art game using JavaScript and HTML, suitable for smartphone operation:

The code above creates a simple generative art game where random shapes (circles, rectangles, or triangles) of random colors are drawn on the canvas. The shapes move randomly around the screen, and new shapes are generated every few seconds. Shapes that go off the screen are removed from the game. You can customize the code further to add additional features, such as user interactions or scoring mechanisms, based on your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

Sure! Here's an example of how you can create a simple generative art game using JavaScript and HTML, suitable for smartphone operation:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Generative Art Game</title>
  <style>
    canvas {
      display: block;
      margin: 0 auto;
      background-color: #fff;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>

// Set canvas size
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

// Function to create random colors
    function randomColor() {
      const letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }

// Function to generate random shapes
    function generateShape() {
      const shapeType = ['circle', 'rectangle', 'triangle'];
      const randomType = shapeType[Math.floor(Math.random() * shapeType.length)];

const x = Math.random() * canvas.width;
      const y = Math.random() * canvas.height;

const size = Math.random() * 100 + 50;
      const color = randomColor();

return { type: randomType, x, y, size, color };
    }

// Function to draw shapes on canvas
    function drawShape(shape) {
      context.beginPath();
      switch (shape.type) {
        case 'circle':
          context.arc(shape.x, shape.y, shape.size, 0, 2 * Math.PI);
          break;
        case 'rectangle':
          context.rect(shape.x - shape.size / 2, shape.y - shape.size / 2, shape.size, shape.size);
          break;
        case 'triangle':
          context.moveTo(shape.x, shape.y - shape.size / 2);
          context.lineTo(shape.x - shape.size / 2, shape.y + shape.size / 2);
          context.lineTo(shape.x + shape.size / 2, shape.y + shape.size / 2);
          context.closePath();
          break;
      }
      context.fillStyle = shape.color;
      context.fill();
    }

// Generate initial shapes on canvas
    const shapes = [];
    for (let i = 0; i < 10; i++) {
      shapes.push(generateShape());
    }

// Main game loop
    function gameLoop() {
      // Clear canvas
      context.clearRect(0, 0, canvas.width, canvas.height);

// Draw shapes
      shapes.forEach((shape) => {
        drawShape(shape);
      });

// Generate a new shape every 2 seconds
      if (Math.random() < 0.05) {
        shapes.push(generateShape());
      }

// Remove shapes that go off the screen
      shapes.forEach((shape, index) => {
        if (shape.x > canvas.width + shape.size || shape.x < -shape.size ||
          shape.y > canvas.height + shape.size || shape.y < -shape.size) {
          shapes.splice(index, 1);
        }
      });

// Move shapes randomly
      shapes.forEach((shape) => {
        shape.x += Math.random() * 10 - 5;
        shape.y += Math.random() * 10 - 5;
      });

// Call the game loop recursively
      requestAnimationFrame(gameLoop);
    }

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

You can customize the code further to add additional features, such as user interactions or scoring mechanisms, based on your requirements.