AI game creator

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

No:42839

←

Prev Next

→

pacman
Developer User18914｜Date and time 24/2/13 0:49:13
Build time 14.544 sec｜Game capacity 4.191KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Pacman Game</title>
    <style>
        /* CSS styles for the game board and characters */
        #game-board {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            position: relative;
        }

.pacman, .ghost {
            width: 30px;
            height: 30px;
            position: absolute;
            background: url(pacman.png); /* Replace with the path to your pacman pictogram */
        }

.pacman {
            background-position: 0 0; /* Initial pacman mouth position */
            transform: rotate(0deg);
        }

.ghost {
            background: url(ghost.png); /* Replace with the path to your ghost pictogram */
            background-position: 0 0; /* Initial ghost position */
        }
    </style>
</head>
<body>
    <div id="game-board">
        <div id="pacman" class="pacman"></div>
        <div id="ghost" class="ghost"></div>
    </div>

// Pacman's initial position
        let pacmanX = 0;
        let pacmanY = 0;

// Ghost's initial position
        let ghostX = 200;
        let ghostY = 200;

// Function to move the pacman
        function movePacman(direction) {
            const pacman = document.getElementById("pacman");

// Update pacman's position based on the direction
            switch (direction) {
                case "up":
                    pacmanY -= 30;
                    break;
                case "down":
                    pacmanY += 30;
                    break;
                case "left":
                    pacmanX -= 30;
                    break;
                case "right":
                    pacmanX += 30;
                    break;
            }

// Update pacman's CSS properties to move it on the game board
            pacman.style.transform = `rotate(${getRotation(direction)}deg)`;
            pacman.style.left = pacmanX + "px";
            pacman.style.top = pacmanY + "px";
        }

// Function to move the ghost randomly
        function moveGhost() {
            const ghost = document.getElementById("ghost");

// Generate random number between 1 and 4 to determine the direction
            const randomNumber = Math.floor(Math.random() * 4) + 1;

// Update ghost's position based on the random direction
            switch (randomNumber) {
                case 1:
                    ghostY -= 30;
                    break;
                case 2:
                    ghostY += 30;
                    break;
                case 3:
                    ghostX -= 30;
                    break;
                case 4:
                    ghostX += 30;
                    break;
            }

// Update ghost's CSS properties to move it on the game board
            ghost.style.left = ghostX + "px";
            ghost.style.top = ghostY + "px";
        }

// Function to get the rotation in degrees based on the movement direction
        function getRotation(direction) {
            switch (direction) {
                case "up":
                    return 0;
                case "down":
                    return 180;
                case "left":
                    return 270;
                case "right":
                    return 90;
            }
        }

// Event listener to handle keyboard arrow key press
        document.addEventListener("keydown", function (event) {
            const key = event.key;

switch (key) {
                case "ArrowUp":
                    movePacman("up");
                    break;
                case "ArrowDown":
                    movePacman("down");
                    break;
                case "ArrowLeft":
                    movePacman("left");
                    break;
                case "ArrowRight":
                    movePacman("right");
                    break;
            }
        });

// Game loop to continuously move the ghost every second
        setInterval(moveGhost, 1000);
    </script>
</body>
</html>