improve flappybird example

Stevie-Ray · Oct 17, 2024 · f779c42 · f779c42
1 parent 9e470b5
commit f779c42
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 50 deletions.
diff --git a/examples/flappy-bird/index.html b/examples/flappy-bird/index.html
@@ -8,7 +8,7 @@
   </head>
   <body>
     <div id="app">
-      <canvas id="canvas" width="414" height="621" tabindex="1"></canvas>
+      <canvas id="canvas" width="408" height="621" tabindex="1"></canvas>
       <div id="controller"></div>
     </div>
     <script type="module" src="/src/main.ts"></script>

diff --git 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<void> {
   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
@@ -1,35 +1,50 @@
 import "./style.css"
 import "./game"
 
-import { setupDevice, setupWeight, setupDifficulty } from "./game"
+import { setupDevice, setupWeight, setupDifficulty, setupTare } from "./game"
 
 const controllerElement = document.querySelector<HTMLDivElement>("#controller")
 if (controllerElement) {
   controllerElement.innerHTML += `
-    <select id="deviceSelect">
-      <option value="">Select device</option>
-      <option value="climbro" disabled>Climbro</option>
-      <option value="entralpi">Entralpi</option>
-      <option value="forceboard">Force Board</option>
-      <option value="motherboard">Motherboard</option>
-      <option value="smartboard" disabled>mySmartBoard</option>
-      <option value="progressor">Progressor</option>
-      <option value="whc06">WH-C06</option>
-    </select>
-    <input id="weightInput" placeholder="weight" value="75" type="number">
-    <select id="difficultySelect">
-      <option>Select difficulty</option>
-      <option value="easy">Easy</option>
-      <option value="normal" selected>Normal</option>
-      <option value="hard">Hard</option>
-    </select>
+    <div id="control">
+      <div>
+        <label for="deviceSelect">&nbsp;</label>
+        <select id="deviceSelect">
+          <option value="">Select device</option>
+          <option value="climbro" disabled>Climbro</option>
+          <option value="entralpi">Entralpi</option>
+          <option value="forceboard">Force Board</option>
+          <option value="motherboard">Motherboard</option>
+          <option value="smartboard" disabled>mySmartBoard</option>
+          <option value="progressor">Progressor</option>
+          <option value="whc06">WH-C06</option>
+        </select>
+      </div>
+      <div>
+       <label for="deviceSelect">&nbsp;</label>
+       <button id="tare">Tare</button>
+      </div>
+      <div id="weight-control">
+        <label for="weightInput">Target weight</label>
+        <input id="weightInput" placeholder="weight" value="5" type="number">
+      </div>
+      <div>
+      <label for="difficultySelect" title="Pipe gap size">Difficulty</label>
+      <select id="difficultySelect">
+        <option>Select difficulty</option>
+        <option value="easy">Easy</option>
+        <option value="normal" selected>Normal</option>
+        <option value="hard">Hard</option>
+      </select>
+    </div>
     <div id="error" style="display:none;"></div>
   `
 }
 
 const deviceSelectElement = document.querySelector<HTMLSelectElement>("#deviceSelect")
 const weightInputElement = document.querySelector<HTMLInputElement>("#weightInput")
 const difficultySelectElement = document.querySelector<HTMLSelectElement>("#difficultySelect")
+const tareElement = document.querySelector<HTMLDivElement>("#tare")
 const errorElement = document.querySelector<HTMLDivElement>("#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
@@ -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,32 +72,33 @@ 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;
   background-color: #1a1a1a;
   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,