Play Pacman Game Online - Simple HTML Game - 常规

<!DOCTYPE html>
<html>
<head>
    <title>Play Pacman Game Online - Simple HTML Game</title>
    <style>
        #game-board {
            width: 500px;
            height: 500px;
            position: relative;
            border: 1px solid #000;
        }
        #pacman {
            width: 50px;
            height: 50px;
            position: absolute;
            background: url('http://www.clker.com/cliparts/9/3/3/e/11954349951025548211Pac-Man_Ghost_2.svg.med.png') top left;
            background-size: auto 50px;
        }
    </style>
</head>
<body>
    <h1>Pacman</h1>
    <div id='game-board'>
        <div id='pacman'></div>
    </div>
    <script>
        let board = document.querySelector('#game-board');
        let pacman = document.querySelector('#pacman');
        let pacmanLeft = 0;
        let pacmanTop = 0;
        document.addEventListener('keydown', function(e) {
            if(e.keyCode === 37) {
                pacmanLeft -= 50;
            } else if(e.keyCode === 38) {
                pacmanTop -= 50;
            } else if(e.keyCode === 39) {
                pacmanLeft += 50;
            } else if(e.keyCode === 40) {
                pacmanTop += 50;
            }
            pacman.style.left = pacmanLeft + 'px';
            pacman.style.top = pacmanTop + 'px';
        });
    </script>
</body>
</html>