diff --git a/examples/flappy-bird/index.html b/examples/flappy-bird/index.html index fd5cf3f..3920cb2 100644 --- a/examples/flappy-bird/index.html +++ b/examples/flappy-bird/index.html @@ -8,7 +8,7 @@
- +
diff --git a/examples/flappy-bird/src/game.ts b/examples/flappy-bird/src/game.ts index 5b63b9f..eb792f1 100644 --- a/examples/flappy-bird/src/game.ts +++ b/examples/flappy-bird/src/game.ts @@ -1,8 +1,8 @@ import { Climbro, Entralpi, ForceBoard, Motherboard, mySmartBoard, Progressor, WHC06 } from "@hangtime/grip-connect" let mass: number -let weight = 75 -let difficulty = 0.5 +let weight = 5 +let difficulty = 2 let device: Climbro | Entralpi | ForceBoard | Motherboard | mySmartBoard | Progressor | WHC06 /** @@ -51,18 +51,24 @@ export function setupDevice(selectElement: HTMLSelectElement, outputElement: HTM }) } +export function setupTare(element: HTMLDivElement) { + element.addEventListener("click", () => { + device.tare() + }) +} + export function setupDifficulty(element: HTMLSelectElement) { element.addEventListener("change", () => { const selectedDifficulty = element.value if (selectedDifficulty === "easy") { - difficulty = 0.75 + difficulty = 2.5 } if (selectedDifficulty === "normal") { - difficulty = 0.5 + difficulty = 2 } if (selectedDifficulty === "hard") { - difficulty = 0.25 + difficulty = 1.5 } }) } @@ -87,22 +93,24 @@ scrn.tabIndex = 1 async function handleUserInput(): Promise { switch (state.curr) { case state.getReady: - if (device.isConnected()) { - if (device instanceof Motherboard || device instanceof Progressor) { - await device.stream() - } - state.curr = state.Play - SFX.start.play() - } else { - await device.connect(async () => { - if (device instanceof ForceBoard || device instanceof Motherboard || device instanceof Progressor) { - // Request notifications + if (device) { + if (device.isConnected()) { + if (device instanceof Motherboard || device instanceof Progressor) { await device.stream() - // Play game - state.curr = state.Play - SFX.start.play() } - }) + state.curr = state.Play + SFX.start.play() + } else { + await device.connect(async () => { + if (device instanceof ForceBoard || device instanceof Motherboard || device instanceof Progressor) { + // Request notifications + await device.stream() + // Play game + state.curr = state.Play + SFX.start.play() + } + }) + } } break case state.Play: @@ -196,11 +204,11 @@ const pipe: { } = { top: { sprite: new Image() }, bot: { sprite: new Image() }, - gap: 85, + gap: 85 * difficulty, moved: true, pipes: [], draw: function () { - this.gap = 50 + difficulty * 150 + this.gap = 85 * difficulty for (const p of this.pipes) { sctx.drawImage(this.top.sprite, p.x, p.y) sctx.drawImage(this.bot.sprite, p.x, p.y + parseFloat(String(this.top.sprite.height)) + this.gap) @@ -210,7 +218,7 @@ const pipe: { if (state.curr != state.Play) return if (gameFrames % 100 == 0) { this.pipes.push({ - x: parseFloat(String(scrn.width)), + x: scrn.width, y: -210 * Math.min(Math.random() + 1, 1.8), }) } @@ -233,6 +241,7 @@ const bird: { gravity: number thrust: number frame: number + isFlapping: boolean draw: () => void update: () => void flap: () => void @@ -247,6 +256,7 @@ const bird: { gravity: 0.125, thrust: 3.6, frame: 0, + isFlapping: false, draw: function () { const h = this.animations[this.frame].sprite.height const w = this.animations[this.frame].sprite.width @@ -266,8 +276,14 @@ const bird: { break case state.Play: this.frame += gameFrames % 5 == 0 ? 1 : 0 - if (mass && this.y > 0) { - this.speed -= (this.thrust / weight) * (mass * difficulty) + if (mass > weight && this.y > 0) { + if (!this.isFlapping) { + SFX.flap.play() + this.isFlapping = true + } + this.speed = -(mass / 2) + } else if (mass <= weight) { + this.isFlapping = false } this.y += this.speed this.setRotation() diff --git a/examples/flappy-bird/src/main.ts b/examples/flappy-bird/src/main.ts index 7a9987e..49fece7 100644 --- a/examples/flappy-bird/src/main.ts +++ b/examples/flappy-bird/src/main.ts @@ -1,28 +1,42 @@ import "./style.css" import "./game" -import { setupDevice, setupWeight, setupDifficulty } from "./game" +import { setupDevice, setupWeight, setupDifficulty, setupTare } from "./game" const controllerElement = document.querySelector("#controller") if (controllerElement) { controllerElement.innerHTML += ` - - - +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
` } @@ -30,6 +44,7 @@ if (controllerElement) { const deviceSelectElement = document.querySelector("#deviceSelect") const weightInputElement = document.querySelector("#weightInput") const difficultySelectElement = document.querySelector("#difficultySelect") +const tareElement = document.querySelector("#tare") const errorElement = document.querySelector("#error") if (deviceSelectElement && errorElement) { @@ -40,6 +55,10 @@ if (weightInputElement) { setupWeight(weightInputElement) } +if (tareElement) { + setupTare(tareElement) +} + if (difficultySelectElement) { setupDifficulty(difficultySelectElement) } diff --git a/examples/flappy-bird/src/style.css b/examples/flappy-bird/src/style.css index 9f167d8..083722e 100644 --- a/examples/flappy-bird/src/style.css +++ b/examples/flappy-bird/src/style.css @@ -29,11 +29,37 @@ body { width: 100%; } +#controller { + margin: 0 auto; + width: 100%; +} + #canvas { background-color: #30c0df; border: 2px solid black; display: block; - margin: auto; + margin: 0 auto; +} + +#control { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1rem; + width: 100%; + margin: 0 auto; + max-width: 384px; +} + +#control > div { + grid-column: span 1; + max-width: 100%; + display: flex; + flex-direction: column; +} + +label { + font-weight: bold; + font-size: 0.875rem; } #error { @@ -46,18 +72,15 @@ body { margin: 1rem auto 0; } -input { - max-width: 120px; -} - +button, select, input { appearance: none; border-radius: 8px; border: 1px solid transparent; padding: 0.6em; - margin-bottom: 0.3rem; - margin-top: 0.6rem; + display: block; + margin: 0.6rem 0 0.3rem; font-size: 1em; font-weight: 500; font-family: inherit; @@ -65,13 +88,17 @@ input { cursor: pointer; text-align: center; transition: border-color 0.25s; + max-width: 100%; } +button:hover, select:hover, input:hover { border-color: #646cff; } +button:focus, +button:focus-visible, select:focus, select:focus-visible, input:focus,