AI game creator

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

No:31610

←

Prev Next

→

Pac-Man
Developer User15199｜Date and time 23/12/27 20:03:17
Build time 16.779 sec｜Game capacity 2.125KB｜

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: 420px;
            height: 480px;
            margin: 0 auto;
            background-color: black;
            position: relative;
        }

.pacman, .ghost {
            width: 30px;
            height: 30px;
            position: absolute;
            background-size: cover;
        }

.pacman {
            background-image: url('pacman.png');
        }

.ghost {
            background-image: url('ghost.png');
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

pacman.className = 'pacman';
            pacman.style.left = '0px'; // initial position
            pacman.style.top = '0px'; // initial position

ghost.className = 'ghost';
            ghost.style.left = '210px'; // initial position
            ghost.style.top = '240px'; // initial position

gameBoard.appendChild(pacman);
            gameBoard.appendChild(ghost);

document.addEventListener('keydown', function(event) {
                // Capture arrow key inputs
                switch (event.key) {
                    case 'ArrowUp':
                        pacman.style.top = parseInt(pacman.style.top) - 30 + 'px';
                        break;
                    case 'ArrowDown':
                        pacman.style.top = parseInt(pacman.style.top) + 30 + 'px';
                        break;
                    case 'ArrowLeft':
                        pacman.style.left = parseInt(pacman.style.left) - 30 + 'px';
                        break;
                    case 'ArrowRight':
                        pacman.style.left = parseInt(pacman.style.left) + 30 + 'px';
                        break;
                }
            });
        });
    </script>
</body>
</html>