Ein subwaisörfer Spiel's game

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

No:24294

←

Prev Next

→

Ein subwaisörfer Spiel
Developer User11409｜Date and time 23/11/7 5:53:45
Build time 112.612 sec｜Game capacity 4.911KB｜

Script

Hier ist ein Beispiel für ein einfaches Subway Surfers-Spiel, das als einzelne HTML-Datei mit JavaScript implementiert ist:

Dieses Spiel basiert auf dem Konzept von Subway Surfers und kann auf Smartphones gespielt werden. Der Spieler kontrolliert eine Figur, die automatisch nach vorne läuft. Durch Berühren des Bildschirms springt die Figur über Hindernisse. Das Ziel ist es, so weit wie möglich zu laufen und dabei Punkte zu sammeln. Das Spiel endet, wenn die Figur mit einem Hindernis kollidiert. Es handelt sich nur um ein einfaches Beispiel und kann weiter verbessert werden, indem z.B. weitere Funktionen hinzugefügt, die Grafik verbessert oder eine Highscore-Liste implementiert wird.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Hier ist ein Beispiel für ein einfaches Subway Surfers-Spiel, das als einzelne HTML-Datei mit JavaScript implementiert ist:

```
<!DOCTYPE html>
<html>
<head>
  <title>Subway Surfers</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="600"></canvas>

// Ein Spiel-Objekt erstellen
    const game = {
      canvas: document.getElementById("gameCanvas"),
      ctx: null,
      player: null,
      obstacles: [],
      score: 0,
      isGameOver: false,

// Funktion zum Initialisieren des Spiels
      init: function() {
        this.ctx = this.canvas.getContext("2d");
        this.player = {
          x: 50,
          y: this.canvas.height - 100,
          width: 50,
          height: 50,
          speed: 5,
          isJumping: false,
          jumpHeight: 150
        };

// Event Listener zum Steuern des Spielers hinzufügen
        this.canvas.addEventListener("touchstart", this.jump.bind(this));

// Hauptspiel-Loop starten
        this.update();
      },

// Funktion zum Zeichnen des Spiels
      draw: function() {
        if (this.isGameOver) {
          this.ctx.fillStyle = "red";
          this.ctx.font = "40px Arial";
          this.ctx.fillText("Game Over", 120, this.canvas.height / 2);
          return;
        }

this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        
        this.ctx.fillStyle = "green";
        this.ctx.fillRect(0, this.canvas.height - 100, this.canvas.width, 100);

this.ctx.fillStyle = "blue";
        this.ctx.fillRect(this.player.x, this.player.y, this.player.width, this.player.height);

// Hindernisse zeichnen
        this.ctx.fillStyle = "red";
        this.obstacles.forEach(obstacle => {
          this.ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
        });

// Punktzahl anzeigen
        this.ctx.fillStyle = "white";
        this.ctx.font = "20px Arial";
        this.ctx.fillText("Score: " + this.score, 10, 30);
      },

// Funktion zum Aktualisieren des Spiels
      update: function() {
        if (this.isGameOver) return;
        
        this.draw();

// Spieler bewegen
        if (this.player.isJumping) {
          this.player.y -= this.player.speed;
          if (this.player.y <= this.canvas.height - 100 - this.player.jumpHeight) {
            this.player.isJumping = false;
          }
        } else {
          this.player.y += this.player.speed;
          if (this.player.y >= this.canvas.height - 100) {
            this.player.y = this.canvas.height - 100;
          }
        }

// Hindernisse bewegen
        this.obstacles.forEach(obstacle => {
          obstacle.x -= this.player.speed;
          
          // Prüfen auf Kollision mit dem Spieler
          if (this.checkCollision(obstacle, this.player)) {
            this.gameOver();
          }

// Punktzahl erhöhen, wenn Hindernis erfolgreich passiert wurde
          if (obstacle.x + obstacle.width < 0) {
            this.score++;
          }
        });

// Neue Hindernisse erstellen
        if (Math.random() < 0.02) {
          const obstacle = {
            x: this.canvas.width,
            y: this.canvas.height - 100 - Math.random() * 50,
            width: 30,
            height: 50
          };
          this.obstacles.push(obstacle);
        }

// Hindernisse aufräumen
        this.obstacles = this.obstacles.filter(obstacle => obstacle.x + obstacle.width > 0);

// Nächste Aktualisierung aufrufen
        requestAnimationFrame(this.update.bind(this));
      },

// Funktion zum Springen des Spielers
      jump: function() {
        if (this.isGameOver) return;

if (!this.player.isJumping) {
          this.player.isJumping = true;
        }
      },

// Funktion zur Überprüfung auf Kollision
      checkCollision: function(obj1, obj2) {
        return obj1.x < obj2.x + obj2.width &&
               obj1.x + obj1.width > obj2.x &&
               obj1.y < obj2.y + obj2.height &&
               obj1.y + obj1.height > obj2.y;
      },

// Funktion zum Beenden des Spiels
      gameOver: function() {
        this.isGameOver = true;
      }
    };

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

Es handelt sich nur um ein einfaches Beispiel und kann weiter verbessert werden, indem z.B. weitere Funktionen hinzugefügt, die Grafik verbessert oder eine Highscore-Liste implementiert wird.