1
0
Fork 0
Browse Source

feat: allow for manipulation of gravity in both dimensions

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
combat-scorched-earth-from-outer-space
André Jaenisch 10 months ago
parent
commit
34d833f027
Signed by: ryuno-ki
GPG Key ID: 5A668E771F1ED854
  1. 35
      src/css/main.css
  2. 39
      src/index.njk
  3. 29
      src/js/app.js
  4. 1
      types/app.d.ts

35
src/css/main.css

@ -312,6 +312,41 @@ canvas {
background-color: grey;
}
label,
label span {
display: block;
}
input[type="range"] {
min-width: 100%;
}
#scene-game {
display: grid;
grid-template-areas:
'canvas ygravity'
'xgravity . '
'controls controls';
}
#game {
grid-area: canvas;
}
#xgravity-label {
grid-area: xgravity;
}
#ygravity-label {
display: flex;
grid-area: ygravity;
}
#ygravity {
-webkit-appearance: slider-vertical;
transform: rotate(180deg);
}
#controls {
grid-area: controls;
}

39
src/index.njk

@ -22,20 +22,31 @@
<section id="scene-game" tabindex="0">
<canvas id="game" width="300" height="450"></canvas>
<div>
<label>
<span>Manipulate the gravity!</span>
<input
id="gravity"
type="range"
min="-100"
max="100"
value="0"
step="any"
/>
</label>
</div>
<div>
<label id=="xgravity-label">
<span>Manipulate the gravity!</span>
<input
id="xgravity"
type="range"
min="-100"
max="100"
value="0"
step="any"
/>
</label>
<label id="ygravity-label">
<span class="sr-only">Manipulate the gravity!</span>
<input
id="ygravity"
type="range"
min="-100"
max="100"
value="0"
step="any"
orient="vertical"
/>
</label>
<div id="controls">
<a href="#scene-title">Back to start</a>
</div>
</section>

29
src/js/app.js

@ -1,9 +1,10 @@
import { testCollision } from './collisions.js'
import { drawShape } from './draw.js'
import { Vec2 } from './vector.js'
import { add, Vec2 } from './vector.js'
import { makeAstronaut, makeBoundary } from './world.js'
/** @typedef {import('./shape').Shape} Shape */
/** @typedef {import('./vector').Vector2D} Vector2D */
// Global on purpose
/** @type {Shape} */
@ -14,8 +15,8 @@ const boundaries = []
let canvas
/** @type {CanvasRenderingContext2D} */
let context
/** @type {number} */
let gravity
/** @type {Vector2D} */
let gravity = Vec2(0, 0)
/**
* Entry point into the game.
@ -29,13 +30,15 @@ export function app () {
return
}
const input = document.getElementById('gravity')
if (!input) {
const xinput = document.getElementById('xgravity')
const yinput = document.getElementById('ygravity')
if (!xinput || !yinput) {
console.error('Could not start game!')
return
}
input.addEventListener('change', updateGravity)
xinput.addEventListener('input', updateGravity)
yinput.addEventListener('input', updateGravity)
canvas = /** @type {HTMLCanvasElement} */(game)
const ctx = canvas.getContext('2d')
@ -46,7 +49,6 @@ export function app () {
}
context = ctx
gravity = parseFloat(/** @type {HTMLInputElement} */(input).value)
createObjectsInWorld()
tick()
}
@ -59,7 +61,7 @@ function tick () {
drawShape(context, boundary)
})
drawShape(context, astronaut, Vec2(0, gravity))
drawShape(context, astronaut, gravity)
boundaries.forEach(function (boundary) {
if (testCollision(boundary, astronaut)) {
@ -104,5 +106,14 @@ function updateGravity (event) {
}
const input = /** @type {HTMLInputElement} */(event.target)
gravity = parseFloat(input.value)
const value = parseFloat(input.value)
if (input.id === 'xgravity') {
gravity = add(gravity, Vec2(value, 0))
} else if (input.id === 'ygravity') {
gravity = add(gravity, Vec2(0, value))
} else {
console.error(input)
throw new Error('What input is this?!')
}
}

1
types/app.d.ts vendored

@ -5,3 +5,4 @@
*/
export function app(): void;
export type Shape = import('./shape').Shape;
export type Vector2D = import('./vector').Vector2D;

Loading…
Cancel
Save