Files
n-gon-improved/index.html
landgreen 4e6acdd5d0 animated level load
animated new level load graphics for reactor and final level
autoZoom code rewritten to work with pause better using the ephemera system
  this might cause bugs, I already found a few
intro level renamed initial
extra ammo power ups on why difficulty for final and reactor levels
removed falling off the map damage on levels that still had falling off damage

mob: stinger - has speed that adjusts as it flaps it's wings and a short range laser
tech: strange loop - +9% damage, removing it gives null hypothesis and strange attractor
tech: martingale - +11% damage, removing this has a 50% chance to not remove and to double it's damage

paradigm shift removes 6 health when it ejects a tech, but now has a 85->97% chance to work
ammo, heal, research tech spawn extra power ups after each time you take them
tungsten carbide skin has a hexagon look and  +222->300 max health
Bayesian statistics spawn 3->6 research
ansatz spawns 2->3 research if you have no research
Ψ(t) collapse 16->21 research
futures exchange 4.3->4.7% duplication
replication 9->10 duplication
stimulated emission 17->19% duplication
anthropic principle spawn 5->16 heals when you die
supply chain: no long gives JUNK instead triples the frequency of finding applied science
electronegativity 0.22->0.26% damage per energy
non-renewables 88->97% damage
anticorrelation 100->111% damage
decorrelation 70->77% defense
parasitism 83->93% damage
torpor 66->74% defense

bug fix:
  recycling works with mass-energy (although it doesn't do much)
  ternary wasn't working in many situations, but it should now
  fixed bubble fusion exploit that triggers on mobs in factory endlessly
  bot fabrication was making 1 extra bot and giving negative research sometimes
2024-01-21 12:57:11 -08:00

328 lines
20 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<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</title>
<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="defense-bar"></div>
<div id="damage-bar"></div>
<div id="dmg"></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="5">why ⚇</option>
</select>
<br>
<input onclick="build.showImages('settings')" type="checkbox" id="hide-images" name="hide-images" style="width:17px; height:17px;">
<label for="hide-images" title="hide images for fields, guns, and tech">hide images</label>
<br>
<input onclick="build.hideHUD('settings')" type="checkbox" id="hide-hud" name="hide-hud" style="width:17px; height:17px;">
<label for="hide-hud" title="hide: tech, defense, damage, in game console">minimal HUD</label>
<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>
<br>
<input type="checkbox" id="community-maps" name="community-maps" style="width:17px; height:17px;">
<label for="community-maps" title="add about 12 player made levels the random n-gon level pool">community maps</label>
<!-- style="font-size: 1.5em; color: #058;" -->
<!-- <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 id="banned" name="banned" placeholder="list levels by name" autocomplete="off" spellcheck="false" style="width: 182px;" />
<!-- <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 value="lock">
<option value="sewers">
<option value="satellite">
<option value="aerie">
<option value="office">
<option value="highrise">
<option value="warehouse">
<option value="skyscrapers">
<option value="rooftops">
<option value="pavilion">
<option value="labs">
<option value="______">
<option value="fortress">
<option value="biohazard">
<option value="islands">
<option value="tunnel">
<option value="clock">
<option value="coliseum">
<option value="staircase">
<option value="perplex">
<option value="n-gon">
<option value="downpour">
<option value="buttonbutton">
<option value="vats">
<option value="underpass">
<option value="yingYang">
<option value="basement">
<option value="stronghold">
<option value="commandeer">
<option value="stereoMadness">
<option value="house">
<option value="dripp">
<option value="superNgonBros">
<option value="crossfire">
<option value="temple">
<option value="run">
</datalist> -->
<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="classic/7-1-2017/">LandGame: 2017</option>
<option value="classic/4-15-2018/">n-gon: 2018</option>
<option value="classic/7-11-2019/">n-gon: summer-2019</option>
<option value="classic/9-8-2019/">n-gon: fall-2019</option>
<option value="classic/7-15-2020/">n-gon: summer-2020</option>
<option value="classic/6-1-2021/">n-gon: spring-2021</option>
<option value="classic/11-1-2022/">n-gon: fall-2022</option>
<option value="" selected>current version</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>
</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 style="opacity:0.5;">
<th>GUN #</th>
<td id="key-num" class='key-input'>Num</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>
<br><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;">
n-gon is a solo project written in JavaScript, CSS, and HTML using the matter.js 2-D physics library. It's free and open source on <a href="https://github.com/landgreen/n-gon">Github</a>.
<a id="github" href="https://github.com/landgreen/n-gon" aria-label="github">
<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>
</div>
</details>
</div>
</div>
<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='lib/matter.min.js'></script>
<!-- <script src='lib/decomp.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/lore.js"></script>
<script src="js/engine.js"></script>
<script src="js/index.js"></script>
</body>
</html>