feat: tap and jump

kt3k · kt3k · commit 82fa432fddc7 · 2025-08-11T22:57:49.000+09:00
diff --git a/model/character.ts b/model/character.ts
@@ -4,6 +4,7 @@ import { type Dir, DOWN, LEFT, RIGHT, UP } from "../util/dir.ts"
 import { CELL_SIZE } from "../util/constants.ts"
 import { choice, randomInt } from "../util/random.ts"
 import { bindToggleFullscreenOnce } from "../util/fullscreen.ts"
+import { inputQueue } from "../player/ui/input-queue.ts"
 import * as signal from "../util/signal.ts"
 
 const fallbackImagePhase0 = await fetch(
@@ -462,7 +463,15 @@ export class MainCharacter extends Character {
       return LEFT
     } else if (input.right) {
       return RIGHT
-    } else if (input.space) {
+    }
+
+    const queueHead = inputQueue[0]
+
+    if (
+      queueHead === "space" ||
+      queueHead === "touchendempty"
+    ) {
+      inputQueue.shift()
       return "jump"
     }
     return undefined
diff --git a/player/ui/input-queue.ts b/player/ui/input-queue.ts
@@ -0,0 +1,2 @@
+type QueueInput = "space" | "touchendempty"
+export const inputQueue: QueueInput[] = []
diff --git a/player/ui/key-monitor.ts b/player/ui/key-monitor.ts
@@ -1,11 +1,14 @@
 import type { Context } from "@kt3k/cell"
 import { Input } from "../../util/dir.ts"
+import { inputQueue } from "./input-queue.ts"
 
 const KEY_UP = new Set(["ArrowUp", "w", "k"])
 const KEY_DOWN = new Set(["ArrowDown", "s", "j"])
 const KEY_LEFT = new Set(["ArrowLeft", "a", "h"])
 const KEY_RIGHT = new Set(["ArrowRight", "d", "l"])
 
+let spaceQueued = false
+
 /** The component which monitors the user input.
  *
  * Mount <body> tag.
@@ -27,9 +30,11 @@ export function KeyMonitor({ on }: Context) {
       e.preventDefault()
       Input.right = true
     } else if (e.key === " ") {
-      console.log("Space key pressed, marking Input.space as true")
       e.preventDefault()
-      Input.space = true
+      if (!spaceQueued) {
+        spaceQueued = true
+        inputQueue.push("space")
+      }
     }
   })
   on("keyup", (e) => {
@@ -42,7 +47,7 @@ export function KeyMonitor({ on }: Context) {
     } else if (KEY_RIGHT.has(e.key)) {
       Input.right = false
     } else if (e.key === " ") {
-      Input.space = false
+      spaceQueued = false
     }
   })
 }
diff --git a/player/ui/swipe-handler.ts b/player/ui/swipe-handler.ts
@@ -2,6 +2,7 @@ import type { Context } from "@kt3k/cell"
 
 import { clearInput, Input } from "../../util/dir.ts"
 import { getDir, getDistance } from "../../util/touch.ts"
+import { inputQueue } from "./input-queue.ts"
 
 const TOUCH_SENSITIVITY_THRESHOLD = 25
 
@@ -26,6 +27,10 @@ export function SwipeHandler({ on }: Context) {
     prevTouch = touch
   })
   on("touchend", () => {
-    clearInput()
+    if (Input.up || Input.down || Input.left || Input.right) {
+      clearInput()
+    } else {
+      inputQueue.push("touchendempty")
+    }
   })
 }
diff --git a/static/index.html b/static/index.html
@@ -19,7 +19,7 @@
   </head>
   <body
     class="js-key-monitor js-swipe-handler"
-    style="overscroll-behavior-y: none; overscroll-behavior-x: none; min-height: 100svh"
+    style="overscroll-behavior-y: none; overscroll-behavior-x: none; min-height: 100svh; touch-action: manipulation"
   >
     <div
       class="js-game-screen js-item-get-effector relative h-[320px] w-[320px] overflow-hidden"
diff --git a/util/dir.ts b/util/dir.ts
@@ -18,13 +18,11 @@ export const Input = {
   down: false,
   left: false,
   right: false,
-  space: false,
 }
 
 /** Clear the current direction input state */
 export function clearInput() {
   for (const dir of DIRS) {
     Input[dir] = false
   }
-  Input.space = false
 }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+type QueueInput = "space" \| "touchendempty"`
	`2`	`+export const inputQueue: QueueInput[] = []`
Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@`
`19`	`19`	`</head>`
`20`	`20`	`<body`
`21`	`21`	`class="js-key-monitor js-swipe-handler"`
`22`		`- style="overscroll-behavior-y: none; overscroll-behavior-x: none; min-height: 100svh"`
	`22`	`+ style="overscroll-behavior-y: none; overscroll-behavior-x: none; min-height: 100svh; touch-action: manipulation"`
`23`	`23`	`>`
`24`	`24`	`<div`
`25`	`25`	`class="js-game-screen js-item-get-effector relative h-[320px] w-[320px] overflow-hidden"`
Original file line number	Diff line number	Diff line change
`@@ -18,13 +18,11 @@ export const Input = {`
`18`	`18`	`down: false,`
`19`	`19`	`left: false,`
`20`	`20`	`right: false,`
`21`		`- space: false,`
`22`	`21`	`}`
`23`	`22`
`24`	`23`	`/** Clear the current direction input state */`
`25`	`24`	`export function clearInput() {`
`26`	`25`	`for (const dir of DIRS) {`
`27`	`26`	`Input[dir] = false`
`28`	`27`	`}`
`29`		`- Input.space = false`
`30`	`28`	`}`