game.html

<style>
  #game {
    border: 1px solid black;
    outline: none;
  }
  assets {
    display: none;
  }
  #main-container {
    width:720px;
  }
  textcontent p {
    width:720px;
  }
  .center {
    text-align: center;
  }
  .padded-bottom {
    margin-bottom: 3cm;
  }
</style>

<assets>
  <img id="img-right-arrow" src="assets/right_arrow.png" />
</assets>

<div id='main-container'>
  <canvas id='game' width='720' height='680' tabindex='1'></canvas>
  
  <h3>Welcome to Hex2048!</h3>
  <p>Combine hexagons of the same number to get bigger numbers.  Try to reach the 2048 tile and more!</p>
  
  <h3>Controls:</h3>
  <ul>
    <li>Mouse drag and drop</li>
    <li>Keyboard keys: QWEASD</li>
  </ul>
  <div class="padded-bottom"></div>
  
  <footer>
    <p class='center'><small>Created by Qingyang Chen and Huajun Gu</small></p>
  </footer>
</div>

<script src="js/Assert.js"></script>
<script src="js/CanvasInput.js"></script>
<script src="js/Coordinate.js"></script>
<script src="js/Size.js"></script>
<script src="js/Envelope.js"></script>
<script src="js/Easing.js"></script>
<script src="js/Transition.js"></script>
<script src="js/Hexagon.js"></script>
<script src="js/HexagonAnimated.js"></script>
<script src="js/HexagonBackground.js"></script>
<script src="js/PriorityQueue.js"></script>
<script src="js/Events.js"></script>
<script src="js/Canvas.js"></script>
<script src="js/Button.js"></script>
<script src="js/DrawTimer.js"></script>
<script src="js/Controller.js"></script>
<script src="js/InputDirection.js"></script>
<script src="js/InputHandler.js"></script>
<script src="js/KeyHandler.js"></script>
<script src="js/GestureHandler.js"></script>
<script src="js/Board.js"></script>
<script src="js/Home.js"></script>
<script src="js/HighScore.js"></script>
<script src="js/Lost.js"></script>

<script>
  const ASSETS = {
    RIGHT_ARROW: document.getElementById('img-right-arrow')
  };
  const FPS = 60;

  const canvas = new Canvas('game');
  
  new InputHandler(canvas);
  new KeyHandler();
  new GestureHandler(canvas);
  
  const controller = new Controller();
  
  (new DrawTimer(canvas, FPS)).start();
</script>