Hoot Spot · Hoot Spot 1.0.0

Contents

Overview
Installation
Requirements and sound
How to play
Interface guide
Files and customization
Languages
Local saves
Development
Updating and cache
Licenses
Troubleshooting
Support

1 Overview

A cozy spot-the-difference game: two scenes sit side by side and a baby owl detective asks you to tap everything that is different. Find 3 to 5 differences in each of 50 levels across 5 worlds (Park, Beach, Farm, Snow and Candy). The differences are things that disappear, change into another object, change color, face the other way or change size. A guided tutorial opens level 1, helpers (magnifier, light bulb and owl eye) give a hand, and stars reward careful tapping. Works in portrait and landscape, with mouse or touch. 14 interface languages, recorded sound effects and music, no external services.

2 Installation

Extract the ZIP. Open DOCUMENTATION.html for this guide. Upload only the contents of game/ to your static HTTP(S) hosting, keeping all folders beside index.html. Open that address in a browser. No database, PHP, account or Node.js runtime is needed to play. Keep source/ and the full ZIP outside your public website.

3 Requirements and sound

Use a current browser with JavaScript, Canvas 2D, Web Audio and local storage enabled. Mouse and touch are supported. The first click, tap or key press unlocks sound; check browser autoplay settings and the in-game sound controls. Files are bundled locally; normal play makes no request to Polar ranking, advertising or payment services. Host the complete folder; opening game HTML through file:// is not the supported installation method.

4 How to play

Tap or click anywhere on either scene when you see something that is different. A correct tap draws a circle on both scenes and the counter goes up; tapping a difference you already found does nothing. A wrong tap shakes the frame; every 3 wrong taps cost a star (up to 2 wrong taps still give 3 stars, and a level always gives at least 1). Each level gives 3 helpers: the magnifier finds one difference for you (3 uses), the light bulb pulses the area where an unfound difference is (3 uses) and the owl eye gives a quick peek at all of them (2 uses). Levels 1 and 2 have 3 differences, levels 3 to 5 have 4 and the rest have 5. Finishing a level unlocks the next one; each world has 10 levels. The tutorial on level 1 explains taps, the counter and every helper. Settings has sound and music volume, vibration, reduced motion and the language list; the game menu (gear) offers pause, restart and the level list.

5 Interface guide

6 Files and customization

Everything is plain files you can edit. Levels: src/game/generator.js builds the 50 levels from fixed seeds, so a level is always the same. plan(n) decides how many differences and which kinds (remove, swap, tint, flip, size) level n can use, and LEVEL_COUNT follows the number of scenes. Scenes and objects: src/data/scenes.js lists every object (PROPS, with its proportions and whether it can be mirrored or recolored) and every scene (SCENES: the background image, the slots where objects stand, and the object pools). To add a scene, add its background image to assets/, then one entry in SCENES; every world has 3 scenes and 10 levels (4 + 3 + 3 levels per scene). To change an object, replace its image in assets/props/ keeping the name and similar proportions. Layout and rules numbers (touch size, stars, frame sizes) are in src/config.js; colors and sizes of the interface are in the css/ files.

To change a text, edit src/locales/<language>.js (a list of key: "text" lines); English (en.js) fills any missing key. To add a language: copy en.js to a new file such as src/locales/sv.js, translate the values, then add the code and its name to LANGS in src/lib/i18n.js (it appears in the Settings list). To remove a language, delete its file and its entry in LANGS. Keep placeholders unchanged.

Sound effects are assets/sfx/<name>.mp3 and the names are listed in the KEYS list of src/audio/sfx.js (the GAIN table sets each effect's level). Music is assets/music/<name>.mp3: menu for the start screens, one track per world (park, beach, farm, snow, candy) and quiet ambience loops (amb_park, amb_beach, amb_farm, amb_snow); the mapping is WORLD_MUSIC in src/audio/sfx.js. To replace a sound, drop in an MP3 with the same name. Master, effects and music levels are in AUDIO in src/config.js. The first tap on the "Tap to start" screen unlocks audio in every browser.

game/                       upload these contents
source/                     editable source, tests and tools
documentation/index.html    offline illustrated guide
DOCUMENTATION.html          guide shortcut
THIRD-PARTY-LICENSES/       font license

source/index.html            entry page: loads the css/ files in order and src/main.js
source/css/01-base.css           styles, loaded in order (later files override earlier ones)
source/css/02-layouts.css        styles, loaded in order (later files override earlier ones)
source/css/03-polish.css         styles, loaded in order (later files override earlier ones)
source/src/main.js           state, layout, touch input, level loop, start-up
source/src/app/screens.js    tap to start, menu, level select, settings, pause, tutorial, victory
source/src/app/hud.js        score bar, helpers, owl, tips and pop-up windows
source/src/game/rules.js     pure rules (tap, hint, stars), no drawing
source/src/game/generator.js builds the 50 levels from fixed seeds
source/src/data/scenes.js    scenes, object slots and the object list
source/src/locales/          one file per language (14)
source/src/lib/              language loader, save storage, viewport, haptics, easing
source/src/render/           canvas drawing of the scenes and the effects system
source/src/audio/sfx.js      sound effects, ambience and music (Web Audio)
source/src/config.js         layout, rules, feel numbers, audio levels, save key
source/assets/               images (WebP), sounds and music (MP3), font
source/tools/                build.mjs and serve.mjs
source/test/                 node --test tests

7 Languages

The game interface offers 14 languages (English, Portuguese, Spanish, French, German, Italian, Dutch, Polish, Turkish, Russian, Indonesian, Japanese, Korean and Chinese). The game picks the browser language on the first visit and the player can change it in Settings. This guide is in English, Brazilian Portuguese and Spanish; screenshots stay in English. Each language is one file in src/locales/; English fills any missing key. Edit the texts without changing placeholders.

8 Local saves

Progress belongs to this browser and origin. This buyer edition uses its own storage namespace, separate from the Polar website game. Clearing site data, using another browser or changing the hosting origin does not transfer progress. Private browsing and blocked storage may prevent persistence. There is no account, online ranking or cloud synchronization.

hootspot.template.save.v1.progress  unlocked levels, stars, tutorial seen
hootspot.template.save.v1.lang      chosen language
hootspot.template.save.v1.music     music volume
hootspot.template.save.v1.sfx       sound effects volume
hootspot.template.save.v1.vibration vibration on/off
hootspot.template.save.v1.reduced   reduced motion on/off
(prefix set by STORAGE_PREFIX in source/src/config.js)

9 Development

The ready-to-host game in game/ needs no Node.js. The source is plain JavaScript (ES modules), so there is no compile step: npm run build copies index.html, css/, src/ and assets/ into dist/, which matches game/ file by file. Node.js 26.13 or newer is only needed for the tests and the local server. The project has no npm dependencies. No server, account, ranking, ads or payments are used.

New to Node.js? 1) Install the LTS version from nodejs.org (Windows or macOS installer) or with your package manager on Linux; it must be 26.13 or newer. 2) Close and reopen the terminal, then run node -v and npm -v to confirm both print a version. 3) Open the terminal inside the source/ folder (the one containing package.json). 4) Run npm ci; the project has no dependencies, so it only checks package-lock.json. 5) Run npm test for the tests, then npm run build to write the game to dist/. 6) Try it with npm run serve (http://localhost:5190/; the page needs a web server, it does not run from a double-clicked file), then upload the contents of dist/ like game/. Common errors: node or npm not found (reopen the terminal or fix PATH); on Windows PowerShell, npm.ps1 cannot be loaded (run npm.cmd ci or use Command Prompt); ENOENT package.json (you are not inside source/); EBADENGINE (Node.js is older than 26.13); network or proxy failures during install (check your connection and proxy); npm ci complaining about the lock file (do not edit package-lock.json).

cd source
npm ci
npm test
npm run build
npm run serve
# http://localhost:5190/

The game is made of ES modules, which browsers refuse to load from a double-clicked file (file://). To try it on your computer, serve the folder over HTTP. With Node.js, run npm run serve inside source/ (http://localhost:5190/) or npm run serve -- dist for the built game. Without Node.js: python -m http.server 8000 (or py -m http.server 8000 on Windows) inside game/, then open http://localhost:8000/. Any local web server works (WAMP, XAMPP, MAMP, Apache, nginx).

Test shortcuts work only when the page address is localhost, 127.x or a private network address (192.168.x); on any public domain they are off. ?debug unlocks every level and skips the "Tap to start" screen (nothing is saved while it is on); ?level=12 opens level 12; ?nostart skips the "Tap to start" screen; ?slow=3 slows animations down for screenshots. (?lang=pt, which forces a language, works on any host.) window.__hoot exposes the current game for automated tests. Example: http://localhost:5190/?debug&level=30.

10 Updating and cache

Keep a backup of your edited files before replacing a release. Upload all updated assets together and keep the public URL unchanged to preserve the browser save. Clear hosting or CDN caches when applicable. Test a private window after deployment; adding ?v=2 to the entry URL can help diagnose stale HTML but does not replace updating all assets.

Clearing the cache without losing progress

Progress is stored in this browser, not on the server. Clearing cached images and files, or doing a hard reload, keeps your progress.

Computer: press Ctrl+F5 on Windows and Linux, or Cmd+Shift+R on macOS. Phone: in the browser settings, choose the option to clear cached images and files.

Do not choose cookies and site data, or clear site data, for the game's address. That deletes the local save.

11 Licenses

The game artwork, audio and editable game code are supplied under the purchased item license. The Fredoka font keeps its complete SIL Open Font License notice in game/assets/fonts/OFL.txt and in THIRD-PARTY-LICENSES/. The project has no third-party code or npm dependencies. Original production art masters and asset-generation tools are not included.

12 Troubleshooting

If the page is blank, check that every folder was uploaded, the URL is served over HTTP(S), and the browser console and Network panel have no missing files. Module builds need correct JavaScript MIME types. If sound is silent, interact once and inspect browser and game volume. If progress resets, inspect storage permissions and origin changes. The guide itself also opens offline through file://.

13 Support

For support and customization contact willian@polargames.com.br. Include the product version, browser, device, hosting URL, reproduction steps and a screenshot. No backend, native app, ad SDK or real-money purchasing system is included.

Support request

When you write to support, include the browser and device, the game version, the page address, the steps that caused the problem, a screenshot and the first error shown in the browser console. Never send passwords, payment details or secret keys.