AI game creator

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

No:23794

←

Prev Next

→

Generative Art
Developer User11149｜Date and time 23/11/3 17:22:47
Build time 42.719 sec｜Game capacity 2.397KB｜

Script

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

This game will generate random shapes (circles or squares) of random sizes and colors on the canvas. The canvas size is set to the size of the device's screen, making it suitable for smartphone operation. The game loop continuously redraws the canvas at a high frame rate, creating an interactive generative art experience. You can play the game by opening the HTML file in a web browser on your smartphone.

←

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 using 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"></canvas>

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

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

// Generate random position on canvas
    function getRandomPosition() {
      const x = Math.random() * canvas.width;
      const y = Math.random() * canvas.height;
      return { x, y };
    }

// Draw shape on canvas
    function drawShape() {
      const position = getRandomPosition();
      const color = getRandomColor();
      context.fillStyle = color;

const shapeSize = Math.random() * 100; // Random shape size
      const shapeType = Math.random() > 0.5 ? 'circle' : 'square'; // Random shape type

if (shapeType === 'circle') {
        context.beginPath();
        context.arc(position.x, position.y, shapeSize, 0, Math.PI * 2, false);
        context.closePath();
        context.fill();
      } else {
        context.fillRect(position.x, position.y, shapeSize, shapeSize);
      }
    }

// Start the game loop
    function gameLoop() {
      context.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas
      drawShape();
      requestAnimationFrame(gameLoop); // Request next frame
    }

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