gitwtfhub

wtf is bites-and-baits?

concego/bites-and-baits — explained in plain English

Analysis updated 2026-05-18

0JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

TL;DR

Bites and Baits is a browser fishing game demo that uses a phone's accelerometer, vibration, and audio APIs for physical immersion, built with screen reader accessibility as a core design goal.

Mindmap

mindmap
  root((bites-and-baits))
    What it does
      Browser fishing game
      Sensor driven controls
      Accessibility first design
    Tech stack
      JavaScript
      HTML5 CSS3
      Web Audio API
      Vibration API
    Use cases
      Motion control demo
      Procedural audio demo
      Screen reader game demo
    Audience
      Web developers
      Accessibility designers

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

See a working example of controlling a web game with phone tilt and shake gestures.

REASON 2

Study how to generate game sound effects in real time with the Web Audio API instead of audio files.

REASON 3

Learn a pattern for making a fast-paced web game accessible to screen reader users via ARIA live regions.

What's in the stack?

JavaScriptHTML5CSS3Web Audio API

How it stacks up

concego/bites-and-baits00kaku/gallery-slider-block3rd-eden/ircb.io
Stars0
LanguageJavaScriptJavaScriptJavaScript
Last pushed2021-05-192016-11-16
MaintenanceDormantDormant
Setup difficultyeasyeasyeasy
Complexity2/52/52/5
Audiencedevelopergeneraldeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · easy Time to first run · 5min

Playable directly in a browser via GitHub Pages, no build step or install needed.

MIT license, free to study, adapt, and reuse the code.

Wtf does this do

Bites and Baits is a small browser fishing game built as a proof of concept for using a phone's physical sensors, accelerometer, gyroscope, vibration, and audio, directly in a web page without installing anything. The point of the project is not really the game itself but showing that immersive, accessible experiences can be built with standard web APIs alone. It runs on a phone with motion sensors or on a computer with a keyboard, and it was designed from the start to work with screen readers. On a phone, tilting forward casts the line, tilting back reels in the fish, and shaking the phone sets the hook when a fish bites, using the DeviceOrientationEvent and DeviceMotionEvent browser APIs. On iOS this requires the user to explicitly grant permission. Game events also trigger distinct vibration patterns through the Vibration API, so a player can feel when a fish bites, when the hook is set, or when the line snaps, without needing to look at the screen. All of the game's sound, ambient water noise, reel pitch, bite sounds, and the line snapping, is generated in real time with the Web Audio API rather than played from audio files. Accessibility is built into the core design rather than added afterward. The game relies on the phone's own screen reader, TalkBack on Android or VoiceOver on iOS, to narrate events through ARIA live regions, and it uses a double animation frame technique to make sure urgent messages like a fish biting interrupt whatever the screen reader was already announcing. When the game is actively being played, the rest of the interface is hidden from the screen reader so only the relevant announcements come through. The game moves a player through states such as waiting, a fish biting, reeling it in, and either catching it or having the line snap. Five fish species are defined with different rarity, resistance, and timing windows, from the common and easy Lambari to the rare Pirarucu, which acts as a boss fish that resists longer and barely tires. When no accelerometer is available, the game automatically falls back to arrow key and spacebar controls. It is built with plain HTML, CSS, and JavaScript, with no frameworks or external dependencies, and is released under the MIT license.

Yoink these prompts

Prompt 1
Explain how Bites and Baits uses DeviceOrientationEvent and DeviceMotionEvent to control the fishing mechanic.
Prompt 2
Show me how to build a double requestAnimationFrame announce function like Bites and Baits uses for screen reader interrupts.
Prompt 3
How does Bites and Baits generate its ambient water and reel sounds procedurally with the Web Audio API?
Prompt 4
Walk me through adding a keyboard fallback control scheme like Bites and Baits does when no accelerometer is present.

Frequently asked questions

wtf is bites-and-baits?

Bites and Baits is a browser fishing game demo that uses a phone's accelerometer, vibration, and audio APIs for physical immersion, built with screen reader accessibility as a core design goal.

What language is bites-and-baits written in?

Mainly JavaScript. The stack also includes JavaScript, HTML5, CSS3.

What license does bites-and-baits use?

MIT license, free to study, adapt, and reuse the code.

How hard is bites-and-baits to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is bites-and-baits for?

Mainly developer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.