定價計劃
登入

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

在這個以文本為基礎的編碼課程中,學生將討論超能力以及編碼如何成為超能力。他們將建立兩個項目,每個項目專注於不同的超級大國。研究的關鍵概念包括事件、操作符和條件。
Coco Coders
平均評分:
4.8
評論數量:
(974)
明星教育家
班級

包含什麼

6 現場會議
5 小時 30 分鐘 上課時間
完成證書
🌟 New! Certificates of Completion 🌟 We’re excited to now offer Certificates of Completion on a 4-week rotation! After each lesson, learners will receive a certificate celebrating their progress and achievements. This is a great way to recognize their hard work and keep them motivated as they build their coding skills! 🚀
我們無法翻譯此文,請刷新頁面並再試一次。

課堂經歷

英語程度 - 未知
美國 4 - 7 年級
Intermediate 等級
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.

學習目標

Students will learn how to write and understand basic JavaScript syntax using the p5.js library.
Students will create interactive animations using variables, conditionals, and loops.
學習目標

教學大綱

6 課程
超過 1 週
課 1:
Coco Takes Flight – JavaScript Bootcamp Part 1
 Introducing p5.js and setting up the canvas for our first game. Students will draw images with code, apply gravity to a flying character (Coco), and begin animating motion using variables and the draw loop. 
55 分鐘線上直播課
課 2:
Dodge the Obstacles – JavaScript Bootcamp Part 2
 Adding interactivity to the Coco game. Students will use mouse input to make Coco jump, detect collisions with obstacles, track score, and code win/lose conditions. This completes their first full JavaScript mini game. 
55 分鐘線上直播課
課 3:
Superhero Setup – Drawing Characters and Enemies
 Starting the superhero game. Learners will draw their superhero, place an animated item to collect, and create bouncing enemies using classes and arrays. They’ll also code player movement with keyboard input. 
55 分鐘線上直播課
課 4:
Build the Challenge – Items, Enemies, and Win Conditions
 Expanding the superhero game by adding logic for collecting items, scoring points, and triggering win or lose screens. Students will learn distance checking and use noLoop() to stop the game when a condition is met. 
55 分鐘線上直播課

其他詳情

父母的引導和規範
Students will use p5.js to participate in class. Students must access their own p5.js account using a laptop or a computer in class (no smartphone or tablets). Students will use their own account to code while following instructions from the teacher.
供應清單
Learner Supply List:

A free p5.js account at editor.p5js.org 🌐.

A laptop or desktop with Zoom installed and screen-sharing enabled 💻.

A stable internet connection (3mbps or higher) 🌍.

A working speaker, microphone, and webcam 🎤🎥.

All Windows and Mac operating systems from the last five years are supported 🖥️.

⚠️ iPads are not recommended. Please have an adult available for the first 5 minutes to assist with setup and troubleshooting.
外部資源
除了 Outschool 教室外,本課程也使用:
  • P5js
已加入 July, 2020
4.8
974評論
明星教育家
教師檔案
教師專業知識和證書
印第安納州 教學證書 在 小學教育
Jessica Gray
密西根州 教學證書 在 小學教育
Andrea Krisciunas
醫學博士 在 衛生專業及相關項目 從 University of Karachi
Nazia Fakhruddin
碩士 在 教育 從 Saginaw Valley State University
Andrea Krisciunas
學士學位 在 電腦科學 從 Western Oregon University
Natalie Malone
學士學位 在 心理學 從 University of Toronto
Jojo Shum
學士學位 在 教育 從 ICCT Colleges
Madona Abbott
副學士學位 在 電腦科學 從 University of the People
Jojo Shum
At Coco Coders, our team is made up of passionate, highly qualified educators dedicated to making coding fun, accessible, and empowering for kids. Founded by Elizabeth Tweedale—an experienced education leader and advocate for early tech literacy—Coco Coders has taught thousands of students around the world through engaging, project-based lessons in Scratch, Roblox, Python, and more.

👩‍🏫 Meet Our Teachers: A Diverse Team of Experts

Each Coco Coders instructor is carefully selected not only for their technical skills, but also for their ability to inspire curiosity and creativity in young learners. Our educators bring a wide range of professional and academic experiences:

Dr. Nazia Fakhruddin, with a Doctor of Medicine from the University of Karachi, brings a strong foundation in science and problem-solving to every class.

Natalie Malone holds a Bachelor’s in Computer Science from Western Oregon University and an Indiana Teaching Certificate, combining technical expertise with real classroom teaching experience.

Jessica Gray, a certified Special and Elementary Educator (ID 10122321), creates inclusive, supportive environments for all learners.

Jojo Shum is dual-degreed, with a Bachelor’s in Computer Science from University of the People and a Master’s in Psychology from the University of Toronto, bringing both logic and learner-centered support to her teaching.

Andrea Krisciunas, with a degree in Education and a Michigan Teaching Certificate in Elementary Education and Science (ID CC-053470274978), excels at blending STEM with hands-on exploration.

Sapana Pathak holds a Bachelor of Education from India and is NAMC Montessori certified, supporting a hands-on, child-led learning approach in every class.

Madona Abbott brings deep technical training with multiple certifications, including JavaScript and CSS from Codecademy, web development credentials from W3Schools, and a teaching degree from ICCT Colleges. Her courses are grounded in practical, real-world coding skills.

Together, our team represents a wide spectrum of professional experience—from classroom teaching to software development and early childhood education. What unites them is a shared passion for helping young coders thrive through interactive projects, positive encouragement, and individualized guidance.

At Coco Coders, we believe coding is for everyone. Our classes are designed to nurture every child’s potential through creativity, problem-solving, and digital literacy—skills that will benefit them for life.

評論

現場團體課程
分享

US$80

用於 6 課程

每週6次,共 1 週
55 分鐘
有5 位學習者完成此課程
即時視訊會議
年齡: 9-14
2-6 每班學員人數

關於
支援
安全隱私加州隱私學習者隱私您的隱私選擇條款
下載這個軟體
在應用程式商店下載在 Google Play 上取得
© 2025 校外