Un juego de plataformas que tenga de protagonista a un mono's game

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

No:14842

112

←

Prev Next

→

Un juego de plataformas que tenga de protagonista ..ALL
Developer User6369｜Date and time 23/9/4 12:12:41
Build time 38.132 sec｜Game capacity 4.011KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Super Mono</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="600"></canvas>

// Clase jugador
    class Player {
      constructor(x, y) {
        this.x = x;
        this.y = y;
        this.width = 40;
        this.height = 40;
        this.velocityY = 0;
        this.gravity = 0.5;
        this.jumping = false;
      }

// Dibujar el jugador
      draw() {
        ctx.fillStyle = "brown";
        ctx.fillRect(this.x, this.y, this.width, this.height);
      }

// Controlar el movimiento del jugador
      move() {
        this.y += this.velocityY;

// Aplicar gravedad
        if (this.y < canvas.height - this.height) {
          this.velocityY += this.gravity;
          this.jumping = true;
        } else {
          this.velocityY = 0;
          this.jumping = false;
          this.y = canvas.height - this.height;
        }
      }

// Saltar
      jump() {
        if (!this.jumping) {
          this.velocityY = -12;
          this.jumping = true;
        }
      }

// Verificar colisión con las plataformas
      checkCollision() {
        for (let platform of platforms) {
          if (
            this.x < platform.x + platform.width &&
            this.x + this.width > platform.x &&
            this.y < platform.y + platform.height &&
            this.y + this.height > platform.y
          ) {
            // Colisión detectada
            this.velocityY = 0;
            this.jumping = false;
            this.y = platform.y - this.height;
          }
        }
      }
    }

// Clase plataforma
    class Platform {
      constructor(x, y, width) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = 10;
      }

// Dibujar plataforma
      draw() {
        ctx.fillStyle = "green";
        ctx.fillRect(this.x, this.y, this.width, this.height);
      }
    }

// Crear jugador y plataformas
    function createGameObjects() {
      player = new Player(100, canvas.height - 50);

platforms.push(new Platform(0, canvas.height - 20, canvas.width));
      platforms.push(new Platform(200, canvas.height - 150, 100));
      platforms.push(new Platform(400, canvas.height - 200, 120));
      platforms.push(new Platform(600, canvas.height - 250, 80));
    }

// Control de eventos de teclado
    document.addEventListener("keydown", jumpKeyPressed);
    document.addEventListener("keyup", jumpKeyReleased);

// Saltar cuando se presiona la tecla de espacio
    function jumpKeyPressed(event) {
      if (event.keyCode === 32) {
        player.jump();
      }
    }

// Detener el salto cuando se suelta la tecla de espacio
    function jumpKeyReleased(event) {
      if (event.keyCode === 32 && player.jumping) {
        player.velocityY = 0;
      }
    }

// Actualizar el juego en cada fotograma
    function updateGame() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

player.move();
      player.checkCollision();

if (!gameover) {
        for (let platform of platforms) {
          platform.draw();
        }

player.draw();

score += 1;

// Mostrar la puntuación en la parte superior derecha
        ctx.fillStyle = "black";
        ctx.font = "20px Arial";
        ctx.fillText("Puntuación: " + score, canvas.width - 180, 30);

requestAnimationFrame(updateGame);
      } else {
        // Fin del juego
        ctx.fillStyle = "red";
        ctx.font = "bold 40px Arial";
        ctx.fillText("GAME OVER", canvas.width / 2 - 100, canvas.height / 2);
      }
    }

// Comenzar el juego
    createGameObjects();
    updateGame();

</script>
</body>
</html>