A platformer with spikes and a exit, that if you enter, you win's game

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

No:30800

←

Prev Next

→

A platformer with spikes and a exit, that if you e..ALL
Developer User14891｜Date and time 23/12/24 6:43:11
Build time 15.717 sec｜Game capacity 4.141KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
   <title>Platformer Game</title>
   <style>
      body {
         margin: 0;
         padding: 0;
         overflow: hidden;
      }
      canvas {
         background-color: #000;
         display: block;
      }
   </style>
</head>
<body>
   <canvas id="gameCanvas"></canvas>
   <script>
      // Defining the game canvas
      const canvas = document.getElementById("gameCanvas");
      const ctx = canvas.getContext("2d");
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

// Pictograms for player, spikes, and exit
      const playerImage = new Image();
      playerImage.src = "player.png";

const spikeImage = new Image();
      spikeImage.src = "spikes.png";

const exitImage = new Image();
      exitImage.src = "exit.png";

// Game objects
      const player = {
         x: 50,
         y: canvas.height - 100,
         width: 50,
         height: 50,
         speed: 5,
         dx: 0,
         dy: 0,
      };

const spikes = [
         { x: 200, y: canvas.height - 100, width: 50, height: 50 },
         { x: 400, y: canvas.height - 200, width: 50, height: 50 },
         // Add more spikes as needed
      ];

const exit = {
         x: canvas.width - 100,
         y: canvas.height - 100,
         width: 50,
         height: 50,
      };

// Keyboard event listeners
      document.addEventListener("keydown", (e) => {
         if (e.key === "ArrowUp" || e.key === "w") {
            player.dy = -player.speed;
         } else if (e.key === "ArrowDown" || e.key === "s") {
            player.dy = player.speed;
         } else if (e.key === "ArrowRight" || e.key === "d") {
            player.dx = player.speed;
         } else if (e.key === "ArrowLeft" || e.key === "a") {
            player.dx = -player.speed;
         }
      });

// Update function for game logic
      function update() {
         // Clear canvas
         ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw player
         ctx.drawImage(
            playerImage,
            player.x,
            player.y,
            player.width,
            player.height
         );

// Draw spikes
         spikes.forEach((spike) => {
            ctx.drawImage(spikeImage, spike.x, spike.y, spike.width, spike.height);
         });

// Draw exit
         ctx.drawImage(exitImage, exit.x, exit.y, exit.width, exit.height);

// Update player position
         player.x += player.dx;
         player.y += player.dy;

// Check collision with spikes
         spikes.forEach((spike) => {
            if (
               player.x < spike.x + spike.width &&
               player.x + player.width > spike.x &&
               player.y < spike.y + spike.height &&
               player.y + player.height > spike.y
            ) {
               // Player collided with spikes, reset position
               player.x = 50;
               player.y = canvas.height - 100;
            }
         });

// Check if player reached the exit
         if (
            player.x < exit.x + exit.width &&
            player.x + player.width > exit.x &&
            player.y < exit.y + exit.height &&
            player.y + player.height > exit.y
         ) {
            // Player reached the exit
            alert("¡Has ganado!");
            resetGame();
         }

// Call the update function again
         requestAnimationFrame(update);
      }

// Function to reset game
      function resetGame() {
         player.x = 50;
         player.y = canvas.height - 100;
      }

// Start the game
      update();
   </script>
</body>
</html>