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

No:40698

←

Prev Next

→

Spiderman fútbol game
Developer User18227｜Date and time 24/2/3 23:01:00
Build time 19.442 sec｜Game capacity 4.623KB｜

Script

Spiderman Fútbol Game

←

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">
  <title>Spiderman Fútbol Game</title>
  <style>
    body {
      text-align: center;
      font-family: Arial, sans-serif;
    }
    #campo {
      margin-top: 20px;
    }
    #jugador {
      position: relative;
      top: 0;
      left: 0;
      width: 50px;
      height: 50px;
      background-image: url('spiderman.png');
      background-size: cover;
    }
    #pelota {
      position: relative;
      top: 0;
      left: 0;
      width: 30px;
      height: 30px;
      background-image: url('soccer_ball.png');
      background-size: cover;
    }
    #resultado {
      font-size: 24px;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h1>Spiderman Fútbol Game</h1>
  <canvas id="campo" width="600" height="400"></canvas>
  <p id="resultado"></p>

// Crear el objeto jugador
    var jugador = {
      x: canvas.width / 2,
      y: canvas.height - 50,
      width: 50,
      height: 50,
      velocidad: 5
    };

// Crear el objeto pelota
    var pelota = {
      x: canvas.width / 2,
      y: 0,
      width: 30,
      height: 30,
      velocidad: 3,
      direccionX: Math.random() < 0.5 ? -1 : 1,
      direccionY: 1
    };

// Variables para el control de juego
    var derechaPresionada = false;
    var izquierdaPresionada = false;
    var juegoTerminado = false;

// Event listeners para las teclas de dirección
    document.addEventListener("keydown", presionoTecla, false);
    document.addEventListener("keyup", soltoTecla, false);

// Función para manejar la presión de teclas
    function presionoTecla(event) {
      if (event.keyCode === 39) {
        derechaPresionada = true;
      } else if (event.keyCode === 37) {
        izquierdaPresionada = true;
      }
    }

// Función para manejar la liberación de teclas
    function soltoTecla(event) {
      if (event.keyCode === 39) {
        derechaPresionada = false;
      } else if (event.keyCode === 37) {
        izquierdaPresionada = false;
      }
    }

// Función para dibujar la pelota en el canvas
    function dibujarPelota() {
      context.beginPath();
      context.rect(pelota.x, pelota.y, pelota.width, pelota.height);
      context.fillStyle = "red";
      context.fill();
      context.closePath();
    }

// Función para dibujar el jugador en el canvas
    function dibujarJugador() {
      context.beginPath();
      context.rect(jugador.x, jugador.y, jugador.width, jugador.height);
      context.fillStyle = "blue";
      context.fill();
      context.closePath();
    }

// Función para mover al jugador
    function moverJugador() {
      if (derechaPresionada && jugador.x < canvas.width - jugador.width) {
        jugador.x += jugador.velocidad;
      } else if (izquierdaPresionada && jugador.x > 0) {
        jugador.x -= jugador.velocidad;
      }
    }

// Función para mover la pelota
    function moverPelota() {
      pelota.x += pelota.velocidad * pelota.direccionX;
      pelota.y += pelota.velocidad * pelota.direccionY;

// Verificar colisión con las paredes del campo
      if (pelota.x + pelota.width > canvas.width || pelota.x < 0) {
        pelota.direccionX *= -1;
      }
      if (pelota.y + pelota.height > canvas.height) {
        juegoTerminado = true;
      }

// Verificar colisión con el jugador
      if (
        pelota.y + pelota.height > jugador.y &&
        pelota.x + pelota.width > jugador.x &&
        pelota.x < jugador.x + jugador.width
      ) {
        pelota.direccionY *= -1;
      }
    }

// Función para detectar la finalización del juego
    function verificarEstadoJuego() {
      if (juegoTerminado) {
        dibujarMensaje("¡Juego terminado!");
        return;
      }

// Dibujar los elementos en el canvas
      context.clearRect(0, 0, canvas.width, canvas.height);
      dibujarPelota();
      dibujarJugador();

// Mover los elementos
      moverJugador();
      moverPelota();

// Solicitar la próxima animación del frame
      requestAnimationFrame(verificarEstadoJuego);
    }

// Función para mostrar un mensaje en el canvas
    function dibujarMensaje(mensaje) {
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.font = "30px Arial";
      context.fillStyle = "black";
      context.fillText(mensaje, canvas.width / 2 - 100, canvas.height / 2);
    }

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