Pac-Man's game | AI game creator

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

No:45021

82

Pac-Man
Developer User19548｜Date and time 24/2/20 0:20:52
Build time 10.424 sec｜Game capacity 1.925KB｜

→ 　

0　

0　

　
　
　
　

[PR]現在の売れ筋Kindle本ランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
<title>Pac-Man Game</title>
<style>
    #game-board {
        width: 300px;
        height: 300px;
        border: 1px solid black;
        background-color: black;
        position: relative;
    }
    .player {
        width: 20px;
        height: 20px;
        background-color: yellow;
        border-radius: 50%;
        position: absolute;
    }
    .ghost {
        width: 20px;
        height: 20px;
        background-color: red;
        position: absolute;
    }
</style>
</head>
<body>
<div id="game-board">
    <div class="player" id="pacman"></div>
    <div class="ghost" id="ghost"></div>
</div>

<script>
    const pacman = document.getElementById('pacman');
    const ghost = document.getElementById('ghost');
    
    let pacmanX = 50;
    let pacmanY = 50;
    let ghostX = 150;
    let ghostY = 150;
    
    pacman.style.top = pacmanY + 'px';
    pacman.style.left = pacmanX + 'px';
    
    ghost.style.top = ghostY + 'px';
    ghost.style.left = ghostX + 'px';
    
    document.addEventListener('keydown', (event) => {
        if (event.key === 'ArrowRight') {
            pacmanX += 10;
        } else if (event.key === 'ArrowLeft') {
            pacmanX -= 10;
        } else if (event.key === 'ArrowDown') {
            pacmanY += 10;
        } else if (event.key === 'ArrowUp') {
            pacmanY -= 10;
        }
        
        pacman.style.top = pacmanY + 'px';
        pacman.style.left = pacmanX + 'px';
        
        // Ghost movement
        const direction = Math.floor(Math.random() * 4);
        if (direction === 0) {
            ghostX += 10;
        } else if (direction === 1) {
            ghostX -= 10;
        } else if (direction === 2) {
            ghostY += 10;
        } else {
            ghostY -= 10;
        }
        
        ghost.style.top = ghostY + 'px';
        ghost.style.left = ghostX + 'px';
    });
</script>
</body>
</html>