夏季程式設計營：用 JavaScript 寫自己的超級英雄遊戲

In this 4-day summer camp, learners will jump into real JavaScript coding using the beginner-friendly p5.js library!

Students will design and code their very own superhero game from scratch—complete with collectible items, bouncing enemies, and magical teleportation portals. Throughout the week, they'll learn how to control characters, track scores, and animate interactive scenes using JavaScript.

By the end of camp, each learner will have built a custom game where their hero completes a mission, avoids danger, and wins the day—all through code they’ve written themselves!

🧠 What Will Be Taught?
Learners will explore and apply:

JavaScript fundamentals (syntax, variables, conditionals, loops, and functions)

Animation using coordinate systems and frame-based logic

Keyboard and mouse interaction

Object-oriented programming through enemy and object classes

Collision detection and game mechanics (win/lose states, scorekeeping)

Creativity and design thinking to personalize and enhance their game worlds

🧑‍🏫 Class Structure
Each 55-minute session includes:

5 min: Welcome + concept overview

45 min: Live guided coding + student project work

5 min: Wrap-up, discussion, and preview of next steps

We cap classes at 4 learners to ensure individual support. The teacher codes live while students follow along, ask questions, and troubleshoot together.

📆 Weekly Breakdown

Day 1: Superhero Game – Drawing the Hero & Enemies 🦸
My lesson is about... Building the game environment, positioning assets, and coding the main character’s movement with arrow keys. Students will also begin placing enemies.

Day 2: Game Logic – Avoid, Collect & Win! 🧪
My lesson is about... Programming item collection, bounce animations for enemies, and writing win/lose conditions using distance detection and game state logic.

Day 3 Portal Magic – Teleportation Effects 🌀
My lesson is about... Adding clickable portals using mouse interaction, and coding logic to teleport the hero from one place to another.

Day 4: Final Touches & Superhero Showcase 🌟
My lesson is about... Finalizing and customizing the superhero game with title screens, polish, and optional features. Students will present their finished projects to the group!

🎨 Teaching Style
Our teaching approach is hands-on, encouraging, and creative. Students follow along with the instructor in real time, share ideas, and ask questions throughout. The instructor pauses often for live support, helping learners debug and experiment with their code.

🎤 Student Interaction
Live group coding with real-time guidance

Individual help and feedback from the teacher

Weekly sharing and optional project show-and-tell

Collaborative brainstorming and customization prompts

Note: Please make sure an adult is on hand for the first five minutes of class to help set-up and tackle troubleshooting. iPads and tablets are not compatible and will not work for this class. On many occasions the students will be coding the arrow keys on a keyboard.