AI game creator

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

No:13427

131

←

Prev Next

→

Generative Art
Developer User5877｜Date and time 23/8/28 5:03:41
Build time 13.971 sec｜Game capacity 2.812KB｜

Script

Het onderstaande voorbeeld toont een eenvoudig voorbeeld van een generatieve kunstgame in een enkel HTML-bestand met Javascript. Het spel kan worden gespeeld op een smartphone en gebruikt pictogrammen om de kunst te genereren.

Wanneer je dit HTML-bestand opent in je browser en erop klikt, wordt er telkens een willekeurig kunstelement (cirkel, vierkant of driehoek) op het canvas getekend met een willekeurige kleur, grootte en positie. Je kunt blijven klikken om nieuwe kunstelementen te genereren en zo je eigen generatieve kunstwerk te creëren.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Generatieve Kunst Game</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas" width="300" height="300"></canvas>

// Functie om een willekeurige kleur te genereren
    function getRandomColor() {
      var letters = "0123456789ABCDEF";
      var color = "#";
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }

// Functie om een willekeurige positie te genereren
    function getRandomPosition() {
      var x = Math.floor(Math.random() * canvas.width);
      var y = Math.floor(Math.random() * canvas.height);
      return { x: x, y: y };
    }

// Functie om een willekeurige grootte te genereren
    function getRandomSize() {
      var size = Math.floor(Math.random() * 50) + 10;
      return size;
    }

// Functie om een willekeurige vorm te genereren
    function getRandomShape() {
      var shapes = ["circle", "square", "triangle"];
      var index = Math.floor(Math.random() * shapes.length);
      return shapes[index];
    }

// Functie om een kunstelement te tekenen
    function drawArtElement() {
      var position = getRandomPosition();
      var color = getRandomColor();
      var size = getRandomSize();
      var shape = getRandomShape();

context.beginPath();

if (shape === "circle") {
        context.arc(position.x, position.y, size, 0, 2 * Math.PI);
      } else if (shape === "square") {
        context.rect(position.x, position.y, size, size);
      } else if (shape === "triangle") {
        context.moveTo(position.x, position.y);
        context.lineTo(position.x + size, position.y);
        context.lineTo(position.x + size / 2, position.y + size);
        context.closePath();
      }

context.fillStyle = color;
      context.fill();
    }

// Luister naar klikgebeurtenis op het canvas om kunstelementen te genereren
    canvas.addEventListener("click", function (event) {
      drawArtElement();
    });
  </script>
</body>
</html>
```