AI game creator

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

No:20106

←

Prev Next

→

Pac-Man
Developer User8955｜Date and time 23/10/8 9:58:39
Build time 15.69 sec｜Game capacity 3.844KB｜

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>
        #game-container {
            width: 400px;
            height: 400px;
            background-color: black;
            position: relative;
            margin: 0 auto;
        }

#pacman {
            width: 40px;
            height: 40px;
            background-image: url('pacman.png');
            background-size: cover;
            position: absolute;
            top: 0;
            left: 0;
        }

.ghost {
            width: 40px;
            height: 40px;
            background-image: url('ghost.png');
            background-size: cover;
            position: absolute;
            top: 160px;
            left: 200px;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="pacman"></div>
        <div id="ghost1" class="ghost"></div>
        <div id="ghost2" class="ghost"></div>
        <div id="ghost3" class="ghost"></div>
    </div>

var pacman = document.getElementById("pacman");
        var ghosts = document.getElementsByClassName("ghost");

var leftArrow = false;
        var upArrow = false;
        var rightArrow = false;
        var downArrow = false;

function movePacman() {
            var pacmanLeft = parseInt(pacman.style.left);
            var pacmanTop = parseInt(pacman.style.top);

if (leftArrow) {
                pacman.style.transform = "rotate(180deg)";
                pacman.style.left = (pacmanLeft <= 0 ? 0 : pacmanLeft - 10) + "px";
            } else if (upArrow) {
                pacman.style.transform = "rotate(-90deg)";
                pacman.style.top = (pacmanTop <= 0 ? 0 : pacmanTop - 10) + "px";
            } else if (rightArrow) {
                pacman.style.transform = "rotate(0deg)";
                pacman.style.left = (pacmanLeft >= 360 ? 360 : pacmanLeft + 10) + "px";
            } else if (downArrow) {
                pacman.style.transform = "rotate(90deg)";
                pacman.style.top = (pacmanTop >= 360 ? 360 : pacmanTop + 10) + "px";
            }

setTimeout(movePacman, 100);
        }

function moveGhosts() {
            for (var i = 0; i < ghosts.length; i++) {
                var ghost = ghosts[i];
                var ghostLeft = parseInt(ghost.style.left);

if (ghostLeft === 0) {
                    ghost.direction = "right";
                } else if (ghostLeft === 360) {
                    ghost.direction = "left";
                }

if (ghost.direction === "right") {
                    ghost.style.left = (ghostLeft + 10) + "px";
                } else {
                    ghost.style.left = (ghostLeft - 10) + "px";
                }
            }

setTimeout(moveGhosts, 500);
        }

movePacman();
        moveGhosts();
    </script>
</body>
</html>