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

In this 6-week summer camp, learners will dive into real JavaScript coding using the beginner-friendly p5.js library. We kick things off with a 2-week bootcamp where students build a fast-paced, side-scrolling game starring Coco, our energetic flying hero. This foundational project introduces essential coding skills in a fun, engaging way—jumping over obstacles, tracking score, and learning how to control movement, collision, and animation with JavaScript.

Once learners complete the bootcamp, we launch into a 4-week superhero game project, where each student builds a custom game featuring a hero on a mission to collect items, avoid bouncing enemies, and teleport through portals. By the end of the course, students will have built two unique games and gained confidence writing their own code.

🧠 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 6 learners to ensure individual support. The teacher codes live while students follow along, ask questions, and troubleshoot together.

📆 Weekly Breakdown
Week 1: Bootcamp – Coco Takes Flight ✈️
My lesson is about... Introducing p5.js, image loading, movement, gravity, and score tracking as students build a side-scrolling game starring Coco.

Week 2: Bootcamp – Collision & Game Over Logic 🧱
My lesson is about... Adding obstacles, jump mechanics, collision detection, and restarting logic. Students will polish the Coco game and reflect on key programming concepts.

Week 3: 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.

Week 4: 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.

Week 5: 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.

Week 6: 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.