Ein 2d Side Scroller Spiel wo man dir figur Chase honeywell ein junge mit blonden haaren spielt der ein superheld ist's game

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

No:23194

←

Prev Next

→

Ein 2d Side Scroller Spiel wo man dir figur Chase ..ALL
Developer User10734｜Date and time 23/10/28 23:37:11
Build time 106.981 sec｜Game capacity 4.357KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chase Honeywell: Superheld</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

#gameCanvas {
      background-color: #000;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="400"></canvas>
  <script>
    // Einbindung des Spiels in ein HTML-Canvas

// Initialisierung des Canvas-Elements
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

// Spielfigur
    const player = {
      x: 50,
      y: canvas.height - 100,
      width: 50,
      height: 100,
      color: "#F00",
      speed: 5,
      isJumping: false,
      jumpHeight: 150,
      isFalling: false,
      fallSpeed: 0,
    };

// Steuerungselemente
    const keys = {
      ArrowUp: false,
      ArrowDown: false,
      ArrowLeft: false,
      ArrowRight: false,
    };

// Plattformen im Spiel
    const platforms = [
      { x: 0, y: canvas.height - 20, width: canvas.width, height: 20 },
      { x: 200, y: 300, width: 100, height: 20 },
      { x: 500, y: 200, width: 100, height: 20 },
    ];

// Schleifen-Gameplay-Funktion
    function gameLoop() {
      // Hintergrund leeren
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Bewegung der Spielfigur basierend auf den Tasteneingaben
      if (keys.ArrowUp && !player.isJumping && !player.isFalling) {
        player.isJumping = true;
        player.fallSpeed = -player.speed * 2;
      }
      if (keys.ArrowLeft && player.x > 0) {
        player.x -= player.speed;
      }
      if (keys.ArrowRight && player.x + player.width < canvas.width) {
        player.x += player.speed;
      }

// Spielfigur springen und fallen lassen
      if (player.isJumping) {
        player.y += player.fallSpeed;
        player.jumpHeight -= player.fallSpeed;
        player.fallSpeed += 1;

if (player.jumpHeight <= 0) {
          player.isJumping = false;
          player.isFalling = true;
        }
      } else if (player.isFalling) {
        let isOnPlatform = false;

for (let i = 0; i < platforms.length; i++) {
          const platform = platforms[i];

if (
            player.x < platform.x + platform.width &&
            player.x + player.width > platform.x &&
            player.y + player.height >= platform.y &&
            player.y + player.height <= platform.y + player.fallSpeed
          ) {
            isOnPlatform = true;
            player.isFalling = false;
            player.jumpHeight = 150;
            player.fallSpeed = 0;
            player.y = platform.y - player.height;
            break;
          }
        }

if (!isOnPlatform) {
          player.y += player.fallSpeed;
          player.fallSpeed += 1;
        }
      }

// Kollisionserkennung
      for (let i = 0; i < platforms.length; i++) {
        const platform = platforms[i];

if (
          player.x < platform.x + platform.width &&
          player.x + player.width > platform.x &&
          player.y < platform.y + platform.height &&
          player.y + player.height > platform.y
        ) {
          // Kollisionsbehandlung
          // Hier können zusätzliche Funktionen implementiert werden, z.B. Punktezählung

// Beispiel: Spiel beenden, wenn die Figur eine Plattform berührt
          console.log("Spiel beendet!");
        }
      }

// Zeichnen der Spielfigur
      ctx.fillStyle = player.color;
      ctx.fillRect(player.x, player.y, player.width, player.height);

// Zeichnen der Plattformen
      ctx.fillStyle = "#0F0";
      platforms.forEach(function (platform) {
        ctx.fillRect(platform.x, platform.y, platform.width, platform.height);
      });

// Schleife erneut aufrufen
      requestAnimationFrame(gameLoop);
    }

// Tastenereignisse erfassen
    window.addEventListener("keydown", function (e) {
      if (e.code in keys) {
        keys[e.code] = true;
      }
    });

window.addEventListener("keyup", function (e) {
      if (e.code in keys) {
        keys[e.code] = false;
      }
    });

// Spiel starten
    gameLoop();
  </script>
</body>
</html>