JavaScript Browser Game Rock, Paper, Scissors
About
In this instructor-led code-along, we’ll guide you step-by-step through the exciting process of transforming a classic game of rock paper scissors into an interactive browser game.
This session is tailored for entry-level developers who have foundational knowledge in HTML, CSS, and JavaScript but are new to DOM manipulation and handling events. It’s a perfect opportunity to apply your basic coding skills in a practical setting and gain hands-on experience with interactive web development.
Content
| Lesson | Skills |
|---|---|
| Setup | Setting up the development environment |
| User Stories | How user stories inform application design. |
| Pseudocode | Programmatic thinking when planning our code. |
| Scaffolding the Application | Setting up our files and starter code. |
| Constants, Variables, and Cached Element References | Declaring all variables. |
| Event Listeners | Adding event listeners to DOM elements. |
| Game Logic | Changing state, comparison logic and final state. |
| Render | Render results to user. |
| Play | All helpers under one roof. |
| Solution | Final JavaScript code. |
| Play again? | Adding reset logic to the game. |
| Add Instructions | Adding instructions for game play. |
References
Internal
Prerequisites
- Foundational knowledge of HTML, CSS, and JavaScript
- Intro to the DOM
- DOM Events
Solution code
Deployed sites
Course landing pages
Resources
Find a 👾 bug 👾 or have suggestions? Let us know!