AI game creator

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

No:38875

115

←

Prev Next

→

Pac-Man
Developer User17463｜Date and time 24/1/26 3:26:10
Build time 38.295 sec｜Game capacity 6.864KB｜

Script

←

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: 2px solid black;
            background-color: #000;
            position: relative;
        }

.pacman {
            width: 20px;
            height: 20px;
            position: absolute;
            top: 180px;
            left: 180px;
            background-color: yellow;
            border-radius: 50%;
        }

.ghost {
            width: 20px;
            height: 20px;
            position: absolute;
            background-color: red;
            border-radius: 50%;
        }

.food {
            width: 10px;
            height: 10px;
            position: absolute;
            background-color: white;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="game-board">
        <div id="pacman" class="pacman"></div>
        <div id="ghost1" class="ghost"></div>
        <div id="ghost2" class="ghost"></div>
        <div id="ghost3" class="ghost"></div>
        <div id="food1" class="food" style="top: 40px; left: 60px;"></div>
        <div id="food2" class="food" style="top: 120px; left: 220px;"></div>
        <div id="food3" class="food" style="top: 320px; left: 280px;"></div>
    </div>

// Function to handle key presses
        function handleKeyPress(event) {
            const keyCode = event.keyCode;
            const speed = 20;
            
            if (keyCode === 37) {
                // Left arrow key pressed
                movePacman(-speed, 0);
            } else if (keyCode === 38) {
                // Up arrow key pressed
                movePacman(0, -speed);
            } else if (keyCode === 39) {
                // Right arrow key pressed
                movePacman(speed, 0);
            } else if (keyCode === 40) {
                // Down arrow key pressed
                movePacman(0, speed);
            }
        }

// Function to move Pac-Man
        function movePacman(dx, dy) {
            const pacManElement = document.getElementById('pacman');
            const gameBoard = document.getElementById('game-board');
            const pacmanNewX = pacmanPos.x + dx;
            const pacmanNewY = pacmanPos.y + dy;

if (pacmanNewX >= 0 && pacmanNewX <= gameBoard.offsetWidth - pacManElement.offsetWidth) {
                pacmanPos.x = pacmanNewX;
                pacManElement.style.left = pacmanNewX + 'px';
            }

if (pacmanNewY >= 0 && pacmanNewY <= gameBoard.offsetHeight - pacManElement.offsetHeight) {
                pacmanPos.y = pacmanNewY;
                pacManElement.style.top = pacmanNewY + 'px';
            }

checkCollision();
        }

// Function to check collision between Pac-Man and ghosts/food
        function checkCollision() {
            const pacManElement = document.getElementById('pacman');
            const ghost1Element = document.getElementById('ghost1');
            const ghost2Element = document.getElementById('ghost2');
            const ghost3Element = document.getElementById('ghost3');
            const food1Element = document.getElementById('food1');
            const food2Element = document.getElementById('food2');
            const food3Element = document.getElementById('food3');

if (
                isColliding(pacManElement, ghost1Element) ||
                isColliding(pacManElement, ghost2Element) ||
                isColliding(pacManElement, ghost3Element)
            ) {
                gameOver();
            }

if (!food1Eaten && isColliding(pacManElement, food1Element)) {
                food1Eaten = true;
                food1Element.style.display = 'none';
            }

if (!food2Eaten && isColliding(pacManElement, food2Element)) {
                food2Eaten = true;
                food2Element.style.display = 'none';
            }

if (!food3Eaten && isColliding(pacManElement, food3Element)) {
                food3Eaten = true;
                food3Element.style.display = 'none';
            }

if (food1Eaten && food2Eaten && food3Eaten) {
                gameWon();
            }
        }

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

return !(
                rect1.top > rect2.bottom ||
                rect1.bottom < rect2.top ||
                rect1.right < rect2.left ||
                rect1.left > rect2.right
            );
        }

// Function called when game is over
        function gameOver() {
            window.alert('Game Over');
            resetGame();
        }

// Function called when game is won
        function gameWon() {
            window.alert('You Won!');
            resetGame();
        }

// Function to reset the game
        function resetGame() {
            const pacManElement = document.getElementById('pacman');
            const ghost1Element = document.getElementById('ghost1');
            const ghost2Element = document.getElementById('ghost2');
            const ghost3Element = document.getElementById('ghost3');
            const food1Element = document.getElementById('food1');
            const food2Element = document.getElementById('food2');
            const food3Element = document.getElementById('food3');
            
            pacManElement.style.top = '180px';
            pacManElement.style.left = '180px';
            pacmanPos = { x: 180, y: 180 };

ghost1Element.style.top = '0px';
            ghost1Element.style.left = '0px';
            ghost1Pos = { x: 0, y: 0 };

ghost2Element.style.top = '0px';
            ghost2Element.style.left = '0px';
            ghost2Pos = { x: 0, y: 0 };

ghost3Element.style.top = '0px';
            ghost3Element.style.left = '0px';
            ghost3Pos = { x: 0, y: 0 };

food1Element.style.display = 'block';
            food2Element.style.display = 'block';
            food3Element.style.display = 'block';
            food1Eaten = false;
            food2Eaten = false;
            food3Eaten = false;
        }

// Start the game
        function startGame() {
            document.addEventListener('keydown', handleKeyPress);
        }

startGame();
    </script>
</body>
</html>