JunoJR Learning
Skip to learning content
← Choose a project

📱 Self-paced family project · 6 missions

Pocket Arcade: Build for iOS and Android

Build Pocket Star: a five-by-five puzzle with three stars, one move per press and a wall you can prove does not block the finish.

No installation, payment, child account, or AI key to begin in the browser. Later authored missions use guardian access. Full project extensions may need additional tools.

What you will make

Original Pocket Star grid game inspired by the family BOUNCR mobile port

  • Separate model from platform rendering.
  • Build touch-friendly controls.
  • Implement a solvable feature.
  • Explain progress lifetime and preview versus distribution.

Settle in together

Laptop or desktop for editing; phones can read and try the browser interaction. This is a browser rehearsal. Native iOS or Android work needs separate adult-prepared tools and actual device testing.

Allow about 10 minutes to get ready. Six missions in order. Try one or two 5–12 minute activities, take a break, and resume at the next activity. Plan several short sittings per mission; the full 75–90 minute lesson remains the detailed reference. End each sitting with a saved copy and one sentence: next time we will… Times are estimates awaiting family pilots.

  • For ages 9–12, work beside a parent on a computer with a keyboard. A phone can read the guide and watch; use a computer for editing. Older learners may try the full lesson's stretch task after the core checks.
  • Open the first mission's browser workspace and press Run before installing anything. No payment, child account, or AI key is needed for that introduction. If the runtime reports unavailable, keep your files, read its error, and use the course-specific fallback below with adult help.
  • Before ANY local trace, model test or build, use this course’s full reference handoff: Save and Export backup, retain the JSON backup, extract the matching ZIP into a new folder, copy every current source file with transfer-workspace.mjs, and run verify-workspace.mjs with your actual edited value from that extracted folder. JSON is a source backup, not an executable ZIP; Import backup does not update disk files. Keep results beside the exact source version tested. If you skip transfer, label downloaded checks baseline-only.
  • The browser introduction rehearses the real Pocket Star model through index.html and main.js, not App.js. Edit browser instructions in index.html and cell rendering in main.js; App.js instructions below apply to the downloaded Expo/native project. Keep the original model/star coordinates for shared tests. It is a browser preview, not an iOS or Android emulator. Native execution remains pending until a prepared native environment is actually run. A workspace Run/Stop also reinitializes browser session best; game Restart is a different action.
  • Download fallback: /lab-starters/mobile-games.zip. A parent follows README.md and package.json: npm install, npm test, npm run web. App.js uses React Native Views and Pressable; model.js uses plain JavaScript. For native work a parent prepares Xcode/iOS simulator on macOS or Android Studio/emulator with a compatible JDK, then npm run ios or npm run android.
  • Start is (0,0); stars are (4,0), (2,2), (0,4). The baseline route is Right×4, Down×2, Left×2, Down×2, Left×2. Best is session-only, recorded when Restart follows a win; closing/reloading clears it. Workspace file saving does not add score persistence.
  • Keep the original starter unchanged as a reference. Export a working copy before a risky edit or reset. Work and the optional progress checklist stay on this device; an export is your portable backup. A checked box records your own report, not a verified assessment.
  • Use invented names, notes and records. The parent handles accounts, optional AI and sharing. Predict together, let the child make one choice, change one thing, test it, then explain what happened. An assistant is optional; the supplied code and a partner work too.
Parent help, saving & device setup →

Two people, different jobs

Child · driver & designer
Trace positions on a paper grid, choose labels and a wall, then demonstrate valid, blocked and paused moves.
Parent · thinking partner
Prepare previews and backups. Help separate browser rehearsal from actual iOS/Android execution; ask the child to plan the route before editing.

A path you can pause

These are complete missions, not one-sitting deadlines. Each family guide breaks the work into small activities. Return to the last activity you chose to remember.

  1. MISSION 1 · PUBLIC FIRST MISSION

    Design a game for a pocket screen

    Run Pocket Star and define a small game a partner can learn quickly.

    Full mission plan: 90 minutes · split across activities

  2. MISSION 2 · GUARDIAN ACCESS

    Build a repeatable game model

    Trace a pure move function and verify a planned route.

    Full mission plan: 90 minutes · split across activities

  3. MISSION 3 · GUARDIAN ACCESS

    Make controls fit people and screens

    Improve control clarity without changing game rules.

    Full mission plan: 90 minutes · split across activities

  4. MISSION 4 · GUARDIAN ACCESS

    Add a wall with a clear rule

    Add a blocked cell, show it, and prove the puzzle stays solvable.

    Full mission plan: 90 minutes · split across activities

  5. MISSION 5 · GUARDIAN ACCESS

    Test interruptions and honest saving

    Verify gameplay and define exactly what progress survives.

    Full mission plan: 90 minutes · split across activities

  6. MISSION 6 · GUARDIAN ACCESS

    Demo across platforms without overclaiming

    Present the pocket game and exactly where it was verified.

    Full mission plan: 90 minutes · split across activities

Leave a trail for next time

The optional mission checklist remembers your place in this browser. Workspace files have their own save controls; export them for a portable backup. Write down one change, one test observation, and the activity you want to try next.

Download the original starter for the full local project ↓
About this family pilot

Authored from family project evidence with an original teaching starter. Classroom timing and the actual learner devices need a facilitator rehearsal; this draft is not classroom validated.

Complete course plan · extended setup, camp & project evidence

Begin in the browser workspace with no installation. The original tools and prerequisites below apply to the full downloaded project and its extensions. Native mobile tools and physical hardware are separate adult-prepared steps. Portfolio themes describe your project; no credential is automatically awarded.

Build an Expo game with a portable model, touch controls, a tested wall, and an honest record of web and native previews.

Full course platforms: Expo web preview · iOS development preview · Android development preview · Ages 9-10, 11-13, 14-16

Your project

Original Pocket Star grid game inspired by the family BOUNCR mobile port

  • Separate model from platform rendering.
  • Build touch-friendly controls.
  • Implement a solvable feature.
  • Explain progress lifetime and preview versus distribution.

Before you begin

  • Comfort with JavaScript objects and functions.
  • An adult prepares Node and Expo packages; native toolchains are facilitator setup.
  • Web preview supports core learning when native tools are unavailable; native verification must remain pending until actually tested.

Materials

  • Computer, editor, prepared Node
  • Optional prepared iOS/Android device or emulator
  • Paper phone frame and grid

Your tools

Pocket Star starter
Original turn-based Expo game with pure-model tests.
Download /lab-starters/mobile-games.zip; run npm install, npm test, and npm run web.
Expo and React Native
Present one model through web and native interfaces.
Pinned package versions match inspected family source; native commands are npm run ios and npm run android.
Prepared native preview environment
Verify mobile layout and lifecycle.
Facilitator prepares Xcode/iOS simulator on macOS or Android Studio/emulator and compatible JDK before class.

Learn online

Six weekly 90-minute sessions: 10 minutes to predict, 15 to explain, 40 to build, 15 to test, and 10 to reflect.

Plan around 90 minutes per session; pause and revisit at your own pace.

Adult support: A facilitator prepares tools and operates AI through JR Playground or an adult-managed assistant. Learners make choices, edit, and verify; no personal AI account is required.

Build at camp

Five days with 180 planned minutes per day, including project work and group activities. The course outline does not reserve a camp place.

  1. Day 1: Day 1 — Brief and working model

    • Complete the first two lessons in paired studios.
    • Alternate driver and navigator and take a movement break between studios.
  2. Day 2: Day 2 — Controls

    • Trade paper screen sizes or devices and find one hidden layout assumption.
    • Use remaining studio time for rehearsal, peer feedback, breaks, and individual practice.
  3. Day 3: Day 3 — One meaningful feature

    • Teams must supply a valid route before accepting each proposed wall placement.
    • Use remaining studio time for rehearsal, peer feedback, breaks, and individual practice.
  4. Day 4: Day 4 — Failure detectives

    • Run an interruption lab: rotate, pause, restart, reload, and explain surviving data.
    • Use remaining studio time for rehearsal, peer feedback, breaks, and individual practice.
  5. Day 5: Day 5 — Future Architects showcase

    • Host a pocket arcade with verified, observed issue, or pending labels beside each platform.
    • Use remaining studio time for rehearsal, peer feedback, breaks, and individual practice.
Facilitator preparation
  • The same six outcomes apply online and at camp; additional camp studio time supplies practice, not extra required content.
  • Choose guided, independent, or stretch tasks by confidence. Ages 9–10 often pair with an adult; ages 11–13 own bounded changes; ages 14–16 can justify and test architecture choices.
  • Prepare starters before class. Keep family repositories and personal data out of student workspaces.

Show what you built

Deliver a small playable game for a chosen player, demonstrate a tested improvement, and explain its input, state, rules, output, and one design tradeoff.

Purpose
A brief names the player, loop, finish, and one idea left for later.
Working system
A fresh run reaches the intended finish; recovery and restart match the specification.
Evidence
A record contains normal, boundary, failure, and repeated-after-fix checks with device details.
Architect explanation
The learner explains a changed rule, a tradeoff, and how an AI suggestion was checked.

Portfolio theme: Pocket App Architect

Use the rubric with a guardian or mentor and record your evidence in your builder notebook.

Build with care

  • Use fictional player names and original shapes; no child photos, contacts, passwords, or API keys belong in the starter.
  • An adult operates external AI and manages any public sharing; verify each suggested change with a prediction and check.
  • Take movement breaks and offer partner-operated controls when needed.

Inspired by our projects

BOUNCR mobile
Expo/React Native architecture, touch input, progress state, native rendering, and parity-checking ideas. The original teaching starter uses native Views instead of copying the Skia action game.