aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--README.md6
-rw-r--r--public/index.html18
-rw-r--r--src/controls.ts8
-rw-r--r--src/main.ts7
-rw-r--r--src/model/size.ts8
-rw-r--r--src/model/vec2.ts73
-rw-r--r--src/screen.ts11
-rw-r--r--src/util/physics.ts40
-rw-r--r--src/view/colors.ts2
-rw-r--r--src/view/scene.ts32
-rw-r--r--src/view/ship.ts76
-rw-r--r--tsconfig.json2
12 files changed, 216 insertions, 67 deletions
diff --git a/README.md b/README.md
index 47c92d0..2b7f37e 100644
--- a/README.md
+++ b/README.md
@@ -7,3 +7,9 @@ nix develop --command bin/watch.sh
```
Then, open your browser at `http://localhost:8000`.
+
+# Todo
+
+[ ] Screen size equivalence
+[ ] Add rocks to avoid
+[ ] Destroy rocks with missiles
diff --git a/public/index.html b/public/index.html
index bcedaf9..32f4bc7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,22 +6,6 @@
<link rel="stylesheet" href="/main.css">
<link rel="icon" href="/icon.png">
-<canvas width="1000" height="600"></canvas>
-
-<script>
- // https://github.com/al6x/stupid&#45;simple&#45;typescript&#45;web&#45;starter
- window.define = function(name, required, moduleFn) {
- var require = function() { throw new Error("AMD require not supported!")}
- var exports = window.define.modules[name] = {}
- var resolved = [require, exports]
- for (var i = 2; i < required.length; i++) {
- var m = window.define.modules[required[i]]
- if (!m) throw new Error("AMD module `" + required[i] + "` not found!")
- resolved.push(m)
- }
- moduleFn.apply(null, resolved)
- }
- window.define.modules = {}
-</script>
+<canvas></canvas>
<script src="main.js"></script>
diff --git a/src/controls.ts b/src/controls.ts
index b575b3f..8ae0dbf 100644
--- a/src/controls.ts
+++ b/src/controls.ts
@@ -3,7 +3,7 @@ export interface Controls {
right: boolean,
down: boolean,
left: boolean,
- space: boolean,
+ spaceCount: number,
}
export let current = {
@@ -11,7 +11,7 @@ export let current = {
right: false,
down: false,
left: false,
- space: false,
+ spaceCount: 0,
}
document.addEventListener('keydown', event => {
@@ -31,8 +31,8 @@ function update(current: Controls, key: string, isDown: boolean): Controls {
return { ...current, down: isDown }
else if (key === 'ArrowLeft')
return { ...current, left: isDown }
- else if (key === ' ')
- return { ...current, space: isDown }
+ else if (key === ' ' && !isDown)
+ return { ...current, spaceCount: current.spaceCount + 1 }
else
return current
}
diff --git a/src/main.ts b/src/main.ts
index 53bc487..c235929 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -9,3 +9,10 @@ function loop(timestamp: number) {
}
window.requestAnimationFrame(loop)
+
+window.onresize = () => Scene.resize(
+ scene,
+ { width: window.innerWidth,
+ height: window.innerHeight
+ }
+)
diff --git a/src/model/size.ts b/src/model/size.ts
new file mode 100644
index 0000000..5e8a778
--- /dev/null
+++ b/src/model/size.ts
@@ -0,0 +1,8 @@
+export interface Size {
+ width: number,
+ height: number,
+}
+
+export function diagonal(size: Size): number {
+ return Math.sqrt(size.width ** 2 + size.height ** 2)
+}
diff --git a/src/model/vec2.ts b/src/model/vec2.ts
index 4bec53d..46ffc7e 100644
--- a/src/model/vec2.ts
+++ b/src/model/vec2.ts
@@ -1,15 +1,78 @@
+import * as Number from 'util/number'
+import * as Size from 'model/size'
+
export interface Vec2 {
x: number,
y: number,
}
-export function zero(): Vec2 {
- return {
- x: 0,
- y: 0,
- }
+export const zero: Vec2 = {
+ x: 0,
+ y: 0,
}
export function equals(v1: Vec2, v2: Vec2): boolean {
return v1.x === v2.x && v1.y === v2.y
}
+
+export function length(v: Vec2): number {
+ return Math.sqrt(v.x ** 2 + v.y ** 2)
+}
+
+export function normalize(v: Vec2): Vec2 {
+ if (v.x === 0 && v.y === 0) {
+ return zero
+ } else {
+ const im = 1 / length(v)
+ return {
+ x: v.x * im,
+ y: v.y * im
+ }
+ }
+}
+
+export function applyOnLength(f: (n: number) => number, v: Vec2): Vec2 {
+ return scale(normalize(v), f(length(v)))
+}
+
+export function sub(v1: Vec2, v2: Vec2): Vec2 {
+ return {
+ x: v1.x - v2.x,
+ y: v1.y - v2.y
+ }
+}
+
+export function div(v: Vec2, k: number): Vec2 {
+ return {
+ x: v.x / k,
+ y: v.y / k
+ }
+}
+
+export function add(v1: Vec2, v2: Vec2): Vec2 {
+ return {
+ x: v1.x + v2.x,
+ y: v1.y + v2.y
+ }
+}
+
+export function scale(v: Vec2, k: number): Vec2 {
+ return {
+ x: v.x * k,
+ y: v.y * k
+ }
+}
+
+export function clamp(v: Vec2, vMin: Vec2, vMax: Vec2): Vec2 {
+ return {
+ x: Number.clamp(v.x, vMin.x, vMax.x),
+ y: Number.clamp(v.y, vMin.y, vMax.y)
+ }
+}
+
+export function project(from: Size.Size, to: Size.Size, v: Vec2): Vec2 {
+ return {
+ x: v.x / from.width * to.width,
+ y: v.y / from.height * to.height
+ }
+}
diff --git a/src/screen.ts b/src/screen.ts
index 930534e..0567ad9 100644
--- a/src/screen.ts
+++ b/src/screen.ts
@@ -1,4 +1,9 @@
-let canvas = document.querySelector('canvas') as HTMLCanvasElement
+export let size = {
+ x: window.innerWidth,
+ y: window.innerHeight
+}
-export let width: number = canvas.width
-export let height: number = canvas.height
+window.onresize = () => {
+ size.x = window.innerWidth
+ size.y = window.innerHeight
+}
diff --git a/src/util/physics.ts b/src/util/physics.ts
new file mode 100644
index 0000000..cbc82f7
--- /dev/null
+++ b/src/util/physics.ts
@@ -0,0 +1,40 @@
+import * as Vec2 from 'model/vec2'
+
+interface AccParams {
+ dt: number,
+ speed: Vec2.Vec2,
+ dir: Vec2.Vec2
+}
+
+// max_acc = v_length(board_size) / 90000
+const maxAcc: number = 0.04
+const inertia: number = 200
+
+export function acc({ dt, speed, dir }: AccParams): Vec2.Vec2 {
+ const v = Vec2.applyOnLength((x) => x * maxAcc, dir)
+ return Vec2.div(Vec2.sub(Vec2.scale(v, dt), speed), inertia)
+}
+
+interface SpeedParams {
+ dt: number,
+ acc: Vec2.Vec2,
+ speed: Vec2.Vec2
+}
+
+export function speed({ dt, acc, speed }: SpeedParams): Vec2.Vec2 {
+ return Vec2.add(Vec2.scale(acc, dt), speed)
+}
+
+interface PosParams {
+ dt: number,
+ acc: Vec2.Vec2,
+ speed: Vec2.Vec2,
+ pos: Vec2.Vec2
+}
+
+export function pos({ dt, acc, speed, pos }: PosParams): Vec2.Vec2 {
+ return Vec2.add(
+ Vec2.scale(acc, (dt ** 2) / 2),
+ Vec2.add(Vec2.scale(speed, dt), pos)
+ )
+}
diff --git a/src/view/colors.ts b/src/view/colors.ts
index c663d25..725e981 100644
--- a/src/view/colors.ts
+++ b/src/view/colors.ts
@@ -1,4 +1,4 @@
-export let colors = {
+export const colors = {
blue: "#333388",
red: "#CC3333",
}
diff --git a/src/view/scene.ts b/src/view/scene.ts
index fe88c12..6d35edc 100644
--- a/src/view/scene.ts
+++ b/src/view/scene.ts
@@ -1,35 +1,53 @@
import * as Ship from 'view/ship'
import * as Colors from 'view/colors'
-import * as Screen from 'screen'
+import * as Vec2 from 'model/vec2'
+import * as Size from 'model/size'
export interface State {
+ canvas: HTMLCanvasElement,
context: CanvasRenderingContext2D,
timestamp: number,
ship: Ship.State,
+ windowSize: Size.Size,
}
export function init(): State {
- let canvas = document.querySelector('canvas') as HTMLCanvasElement
- let context = canvas.getContext("2d") as CanvasRenderingContext2D
+ const canvas = document.querySelector('canvas') as HTMLCanvasElement
+ const context = canvas.getContext("2d") as CanvasRenderingContext2D
+ const windowSize = {
+ width: window.innerWidth,
+ height: window.innerHeight
+ }
+ canvas.width = windowSize.width
+ canvas.height = windowSize.height
return {
+ canvas,
context,
timestamp: 0,
- ship: Ship.init(),
+ ship: Ship.init(windowSize),
+ windowSize
}
}
export function update(state: State, timestamp: number) {
- let delta = timestamp - state.timestamp
+ const dt = timestamp - state.timestamp
state.timestamp = timestamp
- Ship.update(state.ship, state.timestamp, delta)
+ Ship.update(state.ship, dt, state.windowSize)
+}
+
+export function resize(state: State, size: Size.Size) {
+ Ship.project(state.ship, state.windowSize, size)
+ state.windowSize = size
+ state.canvas.width = size.width
+ state.canvas.height = size.height
}
export function view(state: State) {
// Clear
state.context.fillStyle = Colors.colors.blue
- state.context.fillRect(0, 0, Screen.width, Screen.height)
+ state.context.fillRect(0, 0, state.windowSize.width, state.windowSize.height)
Ship.view(state.context, state.ship)
}
diff --git a/src/view/ship.ts b/src/view/ship.ts
index 92590d3..5a8b86f 100644
--- a/src/view/ship.ts
+++ b/src/view/ship.ts
@@ -1,51 +1,64 @@
import * as Controls from 'controls'
import * as Vec2 from 'model/vec2'
+import * as Size from 'model/size'
import * as Number from 'util/number'
-import * as Screen from 'screen'
import * as Colors from 'view/colors'
+import * as Physics from 'util/physics'
-export const radius: number = 30
-export const fireDelay: number = 200
export const missileWidth: number = 10
export const missileHeight: number = 5
export interface State {
+ speed: Vec2.Vec2,
pos: Vec2.Vec2,
+ radius: number,
missiles: Array<Vec2.Vec2>,
lastFired: number,
}
-export function init(): State {
+export function init(windowSize: Size.Size): State {
return {
+ speed: { x: 0, y: 0 },
pos: {
- x: Screen.width / 6,
- y: Screen.height / 2,
+ x: windowSize.width / 6,
+ y: windowSize.height / 2,
},
+ radius: Size.diagonal(windowSize) / 30,
missiles: [],
lastFired: 0,
}
}
-export function update(state: State, timestamp: number, delta: number) {
- move(state, delta)
- updateMissiles(state, timestamp, delta)
+export function update(
+ state: State,
+ dt: number,
+ windowSize: Size.Size
+) {
+ move(state, dt, windowSize)
+ updateMissiles(state, dt, windowSize)
}
-function move(state: State, delta: number) {
- let dir = controlsDir(Controls.current)
+function move(state: State, dt: number, windowSize: Size.Size) {
+ const 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
- }
+ const unitDt = 0.5
+ const steps = Math.round(dt / unitDt)
+
+ const acc = Physics.acc({ dt, speed: state.speed, dir })
+ Array(steps).fill(1).forEach(_ => {
+ state.speed = Physics.speed({ dt: unitDt, acc, speed: state.speed })
+ state.pos = Physics.pos({ dt: unitDt, acc, speed: state.speed, pos: state.pos })
+ })
- state.pos.x = Number.clamp(state.pos.x, radius, Screen.width - radius)
- state.pos.y = Number.clamp(state.pos.y, radius, Screen.height - radius)
+ state.pos = Vec2.clamp(
+ state.pos,
+ { x: state.radius, y: state.radius },
+ { x: windowSize.width - state.radius, y: windowSize.height - state.radius }
+ )
}
function controlsDir(c: Controls.Controls): Vec2.Vec2 {
- let dir = Vec2.zero()
+ let dir = { x: 0, y: 0 }
if (c.up && !c.down)
dir.y = -1
@@ -57,26 +70,31 @@ function controlsDir(c: Controls.Controls): Vec2.Vec2 {
else if (c.left && !c.right)
dir.x = -1
- return dir
+ return Vec2.normalize(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
+function updateMissiles(state: State, dt: number, windowSize: Size.Size) {
+ if (Controls.current.spaceCount > state.lastFired) {
+ state.missiles.push({x: state.pos.x + state.radius, y: state.pos.y})
+ state.lastFired = Controls.current.spaceCount
}
state.missiles = state.missiles
- .map(missile => ({ ...missile, x: missile.x + delta}))
- .filter(missile => missile.x < Screen.width)
+ .map(missile => ({ ...missile, x: missile.x + dt}))
+ .filter(missile => missile.x < windowSize.width)
+}
+
+export function project(state: State, from: Size.Size, to: Size.Size) {
+ state.pos = Vec2.project(from, to, state.pos)
+ state.radius = state.radius / Size.diagonal(from) * Size.diagonal(to)
}
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.moveTo(state.pos.x - state.radius, state.pos.y - state.radius)
+ context.lineTo(state.pos.x + state.radius, state.pos.y)
+ context.lineTo(state.pos.x - state.radius, state.pos.y + state.radius)
context.closePath()
context.fill()
diff --git a/tsconfig.json b/tsconfig.json
index 3e7f32b..85c0a86 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,7 @@
{
"compilerOptions": {
"module": "amd",
- "target": "es5",
+ "target": "es2016",
"baseUrl": "src",
"outFile": "public/main.js",
"noImplicitAny": true,
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-21 12:46:51 +0000