Capstone I Virtual Reality Game

In this lesson, students are introduced to Virtual Reality concepts. The A-Frame JavaScript library is introduced as a tool to create VR apps that run within an HTML framework. Students learn how to view their 3D world and element rotations to create their first VR scene.

In this lesson, students build 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 make a realistic ocean scene.

In this lesson, students use A-Frame and JavaScript to create an engaging game of “plants vs zombies”. Students create custom A-Frame components for the first time and use jQuery to link them to different 3D environments. Dressings are used to add interest to the game.

In this lesson, students begin planning their capstone project using the MVP (Minimum Viable Product) concept. They will think through steps to completing a basic project, later more features and complexity will be added to it. Students break down the capstone project into milestones based on skills learned in future lessons.

In this lesson, students add 3D models for their characters. New attributes are used to scale and position models and create characters so they fit in the scene. Students learn how to render the obj model and animate them.

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 use jQuery to position elements in random places in the scene.

In this lesson, students create their own custom camera that overrides the default camera. Students create an A-Frame click event for the cursor to add shooting action for the plants. They learn to add WASD controls and messages are used to verify and troubleshoot code.

In this lesson, students add class names to cloned plants and zombies. Collision detection is added to kill zombies and keep score. Custom camera settings are implemented to improve the weapon’s (the flower’s) aims and control. Additional logic is added to determine when the game is over.

In this lesson, students learn about Google’s Poly 3D models and how to fix VR elements to a camera so the elements are always in view. Students learn basic 3D shapes such as boxes, cones, and rings to enhance their scenes. They also create additional animations for each element.

In this lesson, students keep track of their score. They learn to add text to their 3D scene to show the score and let the player know when the game is over. A ticker handler with a custom rotation reader is added to rotate the zombie with the camera.

In this lesson, students learn how to use the A-Frame asset management system to add sound effects. 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.

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