AI game creator

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

No:29748

←

Prev Next

→

Generative Art
Developer User14607｜Date and time 23/12/18 18:47:57
Build time 19.628 sec｜Game capacity 1.99KB｜

Script

Sure! Here is an example of a simple generative art game implemented as a single HTML file using JavaScript:

This code sets up a canvas element where random shapes of different colors are drawn whenever the user touches or clicks on the canvas. The canvas size is adjusted to fit the screen, and shapes are generated randomly each time. You can further enhance the game by adding scoring, level progression, or additional game mechanics as per your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

Sure! Here is an example of a simple generative art game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Generative Art Game</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 20px auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

// Function to 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;
    }

// Function to draw a random shape
    function drawRandomShape() {
      const x = Math.random() * canvas.width;
      const y = Math.random() * canvas.height;
      const width = Math.random() * 100 + 50;
      const height = Math.random() * 100 + 50;
      const color = getRandomColor();

ctx.fillStyle = color;
      ctx.fillRect(x, y, width, height);
    }

// Event listener for touch/click
    canvas.addEventListener("touchstart", function (e) {
      e.preventDefault();
      drawRandomShape();
    });

// Game code ends here

// Resize canvas to fit the screen
    function fitToScreen() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    }

// Call fitToScreen() initially and on window resize
    fitToScreen();
    window.addEventListener("resize", fitToScreen);
  </script>
</body>
</html>
```