justin/pokesql
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update README — add Xbox controller, sprite sheet, music, PNG NPCs, proximity bubble, all current features

Browse Source
This commit is contained in:
Justin Oros
2026-05-21 15:44:49 -07:00
parent f5301467e2
commit ee9d93010d
1 changed files with 62 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+62 -26
View File
@@ -4,7 +4,7 @@ A Pokémon-style Game Boy Advance browser game for learning **Microsoft T-SQL**!
Play it on your phone, tablet, or PC — progress is saved automatically to your browser.
## 🚀 Play It Live
👉 [Launch PokeSQL](https://justinoros.github.io/pokesql)
👉 [Launch PokéSQL](https://justinoros.github.io/pokesql)
---
@@ -12,10 +12,18 @@ Play it on your phone, tablet, or PC — progress is saved automatically to your
```
pokesql/
├── index.html ← Game screens & structure
├── style.css ← GBA Pokémon aesthetic, fully responsive
├── game.js ← Game engine, controller, walking, save system
├── questions.json ← 100 T-SQL questions & answers
├── index.html ← Game screens & structure
├── style.css ← GBA Pokémon aesthetic, fully responsive
├── game.js ← Game engine, controller, walking, save system
├── questions.json ← 100 T-SQL questions & answers
├── player.png ← Player sprite sheet (24 frames, 16×32px)
├── oak.png ← Professor Oak NPC sprite
├── gary.png ← Rival Gary NPC sprite
├── joy.png ← Nurse Joy NPC sprite
├── jenny.png ← Officer Jenny NPC sprite
├── music.mp3 ← Background music (overworld)
├── music-rival.mp3 ← Background music (rival/battle)
├── favicon.ico ← Browser tab icon
└── README.md
```
@@ -24,7 +32,7 @@ pokesql/
## 🕹️ Host on GitHub Pages (free)
1. Create a GitHub repo named **`pokesql`**
2. Upload all **4 files**: `index.html`, `style.css`, `game.js`, `questions.json`
2. Upload all files listed above
3. Go to **Settings → Pages → Source: `main` branch, `/ (root)` folder**
4. Hit **Save** — live in ~60 seconds at `https://justinoros.github.io/pokesql`
@@ -39,14 +47,28 @@ On mobile, a semi-transparent Game Boy Advance-style controller overlays the bot
| Control | Action |
|---|---|
| **D-pad** | Walk the player around the map |
| **A button** (red) | Talk to NPC on map · Confirm answer in battle · Advance dialog |
| **B button** (blue) | Talk to NPC on map · Advance dialog |
| **SELECT / START** | Decorative — reserved for future use |
| **A button** (red) | Talk to NPC · Confirm answer · Advance dialog |
| **B button** (blue) | Talk to NPC · Advance dialog |
| **SELECT / START** | Decorative |
The controller is hidden on desktop (≥900px wide) — use the keyboard instead.
---
## 🕹️ Xbox / Gamepad Support
Plug in any Xbox, PlayStation, or USB gamepad and it works automatically:
| Input | Action |
|---|---|
| **Left stick / D-pad** | Walk on map |
| **A button** | Talk to NPC · Confirm answer · Advance dialog |
| **B button** | Talk to NPC · Advance dialog |
| **Start** | Confirm / advance on all screens |
| **X / Y / LB / RB** | Quick-pick answers 1/2/3/4 in battle |
---
## ⌨️ PC Keyboard Controls
| Key | Action |
@@ -61,9 +83,11 @@ The controller is hidden on desktop (≥900px wide) — use the keyboard instead
## 🗺️ Map & Walking
- The player sprite walks freely around the overworld map using the D-pad or WASD
- Walking animations change based on direction (left, right, up, down)
- Press **A**, **B**, **E**, or **Enter** at any time to talk to the NPC and start the question
- The player sprite walks freely around the overworld map using the D-pad, WASD, arrow keys, or Xbox controller
- Walking animations use the `player.png` sprite sheet with directional frames
- A blinking `▶` arrow on the right edge points toward the next NPC
- A `...` speech bubble appears above the player if you press talk before reaching the NPC
- Press **A**, **B**, **E**, or **Enter** when near the NPC to start the question
- Tapping the NPC sprite directly also triggers the conversation
---
@@ -72,27 +96,39 @@ The controller is hidden on desktop (≥900px wide) — use the keyboard instead
Progress is stored in the player's browser (`localStorage`) automatically:
- **Auto-saves** after every answered question and on map return — a 💾 icon flashes to confirm
- **Auto-saves** after every answered question and on map return
- **Shuffled question order** is saved so continuing a game resumes the exact same sequence
- **Continue screen** appears on next visit showing trainer name, progress %, and score
- **New Game** option always available — prompts confirmation before erasing save
- Save clears automatically on completion so the next run starts fresh
---
## 🎵 Music
- Background music plays automatically on the map (`music.mp3`)
- Music pauses during questions and resumes on return to the map
- **🎵 / 🔇 toggle** in the map header to mute/unmute
- Music resumes correctly after switching browser tabs on mobile
---
## 🎯 Features
| Feature | Detail |
|---|---|
| GBA controller overlay | D-pad + A/B buttons, semi-transparent, mobile only |
| Walking player | Moves freely on map, directional walk animations |
| Xbox / gamepad support | Full navigation on all screens including name entry |
| Walking player | Pixel sprite sheet, directional walk animations |
| Mobile-first design | Full-screen on phones with safe-area support, framed on desktop |
| localStorage save | Auto-save with continue screen on return visits |
| 100 T-SQL questions | Progressive difficulty, shuffled answer order every time |
| Randomised answer positions | Correct answer shuffled to a random slot — no pattern to exploit |
| Numbered answers | Options labelled 1/2/3/4 (not A/B/C/D) |
| Name entry | On-screen pixel keyboard, just like the real game |
| Typewriter text | Authentic dialog effect, tap/press to skip |
| 22 NPC characters | Professor Oak, Misty, Brock, Giovanni, Lance… |
| localStorage save | Auto-save with shuffled order preserved on continue |
| 100 T-SQL questions | Randomised order every new game, shuffled answer slots |
| Numbered answers | Options labelled 1/2/3/4 — no A/B/C/D pattern to exploit |
| PNG NPC sprites | NPCs can use image files or emoji |
| Name entry | On-screen pixel keyboard navigable by gamepad |
| Typewriter text | Authentic dialog effect, tap/press/gamepad to skip |
| `...` proximity bubble | Shows above player when pressing talk too far from NPC |
| Background music | Loops on map, pauses during questions, mute toggle |
| Streak bonuses | 3× correct = +150 pts 🔥, 5×+ = +200 pts 🔥 |
| Milestone badges | Earned at Q25, Q50, Q75, Q100 |
| Correct answer reveal | Wrong answers show the right answer + full explanation |
@@ -129,22 +165,22 @@ Edit `questions.json`, add to the `questions` array inside `levels[0]`:
}
```
`answer` is the **0-based index** of the correct option in the `options` array (0 = first option, 1 = second, etc.). The game shuffles the display order randomly at runtime, so the position shown to the player will vary each time.
`answer` is the **0-based index** of the correct option (0 = first, 1 = second, etc.). The game shuffles display order randomly at runtime.
---
## 🧑 Adding NPCs
In `game.js`, add to the `NPC` object at the top:
In `game.js`, add to the `NPC` object:
```js
const NPC = {
'Your NPC Name': '🧑',
...
'Your NPC Name': 'npc.png', // PNG sprite file in repo root
'Another NPC': '🧑', // or an emoji
};
```
Then reference `"npc": "Your NPC Name"` in `questions.json`.
Then reference `"npc": "Your NPC Name"` in `questions.json`. PNG files are auto-prefixed with `./` so just use the filename.
---