AI game creator

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

No:11

281

←

Prev Next

→

Pac-Man
Developer User1006｜Date and time 23/4/19 22:54:22
Build time unknown sec｜Game capacity 4.43KB｜

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>Pacman Game</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            background-color: black;
        }
        #game-board {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-wrap: wrap;

}
        .cell {
            width: calc(100vw / 21);
            height: calc(100vh / 21);
            box-sizing: border-box;
            border: 1px solid white;
            background-color: blue;

}
        .pacman {
            background-color: yellow;
            border-radius: 50%;
position:relative;

}
        .ghost-red {
            background-color: red;
            border-radius: 50%;
            animation: ghost-move 5s linear infinite;

}
        .ghost-orange {
            background-color: orange;
            border-radius: 50%;
            animation: ghost-move 5s linear infinite reverse;

}
        .ghost-blue {
            background-color: blue;
            border-radius: 50%;
            animation: ghost-move 5s linear infinite;

}
        .ghost-pink {
            background-color: pink;
            border-radius: 50%;
            animation: ghost-move 5s linear infinite reverse;
        }

@keyframes ghost-move {
            0% {
                transform: translateX(0%);
            }
            25% {
                transform: translateX(75%);
            }
            50% {
                transform: translateX(0%);
            }
            75% {
                transform: translateX(-75%);
            }
            100% {
                transform: translateX(0%);
            }
        }
    </style>
</head>
<body>
    <div id="game-board">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell pacman"></div>
        <div class="cell"></div>
        <div class="cell ghost-red"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell ghost-orange"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell pacman"></div>
        <div class="cell"></div>
        <div class="cell ghost-blue"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell ghost-pink"></div>
    </div>

//pacman.style.left = 0;pacman.style.top = 0;

console.warn("pacman.style.left="+pacman.style.left);

let pacmanX = 4;
        let pacmanY = 1;

const ghosts = document.querySelectorAll('.game-board > div');
        let ghostX = [6, 11, 16];
        let ghostY = 1;

document.addEventListener('keydown', (event) => {
            switch (event.key) {
                case 'ArrowUp':
                    moveUp();
                    break;
                case 'ArrowDown':
                    moveDown();
                    break;
                case 'ArrowLeft':
                    moveLeft();
                    break;
                case 'ArrowRight':
                    moveRight();
                    break;
            }
        });

function moveUp() {
            if (pacmanY !== 0) {
                pacmanY--;
                pacman.style.top = pacmanY * 5 + "vh";
            }

}

function moveDown() {
            if (pacmanY !== 20) {
                pacmanY++;
                pacman.style.top = pacmanY * 5 + "vh";
            }
        }

function moveLeft() {
            if (pacmanX !== 0) {
                pacmanX--;
                pacman.style.left = pacmanX * 5 + "vw";
console.warn("moveLeft.style.left="+pacman.style.left);
            }
        }

function moveRight() {
            if (pacmanX !== 20) {
                pacmanX++;
                pacman.style.left = pacmanX * 5 + "vw";
console.warn("moveRight.style.left="+pacman.style.left);
            }
        }
    </script>
</body>
</html>