MS14 Capstone I Virtual Reality Game

Middle School – Wizard Level I – Capstone Class

About Capstone I Virtual Reality Game

Students in Capstone I Virtual Reality Game learn the fundamentals of VR game design by building a portfolio quality game complete with score keeping and sound effects. A-Frame, an open-source web framework for building VR experiences, is the main technology used in this class. Students learn how to use 3D models, complex positioning, and camera techniques and collision detection to build a game that showcases their knowledge and is fun to play.

Learning Objectives

When students complete Capstone I Virtual Reality Game, they will be able to:

  •  VR fundamentals and 3D modeling
  •  A-Frame and JavaScript interactions
  •  Sound effects, text effects, and score keeping
Capstone I Virtual Reality GameExpand All Lessons
  • 1. Introduction to Virtual Reality
    Virtual reality is the next evolution in user interfaces.

    In this lesson, students are introduced to Virtual Reality concepts. A-Frame is introduced as a tool to create VR apps that run within an HTML framework. Students use 3D x,y, and z element rotations to create their first VR scene.

  • 2. Giving Life to Virtual World Using Animations
    Scale 3D models in a VR scene.

    In this lesson, students use a 3D model of a ship and add it to a VR ocean scene. Students scale the model and animate the boat to move from left to right. Details like wave motion are added to the ocean.

  • 3. Getting Started with the Class Project
    Set up custom A-Frame events to initiate the start of a game.

    In this lesson, students use A-Frame and jQuery to create an engaging game of “plants vs zombies”. Custom A-Frame components are created and JavaScript is used to link them into the A-Frame scene. Dressings are used to add interest to the game.

  • 4. Let’s Discuss the Capstone Project
    Learn how to plan a successful project.

    In this lesson, students begin planning their capstone project using the MVP (Minimum Viable Product) concept. This allows a basic project to be built, and then more features and complexity will be added to it. The capstone project is broken down into milestones that match future lessons.

  • 5. Animating 3D Models
    Use a variety of 3D models in a scene.

    In this lesson, students add a gltf for the zombie character. The scale attribute is used to size the model so it works in the scene. The Obj model is introduced and used as the flower character in the capstone game. Position properties are used to create the character animations.

  • 6. Create Clone of Existing VR Elements
    Learn how to show/hide models.

    In this lesson, students use the jQuery clone function to create duplicate zombies for the zombie army. Students learn how to show and hide models as needed in the capstone project. Students position elements in random places in the scene.

  • 7. Adding a Custom Camera and Click Event
    Custom cameras can be added to override the default camera.

    In this lesson, students create a new camera that overrides the default camera. Students create a click event for the cursor in order to add a shooting action for the plant in the capstone game. Console messages are used to verify and troubleshoot code.

  • 8. Collision Detection
    Collision detection allows for keeping score.

    In this lesson, students add class names to cloned plants and zombies. Collision detection is added so scores can be kept. Custom camera settings are implemented so the weapon (the flower) aims properly. Additional logic is added to determine when the game is over.

  • 9. It’s time to start wrapping up the capstone project.
    Fix VR elements onto a camera for effects like the steering wheel of a car in a racing game.

    In this lesson, students learn how to fix VR elements to a camera so the elements are always in view. Students learn how to use basic 3D shapes such as boxes, cones, and rings to enhance their scenes. Students create additional animations for each element. Custom components are created to interact with A-Frame tags using JavaScript.

  • 10. Adding Scores
    Add text to your VR scenes for messages and scores.

    In this lesson, students add text to their scene that shows the score and lets the player know when the game is over. A ticker handler with a custom rotation reader is added to the camera so that the zombie rotates with the camera.

  • 11. Adding Sound Effects
    Background music and sound effects enhance a VR game.

    In this lesson, students learn how to use the A-Frame asset management system to add sound effects. Students learn the advantages of using the sound attribute with any A-Frame element and sound control options.

  • 12. Creating a Game Menu
    Add the final touches to make the VR game great!

    In this final lesson, students add the finishing touches to their capstone VR game. A title page is added, along with a game menu. Additional logic is added so the game doesn’t start until the first click. Finally, students will complete this portfolio-quality project.

Class Schedule

All students start in Introduction to Programming at Wizard Level I. If you have previous coding experience, take the Advanced Placement test. Returning students can continue with the class where they left off.

  • Animation and Interactive Games with Scratch
    on Saturdays (12 weeks, 1 class per week)
  • Animation and Interactive Games with Scratch
    on Mondays (12 weeks, 1 class per week)
  • Animation and Interactive Games with Scratch
    on Sundays (12 weeks, 1 class per week)
  • Animation and Interactive Games with Scratch
    on Fridays (12 weeks, 1 class per week)
  • Animation and Interactive Games with Scratch
    on Saturdays (12 weeks, 1 class per week)

Summer programs now available! 3-week summer classes are starting June 8, July 6, and August 3.
See details and enroll to save your spot.

Once a course begins, every student at any level enjoys the same benefits:

Twelve 1-hour classes
Code editor software subscription
Live 1-on-1 teacher help, including weekends
Online student community
24/7 Access to our coding platform
Web hosting & unlimited server space
Same day email support
Monitored, direct-messaging

Course Duration & Time Commitment
All courses are 12 weeks long. A Wizard will receive a certification for their achievement at the end of the course.

Expect a weekly time commitment of 2-3 hours. 1 hour of class time, plus 1-2 hours of practice time, with instructors support throughout, including weekends.

100% Guarantee

Our goal is to make all our students successful. If your child is not happy with our program, please notify us within the first four class sessions and you will receive a full refund.

Get Your Wizard Started

Pin It on Pinterest