1
0
Fork 0
Browse Source

refactor: use custom DOM module to avoid some boilerplate

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
combat-scorched-earth-from-outer-space
André Jaenisch 9 months ago
parent
commit
fb269246d8
Signed by: ryuno-ki
GPG Key ID: 5A668E771F1ED854
  1. 46
      src/js/app.js

46
src/js/app.js

@ -1,4 +1,5 @@
import { testCollision } from './collisions.js'
import { dom } from './dom.js'
import { drawShape } from './draw.js'
import { updatePosition } from './position.js'
import { updateRotation } from './rotation.js'
@ -13,8 +14,6 @@ import { makeAstronaut, makeBoundary, makeIceCream } from './world.js'
let astronaut
/** @type {Array<Shape>} */
const boundaries = []
/** @type {HTMLCanvasElement} */
let canvas
/** @type {CanvasRenderingContext2D} */
let context
/** @type {Vector2D} */
@ -30,24 +29,9 @@ let iceCreamG = Vec2(-20, 0)
* @returns {void}
*/
export function app () {
const game = document.getElementById('game')
if (!game) {
console.error('Could not start game!')
return
}
const xinput = document.getElementById('xgravity')
const yinput = document.getElementById('ygravity')
if (!xinput || !yinput) {
console.error('Could not start game!')
return
}
xinput.addEventListener('input', updateGravity)
yinput.addEventListener('input', updateGravity)
canvas = /** @type {HTMLCanvasElement} */(game)
const ctx = canvas.getContext('2d')
dom.xinput.addEventListener('input', updateGravity)
dom.yinput.addEventListener('input', updateGravity)
const ctx = dom.canvas.getContext('2d')
if (!ctx) {
console.error('Could not start game!')
@ -62,7 +46,7 @@ export function app () {
/* TODO: Add some paint-FPS to UI */
// See https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#notes
function tick () {
context.clearRect(0, 0, canvas.width, canvas.height)
context.clearRect(0, 0, dom.canvas.width, dom.canvas.height)
boundaries.forEach(function (boundary) {
update(context, boundary)
@ -80,8 +64,8 @@ function tick () {
} catch (_) {
// TODO: Refactor into function
iceCream = makeIceCream({
x: canvas.width - 50,
y: Math.random() * canvas.height
x: dom.canvas.width - 50,
y: Math.random() * dom.canvas.height
})
iceCreamG = scale(iceCreamG, 1.1)
}
@ -104,17 +88,17 @@ function tick () {
function createObjectsInWorld () {
astronaut = makeAstronaut()
iceCream = makeIceCream({
x: canvas.width - 50,
y: Math.random() * canvas.height
x: dom.canvas.width - 50,
y: Math.random() * dom.canvas.height
})
const boundarySize = 2
boundaries.push(
makeBoundary({
x: 0,
y: canvas.height - boundarySize,
y: dom.canvas.height - boundarySize,
height: boundarySize,
width: canvas.width
width: dom.canvas.width
})
)
@ -123,7 +107,7 @@ function createObjectsInWorld () {
x: 0,
y: 0 + boundarySize,
height: boundarySize,
width: canvas.width
width: dom.canvas.width
})
)
@ -131,16 +115,16 @@ function createObjectsInWorld () {
makeBoundary({
x: 0 + boundarySize,
y: 0,
height: canvas.height,
height: dom.canvas.height,
width: boundarySize
})
)
boundaries.push(
makeBoundary({
x: canvas.width - boundarySize,
x: dom.canvas.width - boundarySize,
y: 0,
height: canvas.height,
height: dom.canvas.height,
width: boundarySize
})
)

Loading…
Cancel
Save