AI game creator

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

No:19659

←

Prev Next

→

Pac-Man
Developer User8183｜Date and time 23/10/5 9:43:08
Build time 34.079 sec｜Game capacity 5.656KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Pac-Man Game</title>
    <style>
        #game-board {
            width: 420px;
            height: 420px;
            border: 2px solid black;
            background-color: #000;
            margin: 0 auto;
            position: relative;
        }
        
        .pacman {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: yellow;
            transition: left 0.2s ease, top 0.2s ease;
        }
        
        .ghost {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #ff0000;
            transition: left 0.2s ease, top 0.2s ease;
        }
        
        .food {
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #ffffff;
        }
    </style>
</head>
<body>

document.addEventListener("keydown", movePacman);

function movePacman(event) {
            var x = pacman.offsetLeft;
            var y = pacman.offsetTop;

switch (event.key) {
                case "ArrowUp":
                    y -= 20;
                    moveGhost();
                    break;
                case "ArrowDown":
                    y += 20;
                    moveGhost();
                    break;
                case "ArrowLeft":
                    x -= 20;
                    moveGhost();
                    break;
                case "ArrowRight":
                    x += 20;
                    moveGhost();
                    break;
            }

if (x < 0) x = 0;
            if (x > 400) x = 400;
            if (y < 0) y = 0;
            if (y > 400) y = 400;

pacman.style.top = y + "px";
            pacman.style.left = x + "px";

checkCollision();
        }

function moveGhost() {
            for (var i = 0; i < ghosts.length; i++) {
                var randomDirection = Math.floor(Math.random() * 4);
                var x = ghosts[i].offsetLeft;
                var y = ghosts[i].offsetTop;

switch (randomDirection) {
                    case 0: // up
                        y -= 20;
                        break;
                    case 1: // down
                        y += 20;
                        break;
                    case 2: // left
                        x -= 20;
                        break;
                    case 3: // right
                        x += 20;
                        break;
                }

if (x < 0) x = 0;
                if (x > 400) x = 400;
                if (y < 0) y = 0;
                if (y > 400) y = 400;

ghosts[i].style.top = y + "px";
                ghosts[i].style.left = x + "px";
            }

checkCollision();
        }

function checkCollision() {
            var pacmanRect = pacman.getBoundingClientRect();
            var foodItems = document.getElementsByClassName("food");

for (var i = 0; i < foodItems.length; i++) {
                var foodRect = foodItems[i].getBoundingClientRect();

if (
                    pacmanRect.left < foodRect.right &&
                    pacmanRect.right > foodRect.left &&
                    pacmanRect.top < foodRect.bottom &&
                    pacmanRect.bottom > foodRect.top
                ) {
                    foodItems[i].remove();
                    score += 10;
                }
            }

if (score === 140) {
                alert("Congratulations! You won!");
            }

for (var j = 0; j < ghosts.length; j++) {
                var ghostRect = ghosts[j].getBoundingClientRect();

if (
                    pacmanRect.left < ghostRect.right &&
                    pacmanRect.right > ghostRect.left &&
                    pacmanRect.top < ghostRect.bottom &&
                    pacmanRect.bottom > ghostRect.top
                ) {
                    alert("Game Over! You got caught by a ghost.");
                    location.reload();
                }
            }
        }
    </script>
</body>
</html>