AI game creator

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

No:37107

←

Prev Next

→

Pac-Man
Developer User16988｜Date and time 24/1/20 6:44:58
Build time 21.538 sec｜Game capacity 6.143KB｜

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>
        #gameboard {
            width: 320px;
            height: 320px;
            border: 1px solid black;
            position: relative;
        }
        .pacman {
            width: 32px;
            height: 32px;
            position: absolute;
            z-index: 1;
            transition: all 0.2s ease-in-out;
        }
        .ghost {
            width: 32px;
            height: 32px;
            position: absolute;
            z-index: 2;
        }
        .food {
            width: 10px;
            height: 10px;
            background-color: yellow;
            border-radius: 50%;
            position: absolute;
            z-index: 3;
        }
    </style>
</head>
<body>
    <div id="gameboard">
        <img class="pacman" id="pacman" src="pacman.png" alt="Pac-Man">
        <img class="ghost" id="ghost1" src="ghost1.png" alt="Ghost">
        <img class="ghost" id="ghost2" src="ghost2.png" alt="Ghost">
        <img class="ghost" id="ghost3" src="ghost3.png" alt="Ghost">
        <img class="ghost" id="ghost4" src="ghost4.png" alt="Ghost">

<div class="food" style="top: 50px; left: 50px;"></div>
        <div class="food" style="top: 50px; left: 100px;"></div>
        <div class="food" style="top: 50px; left: 150px;"></div>
        <div class="food" style="top: 50px; left: 200px;"></div>
        <div class="food" style="top: 50px; left: 250px;"></div>
        <div class="food" style="top: 100px; left: 50px;"></div>
        <div class="food" style="top: 100px; left: 150px;"></div>
        <div class="food" style="top: 100px; left: 200px;"></div>
        <div class="food" style="top: 100px; left: 250px;"></div>
        <div class="food" style="top: 150px; left: 50px;"></div>
        <div class="food" style="top: 150px; left: 250px;"></div>
        <div class="food" style="top: 200px; left: 50px;"></div>
        <div class="food" style="top: 200px; left: 150px;"></div>
        <div class="food" style="top: 200px; left: 200px;"></div>
        <div class="food" style="top: 200px; left: 250px;"></div>
        <div class="food" style="top: 250px; left: 50px;"></div>
        <div class="food" style="top: 250px; left: 100px;"></div>
        <div class="food" style="top: 250px; left: 150px;"></div>
        <div class="food" style="top: 250px; left: 200px;"></div>
        <div class="food" style="top: 250px; left: 250px;"></div>
    </div>

const speed = 5; // The movement speed of Pac-Man
        const gridWidth = 320; // Width of the gameboard
        const gridHeight = 320; // Height of the gameboard

let pacmanX = 0; // X-coordinate of Pac-Man
        let pacmanY = 0; // Y-coordinate of Pac-Man

// Move Pac-Man based on keyboard events
        document.addEventListener('keydown', (event) => {
            switch(event.keyCode) {
                case 37: // Left arrow key
                    movePacman('left');
                    break;
                case 38: // Up arrow key
                    movePacman('up');
                    break;
                case 39: // Right arrow key
                    movePacman('right');
                    break;
                case 40: // Down arrow key
                    movePacman('down');
                    break;
            }
        });

// Move Pac-Man in the specified direction
        function movePacman(direction) {
            // Update Pac-Man's position based on the direction
            if (direction === 'left' && pacmanX > 0) {
                pacmanX -= speed;
            } else if (direction === 'up' && pacmanY > 0) {
                pacmanY -= speed;
            } else if (direction === 'right' && pacmanX < gridWidth - pacman.offsetWidth) {
                pacmanX += speed;
            } else if (direction === 'down' && pacmanY < gridHeight - pacman.offsetHeight) {
                pacmanY += speed;
            }

// Update Pac-Man's position on the gameboard
            pacman.style.left = `${pacmanX}px`;
            pacman.style.top = `${pacmanY}px`;

// Check for collision with food
            for (let i = 0; i < foods.length; i++) {
                if (isColliding(pacman, foods[i])) {
                    eatFood(foods[i]);
                    break;
                }
            }

// Check for collision with ghosts
            for (let i = 0; i < ghosts.length; i++) {
                if (isColliding(pacman, ghosts[i])) {
                    gameOver();
                    break;
                }
            }
        }

// Check if two elements are colliding
        function isColliding(element1, element2) {
            const rect1 = element1.getBoundingClientRect();
            const rect2 = element2.getBoundingClientRect();

return (
                rect1.left < rect2.left + rect2.width &&
                rect1.left + rect1.width > rect2.left &&
                rect1.top < rect2.top + rect2.height &&
                rect1.top + rect1.height > rect2.top
            );
        }

// Remove the eaten food
        function eatFood(food) {
            food.remove();
        }

// Game over functionality
        function gameOver() {
            alert('Game Over!');
            resetGame();
        }

// Reset the game
        function resetGame() {
            // Reset Pac-Man position
            pacman.style.left = '0px';
            pacman.style.top = '0px';
            pacmanX = 0;
            pacmanY = 0;

// Bring back the food
            foods.forEach(food => {
                if (!food.parentNode) {
                    gameboard.appendChild(food);
                }
            });
        }
    </script>
</body>
</html>