Un cuadrado que se mueve a la izquierda y derecha para abajo y arriba's game

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

No:22894

←

Prev Next

→

Un cuadrado que se mueve a la izquierda y derecha ..ALL
Developer User10585｜Date and time 23/10/26 12:40:16
Build time 62.537 sec｜Game capacity 3.347KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <canvas id="gameCanvas" width="320" height="480"></canvas>
  <script>
    // Iniciamos el juego cuando se carga la página
    window.onload = function() {
      // Obtener el elemento canvas y su contexto
      var canvas = document.getElementById("gameCanvas");
      var ctx = canvas.getContext("2d");

// Definir la posición inicial del cuadrado
      var squareX = canvas.width / 2;
      var squareY = canvas.height / 2;

// Definir el tamaño del cuadrado
      var squareSize = 50;

// Definir las variables para el movimiento
      var speed = 5;
      var moveLeft = false;
      var moveRight = false;
      var moveUp = false;
      var moveDown = false;

// Escuchar los eventos táctiles en dispositivos móviles
      canvas.addEventListener("touchstart", handleTouchStart, false);
      canvas.addEventListener("touchend", handleTouchEnd, false);

// Función para manejar el evento touchstart
      function handleTouchStart(event) {
        event.preventDefault(); // Prevenir el comportamiento por defecto

var touch = event.touches[0]; // Obtener el primer toque

// Comprobar la posición del toque en relación con el cuadrado
        if (
          touch.pageX > squareX &&
          touch.pageX < squareX + squareSize &&
          touch.pageY > squareY &&
          touch.pageY < squareY + squareSize
        ) {
          // Determinar si el toque se encuentra en la parte izquierda o derecha del cuadrado
          if (touch.pageX < squareX + squareSize / 2) {
            moveLeft = true; // Mover hacia la izquierda
          } else {
            moveRight = true; // Mover hacia la derecha
          }

// Determinar si el toque se encuentra en la parte superior o inferior del cuadrado
          if (touch.pageY < squareY + squareSize / 2) {
            moveUp = true; // Mover hacia arriba
          } else {
            moveDown = true; // Mover hacia abajo
          }
        }
      }

// Función para manejar el evento touchend
      function handleTouchEnd(event) {
        event.preventDefault(); // Prevenir el comportamiento por defecto

// Reiniciar las variables de movimiento
        moveLeft = false;
        moveRight = false;
        moveUp = false;
        moveDown = false;
      }

// Función para dibujar en el canvas
      function draw() {
        // Limpiar el canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// Dibujar el cuadrado
        ctx.fillStyle = "red";
        ctx.fillRect(squareX, squareY, squareSize, squareSize);

// Actualizar la posición del cuadrado según las variables de movimiento
        if (moveLeft) {
          squareX -= speed; // Mover hacia la izquierda
        }
        if (moveRight) {
          squareX += speed; // Mover hacia la derecha
        }
        if (moveUp) {
          squareY -= speed; // Mover hacia arriba
        }
        if (moveDown) {
          squareY += speed; // Mover hacia abajo
        }

// Solicitar el siguiente frame de animación
        requestAnimationFrame(draw);
      }

// Iniciar el bucle de juego
      draw();
    };
  </script>
</body>
</html>