Neon
Complete Front-End Project: Build a Game
3 hours, 39 minutes
CC
Course Description
Learn to architect a full-featured front-end project from scratch while building a game with vanilla JavaScript, HTML, and CSS. Throughout the course, you’ll learn tips to organize your front-end code, manage application state using state machines, and automate writing better code using tools like ESLint, Parcel, and Prettier. Have fun using professionally made art to build a digital pet game!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseWhat They're Saying
I completed Brian Holt's build a game frontend course on Frontend Masters. Great course with some amazing art that makes it fun to make.
Tom Haldun
HaldunDota
Had a lot of fun! Thanks a lot.
Nadia Medkouri
MedkouriNadia
Course Details
Published: May 26, 2020
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
Introduction
Section Duration: 20 minutes
Brian Holt gives an overview of the course content, reviews the course prerequisites, and covers the setup instructions.
Brian gives an overview of both the pet game and technological requirements, explains that the project is built in Vanilla JavaScript, and demonstrates what the final project looks like.
Frontend Infrastructure
Section Duration: 50 minutes
Brian gives a tour of the project repository, demonstrates how to not index specific files by adding them to a gitignore file, and gives a review of the main git commands needed for this course.
Brian demonstrates how to install and use the webpack bundler to start a build process, including testing and dev scripts, and starts the first steps of the project.
Brian argues that to ensure code quality, it is best practice for teams to use the same linter rules. This allows developers to avoid code reviews that enforce arbitrary stylistic coding standards.
Brian introduces Prettier, a code formatter for JavaScript in the form of an npm package, and demonstrates how to install it.
Brian introduces editor setups that make code more readable, and creates an .editorconfig file that contains most of the editing rules the project follows. An editor file is useful because it enforces the same linting and formatting rules across different editors.
Brian demonstrates how to code an esltintrc.json file containing all of the linting rules that the project follows, and shows how to turn on and off specific linting rules.
Brian demonstrates how to set up the testing framework Jest, and informs students about what to do if they fall behind.
Architecture
Section Duration: 32 minutes
Brian explains that large code bases are difficult to organize and navigate through, and encourages to organize code for deletability. By optimizing a code base for delitability, any dead code that is no longer used gets deleted immediately and maintains the code's readability.
Brian demonstrates how to start the project by live coding the index.html page, and by adding the project dependencies to the package.json.
Brian demonstrates how to check that ESLint is installed correctly on the VS Code editor.
Brian explains that a finite state machine occurs when the behavior of a system can only be at one specific state at a time, and gives an overview of the different finite states that the fox pet goes through during a game.
The Game
Section Duration: 46 minutes
Brian starts live coding the digital pet game by first creating an HTML file and then using Emmet in VS Code as a shortcut to efficiently create HTML code, forming the main elements needed.
Brian live codes the CSS file of the digital pet game project, and demonstrates how to build out the stying in an organized and efficient way.
Brian demonstrates how to unhide an element and modify it, explains the steps to follow to modify CSS, and answers a question from the audience about how the game's animations work under the hood.
Brian live codes a buttons.js file that allows users to interact with the digital pet game, and builds functions and closures to select buttons.
Brian explains that it is best practice to separate the interface from the state handling in an application, and demonstrates how to separate the two.
States
Section Duration: 1 hour, 3 minutes
Brian demonstrates how to create new states, and refactors the gameState.js file by adding new actions that the fox pet can execute once it is awake.
Brian live codes helper functions to be able to modify the DOM of the application, and adds conditionals to modify the state of the weather in the game.
Brian improves the game by adding day and night states to the game, and associating different actions that the fox pet can do during the two states.
Brian refactors the gameState.js file by adding logic statements to various states, and adds the different timers for the fox to switch from one state to the next: from awake tu hungry.
Brian adds a new functionality to the code of the fox pet game by reusing functions that are already available to allow the pet to do more, and adding another layer of difficulty to the game.
Brian finishes the application by adding code that resets all of the states, and allowing users to start a new game.
Wrapping Up
Section Duration: 5 minutes
Brian wraps up the course, reviews the course material, and gives examples of challenges students can work on to enhance or change the game.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops