Joel Brock
b5499bd618
Vanilla HTML/CSS/JS Tamagotchi-style game with three species (green, loggerhead, leatherback), persistent idle progression, hazard QTEs (sharks, boats, ghost nets, tourists), and offline PWA support via service worker. Includes README with cited conservation resources and research.
74 lines
5.7 KiB
Markdown
74 lines
5.7 KiB
Markdown
# Walkthrough: Tortugotchi Sea Turtle Conservation PWA
|
|
|
|
We have successfully built and deployed the Progressive Web App (PWA) game **Tortugotchi** in the `/opt/homebrew/var/www/tortugotchi` workspace directory. The application educates players on sea turtle conservation by placing them in charge of a nest and then rearing an individual turtle.
|
|
|
|
## App Icon Preview
|
|
Here is the generated application icon representing our anime-styled, cute cuddly sea turtle friend:
|
|
|
|
|
|
|
|
---
|
|
|
|
## Created File Architecture
|
|
|
|
The codebase contains the following core files:
|
|
1. **[index.html](file:///opt/homebrew/var/www/tortugotchi/index.html)**: Main HTML structure, layout viewport, game overlay HUD screens, and conservation science modal.
|
|
2. **[style.css](file:///opt/homebrew/var/www/tortugotchi/style.css)**: Glassmorphic UI layout design, mobile frame constraints, sunset/night sand and water gradients, and keyframe animations for characters (swimming, blinking, waddling).
|
|
3. **[app.js](file:///opt/homebrew/var/www/tortugotchi/app.js)**: State machine controller, collision logic for floating trash, drag-and-drop recycling support, touch repelling for tourists, and LocalStorage data saving.
|
|
4. **[manifest.json](file:///opt/homebrew/var/www/tortugotchi/manifest.json)**: PWA installation properties, orientation locks, theme coloring, and app identity.
|
|
5. **[sw.js](file:///opt/homebrew/var/www/tortugotchi/sw.js)**: Service worker shell caching routine, enabling offline gameplay.
|
|
6. **[icon-512.png](file:///opt/homebrew/var/www/tortugotchi/icon-512.png)** and **[icon-192.png](file:///opt/homebrew/var/www/tortugotchi/icon-192.png)**: High-resolution app launcher and splash screen icons.
|
|
|
|
---
|
|
|
|
## Gameplay Mechanics Walkthrough
|
|
|
|
### Phase 1: Nest & Hatchling Guarding (Beach)
|
|
- **Objective**: Protect a nest of 20 sea turtle eggs.
|
|
- **Hazards**:
|
|
- **Trash (🥤, 🍼, 🍿)** blocks crawling hatchlings. The user must drag and drop the trash into the **Recycle Bin** on the bottom right.
|
|
- **Sand Holes** trap hatchlings. Tapping them twice fills them in.
|
|
- **Predators (Crabs 🦀, Seagulls 🦅)** attempt to eat the hatchlings. Tapping them scares them away.
|
|
- **Streetlights 💡** confuse the hatchlings' navigation. Tapping them turns off the light pollution so hatchlings navigate towards the moonlit sea.
|
|
- **Hatching Crawl**: During the final 20 seconds, hatchlings emerge and crawl toward the sea.
|
|
- **Realistic Survival Rate**: Safely guide at least **5 out of 20 hatchlings (25%)** to proceed, representing the real-world baseline survival rate on unprotected beaches.
|
|
- **Crawling Improvements**: Hatchling movement speed is increased to allow them to cross the beach container fully within the hatching window.
|
|
- **Conservation Bonus**: Rescuing **more than 5** hatchlings (> 25%) awards a **Starting Goody Bonus** (your ocean turtle starts with +20 hunger/fullness and +20 joy, maxing them out at 100% to represent a healthier head-start).
|
|
- **Scientific Result Breakdown**: Successfully completing this phase shows an intermediate results screen showing the precise survival rate and real-world sea turtle mortality trivia (e.g. only 1 in 1,000 hatchlings survive to adulthood).
|
|
|
|
### Phase 2: Ocean Care (Virtual Pet Room)
|
|
- **Objective**: Raise a single juvenile turtle, rename it (default: "Shelly"), and monitor stats.
|
|
- **Stats**: Hunger, Joy, Shell Cleanliness, and Health. Health decays if other stats fall low or if hazards collide.
|
|
- **Interactivity**:
|
|
- **Feed**: Choose species-accurate foods.
|
|
- *Green Turtle*: Likes **Seagrass 🌿**.
|
|
- *Loggerhead*: Likes **Crabs 🦀**.
|
|
- *Leatherback*: Likes **Jellyfish 🪼**.
|
|
- *Penalty*: Feeding incorrect food drops happiness. Swallowing **Plastic Bags 🛍️** (which float by and mimic jellyfish) causes severe sickness. Tap/swipe plastic bags away before the turtle swallows them!
|
|
- **Clean Shell**: Brushing minigame. Rub the screen over the turtle's shell to scrape away green algae spots.
|
|
- **Play**: Tickle the belly to make it spin and gain Joy.
|
|
- **Heal**: Apply medicine to cure plastic-bag toxicity and injuries.
|
|
- **QTE Hazards**:
|
|
- **Ghost Nets**: Tangled net blocks breathing. Swipe back and forth repeatedly to cut the turtle free.
|
|
- **Boat Strikes**: Motor shadow passes. Tap the "DIVE DEEP" button to escape the propeller.
|
|
- **Shark Attacks**: A Tiger shark swims in. Tap "Hide in Shell" so the turtle retracts its head and flippers.
|
|
|
|
### Phase 3: Beaching & Tourist Control (Conservation Defense)
|
|
- **Objective**: Protect your resting, beached sea turtle from humans.
|
|
- **Hazards**: Ignorant tourists spawn and try to enter the **10-Foot Safe Zone** to take selfies. Camera flashes disorient and stress the turtle (damaging health and progress).
|
|
- **Repelling**: Tap on incoming tourists to shove them back to the screen margins. Each tap displays a federal conservation law fact or NOAA guideline.
|
|
- **Resolution**: Successfully protect the turtle until its rest progress bar reaches 100% to return it safely to the ocean.
|
|
|
|
---
|
|
|
|
## How to Verify and Run
|
|
|
|
1. We have launched a background Python HTTP server on port 8000 in the project folder.
|
|
2. **Access the Game**: Open your browser and navigate to:
|
|
[http://localhost:8000](http://localhost:8000)
|
|
3. **PWA Installation**:
|
|
- On Desktop Chrome: An install icon will appear in the URL address bar, or you can trigger installation via the floating in-game install prompt.
|
|
- On iOS Safari: Tap "Share" -> "Add to Home Screen".
|
|
- On Android Chrome: Tap the three dots -> "Install app".
|
|
4. **Offline Play**: Turn off your network/Wi-Fi connection. Reload the page to verify that the Service Worker caches the code shell and lets you play offline seamlessly.
|