AI game creator

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

No:29963

←

Prev Next

→

Pac-Man
Developer User14673｜Date and time 23/12/20 3:19:51
Build time 16.506 sec｜Game capacity 4.265KB｜

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>Pac-Man</title>
    <style>
        canvas {
            border: 1px solid black;
            background-color: black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Clase Pac-Man
        class PacMan {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.radius = 20;
                this.mouthOpen = false;
            }
            move() {
                // Mover Pac-Man según la dirección actual
                switch (direction) {
                    case 'up':
                        this.y -= 5;
                        break;
                    case 'down':
                        this.y += 5;
                        break;
                    case 'left':
                        this.x -= 5;
                        break;
                    case 'right':
                        this.x += 5;
                        break;
                }

// Comprobar las colisiones con los bordes del canvas
                if (this.x - this.radius < 0) {
                    this.x = this.radius;
                }
                if (this.x + this.radius > canvas.width) {
                    this.x = canvas.width - this.radius;
                }
                if (this.y - this.radius < 0) {
                    this.y = this.radius;
                }
                if (this.y + this.radius > canvas.height) {
                    this.y = canvas.height - this.radius;
                }
            }
            draw() {
                // Dibujar Pac-Man
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0.25 * Math.PI, 1.75 * Math.PI);
                ctx.lineTo(this.x, this.y);
                ctx.closePath();
                ctx.fillStyle = "yellow";
                ctx.fill();

// Abrir o cerrar la boca de Pac-Man según el estado
                if (this.mouthOpen) {
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
                    ctx.closePath();
                    ctx.fillStyle = "yellow";
                    ctx.fill();
                }
                else {
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.radius, 0.25 * Math.PI, 1.75 * Math.PI);
                    ctx.closePath();
                    ctx.fillStyle = "black";
                    ctx.fill();
                }
            }
        }

// Inicializar el juego
        function startGame() {
            canvas = document.getElementById("gameCanvas");
            ctx = canvas.getContext("2d");
            pacMan = new PacMan(canvas.width / 2, canvas.height / 2);
            score = 0;
            direction = '';

// Configurar los eventos de teclado
            document.addEventListener("keydown", handleKeyDown);

// Iniciar el bucle del juego
            intervalId = setInterval(updateGame, 1000 / 30); // 30 fps
        }

// Manejar el evento de tecla presionada
        function handleKeyDown(event) {
            if (event.keyCode === 37) { // Tecla de flecha izquierda
                direction = 'left';
            }
            else if (event.keyCode === 38) { // Tecla de flecha arriba
                direction = 'up';
            }
            else if (event.keyCode === 39) { // Tecla de flecha derecha
                direction = 'right';
            }
            else if (event.keyCode === 40) { // Tecla de flecha abajo
                direction = 'down';
            }
        }

// Actualizar el juego en cada frame
        function updateGame() {
            clearCanvas();
            pacMan.move();
            pacMan.draw();
        }

// Limpiar el canvas
        function clearCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

// Iniciar el juego
        startGame();

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