AI game creator

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

No:40247

←

Prev Next

→

Pac-Man
Developer User18047｜Date and time 24/2/2 3:30:13
Build time 22.446 sec｜Game capacity 5.824KB｜

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;
            position: relative;
            background-color: black;
        }

.pac-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: yellow;
            position: absolute;
        }

#pac-man {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: yellow;
            position: absolute;
        }

@keyframes eat-dot {
            0% { width: 10px; height: 10px; }
            50% { width: 0px; height: 0px; }
            100% { width: 10px; height: 10px; }
        }

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

#blinky {
            background-color: darkred;
        }

#pinky {
            background-color: lightpink;
        }

#clyde {
            background-color: orange;
        }

#inky {
            background-color: cyan;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

// Create the game board with pac-dots
        function createGameBoard() {
            for (let i = 0; i < 400; i += 20) {
                for (let j = 0; j < 400; j += 20) {
                    const pacDot = document.createElement('div');
                    pacDot.classList.add('pac-dot');
                    pacDot.style.top = i + 'px';
                    pacDot.style.left = j + 'px';
                    gameBoard.appendChild(pacDot);
                }
            }
        }

// Create Pac-Man
        function createPacMan() {
            pacMan.id = 'pac-man';
            pacMan.style.top = '190px';
            pacMan.style.left = '190px';
            gameBoard.appendChild(pacMan);
        }

// Create Ghosts
        function createGhosts() {
            const ghostNames = ['blinky', 'pinky', 'clyde', 'inky'];
            for (let i = 0; i < 4; i++) {
                const ghost = document.createElement('div');
                ghost.classList.add('ghost');
                ghost.id = ghostNames[i];
                ghost.style.top = '170px';
                ghost.style.left = '170px';
                gameBoard.appendChild(ghost);
                ghosts.push(ghost);
            }
        }

// Move Pac-Man
        function movePacMan(event) {
            let top = parseInt(pacMan.style.top);
            let left = parseInt(pacMan.style.left);

switch (event.key) {
                case 'ArrowUp':
                    top -= 20;
                    break;
                case 'ArrowDown':
                    top += 20;
                    break;
                case 'ArrowLeft':
                    left -= 20;
                    break;
                case 'ArrowRight':
                    left += 20;
                    break;
            }

// Restrict Pac-Man's movement within the game board boundaries
            if (top >= 0 && top < 400 && left >= 0 && left < 400) {
                pacMan.style.top = top + 'px';
                pacMan.style.left = left + 'px';
            }

// Check if Pac-Man consumed any pac-dots
            const pacDots = document.getElementsByClassName('pac-dot');
            for (let i = 0; i < pacDots.length; i++) {
                const pacDot = pacDots[i];
                if (pacDot.style.top === pacMan.style.top && pacDot.style.left === pacMan.style.left) {
                    pacDot.parentNode.removeChild(pacDot);
                    score++;
                }
            }

// Check for game over
            if (score === 200) {
                alert('Congratulations! You won!');
            }
        }

// Move Ghosts randomly
        function moveGhosts() {
            const possibleMoves = [-20, 0, 20];
            for (let i = 0; i < ghosts.length; i++) {
                const ghost = ghosts[i];
                const randomMove = Math.floor(Math.random() * 3);
                let top = parseInt(ghost.style.top);
                let left = parseInt(ghost.style.left);

// Check if the new position is within the game board boundaries
                if (
                    top + possibleMoves[randomMove] >= 0 &&
                    top + possibleMoves[randomMove] < 400 &&
                    left + possibleMoves[randomMove] >= 0 &&
                    left + possibleMoves[randomMove] < 400
                ) {
                    top += possibleMoves[randomMove];
                    left += possibleMoves[randomMove];
                }

ghost.style.top = top + 'px';
                ghost.style.left = left + 'px';

// Check for collision between Pac-Man and Ghosts
                if (
                    ghost.style.top === pacMan.style.top &&
                    ghost.style.left === pacMan.style.left
                ) {
                    alert('Game Over! Better luck next time!');
                }
            }
        }

// Start the game
        function startGame() {
            createGameBoard();
            createPacMan();
            createGhosts();
            document.addEventListener('keydown', movePacMan);
            setInterval(moveGhosts, 1000);
        }

// Call the startGame function to begin the game
        startGame();
    </script>
</body>
</html>