AI game creator

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

No:32331

←

Prev Next

→

Generative Art
Developer User15234｜Date and time 23/12/31 4:34:06
Build time 14.434 sec｜Game capacity 3.061KB｜

Script

Sure! Here's an example of a simple generative art game implemented as a single HTML file using JavaScript and enclosed in script tags. It will provide a basic game where the user can control a character (represented by a pictogram) on a smartphone and interact with the generated artwork.

In this game, the canvas is used to generate random artwork by drawing shapes and filling them with random colors. The user can control the character's position by touching the canvas on a smartphone screen. The character is represented by a black square in this example. The artwork is refreshed every second using `setInterval`, and the initial artwork is drawn by calling `generateArtwork` function at the start. The touch events on the canvas update the character's position variables `characterX` and `characterY` accordingly. Feel free to customize the code, add more features, or modify the aesthetics to enhance the game.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Generative Art Game</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// Initialize canvas
    const canvas = document.getElementById('gameCanvas');
    const context = canvas.getContext('2d');

// Generate random artwork
    function generateArtwork() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      
      // Generate random colors and shapes
      const colors = ['#ff0000', '#00ff00', '#0000ff'];
      const shapes = ['circle', 'square', 'triangle'];

for (let i = 0; i < 10; i++) {
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height;
        const color = colors[Math.floor(Math.random() * colors.length)];
        const shape = shapes[Math.floor(Math.random() * shapes.length)];

context.beginPath();
        context.fillStyle = color;

if (shape === 'circle') {
          context.arc(x, y, 20, 0, 2 * Math.PI);
        } else if (shape === 'square') {
          context.rect(x - 20, y - 20, 40, 40);
        } else if (shape === 'triangle') {
          context.moveTo(x - 20, y + 20);
          context.lineTo(x + 20, y + 20);
          context.lineTo(x, y - 20);
          context.closePath();
        }
        
        context.fill();
      }

// Draw character
      context.fillStyle = '#000000';
      context.fillRect(characterX - 10, characterY - 10, 20, 20);
    }

// Handle touch events to move character
    canvas.addEventListener('touchstart', function(event) {
      characterX = event.touches[0].clientX;
      characterY = event.touches[0].clientY;
    });

canvas.addEventListener('touchmove', function(event) {
      characterX = event.touches[0].clientX;
      characterY = event.touches[0].clientY;
    });

// Update canvas regularly
    setInterval(generateArtwork, 1000);

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

The artwork is refreshed every second using `setInterval`, and the initial artwork is drawn by calling `generateArtwork` function at the start. The touch events on the canvas update the character's position variables `characterX` and `characterY` accordingly.

Feel free to customize the code, add more features, or modify the aesthetics to enhance the game.