<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8"/>

  <link href="./pac_styling.css" rel="stylesheet" type="text/css"/>

  <script src="./pac_constants.js"></script>
  <script src="./pac_draw_borders.js"></script>
  <script src="./pac_script.js"></script>
</head>

<body>
  <div id="debug">
  </div>
  <canvas id="board" height="288px" width="224px">
  </canvas>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8"/>

  <link href="./pac_styling.css" rel="stylesheet" type="text/css"/>

  <script src="./pac_constants.js"></script>
  <script src="./pac_draw_borders.js"></script>
  <script src="./pac_script.js"></script>
</head>

<body>
  <div id="debug">
    Pac x: <span id="debug-x"></span>
    <br/>
    Pac y: <span id="debug-y"></span>
    <br/>
    Direction: <span id="debug-direction"></span>
    <br/>
    isMoving: <span id="debug-is-moving"></span>
    <br/>
    keyState up: <span id="debug-key-up"></span>
    <br/>
    keyState down: <span id="debug-key-down"></span>
    <br/>
    keyState left: <span id="debug-key-left"></span>
    <br/>
    keyState right: <span id="debug-key-right"></span>
  </div>
  <canvas id="board" height="288px" width="224px">
  </canvas>
</body>

</html>

Update debug element in html with more details
Update debug element in html with more details
