AI game creator

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

No:19462

←

Prev Next

→

pong game
Developer User8628｜Date and time 23/10/4 3:39:46
Build time 21.923 sec｜Game capacity 3.528KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      #gameCanvas {
        background-color: black;
        border: 1px solid white;
      }
    </style>
  </head>

// Definiendo las dimensiones y posición inicial de la paleta
      var paddleWidth = 10;
      var paddleHeight = 60;
      var paddleY = (canvas.height - paddleHeight) / 2;

// Definiendo las dimensiones y posición inicial de la pelota
      var ballRadius = 8;
      var ballX = canvas.width / 2;
      var ballY = canvas.height / 2;
      var ballDX = 2;
      var ballDY = -2;

// Definiendo variables para el control táctil del movimiento de la paleta
      var touchStartY = 0;
      var touchEndY = 0;
  
      // Agregando un evento táctil para capturar el movimiento del jugador
      canvas.addEventListener("touchstart", function(event) {
        touchStartY = event.touches[0].clientY;
      });
      
      canvas.addEventListener("touchmove", function(event) {
        event.preventDefault();
        touchEndY = event.touches[0].clientY;
        movePaddle();
      });

// Función para mover la paleta en función del movimiento táctil
      function movePaddle() {
        var touchDiff = touchStartY - touchEndY;
        paddleY -= touchDiff;
  
        // Asegurando que la paleta no se salga del área de juego
        if (paddleY < 0) {
          paddleY = 0;
        } else if (paddleY > canvas.height - paddleHeight) {
          paddleY = canvas.height - paddleHeight;
        }
  
        // Actualizando la posición inicial del toque
        touchStartY = touchEndY;
      };

// Función para dibujar la paleta
      function drawPaddle() {
        context.beginPath();
        context.rect(canvas.width - paddleWidth, paddleY, paddleWidth, paddleHeight);
        context.fillStyle = "#FFFFFF";
        context.fill();
        context.closePath();
      }

// Función para dibujar la pelota
      function drawBall() {
        context.beginPath();
        context.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
        context.fillStyle = "#FFFFFF";
        context.fill();
        context.closePath();
      }

// Función para dibujar el juego completo
      function draw() {
        // Limpiando el lienzo
        context.clearRect(0, 0, canvas.width, canvas.height);

// Dibujando la paleta y la pelota
        drawPaddle();
        drawBall();

// Moviendo la pelota
        ballX += ballDX;
        ballY += ballDY;

// Rebotando la pelota en los bordes del lienzo
        if (ballY + ballDY > canvas.height - ballRadius || ballY + ballDY < ballRadius) {
          ballDY = -ballDY;
        }

// Rebotando la pelota en la paleta
        if (
          ballX + ballDX > canvas.width - paddleWidth &&
          ballY > paddleY &&
          ballY < paddleY + paddleHeight
        ) {
          ballDX = -ballDX;
        }

// Si la pelota se sale de la pantalla, juego terminado
        if (ballX + ballDX > canvas.width) {
          alert("¡Juego terminado!");
          location.reload(); // Recargando la página para reiniciar el juego
        }
      }

// Definiendo la velocidad de actualización del juego
      var gameInterval = setInterval(draw, 10);
    </script>
  </body>
</html>