Table of Contents
Feed-A-Star-Mole Exercise
-
Feed-A-Star-Mole Exercise
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. -
Random Numbers
Brian demonstrates how to implement pseudo-random numbers in JavaScript -
Unix Time
Brian explains how to use dates in JavaScript to log time. -
Intervals & Timeouts
Brian highlights methods that allow for time handling within JavaScript. -
requestAnimationFrame
Brian demonstrates usage of requestAnimationFrame, one way to handle timing within the exercise. -
Timing Implementation
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
-
Feed-A-Star-Mole Solution Setup
Brian sets up the files required to begin coding the solution to the feed-a-star-mole exercise. -
Feed-A-Star-Mole HTML
Brian begins writing the HTML for the game and introduces the data attribute. -
Data Attributes
Brian explains what a data attribute is, and implements it in the HTML. -
Feed-A-Star-Mole CSS
Brian begins writing the CSS for the game. -
View Width & Height
Brian explains why view width (vw) and view height (vh) are necessary to properly orient the game screen. -
Overflow
Brian explains how to change the way the webpage handles overflow on a page. -
Centering the Moles
Brian orients the moles to be in the center of their holes. -
Hungry & Gone Classes
Brian uses classes to code both a hungry mole and a mole that is gone from its hole.
Feed-A-Star-Mole JavaScript Solution
-
Feed-A-Mole JavaScript
Brian begins writing the JavaScript for the game. -
Planning Mole Statuses
Brian walks through some of the rationale behind how the code is structured. -
Running Continuously
Brian codes a function to run continuously using JavaScript Date and requestAnimationFrame. -
setInterval and Q&A
Brian gives an alternative way that the code can be told to run continuously, and fields student questions about timing. -
Changing Mole Status
Brian codes a function to change the expression status of the moles after an amount of time. -
Gone Interval
Brian codes a function that causes the moles to be gone for a stretch of time. -
Leaving Status
Brian assigns a status of "leaving" to the moles, which displays the image of the mole going back into its hole. -
Gone Status
Brian assigns a status of "gone" to the moles, such that it shows the mole missing from its hole. -
Hungry Interval
Brian codes a function that causes the moles to be hungry for a stretch of time. -
Hungry Status
Brian assigns a status of "hungry" to the moles, such that it shows the mole waiting for food. -
Debugging & Next Steps
Brian demonstrates valuable debugging strategies. -
Feed Event
Brian codes the feed event so that worms can be fed to the moles. -
Fed Status
Brian assigns a status of "fed" for hungry moles that are clicked, such that it shows the mole eating a worm. -
Keeping Score & Winning
Brian adds the ability to track the user's score, and allows the user to "win" with an easter egg at the end! -
King Moles
Brian implements king moles into the game, and sets them to be worth more points than the other moles. -
Worm Score Meter
Brian demonstrates how to add the worm score meter to the top of the page. -
Smoothing the Transitions
Brian adds extra code to the working project to smooth out the transitions for the worm score meter. -
Feed-A-Star-Mole Q&A
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.