Dino running and jumping over cactus's game

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

No:10920

103

←

Prev Next

→

Dino running and jumping over cactus
Developer User4614｜Date and time 23/8/5 20:40:47
Build time 41.821 sec｜Game capacity 4.197KB｜

Script

Hier ist ein Beispiel für ein einfaches Spiel, das auf einem Smartphone gespielt werden kann. Der Dinosaurier rennt und springt über Kakteen. Die Implementierung erfolgt in einem einzigen HTML-Datei, die JavaScript-Code in den Script-Tags enthält.

Dieses Beispiel enthält vereinfachten HTML-Code, der den Dinosaurier und die Kakteen im Spielbereich darstellt. Der Dinosaurier kann durch Antippen des Bildschirms springen. Das Spiel endet, wenn der Dinosaurier einen Kaktus berührt. Der Score wird gezählt und am Ende angezeigt. Du müsstest jedoch die Grafiken für den Dinosaurier (dino.png) und den Kaktus (cactus.png) bereitstellen und die entsprechenden Dateinamen im CSS-Code aktualisieren.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dino-Spiel</title>
  <style>
    #game {
      border: 1px solid black;
      width: 300px;
      height: 150px;
      position: relative;
      overflow: hidden;
    }
    #dino {
      position: absolute;
      bottom: 0;
      left: 50px;
      width: 50px;
      height: 50px;
      background-image: url('dino.png');
      background-size: cover;
    }
    .cactus {
      position: absolute;
      bottom: 0;
      width: 30px;
      height: 50px;
      background-image: url('cactus.png');
      background-size: cover;
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="dino" onclick="jump()"></div>
  </div>

// Funktion zum Springen des Dinosauriers
    function jump() {
      if (!isJumping) {
        isJumping = true;
        var jumpCount = 0;
        var jumpInterval = setInterval(function() {
          var dinoBottom = parseInt(window.getComputedStyle(dino).getPropertyValue('bottom'));
          if (dinoBottom >= 200) {
            // Springen beenden
            clearInterval(jumpInterval);
            isJumping = false;
          }
          // Dinosaurier nach oben bewegen
          dino.style.bottom = (dinoBottom + 20) + 'px';
          jumpCount++;
          if (jumpCount >= 10) {
            // Dinosaurier nach unten bewegen
            clearInterval(jumpInterval);
            var fallCount = 0;
            var fallInterval = setInterval(function() {
              var dinoBottom = parseInt(window.getComputedStyle(dino).getPropertyValue('bottom'));
              if (dinoBottom <= 0) {
                // Springen beenden
                clearInterval(fallInterval);
                isJumping = false;
              }
              // Dinosaurier nach unten bewegen
              dino.style.bottom = (dinoBottom - 20) + 'px';
              fallCount++;
            }, 20);
          }
        }, 20);
      }
    }

// Funktion zum Erzeugen von Kakteen
    function createCactus() {
      var cactus = document.createElement('div');
      cactus.classList.add('cactus');
      cactus.style.left = '300px';
      cactus.style.animationDuration = Math.random() * 2 + 1 + 's';
      game.appendChild(cactus);

// Kakteenbewegung
      var cactusInterval = setInterval(function() {
        var cactusLeft = parseInt(window.getComputedStyle(cactus).getPropertyValue('left'));
        if (cactusLeft <= 0 && cactusLeft >= -30 && parseInt(window.getComputedStyle(dino).getPropertyValue('bottom')) <= 50) {
          // Spiel beenden
          clearInterval(cactusInterval);
          while (game.firstChild) {
            game.removeChild(game.firstChild);
          }
          alert('Game Over! Dein Score: ' + score);
        }

// Überprüfen, ob Kakteen außerhalb des Spielbereichs sind
        if (cactusLeft < -30) {
          cactus.parentNode.removeChild(cactus);
          score++;
        } else {
          // Kakteen nach links bewegen
          cactus.style.left = (cactusLeft - 5) + 'px';
        }
      }, 20);

// Neue Kakteen erzeugen
      setTimeout(createCactus, Math.random() * 2000);
    }

// Start des Spiels
    createCactus();
  </script>
</body>
</html>
```

Du müsstest jedoch die Grafiken für den Dinosaurier (dino.png) und den Kaktus (cactus.png) bereitstellen und die entsprechenden Dateinamen im CSS-Code aktualisieren.