AI game creator

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

No:12531

←

Prev Next

→

Car
Developer User5180｜Date and time 23/8/19 9:17:16
Build time 21.43 sec｜Game capacity 3.288KB｜

Script

Als Programmierer würde ich ein einfaches Spiel erstellen, das auf einem Smartphone gespielt werden kann und Piktogramme verwendet. Hier ist eine Beispielumsetzung als einzelne HTML-Datei mit eingebettetem JavaScript-Code:

Dieses Spiel zeigt ein zufälliges Piktogramm in der Mitte des Canvas-Bereichs an und der Spieler muss darauf klicken, um Punkte zu sammeln. Der Punktestand wird oben links angezeigt. Das Spiel läuft in einer Endlosschleife, bis der Spieler das Piktogramm verpasst (nicht getroffen) hat. Bitte beachte, dass dies nur eine einfache Beispielumsetzung ist und du das Spiel nach deinen eigenen Anforderungen und Bedürfnissen anpassen kannst.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Ein einfaches Piktogramm-Spiel</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="600"></canvas>

// Spielobjekt
    const game = {
      score: 0,
      canvas: document.getElementById('gameCanvas'),
      context: null,
      currentPictogram: null,
      gameOver: false,

// Initialisierung des Spiels
      init: function() {
        this.context = this.canvas.getContext('2d');
        this.canvas.addEventListener('click', this.onClick.bind(this));
        this.start();
      },

// Spielstart
      start: function() {
        this.gameOver = false;
        this.score = 0;
        this.spawnNewPictogram();
        this.gameLoop();
      },

// Neues Piktogramm erzeugen
      spawnNewPictogram: function() {
        const pictogramKeys = Object.keys(pictograms);
        const randomIndex = Math.floor(Math.random() * pictogramKeys.length);
        this.currentPictogram = pictogramKeys[randomIndex];
      },

// Spiel-Loop
      gameLoop: function() {
        if (this.gameOver) return;

this.clearCanvas();
        this.drawPictogram();
        this.drawScore();

requestAnimationFrame(this.gameLoop.bind(this));
      },

// Canvas löschen
      clearCanvas: function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
      },

// Piktogramm zeichnen
      drawPictogram: function() {
        this.context.font = '100px Arial';
        this.context.fillText(pictograms[this.currentPictogram], this.canvas.width / 2, this.canvas.height / 2);
      },

// Punktestand anzeigen
      drawScore: function() {
        this.context.font = '30px Arial';
        this.context.fillText(`Score: ${this.score}`, 10, 50);
      },

// Klick-Ereignis-Handler
      onClick: function(event) {
        const rect = this.canvas.getBoundingClientRect();
        const clickX = event.clientX - rect.left;
        const clickY = event.clientY - rect.top;

// Überprüfen, ob der Klick das Piktogramm getroffen hat
        if (clickX >= this.canvas.width / 2 - 50 && clickX <= this.canvas.width / 2 + 50 &&
            clickY >= this.canvas.height / 2 - 50 && clickY <= this.canvas.height / 2 + 50) {
          this.score++;
          this.spawnNewPictogram();
        }
      }
    };

// Spiel initialisieren
    game.init();
  </script>
</body>
</html>
```

Bitte beachte, dass dies nur eine einfache Beispielumsetzung ist und du das Spiel nach deinen eigenen Anforderungen und Bedürfnissen anpassen kannst.