N Gon
Uploaded by
s94476N Gon
Uploaded by
s94476<!
DOCTYPE html>
<html>
<head>
<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 | 3kh0</title>
<link rel="stylesheet" href="style.css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<script type="application/javascript" src="/js/main.js"></script>
</head>
<body>
<!-- <body oncontextmenu="return false"> -->
<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>
<!-- <input type="text" id="console" spellcheck="false" /> -->
<!-- contenteditable="true" -->
<!-- guns -->
<!-- <audio id="snare2" src="sounds\guns\snare2.ogg"
preload="auto"></audio>
<audio id="airgun" src="sounds\guns\airgun.ogg" preload="auto"></audio>
<audio id="basssnaredrum" src="sounds\guns\basssnaredrum.ogg"
preload="auto"></audio>
<audio id="sniper" src="sounds\guns\sniper.ogg" preload="auto"></audio>
<audio id="glock" src="sounds\guns\glock.ogg" preload="auto"></audio>
<audio id="launcher" src="sounds\guns\launcher2.ogg" preload="auto"></audio>
-->
<!-- player walk -->
<!-- <audio id="walk1" src="sounds\m\walk1.ogg" preload="auto"></audio>
<audio id="walk2" src="sounds\m\walk2.ogg" preload="auto"></audio>
<audio id="walk3" src="sounds\m\walk3.ogg" preload="auto"></audio>
<audio id="walk4" src="sounds\m\walk4.ogg" preload="auto"></audio>
<audio id="walk5" src="sounds\m\walk5.ogg" preload="auto"></audio>
<audio id="walk6" src="sounds\m\walk6.ogg" preload="auto"></audio>
<audio id="walk7" src="sounds\m\walk7.ogg" preload="auto"></audio>
<audio id="walk8" src="sounds\m\walk8.ogg" preload="auto"></audio>
<audio id="walk9" src="sounds\m\walk9.ogg" preload="auto"></audio>
<audio id="walk10" src="sounds\m\walk10.ogg" preload="auto"></audio> -->
<!-- player dmg -->
<!-- <audio id="dmg0" src="sounds\dmg\dmg0.ogg" preload="auto"></audio>
<audio id="dmg1" src="sounds\dmg\dmg1.ogg" preload="auto"></audio>
<audio id="dmg2" src="sounds\dmg\dmg2.ogg" preload="auto"></audio>
<audio id="dmg3" src="sounds\dmg\dmg3.ogg" preload="auto"></audio> -->
<!-- other -->
<!-- <audio id="boom" src="sounds\boom.ogg" preload="auto"></audio>
<audio id="powerup" src="sounds\powerup4.ogg" preload="auto"></audio>
<audio id="no" src="sounds\no.ogg" preload="auto"></audio>
<audio id="click" src="sounds\click.ogg" preload="auto"></audio>
<audio id="ammo" src="sounds\ammo.ogg" preload="auto"></audio> -->
<canvas id="canvas"></canvas>
<!-- ********** intro page ***********************************************
******************************************************************************* -->
<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;" onclick="simulation.startGame(false, true)">
<g stroke="none" fill="#333" stroke-width="2" font-size="30px" font-
family="Arial, sans-serif">
<!-- <animate attributeName="fill"
values="#f00;#dd0;#0f0;#0ff;#66f;#0ff;#0f0;#dd0;#f77" dur="4s"
repeatCount="indefinite" /> -->
<text x="10" y="33" class="lore">training</text>
</g>
</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="community-maps" title="">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="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="" selected>current version</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>
</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></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:
70%; height: 400px; overflow: scroll; max-width: 450px;"></div>
</details>
</div>
<div>
<details>
<summary>about</summary>
<div class="details-div">
<!-- <p>
n-gon is a 2-D physics platformer / shooter
<br>it has
</p> -->
<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/6d2MNXWVmV">discord</a>.<br />
Let me know about ideas, or bugs.
<br />
<br />
<br />
<a href="https://github.com/3kh0/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/3kh0/n-gon">Github</a> hosts
the source code for n-gon.<br />
It's written in JavaScript, CSS, and HTML.
<!-- <br>
<br>
n-gon is also hosted at <a
href="https://lilgreenland.itch.io/n-gon">itch.io</a>.
<br>
<br> -->
</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()">
<!-- title -->
<!-- <g class="fade-in" transform="translate(100,210) scale(34)"
fill='#bbb' 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" fill="rgb(50,200,255)" />
<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"
fill='rgb(255,70,140)' />
<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"
fill="none" />
<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" fill='rgb(10,220,190)'
/>
</g> -->
<g class="fade-in" transform="translate(100,210) scale(34)" fill="#bbb"
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>
<!-- <g class="draw-lines" transform="translate(100,210) scale(34)"
fill='none' stroke='#222' stroke-linejoin="round" stroke-linecap="round">
<path d="M0 0 v3.1 h1 v-1.7 h1 v1.7 h1 v-2.6 l-0.3-0.3 h-1.7 v-
0.2 h-1" stroke-width='0.0875' />
<rect x="4" y="1.25" width="1" height="0.5" stroke-width='0.0875'
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" stroke-width='0.07' />
<path transform="translate(10.9,0) scale(1.25)" d="M0 0 l-0.7
0.7 v1 l0.7 0.7 h1 l0.7 -0.7 v-1 l-0.7 -0.7 h-1 Z" stroke-width='0.07' />
<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" 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 class="fade-in" d="M832.41,106.64 V323.55 H651.57
V256.64 c0-82.5,67.5-150,150-150 Z" fill="#789" stroke="none" />
<path class="fade-in" d="M827,112 h30 a140,140,0,0,1,140,140 v68 h-
167 z" fill="#7ce" 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 class="fade-in" fill='#aaa' stroke="none" x="30"
y="45">Q</text>
<text class="fade-in" fill='#aaa' stroke="none" x="170"
y="45">E</text> -->
<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>
<!-- <text class="fade-in" fill='#999' x="100" y="45">W</text>
<text class="fade-in" fill='#999' x="100" y="113">S</text>
<text class="fade-in" fill='#999' x="170" y="113">D</text>
<text class="fade-in" fill='#999' x="30" y="113">A</text>
-->
</g>
</g>
<g class="fade-in" fill="none" stroke="#aaa" stroke-width="1">
<!-- simple lines that point to words -->
<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>
<!-- <g id="gamepad" transform="translate(700,700) scale(0.2)"
style="display: none;" stroke="#333" stroke-width="0.5" fill="#444">
<path style="fill:#FB7686;" d="M122.578,86.897H68.276c-6.184,0-
11.196,5.013-11.196,11.196v12.126h76.692V98.091
C133.772,91.908,128.76,86.897,122.578,86.897z" />
<rect x="57.08" y="100.766" style="opacity:0.4;fill:#FF4E64;enable-
background:new ;" width="76.69" height="9.453" />
<path style="fill:#FB7686;"
d="M389.422,86.897h54.303c6.182,0,11.194,5.013,11.194,11.196v12.126h-76.693V98.091
C378.228,91.908,383.241,86.897,389.422,86.897z" />
<rect x="378.229" y="100.766" style="opacity:0.4;fill:#FF4E64;enable-
background:new ;" width="76.69" height="9.453" />
<rect x="101.947" y="130.449" style="fill:#89BBE4;" width="308.094"
height="144.099" />
<path style="opacity:0.1;fill:#145587;enable-background:new ;"
d="M336.726,130.443l-6.391,28.154
c-6.438,28.363-7.324,57.602-2.745,86.134H184.41c4.577-
28.531,3.692-57.77-2.746-86.134l-6.39-28.154h-73.323v144.103h308.097
V130.443H336.726z" />
<g>
<path style="fill:#89BBE4;" d="M168.235,158.598l-6.39-28.154c-
4.031-12.081-15.338-20.226-28.073-20.226H57.08
c-4.862,0-9.582,1.835-13.034,5.259c-9.65,9.571-
15.848,22.071-17.629,35.539L0.612,346.264
c-
5.519,41.762,26.979,78.838,69.103,78.838c31.406,0,58.935-21.004,67.23-51.296l27.18-
99.262l0,0
C175.524,236.906,176.94,196.95,168.235,158.598z" />
<path style="fill:#89BBE4;" d="M511.387,346.264l-25.806-195.25c-
1.78-13.468-7.978-25.967-17.629-35.539
c-3.452-3.424-8.172-5.259-13.034-5.259h-76.693c-
12.734,0-24.041,8.146-28.072,20.226l-6.39,28.154
c-8.706,38.353-
7.288,78.308,4.109,115.948l0,0l27.18,99.262c8.296,30.292,35.823,51.296,67.23,51.296
C484.408,425.102,516.908,388.026,511.387,346.264z" />
</g>
<circle style="fill:#ACDFEA;" cx="189.252" cy="285.582" r="52.611" />
<circle style="opacity:0.3;fill:#145587;enable-background:new ;"
cx="183.371" cy="293.273" r="25.611" />
<circle style="fill:#ACDFEA;" cx="322.747" cy="285.582" r="52.611" />
<circle style="opacity:0.3;fill:#145587;enable-background:new ;"
cx="316.866" cy="293.273" r="25.611" />
<circle style="fill:#384148;" cx="322.747" cy="285.582" r="25.611" />
<g>
<path style="fill:#1F84CE;" d="M108.027,142.799H86.073c-4.334,0-
7.848,3.514-7.848,7.849v9.17c0,2.082,0.826,4.077,2.298,5.549
l11.3,11.3c3.064,3.065,8.034,3.065,11.1,0l10.653-
10.652c1.471-1.472,2.298-3.469,2.298-5.549v-9.818
C115.875,146.314,112.361,142.799,108.027,142.799z" />
<path style="fill:#1F84CE;" d="M76.951,190.893l-10.653-10.652c-
1.472-1.472-3.468-2.3-5.549-2.3h-9.818
c-4.334,0-7.849,3.514-
7.849,7.849v21.953c0,4.335,3.514,7.849,7.849,7.849h9.17c2.082,0,4.077-0.828,5.549-
2.3l11.302-11.3
C80.016,198.929,80.016,193.96,76.951,190.893z" />
<path style="fill:#1F84CE;" d="M113.576,228.168l-11.3-11.3c-3.065-
3.065-8.034-3.065-11.1,0l-10.653,10.652
c-1.472,1.472-2.298,3.468-
2.298,5.55v9.817c0,4.334,3.514,7.848,7.849,7.848h21.953c4.334,0,7.849-3.513,7.849-
7.848v-9.171
C115.875,231.636,115.048,229.64,113.576,228.168z" />
<path style="fill:#1F84CE;" d="M143.169,177.943h-9.171c-2.081,0-
4.077,0.826-5.549,2.298l-11.3,11.3
c-3.064,3.064-
3.064,8.034,0,11.1l10.653,10.653c1.472,1.471,3.468,2.298,5.55,2.298h9.818c4.334,0,7
.848-3.513,7.848-7.848
v-
21.953C151.018,181.457,147.504,177.943,143.169,177.943z" />
<circle style="fill:#1F84CE;" cx="414.952" cy="155.839"
r="18.825" />
</g>
<circle style="fill:#F9C526;" cx="374.025" cy="196.766" r="18.825" />
<circle style="fill:#54B8AC;" cx="414.952" cy="237.693" r="18.825" />
<circle style="fill:#FFFFFF;" cx="455.879" cy="196.766" r="18.825" />
<circle style="fill:#384148;" cx="189.252" cy="285.582" r="25.611" />
<g>
<path style="fill:#FFFFFF;" d="M226.267,190.234h-23.773c-4.57,0-
8.276-3.705-8.276-8.276s3.705-8.276,8.276-8.276h23.773
c4.57,0,8.276,3.705,8.276,8.276S230.838,190.234,226.267,190.234z" />
<path style="fill:#FFFFFF;" d="M309.506,190.234h-23.773c-4.572,0-
8.276-3.705-8.276-8.276s3.704-8.276,8.276-8.276h23.773
c4.572,0,8.276,3.705,8.276,8.276S314.077,190.234,309.506,190.234z" />
</g>
</g> -->
<!-- <g id="gamepad" transform="translate(640,640) scale(0.3)"
style="display: none;" stroke="#333" stroke-width="0.5" fill="#444">
<path d="M115.824,187.891c-2.95,2.95-4.576,6.872-
4.576,11.045c0,4.172,1.625,8.095,4.575,11.045l10.322,10.322
c2.95,2.949,6.872,4.573,11.042,4.573h9.511c8.612,0,15.619-
7.007,15.619-15.619v-21.268c0-8.612-7.007-15.619-15.619-15.619
h-8.884c-4.171,0-8.093,1.625-11.044,4.575L115.824,187.891z
M137.986,188.403h8.298v20.438h-8.926l-9.905-9.906L137.986,188.403
z" />
<path
d="M91.29,184.819c2.95,2.951,6.873,4.576,11.046,4.576c4.172,0,8.095-1.625,11.044-
4.575l10.32-10.318
c2.95-2.95,4.575-6.873,4.575-11.044v-9.511c0-8.613-7.007-
15.62-15.62-15.62H91.388c-8.612,0-15.619,7.007-15.619,15.62v8.883
c0,4.172,1.625,8.095,4.575,11.045L91.29,184.819z
M91.802,154.358h0.001h20.438v8.926l-9.906,9.905l-10.533-10.533V154.358z" />
<path d="M88.221,209.352c6.089-6.09,6.089-15.999,0-22.089c0-
0.001,0-0.001-0.001-0.001L77.9,176.944
c-2.95-2.951-6.873-4.576-11.045-4.576h-9.51c-8.613,0-
15.62,7.008-15.62,15.62v21.266c0,8.613,7.007,15.62,15.62,15.62h8.883
c4.172,0,8.094-1.625,11.045-4.575L88.221,209.352z
M66.055,208.841h-8.297v-20.439h8.926l9.906,9.906L66.055,208.841z" />
<path d="M112.753,212.424c-2.95-2.95-6.872-4.576-11.045-4.576c-
4.172,0-8.095,1.625-11.044,4.575l-10.32,10.318
c-2.95,2.95-4.575,6.873-
4.575,11.045v9.51c0,8.612,7.007,15.619,15.62,15.619h21.266c8.614,0,15.62-
7.007,15.62-15.619v-8.884
c0-4.172-1.625-8.094-4.575-11.045L112.753,212.424z
M112.241,242.884H91.802v-8.926l9.906-9.905l10.533,10.533V242.884z" />
<path d="M449.624,172.369c-14.477,0-26.254,11.778-
26.254,26.253c0,14.477,11.778,26.254,26.254,26.254
c14.476,0,26.253-11.778,26.253-
26.254C475.877,184.145,464.099,172.369,449.624,172.369z M449.624,208.841
c-5.635,0-10.22-4.585-10.22-10.22s4.585-10.219,10.22-
10.219c5.634,0,10.219,4.585,10.219,10.219
S455.259,208.841,449.624,208.841z" />
<path d="M409.979,212.012c-14.477,0-26.253,11.778-
26.253,26.253c0,14.477,11.778,26.254,26.253,26.254
s26.253-11.778,26.253-
26.254C436.232,223.79,424.455,212.012,409.979,212.012z M409.979,248.485
c-5.634,0-10.219-4.585-10.219-10.22s4.585-10.219,10.219-
10.219c5.635,0,10.219,4.585,10.219,10.219
S415.615,248.485,409.979,248.485z" />
<path d="M511.349,342.391l-24.999-189.143c-1.947-14.73-8.829-
28.605-19.38-39.069c-2.853-2.831-6.397-4.93-10.254-6.16v-4.988
c0-10.401-8.462-18.862-18.862-18.862h-52.604c-10.401,0-
18.862,8.461-18.862,18.862v4.631
c-10.461,2.335-19.426,9.143-24.443,18.692H170.057c-5.018-
9.55-13.983-16.358-24.443-18.692v-4.631
c0-10.401-8.462-18.862-18.862-18.862H74.147c-10.401,0-
18.862,8.461-18.862,18.862v4.988c-3.858,1.231-7.401,3.33-10.254,6.16
c-10.55,10.464-17.433,24.339-19.38,39.069L0.652,342.391c-
2.851,21.572,3.74,43.329,18.083,59.692
c14.343,16.363,35.049,25.747,56.809,25.747c33.935,0,63.897-
22.86,72.86-55.591l10.502-38.356
c9.314,6.157,20.461,9.754,32.437,9.754c32.523,0,58.983-
26.459,58.983-58.984c0-0.896-0.028-1.786-0.067-2.672h11.487
c-0.04,0.886-0.067,1.777-
0.067,2.672c0,32.523,26.46,58.984,58.984,58.984c11.976,0,23.123-3.598,32.437-
9.755l10.502,38.356
c8.963,32.731,38.923,55.591,72.859,55.591c21.76,0,42.466-
9.385,56.809-25.747C507.608,385.721,514.199,363.964,511.349,342.391
z
M385.25,100.203h52.604c1.56,0,2.828,1.269,2.828,2.828v3.73h-58.26v-3.73h-0.001
C382.422,101.471,383.69,100.203,385.25,100.203z
M71.319,103.031c0-1.56,1.269-2.828,2.828-2.828h52.603
c1.558,0,2.828,1.269,2.828,2.828v3.73h-58.26V103.031z
M132.937,368.005c-7.06,25.784-30.661,43.792-57.394,43.792
c-17.141,0-33.451-7.393-44.75-20.283c-11.299-12.89-16.49-
30.029-14.245-47.021l25-189.144
c1.484-11.23,6.731-21.808,14.775-29.786c1.773-1.759,4.317-
2.769,6.979-2.769h74.293c8.778,0,16.557,5.518,19.472,13.769
l6.095,26.855c5.027,22.148,6.454,44.778,4.258,67.342c-
20.634,9.195-35.061,29.885-35.061,53.895
c0,14.078,4.964,27.014,13.225,37.166L132.937,368.005z
M191.342,327.606c-23.682,0-42.95-19.266-42.95-42.95
s19.266-42.95,42.95-
42.95c23.682,0,42.949,19.266,42.949,42.95S215.023,327.606,191.342,327.606z
M247.267,265.95
c-7.841-23.379-29.94-40.278-55.925-40.278c-2.527,0-
5.012,0.177-7.457,0.489c1.561-22.23-0.135-44.477-5.086-66.29
l-3.968-17.481h162.339l-3.967,17.481c-4.952,21.813-
6.648,44.06-5.086,66.29c-2.445-0.31-4.93-0.489-7.457-0.489
c-25.985,0-48.084,16.898-55.926,40.278H247.267z
M320.66,327.606c-23.682,0-42.95-19.266-42.95-42.95s19.266-42.95,42.95-42.95
c23.681,0,42.949,19.266,42.949,42.95S344.341,327.606,320.66,327.606z
M481.209,391.514
c-11.299,12.89-27.61,20.283-44.751,20.283c-26.732,0-50.334-
18.008-57.394-43.791l-12.646-46.183
c8.261-10.152,13.225-23.088,13.225-37.166c0-24.009-14.427-
44.7-35.061-53.895c-2.197-22.564-0.769-45.195,4.258-67.342
l6.095-26.855c2.914-8.251,10.693-13.769,19.471-
13.769h74.294c2.662,0,5.206,1.009,6.98,2.769
c8.043,7.977,13.29,18.556,14.774,29.786l24.999,189.142C497.699,361.486,492.506,378.
625,481.209,391.514z" />
<path d="M191.342,251.823c-18.105,0-32.832,14.729-
32.832,32.833s14.729,32.833,32.832,32.833
c18.105,0,32.832-14.729,32.832-
32.833C224.175,266.551,209.446,251.823,191.342,251.823z M191.342,301.455
c-9.263,0-16.798-7.536-16.798-16.799s7.536-16.799,16.798-
16.799c9.263,0,16.798,7.536,16.798,16.799
S200.605,301.455,191.342,301.455z" />
<path d="M396.588,198.622c0-14.476-11.778-26.253-26.253-26.253c-
14.477,0-26.253,11.778-26.253,26.253
c0,14.477,11.778,26.254,26.253,26.254C384.81,224.875,396.588,213.098,396.588,198.62
2z M370.334,208.841
c-5.634,0-10.219-4.585-10.219-10.22s4.585-10.219,10.219-
10.219c5.635,0,10.219,4.585,10.219,10.219
S375.97,208.841,370.334,208.841z" />
<path d="M227.198,176.258h-23.028c-4.427,0-8.017,3.589-
8.017,8.017c0,4.427,3.589,8.017,8.017,8.017h23.028
c4.427,0,8.017-3.59,8.017-
8.017C235.215,179.848,231.625,176.258,227.198,176.258z" />
<path d="M284.804,192.293h23.029c4.427,0,8.017-3.59,8.017-
8.017c0-4.428-3.59-8.017-8.017-8.017h-23.029
c-4.429,0-8.017,3.589-
8.017,8.017C276.787,188.703,280.375,192.293,284.804,192.293z" />
<path d="M320.66,251.823c-18.105,0-32.833,14.729-
32.833,32.833s14.729,32.833,32.833,32.833
c18.104,0,32.832-14.729,32.832-
32.833C353.492,266.551,338.763,251.823,320.66,251.823z M320.66,301.455
c-9.263,0-16.799-7.536-16.799-16.799s7.536-16.799,16.799-
16.799c9.262,0,16.798,7.536,16.798,16.799
S329.922,301.455,320.66,301.455z" />
<path d="M409.979,185.23c14.476,0,26.253-11.778,26.253-26.254c0-
14.476-11.778-26.253-26.253-26.253
c-14.477,0-26.253,11.778-
26.253,26.253C383.726,173.454,395.503,185.23,409.979,185.23z M409.979,148.758
c5.635,0,10.219,4.585,10.219,10.219s-4.584,10.22-
10.219,10.22c-5.634,0-10.219-4.585-10.219-10.22
C399.76,153.343,404.345,148.758,409.979,148.758z" />
</g> -->
<!-- <g id="gamepad" transform="translate(640,640) scale(2)"
style="display: none;">
<path d="M44.3,49.8v-3.7c0-0.3-0.1-0.5-0.3-0.7s-0.4-0.3-0.7-0.3h-
5.5v-5.5c0-0.3-0.1-0.5-0.3-0.7
s-0.4-0.3-0.7-0.3h-3.7c-0.3,0-0.5,0.1-0.7,0.3s-0.3,0.4-0.3,0.7v5.5h-
5.5c-0.3,0-0.5,0.1-0.7,0.3S26,45.9,26,46.2v3.7
c0,0.3,0.1,0.5,0.3,0.7s0.4,0.3,0.7,0.3h5.5v5.5c0,0.3,0.1,0.5,0.3,0.7s0.4,0.3,0.7,0.
3H37c0.3,0,0.5-0.1,0.7-0.3s0.3-0.4,0.3-0.7
v-5.5h5.5c0.3,0,0.5-0.1,0.7-0.3S44.3,50.1,44.3,49.8z M60.8,51.7c0-1-
0.4-1.9-1.1-2.6C59,48.4,58.2,48,57.2,48s-1.9,0.4-2.6,1.1
s-1.1,1.6-1.1,2.6s0.4,1.9,1.1,2.6c0.7,0.7,1.6,1.1,2.6,1.1s1.9-0.4,2.6-
1.1C60.5,53.5,60.8,52.7,60.8,51.7z M68.2,44.3
c0-1-0.4-1.9-1.1-2.6c-0.7-0.7-1.6-1.1-2.6-1.1s-1.9,0.4-2.6,1.1c-
0.7,0.7-1.1,1.6-1.1,2.6s0.4,1.9,1.1,2.6
c0.7,0.7,1.6,1.1,2.6,1.1s1.9-0.4,2.6-1.1C67.8,46.2,68.2,45.3,68.2,44.3z
M75.5,48c0,4-1.4,7.5-4.3,10.4
c-2.9,2.9-6.3,4.3-10.4,4.3c-3.7,0-6.9-1.2-9.7-3.7h-6.3c-2.8,2.4-6,3.7-
9.7,3.7c-4,0-7.5-1.4-10.4-4.3c-2.9-2.9-4.3-6.3-4.3-10.4
s1.4-7.5,4.3-10.4c2.9-2.9,6.3-4.3,10.4-
4.3h25.7c4,0,7.5,1.4,10.4,4.3C74.1,40.5,75.5,44,75.5,48z" fill="#888" stroke="#222"
/>
</g> -->
</svg>
<script src="lib/matter.min.js"></script>
<script src="lib/decomp.min.js"></script>
<script src="lib/randomColor.min.js"></script>
<script src="js/simulation.js"></script>
<script src="js/player.js"></script>
<script src="js/powerup.js"></script>
<script src="js/tech.js"></script>
<script src="js/bullet.js"></script>
<script src="js/mob.js"></script>
<script src="js/spawn.js"></script>
<script src="js/level.js"></script>
<!-- <script src="js/visibility.js"></script> -->
<script src="js/lore.js"></script>
<script src="js/engine.js"></script>
<script src="js/index.js"></script>
<!-- code for different game: planetesimals -->
<!-- <div id='hud'></div>
<script src="js/planetesimals.js"></script> -->
</body>
</html>
You might also like
- TF2 Config: Key Binds & Performance TweaksNo ratings yetTF2 Config: Key Binds & Performance Tweaks7 pages
- Day of Defeat 1.3 Non-Steam v6.6 Final Setup CMD - ListNo ratings yetDay of Defeat 1.3 Non-Steam v6.6 Final Setup CMD - List16 pages
- Script V9 Full Features by Neon Hacker - LuaNo ratings yetScript V9 Full Features by Neon Hacker - Lua20 pages
- Rule 1 and Rule 3: Synchronized Keyword Is Used For When We Want To Allowed Only One Thread at A Time Then UseNo ratings yetRule 1 and Rule 3: Synchronized Keyword Is Used For When We Want To Allowed Only One Thread at A Time Then Use3 pages
- React Native Session 1 - Intro To React Native100% (1)React Native Session 1 - Intro To React Native33 pages
- Visual Programming: Splash Screen LAB 13No ratings yetVisual Programming: Splash Screen LAB 1317 pages