The Legend of Mr. Froggles 🐸
This is the legend of the flying frog that is magical and it can fly.
A game based on an original drawing by Caitlin Sogge.
A browser game for kids starring Mr. Froggles, a magical frog who flies on bowtie wings and uses purple enchantments to transform the world around him. Aimed at young readers, a step up from Build a Rainbow.
For now there's the opening screen (Mr. Froggles, the legend, the credit for the original drawing, a Start button, and a Read the legend button), a next screen where you pick one of eight kingdoms, and a screen for each kingdom. Every kingdom has three friends to help.
Running it locally
The game is plain HTML, CSS and JavaScript in public/, with no build step and no backend. To run it with the included dev server:
npm install
npm run dev
Then open http://localhost:3003.
To run the tests:
npm test
How the code is organized
public/index.html: the opening screen.public/story.html: the whole legend as a storybook, one page at a time: Mr. Froggles, then a page for each kingdom telling how he helped all three friends there, and The End. public/game/story-page.js turns the pages. A new friend in the game goes in the story too (a test checks).public/next.html: the screen Start leads to: pick one of the eight kingdoms (Home Pond, Whispering Woods, Cloud Kingdom, Moon Cave, Frosty Peak, Seashell Beach, Candy Hills, Coral Reef). Each kingdom opens its own screen.public/home-pond.html: the Home Pond, lily pads, a water lily, cattails and tadpoles with Mr. Froggles flying over, a Back button to the kingdom picker, and three quests: Pebble the snail is stuck on a rock in the water, so tap her, read what she needs, and enchant the rock into a lily pad that floats her to shore; Wiggles the tadpole wants to hop, so enchant him into a little frog; and Bumble the bee is hungry but the water lily is shut tight, so enchant it to bloom.public/whispering-woods.html: the Whispering Woods, round trees and spotted mushrooms with Mr. Froggles flying through, a Back button to the kingdom picker, and three quests: Hazel the hedgehog can't cross the stream to her family, so tap her, read what she needs, and enchant the little leaf into a bridge; Olive the owl has tumbled out of her nest, so enchant the mushroom she's sitting on to grow tall and carry her back up; and Nutmeg the squirrel has no acorns for winter, so enchant the big oak tree to fill it with acorns.public/cloud-kingdom.html: the Cloud Kingdom, a castle on a cloud with Mr. Froggles flying by, a Back button to the kingdom picker, and three quests: a rain cloud won't stop raining on Pip the bluebird, so tap her, read what she needs, and enchant the rain cloud into a rainbow so she can fly again; Ginger the fox's kite won't fly with no wind, so enchant the kite to soar into the sky; and Lulu the unicorn has no wings, so enchant her little feather into wings and she flies up over the castle.public/frosty-peak.html: Frosty Peak, snowy mountains under a glowing green and purple sky, with Mr. Froggles flying over, a Back button to the kingdom picker, and three quests: Pom the penguin's hill is too bumpy to slide down, so enchant the rocks into an ice slide; Bo the polar bear cub is shivering, so enchant his snowball into a cozy igloo; and Mitten the snow hare is so white her friends can't find her, so enchant a snowflake into a bright red scarf.public/seashell-beach.html: Seashell Beach, the sea, the sand and a palm tree under the sun, with Mr. Froggles flying over, a Back button to the kingdom picker, and three quests: Tilly the sea turtle has just hatched but the sea is too far for her little flippers, so enchant a wave to carry her in; Splash the dolphin's beach ball is stuck up in the palm tree, so enchant the tree to toss it back to her; and Shelly the hermit crab has grown too big for her shell, so enchant a tiny pink shell into a big one.public/candy-hills.html: Candy Hills, pink frosted hills with candy canes and gumdrops, with Mr. Froggles flying over, a Back button to the kingdom picker, and three quests: it's Crumb the gingerbread kid's birthday but the gingerbread house is plain, so enchant a gumdrop to cover it in icing and candy; Taffy the mouse's lollipop tree has lost its colors, so enchant the tree to make the lollipops bright again; and Puff the marshmallow snowman has melted in the hot sun, so enchant the cotton candy cloud to float over the sun and give him shade.public/coral-reef.html: the Coral Reef, deep under the sea with coral, seaweed and sunbeams, with Mr. Froggles swimming by in a magic bubble, a Back button to the kingdom picker, and three quests: Pearl the seahorse's treasure chest is stuck shut, so enchant the chest to pop it open; Inky the octopus has all eight arms tangled in seaweed, so enchant the seaweed to let go; and Bubbles the little fish has lost his school, so enchant a bubble to float him up to them.public/moon-cave.html: the Moon Cave, with Mr. Froggles flying by, a Back button to the kingdom picker, and three quests: Flicker the firefly's light has gone out, so tap her, read what she needs, and enchant the cave to make it glow; Twinkle the little star has tumbled out of the sky onto the hill, so enchant the moonlight to carry her back up; and Dot the bat has no branch to sleep upside down from, so enchant the tiny twig into a tree.public/game/read-aloud.js: the round speaker button in the story box and on each storybook page. Tap it and the browser reads the words out loud in its own voice (the Web Speech API, built into browsers), for kids who can't read yet; tap again to stop. If a browser can't speak, there's no button.public/game/quest.js: the steps every quest follows (talk, then enchant, then done). It doesn't touch the page, so the tests can play it directly.public/game/quest-page.js: draws a page's quests and handles the taps and keys. A kingdom with more than one quest gives each its own group in the picture (data-quest). When you enchant, Mr. Froggles swoops over and sparkles fly from him to what he enchants; each quest says where with data-froggles-to and data-enchant-at. Tap Mr. Froggles himself and he does a flip and says hello ("Ribbit!") in a speech bubble. Once everyone in a kingdom is helped, he twirls and flies off, and a closing card covers the picture, with a way to another kingdom or to stay and look.public/game/<kingdom>-quest.js: one quest's words: who needs help, what they say, and the button. moon-cave-quest.js, moon-cave-star-quest.js, moon-cave-bat-quest.js, woods-quest.js, woods-owl-quest.js, woods-squirrel-quest.js, pond-quest.js, pond-tadpole-quest.js, pond-bee-quest.js, cloud-quest.js, cloud-fox-quest.js, cloud-unicorn-quest.js, frosty-quest.js, frosty-bear-quest.js, frosty-hare-quest.js, beach-quest.js, beach-dolphin-quest.js, beach-crab-quest.js, candy-quest.js, candy-mouse-quest.js, candy-snowman-quest.js, reef-quest.js, reef-octopus-quest.js and reef-fish-quest.js.public/game/<kingdom>-page.js: starts that kingdom's quest on its page.public/mr-froggles.svg: Mr. Froggles, drawn from the original marker picture.public/apple-touch-icon.png: the icon when the game is saved to an iPhone or iPad home screen (Add to Home Screen): Mr. Froggles with purple sparkles on a sky-blue background, named "Mr. Froggles". Every page links to it.public/kingdoms/: a picture of each kingdom, in the same marker-drawing style.public/styles.css: one stylesheet.public/social-preview.png: the picture shown when a link to the game is shared (in a message or on social media). Every page points to it.public/sitemap.xml: every page, for search engines. A new page goes here too (a test checks).public/google32efa8321a61b455.html: proves to Google Search Console that the site is ours. Keep it exactly as it is (a test checks), or the verification is lost.src/index.ts: the local dev server. The published game doesn't use it; GitHub Pages serves public/ as is.
Fonts
Fredoka and Nunito, both under the SIL Open Font License. The license files are in public/fonts/.
Credits
Made by Jessica Sogge.
Mr. Froggles and his legend by Caitlin Sogge.
