N-Gon (Experimental) - OpenProcessing

index.html
style.css
decomp.min.js
matter.min.js
bullet.js
engine.js
index.js
level.js
lore.js
mob.js
player.js
powerup.js
simulation.js
spawn.js
tech.js
visibility.js
randomColor.min.js
xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<!-- NOT MY GAME!! N-Gon is a solo javascript project developed by ROSS LANDGREEN and supported by various community mapmakers. 
I claim no ownership over this project, I'm merely porting it over to openprocessing so I have something to do at school when 
get bored. Support Ross, not me! 
1.00 Ported to OP
1.01 Increased the amount of tech given as a reward for completing levels from a divisor of 3 to a divisor of 2.
(Completing 12 levels in the previous run gives you 6 starter tech instead of 4) Not sure if this works how I think it does, but we ball
1.02 Changed the lore text to be more serious and mysterious and cool and awesomelike or something idk
1.03 Increased the max amount of a few techs and buffed one of them to make it actually kinda somewhat worth grabbing
1.04 RECYCLING HEALS MORE NOW YIPPEEEEE // Addendum: There seems to be a script error relating to the amount of tech you get after 
completing a level. I dunno how to fix that teehee
-->
​
​
<head>
  <meta charset="utf-8" />
  <!-- keep the line below for OpenProcessing compatibility -->
  <script src="https://openprocessing.org/openprocessing_sketch.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/p5@1.11.0/lib/p5.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/p5@1.11.0/lib/addons/p5.sound.min.js"></script>
  <script src="mySketch.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Browser-based side scrolling video game with the matter.js physics engine." />
  <meta name="author" content="Ross Landgreen" />
  <meta property="og:description" content="Browser-based side scrolling video game with the matter.js physics engine." />
  <meta property="og:title" content="n-gon" />
  <meta name="twitter:title" content="n-gon" />
  <meta name="twitter:description" content="Browser-based side scrolling video game with the matter.js physics engine." />
  <title>n-gon</title>
  <script src="/js/main.js"></script>
  <link rel="stylesheet" href="style.css" />
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
​
<body>
  <div id="guns"></div>
  <div id="field"></div>
  <div id="tech"></div>
  <div id="text-log"></div>
  <div id="fade-out"></div>
  <div id="health-bg"></div>
  <div id="health"></div>
  <div id="dmg"></div>
  <div id="choose-background"></div>
  <div id="construct"></div>
  <canvas id="canvas"></canvas>
  <div id="choose-grid"></div>
  <div id="experiment-grid"></div>
  <div style="position: absolute; top: 0; left: 0;">
    <div id="pause-grid-left" class="pause-grid"></div>
  </div>
  <div style="position: absolute; top: 0; right: 0;">
    <div id="pause-grid-right" class="pause-grid"></div>
  </div>
  <svg class="SVG-button" id="experiment-button" width="170" height="45" style="border: 2px #333 solid;">
    <g stroke="none" fill="#333" stroke-width="2" font-size="30px" font-family="Arial, sans-serif">
      <text x="10" y="33">experiment</text>
    </g>
  </svg>
  <svg class="SVG-button" id="training-button" width="120" height="45" style="border: 2px #333 solid;" stroke="none" fill="#333" font-size="30px" font-family="Arial, sans-serif" onclick="simulation.startGame(false, true)">
    <text x="10" y="33">training</text>
  </svg>
  <div id="info">
    <div id="settings">
      <details>
        <summary>settings</summary>
        <div style="line-height: 150%;" class="details-div">
          <label for="difficulty-select" title="effects: number of mobs, damage done by mobs, damage done to mobs, mob speed, heal effects">combat difficulty:</label>
          <select name="difficulty-select" id="difficulty-select" style="background-color: #fff;">
            <option value="1">easy</option>
            <option value="2" selected>normal</option>
            <option value="4">hard</option>
            <option value="6">why?</option>
          </select>
          <br />
          <label for="fps-select" title="use this to slow the game down">limit frames per second:</label>
          <select name="fps-select" id="fps-select">
            <option value="max" selected>no cap</option>
            <option value="72">72 fps</option>
            <option value="60">60 fps</option>
            <option value="45">45 fps</option>
            <option value="30">30 fps</option>
          </select>
          <br />
          <label for="seed" title="the randoms seed determines level order, tech choices, and mob types">randomization seed:</label>
          <input type="text" id="seed" name="seed" autocomplete="off" spellcheck="false" minlength="1" style="width: 120px;" />
          <br />
          <span id="previous-seed" style="color: #bbb;"></span>
          <label for="community-maps" title="add about 12 player made levels the random n-gon level pool">include community maps:</label>
          <input type="checkbox" id="community-maps" name="community-maps" style="width: 17px; height: 17px;" />
          <!-- <br>
          <label for="body-damage" title="allow damage from the ground and large fast moving blocks">collision damage from blocks:</label>
          <input type="checkbox" id="body-damage" name="body-damage" checked style="width:17px; height:17px;"> -->
          <br />
          <label for="banned" title="type banned levels with a space between them.  Example:  run temple biohazard">banned levels:</label>
          <input list="ban-suggest" id="banned" name="banned" placeholder="list levels by name" autocomplete="off" spellcheck="false" style="width: 182px;" />
          <datalist id="ban-suggest">
            <option value="testChamber"> </option>
            <option value="sewers"> </option>
            <option value="satellite"> </option>
            <option value="aerie"> </option>
            <option value="office"> </option>
            <option value="highrise"> </option>
            <option value="warehouse"> </option>
            <option value="skyscrapers"> </option>
            <option value="rooftops"> </option>
            <option value="pavilion"> </option>
            <option value="labs"> </option>
            <option value="______"> </option>
            <option value="biohazard"> </option>
            <option value="islands"> </option>
            <option value="tunnel"> </option>
            <option value="coliseum"> </option>
            <option value="perplex"> </option>
            <option value="n-gon"> </option>
            <option value="vats"> </option>
            <option value="basement"> </option>
            <option value="stronghold"> </option>
            <option value="house"> </option>
            <option value="dripp"> </option>
            <option value="crossfire"> </option>
            <option value="temple"> </option>
            <option value="run"> </option>
          </datalist>
​
          <!-- communityLevels: ["stronghold", "basement", "crossfire", "vats", "run", "n-gon", "house", "perplex", "coliseum", "tunnel", "islands", "temple", "dripp"], -->
          <!-- playableLevels: ["labs", "rooftops", "skyscrapers", "warehouse", "highrise", "office", "aerie", "satellite", "sewers", "testChamber", "pavilion"], -->
​
          <!--                <label for="banned">banned levels:</label>
                    <input type="text" id="ban-list" name="banned" placeholder="list levels by name" autocomplete="off" spellcheck="true" style="width: 183px;"> -->
          <br />
          <label for="classic-select" title="play older versions of n-gon">classic n-gon:</label>
          <select name="classic-select" id="classic-select" onChange="window.location.href=this.value">
            <option value="https://scratch.mit.edu/projects/14005697/fullscreen/">mech: 2014</option>
            <option value="https://scratch.mit.edu/projects/22573757/fullscreen/">spacetime: 2015</option>
            <option value="https://scratch.mit.edu/projects/41429974/fullscreen/">ballistics: 2015</option>
            <option value="https://scratch.mit.edu/projects/43690666/fullscreen/">portal: 2016</option>
            <option value="https://codepen.io/lilgreenland/full/ozXNWZ">side scroller: 2016</option>
            <option value="https://codepen.io/lilgreenland/full/wzARJY">side scroller: 2016</option>
            <option value="" selected>current version</option>
          </select>
        </div>
      </details>
    </div>
    <div>
      <details id="control-details">
        <summary>controls</summary>
        <div class="details-div">
          To change controls click a box
          <br />
          and press an unused key.
          <br />
          <br />
          <table id="control-table">
            <tr>
              <th>FIRE</th>
              <td id="key-fire" class="key-input">F</td>
              <td class="key-used">MouseLeft</td>
              <td></td>
            </tr>
            <tr>
              <th>FIELD</th>
              <td id="key-field" class="key-input">SPACE</td>
              <td class="key-used">MouseRight</td>
            </tr>
            <tr>
              <th>JUMP</th>
              <td id="key-up" class="key-input">W</td>
              <td class="key-used">ArrowUp</td>
            </tr>
            <tr>
              <th>CROUCH</th>
              <td id="key-down" class="key-input">S</td>
              <td class="key-used">ArrowDown</td>
            </tr>
            <tr>
              <th>LEFT</th>
              <td id="key-left" class="key-input">A</td>
              <td class="key-used">ArrowLeft</td>
            </tr>
            <tr>
              <th>RIGHT</th>
              <td id="key-right" class="key-input">D</td>
              <td class="key-used">ArrowRight</td>
            </tr>
            <tr>
              <th>GUN →</th>
              <td id="key-next-gun" class="key-input">Q</td>
              <td class="key-used">MouseWheel</td>
            </tr>
            <tr>
              <th>GUN ←</th>
              <td id="key-previous-gun" class="key-input">E</td>
              <td class="key-used">MouseWheel</td>
            </tr>
            <tr>
              <th>PAUSE</th>
              <td id="key-pause" class="key-input">P</td>
              <!-- <td class='key-used'>Escape</td> -->
              <td></td>
            </tr>
            <tr id="control-testing">
              <th>TESTING</th>
              <td id="key-testing" class="key-input">T</td>
              <td></td>
            </tr>
          </table>
          <button id="control-reset" type="button">reset</button><span style="font-size: 60%;"> to default keys</span>
        </div>
      </details>
    </div>
    <div>
      <details id="updates">
        <summary>updates</summary>
        <div id="updates-div" class="details-div" style="font-size: 65%; height: 400px; overflow: scroll; max-width: 450px;"></div>
      </details>
    </div>
    <div>
      <details>
        <summary>about</summary>
        <div class="details-div" style="max-width: 450px;">
          <a href="https://discord.gg/2eC9pgJ">
            <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 235">
              <style>
                .st0 {
                  fill: #1b1f23;
                }
              </style>
              <path class="st0" d="M142.8 120.1c-5.7 0-10.2 4.9-10.2 11s4.6 11 10.2 11c5.7 0 10.2-4.9 10.2-11s-4.6-11-10.2-11zM106.3 120.1c-5.7 0-10.2 4.9-10.2 11s4.6 11 10.2 11c5.7 0 10.2-4.9 10.2-11 .1-6.1-4.5-11-10.2-11z" />
              <path class="st0" d="M191.4 36.9h-134c-11.3 0-20.5 9.2-20.5 20.5v134c0 11.3 9.2 20.5 20.5 20.5h113.4l-5.3-18.3 12.8 11.8 12.1 11.1 21.6 18.7V57.4c-.1-11.3-9.3-20.5-20.6-20.5zm-38.6 129.5s-3.6-4.3-6.6-8c13.1-3.7 18.1-11.8 18.1-11.8-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.4-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.6-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.2-1.8-1-2.8-1.7-2.8-1.7s4.8 7.9 17.5 11.7c-3 3.8-6.7 8.2-6.7 8.2-22.1-.7-30.5-15.1-30.5-15.1 0-31.9 14.4-57.8 14.4-57.8 14.4-10.7 28-10.4 28-10.4l1 1.2c-18 5.1-26.2 13-26.2 13s2.2-1.2 5.9-2.8c10.7-4.7 19.2-5.9 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.5 0 0-7.9-7.5-24.9-12.6l1.4-1.6s13.7-.3 28 10.4c0 0 14.4 25.9 14.4 57.8 0-.1-8.4 14.3-30.5 15zM303.8 79.7h-33.2V117l22.1 19.9v-36.2h11.8c7.5 0 11.2 3.6 11.2 9.4v27.7c0 5.8-3.5 9.7-11.2 9.7h-34v21.1h33.2c17.8.1 34.5-8.8 34.5-29.2v-29.8c.1-20.8-16.6-29.9-34.4-29.9zm174 59.7v-30.6c0-11 19.8-13.5 25.8-2.5l18.3-7.4c-7.2-15.8-20.3-20.4-31.2-20.4-17.8 0-35.4 10.3-35.4 30.3v30.6c0 20.2 17.6 30.3 35 30.3 11.2 0 24.6-5.5 32-19.9l-19.6-9c-4.8 12.3-24.9 9.3-24.9-1.4zM417.3 113c-6.9-1.5-11.5-4-11.8-8.3.4-10.3 16.3-10.7 25.6-.8l14.7-11.3c-9.2-11.2-19.6-14.2-30.3-14.2-16.3 0-32.1 9.2-32.1 26.6 0 16.9 13 26 27.3 28.2 7.3 1 15.4 3.9 15.2 8.9-.6 9.5-20.2 9-29.1-1.8l-14.2 13.3c8.3 10.7 19.6 16.1 30.2 16.1 16.3 0 34.4-9.4 35.1-26.6 1-21.7-14.8-27.2-30.6-30.1zm-67 55.5h22.4V79.7h-22.4v88.8zM728 79.7h-33.2V117l22.1 19.9v-36.2h11.8c7.5 0 11.2 3.6 11.2 9.4v27.7c0 5.8-3.5 9.7-11.2 9.7h-34v21.1H728c17.8.1 34.5-8.8 34.5-29.2v-29.8c0-20.8-16.7-29.9-34.5-29.9zm-162.9-1.2c-18.4 0-36.7 10-36.7 30.5v30.3c0 20.3 18.4 30.5 36.9 30.5 18.4 0 36.7-10.2 36.7-30.5V109c0-20.4-18.5-30.5-36.9-30.5zm14.4 60.8c0 6.4-7.2 9.7-14.3 9.7-7.2 0-14.4-3.1-14.4-9.7V109c0-6.5 7-10 14-10 7.3 0 14.7 3.1 14.7 10v30.3zM682.4 109c-.5-20.8-14.7-29.2-33-29.2h-35.5v88.8h22.7v-28.2h4l20.6 28.2h28L665 138.1c10.7-3.4 17.4-12.7 17.4-29.1zm-32.6 12h-13.2v-20.3h13.2c14.1 0 14.1 20.3 0 20.3z" />
            </svg>
          </a>
          Chat about n-gon in the <a href="https://discord.gg/JyfrKbXTfw">discord</a>.<br />
          Let me know about ideas, or bugs. <br />
          <br />
          <br />
          <a id="github" href="https://github.com/landgreen/n-gon">
            <svg viewBox="0 0 100 16" xmlns="http://www.w3.org/2000/svg" fill="#1B1F23">
              <path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" />
              <g stroke="none" font-size="8px" font-family="Arial Black, sans-serif">
                <text x="19" y="11">Github</text>
              </g>
            </svg>
          </a>
          <a href="https://github.com/landgreen/n-gon">Github</a> hosts n-gon's 2.5MB source code.<br />
          It's written in JavaScript, CSS, and HTML and uses the matter.js 2-D physics library.
        </div>
      </details>
    </div>
  </div>
​
  <style>
    .fade-in {
      opacity: 0;
      animation: 2s ease 1.5s normal forwards 1 fadein;
    }
​
    .fade-in-fast {
      opacity: 0;
      animation: 1.5s ease 1s normal forwards 1 fadein;
    }
​
    @keyframes fadein {
      0% {
        opacity: 0;
      }
​
      100% {
        opacity: 1;
      }
    }
​
    @keyframes dash {
      to {
        stroke-dashoffset: 0;
      }
    }
​
    .draw-lines {
      stroke-dasharray: 20;
      stroke-dashoffset: 20;
      animation: dash 2.4s ease-in forwards;
    }
​
    .draw-lines-dash {
      stroke-dasharray: 4;
      stroke-dashoffset: 4;
      animation: dash 2.4s ease-in forwards;
    }
​
    .draw-lines-o {
      stroke-dasharray: 11;
      stroke-dashoffset: 11;
      animation: dash 2.4s ease-in forwards;
    }
​
    .draw-lines-g {
      stroke-dasharray: 17;
      stroke-dashoffset: 17;
      animation: dash 2.4s ease-in forwards;
    }
​
    .draw-lines-box-1 {
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      animation: dash 5s ease-in forwards;
      animation-delay: 0s;
    }
​
    .draw-lines-box-2 {
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      animation: dash 2.6s ease-in forwards;
      animation-delay: 1s;
    }
​
    .draw-lines-box-3 {
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      animation: dash 1.15s ease-in forwards;
      animation-delay: 1.55s;
    }
​
    .draw-lines3 {
      stroke-dasharray: 3000;
      stroke-dashoffset: 3000;
      animation: dash 3.1s ease-in forwards;
    }
​
    .draw-lines4 {
      stroke-dasharray: 300;
      stroke-dashoffset: 300;
      animation: dash 2.5s ease-in forwards;
    }
  </style>
  <svg id="splash" class="intro ui" viewBox="0 0 800 800" onclick="simulation.startGame()">
    <g class="fade-in" transform="translate(100,210) scale(34)" fill="#afafaf" stroke="none">
      <path d="M0 0  h1  v0.2  h1.7  l0.3 0.3  v2.6  h-1  v-1.7  h-1  v1.7  h-1 z" />
      <rect x="4" y="1.25" width="1" height="0.5" rx="0.03" />
      <path transform="translate(6.9,0) scale(1.25)" d="M0 0  h1  l 0.7 0.7  v2.3  l-0.2 0.2 h-1.8 v-0.5 h1.4   L 1.1 2.4   h-1.1  l -0.7 -0.7  v-1  l 0.7 -0.7 Z" />
      <path transform="translate(10.9,0) scale(1.25)" d="M0 0  h1  l 0.7 0.7  v1  l -0.7 0.7  h-1  l -0.7 -0.7  v-1  l 0.7 -0.7 Z" />
      <path transform="translate(14,0)" d="M0 0  h1  v0.2  h1.7  l0.3 0.3  v2.6  h-1  v-1.7  h-1  v1.7  h-1 z" />
    </g>
    <g transform="translate(100,210) scale(34)" fill="none" stroke="#333" stroke-linejoin="round" stroke-linecap="round">
      <path class="draw-lines" d="M0 0  h1  v0.2  h1.7  l0.3 0.3  v2.6  h-1  v-1.7  h-1  v1.7  h-1 z" stroke-width="0.0875" />
      <rect class="draw-lines-dash" x="4" y="1.25" width="1" height="0.5" stroke-width="0.0875" rx="0.03" />
      <path class="draw-lines-g" transform="translate(6.9,0) scale(1.25)" d="M0 0  h1  l 0.7 0.7  v2.3  l-0.2 0.2 h-1.8 v-0.5 h1.4   L 1.1 2.4   h-1.1  l -0.7 -0.7  v-1  l 0.7 -0.7 Z" stroke-width="0.07" />
      <path class="draw-lines-o" transform="translate(10.9,0) scale(1.25)" d="M0 0  h1  l 0.7 0.7  v1  l -0.7 0.7  h-1  l -0.7 -0.7  v-1  l 0.7 -0.7 Z" stroke-width="0.07" />
      <path class="draw-lines" transform="translate(14,0)" d="M0 0  h1  v0.2  h1.7  l0.3 0.3  v2.6  h-1  v-1.7  h-1  v1.7  h-1 z" stroke-width="0.0875" />
    </g>
    <!-- mouse -->
    <g class="draw-lines3" transform="translate(290,430) scale(0.28)" stroke-linecap="round" stroke-linejoin="round" stroke-width="10px" stroke="#333" fill="none">
      <path class="fade-in" stroke="none" fill="#fff" d="M827,112 h30 a140,140,0,0,1,140,140 v268 a140,140,0,0,1-140,140 h-60 a140,140,0,0,1-140-140v-268 a140,140,0,0,1,140-140h60" />
      <path class="fade-in" d="M832.41,106.64 V322 H651.57 V255 c0-82,67.5-148,150-148 Z" fill="rgb(0, 200, 255)" stroke="none" />
      <path d="M827,112 h30 a140,140,0,0,1,140,140 v268 a140,140,0,0,1-140,140 h-60 a140,140,0,0,1-140-140v-268 a140,140,0,0,1,140-140h60" />
      <path d="M657 317 h340 h-170 v-25 m0 -140 v-42 s 21 -59, -5 -59 S 807 7, 807 7" />
      <ellipse fill="none" cx="827.57" cy="218.64" rx="29" ry="68" />
      <ellipse fill="#fff" class="fade-in-fast" cx="827.57" cy="218.64" rx="29" ry="68" />
    </g>
​
    <!-- keys -->
    <g transform="translate(195,480) scale(0.8)">
      <!-- fade in background -->
      <g fill="#fff" stroke="none" class="fade-in">
        <path d="M0 60 h60 v-60 h-60 v60" class="draw-lines-box-1" />
        <path d="M70 60 h60 v-60 h-60 v60" class="draw-lines-box-2" />
        <path d="M140 60 h60 v-60 h-60 v60" class="draw-lines-box-3" />
        <path d="M0 70 h60 v60 h-60 v-60" class="draw-lines-box-1" />
        <path d="M70 70 h60 v60 h-60 v-60" class="draw-lines-box-2" />
        <path d="M140 70 h60 v60 h-60 v-60" class="draw-lines-box-3" />
      </g>
      <g fill="none" stroke="#333" stroke-width="3.5" stroke-linejoin="round" stroke-linecap="round">
        <path d="M0 60 h60 v-60 h-60 v60" class="draw-lines-box-1" />
        <path d="M70 60 h60 v-60 h-60 v60" class="draw-lines-box-2" />
        <path d="M140 60 h60 v-60 h-60 v60" class="draw-lines-box-3" />
        <path d="M0 70 h60 v60 h-60 v-60" class="draw-lines-box-1" />
        <path d="M70 70 h60 v60 h-60 v-60" class="draw-lines-box-2" />
        <path d="M140 70 h60 v60 h-60 v-60" class="draw-lines-box-3" />
      </g>
      <g class="draw-lines4" text-anchor="middle" stroke="#000" fill="none" stroke-width="2" font-size="38px" font-family="Arial Black, sans-serif">
        <text x="30" y="45" id="splash-previous-gun" stroke-width="2">Q</text>
        <text x="100" y="45" id="splash-up">W</text>
        <text x="170" y="45" id="splash-next-gun" stroke-width="2">E</text>
        <text x="30" y="113" id="splash-left">A</text>
        <text x="100" y="113" id="splash-down">S</text>
        <text x="170" y="113" id="splash-right">D</text>
      </g>
    </g>
    <g class="fade-in" fill="none" stroke="#aaa" stroke-width="1">
      <path d="M 254 433.5 h-35.5 v40" />
      <path d="M 295 433.5 h36.5 v40" />
      <path d="M 274 625 v-35" />
      <path d="M 430.5 442 v50 h38" />
      <path d="M 612.5 442 v50 h-38" />
    </g>
    <g class="fade-in" stroke="none" fill="#aaa" font-size="16px">
      <text x="253" y="422">switch</text>
      <text x="257" y="438">guns</text>
      <text x="255" y="638">move</text>
      <text x="420" y="438">fire</text>
      <text x="599" y="438">field</text>
    </g>
  </svg>
  <script src="matter.min.js"></script>
  <script src="decomp.min.js"></script>
  <script src="randomColor.min.js"></script>
  <script src="simulation.js"></script>
  <script src="player.js"></script>
  <script src="powerup.js"></script>
  <script src="tech.js"></script>
  <script src="bullet.js"></script>
  <script src="mob.js"></script>
  <script src="spawn.js"></script>
  <script src="level.js"></script>
  <script src="lore.js"></script>
  <script src="engine.js"></script>
  <script src="index.js"></script>
</body>
​
</html>