Pac-Man's game | AI game creator

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

No:19954

93

Pac-Man
Developer User8885｜Date and time 23/10/7 14:22:57
Build time 13.203 sec｜Game capacity 2.786KB｜

→ 　

0　

0　

[PR]現在のプレゼントランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Pac-Man</title>
    <style>
      canvas {
        display: block;
        border: 2px solid black;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

<script>
      // Inicialización
      const canvas = document.getElementById("gameCanvas");
      const context = canvas.getContext("2d");
      
      // Tamaño de la cuadrícula del juego
      const gridSize = 20;
      
      // Posición y dirección de Pac-Man
      let pacmanX = 200;
      let pacmanY = 200;
      let pacmanDirection = "right"; // initial direction
      
      // Función para dibujar Pac-Man
      function drawPacman() {
        context.fillStyle = "yellow";
        context.beginPath();
        
        // Dibujar la boca de Pac-Man basado en su dirección
        switch (pacmanDirection) {
          case "up":
            context.arc(pacmanX, pacmanY, gridSize/2, 1.75 * Math.PI, 1.25 * Math.PI);
            break;
            
          case "down":
            context.arc(pacmanX, pacmanY, gridSize/2, 0.75 * Math.PI, 0.25 * Math.PI);
            break;
            
          case "left":
            context.arc(pacmanX, pacmanY, gridSize/2, 1.25 * Math.PI, 0.75 * Math.PI);
            break;
            
          case "right":
            context.arc(pacmanX, pacmanY, gridSize/2, 0.25 * Math.PI, 1.75 * Math.PI);
            break;
        }
        
        context.lineTo(pacmanX, pacmanY);
        context.closePath();
        context.fill();
      }
      
      // Función para borrar el lienzo del juego
      function clearCanvas() {
        context.clearRect(0, 0, canvas.width, canvas.height);
      }
      
      // Función para actualizar el juego
      function updateGame() {
        clearCanvas();
        drawPacman();
        
        // Resto de lógica del juego...
      }
      
      // Funciones para manejar los eventos táctiles en dispositivos móviles
      function handleTouchStart(event) {
        const touch = event.touches[0];
        const touchX = touch.pageX - canvas.offsetLeft;
        const touchY = touch.pageY - canvas.offsetTop;
        
        // Resto de lógica para manejar el inicio del toque
      }
      
      function handleTouchEnd(event) {
        // Resto de lógica para manejar la finalización del toque
      }
      
      // Manejar eventos táctiles en dispositivos móviles
      canvas.addEventListener("touchstart", handleTouchStart);
      canvas.addEventListener("touchend", handleTouchEnd);
      
      // Iniciar el bucle de juego
      setInterval(updateGame, 1000/60); // Actualizar el juego aproximadamente 60 veces por segundo
    </script>
  </body>
</html>