Brian Holt
Neon
Build a Game Project: Feed-A-Star-Mole
2 hours, 14 minutes
CC
Course Description
Build a working feed-a-star-mole game from the ground up that utilizes the skills you learned in previous bootcamp courses to structure, lay out, style, and add functionality to a group of hungry moles that appear and disappear as the user tries to feed them. The exercise is broken up into an introduction to what the final product will look like, the HTML and CSS solution for the game, and then the JavaScript solution.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
Close
Course Details
Published: September 9, 2019
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Feed-A-Star-Mole Exercise
Section Duration: 21 minutes
-
Brian instructs students to create a game in which the user feeds the moles worms until the moles are full, and then the screen shows an adorable fat mole. -
Brian demonstrates how to implement pseudo-random numbers in JavaScript -
Brian explains how to use dates in JavaScript to log time. -
Brian highlights methods that allow for time handling within JavaScript. -
Brian demonstrates usage of requestAnimationFrame, one way to handle timing within the exercise. -
Brian displays an implementation of the requestAnimationFrame method that changes the mole image and offers suggestions for the exercise.
Feed-A-Star-Mole HTML & CSS Solution
Section Duration: 27 minutes
-
Brian sets up the files required to begin coding the solution to the feed-a-star-mole exercise. -
Brian begins writing the HTML for the game and introduces the data attribute. -
Brian explains what a data attribute is, and implements it in the HTML. -
Brian begins writing the CSS for the game. -
Brian explains why view width (vw) and view height (vh) are necessary to properly orient the game screen. -
Brian explains how to change the way the webpage handles overflow on a page. -
Brian orients the moles to be in the center of their holes. -
Brian uses classes to code both a hungry mole and a mole that is gone from its hole.
Feed-A-Star-Mole JavaScript Solution
Section Duration: 1 hour, 24 minutes
-
Brian begins writing the JavaScript for the game. -
Brian walks through some of the rationale behind how the code is structured. -
Brian codes a function to run continuously using JavaScript Date and requestAnimationFrame. -
Brian gives an alternative way that the code can be told to run continuously, and fields student questions about timing. -
Brian codes a function to change the expression status of the moles after an amount of time. -
Brian codes a function that causes the moles to be gone for a stretch of time. -
Brian assigns a status of "leaving" to the moles, which displays the image of the mole going back into its hole. -
Brian assigns a status of "gone" to the moles, such that it shows the mole missing from its hole. -
Brian codes a function that causes the moles to be hungry for a stretch of time. -
Brian assigns a status of "hungry" to the moles, such that it shows the mole waiting for food. -
Brian demonstrates valuable debugging strategies. -
Brian codes the feed event so that worms can be fed to the moles. -
Brian assigns a status of "fed" for hungry moles that are clicked, such that it shows the mole eating a worm. -
Brian adds the ability to track the user's score, and allows the user to "win" with an easter egg at the end! -
Brian implements king moles into the game, and sets them to be worth more points than the other moles. -
Brian demonstrates how to add the worm score meter to the top of the page. -
Brian adds extra code to the working project to smooth out the transitions for the worm score meter. -
Brian fields audience questions about making the game more configurable, how the feed function works, and the process of planning code structure for large projects.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops