diff options
| -rw-r--r-- | index.html | 3 | ||||
| -rw-r--r-- | level.js | 7 | ||||
| -rw-r--r-- | levelSelect.js | 33 | ||||
| -rw-r--r-- | main.js | 6 | ||||
| -rw-r--r-- | style.css | 20 |
5 files changed, 49 insertions, 20 deletions
@@ -8,10 +8,11 @@ <script src="mathjs/mathjs-expression-parser.js"></script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - <link href="https://fonts.googleapis.com/css2?family=Jura:wght@300..700&display=swap" rel="stylesheet"> + <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body style="font-family: Jura;"> + <script>0</script> <audio id="music-starboard" src="sounds/music/starboard.mp3"></audio> <audio id="music-minute" src="sounds/music/minute.mp3"></audio> <audio id="music-cribwhistling" src="sounds/music/cribwhistling.mp3"></audio> @@ -174,9 +174,12 @@ function stepLevel(ui, level, index) { finishLevel(ui, level, false); render(ui.ctx, level, 0); } else if (level.running && index < level.path.length-1) { - setTimeout(() => stepLevel(ui, level, index+1), 1); + const distNext = distance(pos, level.path[index+1] || pos); + setTimeout(() => stepLevel(ui, level, index+1), 50*distNext); } else { - finishLevel(ui, level, true); + if (index >= level.path.length-1) { + finishLevel(ui, level, true); + } level.running = false; render(ui.ctx, level, 0); } diff --git a/levelSelect.js b/levelSelect.js index 2fe3d52..238639c 100644 --- a/levelSelect.js +++ b/levelSelect.js @@ -1,18 +1,37 @@ import{ setupLevel, setupLevelUi } from './level.js'; + +function buildLevel(x, y, t) { + const ts = t.slice(0, -1); + const tf = t[t.length-1]; + return setupLevel(ts.map(T => [ x(T), y(T) ]), [ x(tf), y(tf) ]); +} + const levels = { 'initial jump': [ [], setupLevel([], [8, 0]) ], 'monopole harvesting': [ ['initial jump'], setupLevel([[3, 3]], [8,8]) ], - 'parabolic': [ ['initial jump', 'monopole harvesting'], setupLevel([[-2, 4], [0,0], [2, 4]], [3,9]) ], + 'parabolic 0': [ ['initial jump', 'monopole harvesting'], setupLevel([[-2, 4], [0,0], [2, 4]], [3,9]) ], 'sinusoidal': [ ['initial jump', 'monopole harvesting'], - setupLevel([ - [-4, 4*Math.sin(0)], - [0.5*Math.PI - 4, 4*Math.sin(0.5*Math.PI)], - [1.0*Math.PI - 4, 4*Math.sin(1.0*Math.PI)], - [1.5*Math.PI - 4, 4*Math.sin(1.5*Math.PI)], - ], [2.0*Math.PI - 4, 4*Math.sin(2.0*Math.PI)]), + buildLevel(t => t-4, t => 4 * Math.sin(t), [...Array(8).keys()].map(x => Math.PI * x / 4)), + ], + 'parabolic 1': [ + ['parabolic 0'], + buildLevel(t => -0.5*(t-3)**2 + 4, t => t-3, [...Array(8).keys()].map(x => x - 2)), ], + 'orbital': [ + ['parabolic 0', 'sinusoidal'], + buildLevel(t => 8*Math.cos(t), t => 8*Math.sin(t), [...Array(8).keys()].map(x => Math.PI * x / 4)), + ], + 'lissajous 0': [ + ['orbital'], + buildLevel(t => 8*Math.cos(3*t), t => 8*Math.sin(2*t), [...Array(8).keys()].map(x => Math.PI * x / 4)), + ], + 'lissajous 1': [ + ['orbital'], + buildLevel(t => 8*Math.sin(4*t), t => 8*Math.cos(3*t), [...Array(16).keys()].map(x => Math.PI * x / 8)), + ], + }; export function setupLevelSelectUi(root, sfx) { @@ -1,8 +1,8 @@ import { setupLevelSelectUi } from './levelSelect.js'; import { setupLevel, setupLevelUi } from './level.js'; -window.onload = () => { - +window.onload = () => setTimeout(() => { + const root = document.getElementById('root'); root.classList.add('center'); @@ -79,4 +79,4 @@ window.onload = () => { setupLevelSelectUi(root, sfx); }; root.appendChild(start); -} +}, 200); @@ -1,8 +1,7 @@ body { color: white; background-color: black; - font-family: "Jura", monospace; - font-variant-caps: small-caps; + font-family: "VT323", monospace; position: relative; overflow-x: hidden; } @@ -26,6 +25,8 @@ body { } #root { + text-transform: uppercase; + font-family: "VT323", monospace; width: min(90vw, 800px); margin: auto; border-left: 1px solid white; @@ -55,7 +56,7 @@ body { background-color: black; padding: 16px; max-width: min(80vw, 600px); - font-size: 24px; + font-size: 28px; } .bordered { @@ -66,11 +67,11 @@ h1 { font-size: 32px; } h2 { - font-size: 24px; + font-size: 28px; } p { - font-size: 16px; + font-size: 24px; padding: 1em; } @@ -80,8 +81,7 @@ p { } input { - font-family: "Jura", monospace; - font-variant-caps: small-caps; + font-family: "VT323", monospace; color: white; background-color: black; font-size: 16px; @@ -91,6 +91,7 @@ input { border: 2px solid; } input[type=button] { + text-transform: uppercase; font-size: 20px; } input[type=button]:hover { @@ -101,3 +102,8 @@ input[type=button]:active { color: black; background-color: grey; } + + +label { + text-transform: lowercase; +} |