Pong Game but you are a egg's game

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

No:19461

←

Prev Next

→

Pong Game but you are a egg
Developer User8628｜Date and time 23/10/4 3:38:58
Build time 20.167 sec｜Game capacity 3.154KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Pong: ¡Juega como un huevo!</title>
    <style>
      canvas {
        border: 1px solid black;
        background-color: #f1f1f1;
      }
    </style>
  </head>
  <body>
    <canvas id="pong" width="800" height="400"></canvas>

// Crear el objeto huevo
      const egg = {
        x: 10,
        y: canvas.height / 2 - 30,
        width: 20,
        height: 30,
        velocityY: 2,
        speed: 4,
        color: "#f7e6af"
      };

// Crear el objeto paleta del jugador
      const player = {
        x: canvas.width - 20,
        y: canvas.height / 2 - 40,
        width: 10,
        height: 80,
        color: "#003399",
        score: 0
      };

// Dibujar el huevo en el canvas
      function drawEgg(x, y, width, height, color) {
        context.fillStyle = color;
        context.fillRect(x, y, width, height);
      }

// Dibujar la paleta del jugador en el canvas
      function drawPlayer(x, y, width, height, color) {
        context.fillStyle = color;
        context.fillRect(x, y, width, height);
      }

// Dibujar la línea central en el canvas
      function drawLine() {
        context.beginPath();
        context.moveTo(canvas.width / 2, 0);
        context.lineTo(canvas.width / 2, canvas.height);
        context.strokeStyle = "#000";
        context.lineWidth = 2;
        context.stroke();
      }

// Actualizar la posición del huevo
      function updateEgg() {
        egg.y += egg.velocityY;

if (egg.y + egg.height > canvas.height || egg.y < 0) {
          egg.velocityY = -egg.velocityY;
        }
      }

// Controlar el movimiento del jugador
      function controlPlayer() {
        canvas.addEventListener("mousemove", function(event) {
          let rect = canvas.getBoundingClientRect();
          player.y = event.clientY - rect.top - player.height / 2;
        });
      }

// Colisión del huevo con la paleta del jugador
      function eggCollidesWithPlayer() {
        if (
          egg.x + egg.width >= player.x &&
          egg.y + egg.height >= player.y &&
          egg.y <= player.y + player.height
        ) {
          egg.speed = -egg.speed;
          egg.velocityY = (egg.y + egg.height / 2 - (player.y + player.height / 2)) * 0.1;
        }
      }

// Actualizar el canvas
      function update() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawLine();
        drawPlayer(player.x, player.y, player.width, player.height, player.color);
        drawEgg(egg.x, egg.y, egg.width, egg.height, egg.color);
        updateEgg();
        eggCollidesWithPlayer();
        requestAnimationFrame(update);
      }

// Iniciar el juego
      function startGame() {
        update();
        controlPlayer();
      }

// Ejecutar la función startGame cuando la página se cargue
      window.onload = function() {
        startGame();
      };
    </script>
  </body>
</html>