doom/index.html

<!doctype html>

<!-- copied from https://raw.githubusercontent.com/mdn/webassembly-examples/master/understanding-text-format/logger2.html (CC0) -->

<html>

  <head>
    <meta charset="utf-8">
    <title>DooM</title>

    <style>
      #output {
        border: 3px groove aquamarine;
        background-color: bisque;
        width: 550px;
        height: 400px;
        font-family: monospace, serif;
        font-size: 10px;
        overflow-y: scroll;
      }
      #output span.log {
        color:darkslateblue;
      }
      #output span.stdout {
        color: black;
      }
      #output span.stderr {
        font-weight: bold;
        color:brown;
      }

      .container {
        display: flex;
      }
    </style>
  </head>

  <body>
    <h1>DooM</h1>
    <p>A wasm32 port of 1997 linuxdoom-1.10 with minimal modifications to the <a href="https://github.com/id-Software/DOOM">sources</a>. Find all the details in the README of the <a href="https://github.com/diekmann/wasm-fizzbuzz">WebAssembly from Scratch Article</a>.</p>
    <p id="focushint"></p>
    <p>Use <button id="enterButton">&#x23CE;</button> to start the game, 
      arrow keys <button id="leftButton">&#x2190;</button> <button id="upButton">&#x2191;</button> <button id="downButton">&#x2193;</button> <button id="rightButton">&#x2192;</button> to move, 
      <button id="ctrlButton">ctrl</button> to shoot, 
      spacebar <button id="spaceButton">&nbsp;&nbsp;&nbsp;&nbsp;</button> to open gates, 
      <button id="altButton">alt</button> and arrow keys to strafe (if your browser does not handle these keys otherwise). 
      On mobile (and mobile only) touch the buttons above. Yeah, I'm not good a UX design.</p>
    <div class="container">
      <canvas id="screen" width="640" height="400" tabindex="0">This is where the DooM screen should render.</canvas>
      <span>&nbsp;</span>
      <div id="output"></div>
    </div>
    gettmilliseconds calls per second: <span id="getmsps_stats">0</span> Total getmilliseconds calls: <span id="getms_stats">0</span><br>
    DooM FPS: <span id="fps_stats">0</span> (target: 35FPS) Total Frames drawn: <span id="drawframes_stats">0</span><br>
    Browser Animation FPS: <span id="animationfps_stats">0</span> (target: around 60FPS, depending on browser)<br>

    <script src="main.js" defer></script>
  </body>

</html>