Control a ship that can fire missiles

8 files changed, 204 insertions, 0 deletions

diff --git a/src/controls.ts b/src/controls.ts
new file mode 100644
index 0000000..b575b3f
--- /dev/null
+++ b/src/controls.ts
@@ -0,0 +1,38 @@
+export interface Controls {
+  up: boolean,
+  right: boolean,
+  down: boolean,
+  left: boolean,
+  space: boolean,
+}
+
+export let current = {
+  up: false,
+  right: false,
+  down: false,
+  left: false,
+  space: false,
+}
+
+document.addEventListener('keydown', event => {
+  current = update(current, event.key, true)
+})
+
+document.addEventListener('keyup', event => {
+  current = update(current, event.key, false)
+})
+
+function update(current: Controls, key: string, isDown: boolean): Controls {
+  if (key === 'ArrowUp')
+    return { ...current, up: isDown }
+  else if (key === 'ArrowRight')
+    return { ...current, right: isDown }
+  else if (key === 'ArrowDown')
+    return { ...current, down: isDown }
+  else if (key === 'ArrowLeft')
+    return { ...current, left: isDown }
+  else if (key === ' ')
+    return { ...current, space: isDown }
+  else
+    return current
+}
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..53bc487
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,11 @@
+import * as Scene from 'view/scene'
+
+let scene: Scene.State = Scene.init()
+
+function loop(timestamp: number) {
+  Scene.update(scene, timestamp)
+  Scene.view(scene)
+  window.requestAnimationFrame(loop)
+}
+
+window.requestAnimationFrame(loop)
diff --git a/src/model/vec2.ts b/src/model/vec2.ts
new file mode 100644
index 0000000..4bec53d
--- /dev/null
+++ b/src/model/vec2.ts
@@ -0,0 +1,15 @@
+export interface Vec2 {
+  x: number,
+  y: number,
+}
+
+export function zero(): Vec2 {
+  return {
+    x: 0,
+    y: 0,
+  }
+}
+
+export function equals(v1: Vec2, v2: Vec2): boolean {
+  return v1.x === v2.x && v1.y === v2.y
+}
diff --git a/src/screen.ts b/src/screen.ts
new file mode 100644
index 0000000..930534e
--- /dev/null
+++ b/src/screen.ts
@@ -0,0 +1,4 @@
+let canvas = document.querySelector('canvas') as HTMLCanvasElement
+
+export let width: number = canvas.width
+export let height: number = canvas.height
diff --git a/src/util/number.ts b/src/util/number.ts
new file mode 100644
index 0000000..87f1e2e
--- /dev/null
+++ b/src/util/number.ts
@@ -0,0 +1,3 @@
+export function clamp(x: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, x))
+}
diff --git a/src/view/colors.ts b/src/view/colors.ts
new file mode 100644
index 0000000..c663d25
--- /dev/null
+++ b/src/view/colors.ts
@@ -0,0 +1,4 @@
+export let colors = {
+  blue: "#333388",
+  red: "#CC3333",
+}
diff --git a/src/view/scene.ts b/src/view/scene.ts
new file mode 100644
index 0000000..fe88c12
--- /dev/null
+++ b/src/view/scene.ts
@@ -0,0 +1,35 @@
+import * as Ship from 'view/ship'
+import * as Colors from 'view/colors'
+import * as Screen from 'screen'
+
+export interface State {
+  context: CanvasRenderingContext2D,
+  timestamp: number,
+  ship: Ship.State,
+}
+
+export function init(): State {
+  let canvas = document.querySelector('canvas') as HTMLCanvasElement
+  let context = canvas.getContext("2d") as CanvasRenderingContext2D
+
+  return {
+    context,
+    timestamp: 0,
+    ship: Ship.init(),
+  }
+}
+
+export function update(state: State, timestamp: number) {
+  let delta = timestamp - state.timestamp
+  state.timestamp = timestamp
+
+  Ship.update(state.ship, state.timestamp, delta)
+}
+
+export function view(state: State) {
+  // Clear
+  state.context.fillStyle = Colors.colors.blue
+  state.context.fillRect(0, 0, Screen.width, Screen.height)
+
+  Ship.view(state.context, state.ship)
+}
diff --git a/src/view/ship.ts b/src/view/ship.ts
new file mode 100644
index 0000000..92590d3
--- /dev/null
+++ b/src/view/ship.ts
@@ -0,0 +1,94 @@
+import * as Controls from 'controls'
+import * as Vec2 from 'model/vec2'
+import * as Number from 'util/number'
+import * as Screen from 'screen'
+import * as Colors from 'view/colors'
+
+export const radius: number = 30
+export const fireDelay: number = 200
+export const missileWidth: number = 10
+export const missileHeight: number = 5
+
+export interface State {
+  pos: Vec2.Vec2,
+  missiles: Array<Vec2.Vec2>,
+  lastFired: number,
+}
+
+export function init(): State {
+  return {
+    pos: {
+      x: Screen.width / 6,
+      y: Screen.height / 2,
+    },
+    missiles: [],
+    lastFired: 0,
+  }
+}
+
+export function update(state: State, timestamp: number, delta: number) {
+  move(state, delta)
+  updateMissiles(state, timestamp, delta)
+}
+
+function move(state: State, delta: number) {
+  let dir = controlsDir(Controls.current)
+
+  if (!Vec2.equals(dir, Vec2.zero())) {
+    let teta = Math.atan2(dir.y, dir.x)
+    state.pos.x += Math.cos(teta) * delta / 3
+    state.pos.y += Math.sin(teta) * delta / 3
+  }
+
+  state.pos.x = Number.clamp(state.pos.x, radius, Screen.width - radius)
+  state.pos.y = Number.clamp(state.pos.y, radius, Screen.height - radius)
+}
+
+function controlsDir(c: Controls.Controls): Vec2.Vec2 {
+  let dir = Vec2.zero()
+
+  if (c.up && !c.down)
+    dir.y = -1
+  else if (c.down && !c.up)
+    dir.y = 1
+
+  if (c.right && !c.left)
+    dir.x = 1
+  else if (c.left && !c.right)
+    dir.x = -1
+
+  return dir
+}
+
+function updateMissiles(state: State, timestamp: number, delta: number) {
+  if (Controls.current.space && state.lastFired + fireDelay < timestamp) {
+    state.missiles.push({x: state.pos.x + radius, y: state.pos.y})
+    state.lastFired = timestamp
+  }
+
+  state.missiles = state.missiles
+    .map(missile => ({ ...missile, x: missile.x + delta}))
+    .filter(missile => missile.x < Screen.width)
+}
+
+export function view(context: CanvasRenderingContext2D, state: State) {
+  context.fillStyle = Colors.colors.red
+  context.beginPath()
+  context.moveTo(state.pos.x - radius, state.pos.y - radius)
+  context.lineTo(state.pos.x + radius, state.pos.y)
+  context.lineTo(state.pos.x - radius, state.pos.y + radius)
+  context.closePath()
+  context.fill()
+
+  state.missiles.forEach(({x, y}) => {
+    context.fillStyle = Colors.colors.red
+    context.beginPath()
+    context.rect(
+      x - missileWidth / 2,
+      y - missileHeight / 2,
+      missileWidth,
+      missileHeight
+    )
+    context.fill()
+  })
+}