AI game creator

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

No:16530

116

←

Prev Next

→

Pac-Man
Developer User7374｜Date and time 23/9/19 11:36:40
Build time 18.795 sec｜Game capacity 2.481KB｜

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: 500px;
            height: 500px;
            border: 2px solid black;
            position: relative;
        }
        .pacman {
            width: 30px;
            height: 30px;
            background: yellow;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.2s ease;
        }
        .ghost {
            width: 30px;
            height: 30px;
            background: red;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.2s ease;
        }
    </style>
</head>
<body>
    <div id="game-board">
        <div id="pacman" class="pacman"></div>
        <div id="ghost" class="ghost"></div>
    </div>

function movePacman(keyCode) {
            var pacman = document.getElementById('pacman');
            var currentPosition = getTransformValues(pacman);
            var speed = 10;

switch (keyCode) {
                case 37: // Left Arrow
                    pacman.style.transform = "translate(calc(" + (currentPosition.x - speed) + "% - 15px), " + currentPosition.y + "%)";
                    break;
                case 38: // Up Arrow
                    pacman.style.transform = "translate(" + currentPosition.x + "%, calc(" + (currentPosition.y - speed) + "% - 15px)";
                    break;
                case 39: // Right Arrow
                    pacman.style.transform = "translate(calc(" + (currentPosition.x + speed) + "% - 15px), " + currentPosition.y + "%)";
                    break;
                case 40: // Down Arrow
                    pacman.style.transform = "translate(" + currentPosition.x + "%, calc(" + (currentPosition.y + speed) + "% - 15px)";
                    break;
            }
        }

function getTransformValues(element) {
            var style = window.getComputedStyle(element);
            var matrix = new WebKitCSSMatrix(style.webkitTransform);

return {
                x: matrix.m41,
                y: matrix.m42
            };
        }
    </script>
</body>
</html>