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:30801

←

Prev Next

→

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

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

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

#gameCanvas {
      background-color: #000;
      border: 2px solid #FFF;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="480" height="320"></canvas>

// Variables del juego
    const player = {
      x: 32,
      y: canvas.height - 64,
      width: 32,
      height: 32,
      dy: 0,
      jumping: false
    };

const spike = {
      x: canvas.width - 64,
      y: canvas.height - 64,
      width: 32,
      height: 32
    };

const exit = {
      x: 0,
      y: 0,
      width: 32,
      height: 32
    };

// Variables del control
    let leftPressed = false;
    let rightPressed = false;

// Event listeners para el control del jugador
    document.addEventListener('keydown', keyDownHandler);
    document.addEventListener('keyup', keyUpHandler);

function keyDownHandler(e) {
      if (e.key === 'Left' || e.key === 'ArrowLeft') {
        leftPressed = true;
      } else if (e.key === 'Right' || e.key === 'ArrowRight') {
        rightPressed = true;
      }
    }

function keyUpHandler(e) {
      if (e.key === 'Left' || e.key === 'ArrowLeft') {
        leftPressed = false;
      } else if (e.key === 'Right' || e.key === 'ArrowRight') {
        rightPressed = false;
      }
    }

// Función principal del juego
    function gameLoop() {
      update();
      draw();

requestAnimationFrame(gameLoop);
    }

// Función para actualizar la lógica del juego
    function update() {
      // Actualizar posición del jugador
      if (leftPressed && player.x > 0) {
        player.x -= 2;
      } else if (rightPressed && player.x < canvas.width - player.width) {
        player.x += 2;
      }

// Verificar colisión del jugador con los pinchos
      if (checkCollision(player, spike)) {
        gameOver();
      }

// Verificar si el jugador ha alcanzado la salida
      if (checkCollision(player, exit)) {
        gameWon();
      }
    }

// Función para dibujar los elementos del juego
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Dibujar jugador
      ctx.fillStyle = '#F00';
      ctx.fillRect(player.x, player.y, player.width, player.height);

// Dibujar pinchos
      ctx.fillStyle = '#999';
      ctx.fillRect(spike.x, spike.y, spike.width, spike.height);

// Dibujar salida
      ctx.fillStyle = '#0F0';
      ctx.fillRect(exit.x, exit.y, exit.width, exit.height);
    }

// Función para verificar colisiones
    function checkCollision(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
      );
    }

// Función para finalizar el juego si el jugador toca los pinchos
    function gameOver() {
      alert('¡Has perdido! Inténtalo de nuevo.');
      location.reload();
    }

// Función para ganar el juego cuando el jugador alcanza la salida
    function gameWon() {
      alert('¡Has ganado! ¡Felicidades!');
      location.reload();
    }

// Iniciar el juego
    gameLoop();
  </script>
</body>
</html>