Generative Art's game | AI game creator

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

No:41072

66

Generative Art
Developer User18437｜Date and time 24/2/5 19:53:39
Build time 14.1 sec｜Game capacity 3.09KB｜

Als Programmierer ist es möglich, ein Spiel als Einzeldatei in HTML umzusetzen, welches JavaScript enthält und von ``-Tags umschlossen wird. Hier ist ein Beispiel für ein simples Spiel, das auf der Bedienung per Smartphone ausgelegt ist und Piktogramme verwendet: <br><br> <html lang="de"> <style> /* CSS-Styling für das Spiel */ #loadedGame { font-family: Arial, sans-serif; text-align: center; margin: 0; padding: 0; background-color: #333; } #canvas { margin-top: 20px; } #score { color: #fff; font-size: 24px; margin-top: 10px; } .btn { display: inline-block; margin: 10px; padding: 10px 20px; font-size: 18px; text-align: center; background-color: #4287f5; color: #fff; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; } .btn:hover { background-color: #3570c8; } </style> <h1>Generatives Kunstspiel</h1> <p><em>Klicke auf die Piktogramme, um Punkte zu sammeln.</em></p> <p id="score">Punkte: 0</p> <canvas id="canvas" width="400" height="400"></canvas>

Dieses Spiel generiert zufällige Piktogramme auf dem Canvas und zählt die Punkte jedes Mal, wenn ein Piktogramm erfolgreich angeklickt wird. Das Spielfeld wird alle 1,5 Sekunden aktualisiert, um neue Piktogramme zu generieren. Die Piktogramme können durch neue Symbole oder Bilder ersetzt werden, indem die `piktogramme`-Array-Daten entsprechend angepasst werden.

→ 　

0　

0　

[PR]現在の人気ゲームランキング

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

(C)2023 HisashiApp

Als Programmierer ist es möglich, ein Spiel als Einzeldatei in HTML umzusetzen, welches JavaScript enthält und von `<script>`-Tags umschlossen wird. Hier ist ein Beispiel für ein simples Spiel, das auf der Bedienung per Smartphone ausgelegt ist und Piktogramme verwendet:

```html
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Generatives Kunstspiel</title>
  <style>
    /* CSS-Styling für das Spiel */
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin: 0;
      padding: 0;
      background-color: #333;
    }

#canvas {
      margin-top: 20px;
    }

#score {
      color: #fff;
      font-size: 24px;
      margin-top: 10px;
    }

.btn {
      display: inline-block;
      margin: 10px;
      padding: 10px 20px;
      font-size: 18px;
      text-align: center;
      background-color: #4287f5;
      color: #fff;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

.btn:hover {
      background-color: #3570c8;
    }
  </style>
</head>
<body>
  <h1>Generatives Kunstspiel</h1>
  <p><em>Klicke auf die Piktogramme, um Punkte zu sammeln.</em></p>
  <p id="score">Punkte: 0</p>
  <canvas id="canvas" width="400" height="400"></canvas>

<script>
    // JavaScript-Code für das Spiel
    // Hier folgt nur ein einfaches Beispiel
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    let score = 0;

function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Generiere ein zufälliges Piktogramm und positioniere es
      const x = Math.random() * (canvas.width - 50);
      const y = Math.random() * (canvas.height - 50);
      const pikto = getRandomPiktogramm();
      ctx.fillText(pikto, x, y+40);

// Höre auf Klick-Events und überprüfe, ob das Piktogramm getroffen wurde
      canvas.addEventListener('click', function(e) {
        const rect = canvas.getBoundingClientRect();
        const clickX = e.clientX - rect.left;
        const clickY = e.clientY - rect.top;

if (clickX >= x && clickX <= x + 50 && clickY >= y && clickY <= y + 50) {
          score++;
          document.getElementById('score').textContent = 'Punkte: ' + score;
        }
      });

// Aktualisiere das Spielfeld alle 1,5 Sekunden
      setTimeout(draw, 1500);
    }

// Beispieldaten für Piktogramme
    const piktogramme = ['🎨', '🖌️', '🎭', '🖼️', '🎶'];

function getRandomPiktogramm() {
      const randomIndex = Math.floor(Math.random() * piktogramme.length);
      return piktogramme[randomIndex];
    }

// Starte das Spiel
    draw();
  </script>
</body>
</html>
```

Dieses Spiel generiert zufällige Piktogramme auf dem Canvas und zählt die Punkte jedes Mal, wenn ein Piktogramm erfolgreich angeklickt wird. Das Spielfeld wird alle 1,5 Sekunden aktualisiert, um neue Piktogramme zu generieren. Die Piktogramme können durch neue Symbole oder Bilder ersetzt werden, indem die `piktogramme`-Array-Daten entsprechend angepasst werden.