AI game creator

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

No:12696

124

←

Prev Next

→

Generative Art
Developer User4587｜Date and time 23/8/22 7:26:29
Build time 10.673 sec｜Game capacity 2.716KB｜

Script

Sure! Here's a simple game implemented as a single HTML file, using JavaScript and enclosed in script tags. It generates random shapes that act as interactive elements, providing a generative art experience. The game can be played on a smartphone as requested.

This game generates random shapes (circle, rectangle, and triangle) on the canvas every 1 second. The shapes are displayed as white pictograms on a black background. The shapes continuously appear, creating a generative art experience. You can play the game by interacting with the shapes on your smartphone screen.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

```
<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      
      canvas {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: #000000;
      }
    </style>
  </head>
  
  <body>
    <canvas id="gameCanvas"></canvas>
    
    <script>
      // Game configuration
      const canvas = document.getElementById('gameCanvas');
      const ctx = canvas.getContext('2d');
      const shapes = [];

// Generate random shapes
      function generateShapes() {
        const shapeTypes = ['circle', 'rectangle', 'triangle'];

setInterval(() => {
          const x = Math.random() * canvas.width;
          const y = Math.random() * canvas.height;
          const r = Math.random() * 50 + 10; // Random size

const shape = {
            type: shapeTypes[Math.floor(Math.random() * shapeTypes.length)],
            x,
            y,
            r,
          };

shapes.push(shape);
        }, 1000); // Generate shapes every 1 second
      }

// Render shapes on canvas
      function renderShapes() {
        ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas

shapes.forEach((shape) => {
          ctx.beginPath();

if (shape.type === 'circle') {
            ctx.arc(shape.x, shape.y, shape.r, 0, 2 * Math.PI);
          } else if (shape.type === 'rectangle') {
            ctx.rect(shape.x, shape.y, shape.r, shape.r);
          } else if (shape.type === 'triangle') {
            ctx.moveTo(shape.x, shape.y);
            ctx.lineTo(shape.x + shape.r, shape.y);
            ctx.lineTo(shape.x + shape.r / 2, shape.y - shape.r);
          }

ctx.fillStyle = '#FFFFFF';
          ctx.fill();

ctx.closePath();
        });

requestAnimationFrame(renderShapes);
      }

// Initialize game
      function init() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        generateShapes();
        renderShapes();
      }

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