AI game creator

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

No:20979

←

Prev Next

→

Pac-Man
Developer User9252｜Date and time 23/10/12 9:36:47
Build time 103.437 sec｜Game capacity 5.413KB｜

Script

Este es un código HTML/JavaScript para el juego de Pac-Man en un formato de archivo HTML único. Utiliza pictogramas para los personajes principales, como el jugador (Pac-Man) y los fantasmas. El juego se implementa dentro de etiquetas de script y utiliza los eventos del teclado para mover a Pac-Man a través del tablero de juego. Los fantasmas también se mueven aleatoriamente. El código verifica continuamente si hay colisiones entre Pac-Man y los fantasmas y muestra una alerta de "Game Over" si se produce una colisión. El juego se ejecuta en un navegador de teléfono inteligente compatible.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Pac-Man</title>
    <style>
        #game-board {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            position: relative;
        }
        .pacman {
            width: 40px;
            height: 40px;
            position: absolute;
        }
        #player {
            top: 160px;
            left: 160px;
        }
        .ghost {
            width: 40px;
            height: 40px;
            position: absolute;
        }
        #ghost-1 {
            top: 0;
            left: 0;
        }
        #ghost-2 {
            top: 0;
            right: 0;
        }
        #ghost-3 {
            bottom: 0;
            left: 0;
        }
        #ghost-4 {
            bottom: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div id="game-board">
        <img id="player" class="pacman" src="pacman.png">
        <img id="ghost-1" class="ghost" src="ghost1.png">
        <img id="ghost-2" class="ghost" src="ghost2.png">
        <img id="ghost-3" class="ghost" src="ghost3.png">
        <img id="ghost-4" class="ghost" src="ghost4.png">
    </div>

const gameBoard = document.getElementById('game-board');
        const boardWidth = gameBoard.offsetWidth;
        const boardHeight = gameBoard.offsetHeight;

let playerX = player.offsetLeft;
        let playerY = player.offsetTop;
        let ghostSpeed = 2;

let intervalId = setInterval(moveGhosts, ghostSpeed);

// Move Pac-Man based on user input
        document.addEventListener('keydown', function(event) {
            const key = event.keyCode;
            if (key === 37 && playerX > 0) {
                playerX -= 40;
            } else if (key === 38 && playerY > 0) {
                playerY -= 40;
            } else if (key === 39 && playerX < boardWidth - 40) {
                playerX += 40;
            } else if (key === 40 && playerY < boardHeight - 40) {
                playerY += 40;
            }
            player.style.left = playerX + "px";
            player.style.top = playerY + "px";
            event.preventDefault();

if (checkCollisions()) {
                alert('Game Over!');
                clearInterval(intervalId);
            }
        });

// Move ghosts randomly
        function moveGhosts() {
            ghosts.forEach(function (ghost) {
                const direction = Math.floor(Math.random() * 4);
                const currentX = parseInt(ghost.style.left);
                const currentY = parseInt(ghost.style.top);

switch (direction) {
                    case 0:
                        if (currentX > 0) {
                            ghost.style.left = (currentX - 40) + 'px';
                        }
                        break;
                    case 1:
                        if (currentY > 0) {
                            ghost.style.top = (currentY - 40) + 'px';
                        }
                        break;
                    case 2:
                        if (currentX < boardWidth - 40) {
                            ghost.style.left = (currentX + 40) + 'px';
                        }
                        break;
                    case 3:
                        if (currentY < boardHeight - 40) {
                            ghost.style.top = (currentY + 40) + 'px';
                        }
                        break;
                }

if (checkCollisions()) {
                    alert('Game Over!');
                    clearInterval(intervalId);
                }
            });
        }

// Check for collisions between Pac-Man and ghosts
        function checkCollisions() {
            const playerRect = player.getBoundingClientRect();
            const playerLeft = playerRect.left;
            const playerTop = playerRect.top;
            const playerRight = playerRect.right;
            const playerBottom = playerRect.bottom;

let collision = false;

ghosts.forEach(function (ghost) {
                const ghostRect = ghost.getBoundingClientRect();
                const ghostLeft = ghostRect.left;
                const ghostTop = ghostRect.top;
                const ghostRight = ghostRect.right;
                const ghostBottom = ghostRect.bottom;

if (!(playerLeft > ghostRight || playerRight < ghostLeft ||
                    playerTop > ghostBottom || playerBottom < ghostTop)) {
                    collision = true;
                }
            });

return collision;
        }
    </script>
</body>
</html>
```