Pixel Thief - Learn how to build a game using XState & React

Pixel Thief - Learn how to build a game using XState & React

Register & Get access to index
wVSsY6G.png

A front-end developer course

Your Teacher
Portrait of Brad Woods

Greeting apprentice! I am Grand Wizard Brad Woods, your teacher. 11 years ago I started my quest as a school teacher. I began developing apps to change my students’ perspectives of learning. I since have changed paths to become a computational designer, but still dedicated to change how people learn.
In the year of our lord 2017, after journeying through countless libraries in distant lands, I discovered a tome that described the use of finite-state machines for User Interface state management. A far more powerful approach than any other conjurings. The tome spoke of a secret library called XState, that housed the knowledge to invoke this power. Since then I have traveled the lands, presenting ideas about XState at Atlascamp - Vienna, written articles for CSS-tricks, LogRocket & created XState guide.

Course Chapters
  • setup.a7d6c0bb.png
    Setup
    • Install tools
    • What we are learning
    • What we are making
    • Initialize project using Create React App
    • Add dependencies
    • Add storybook
    • Add assets
  • styles.b545237e.png
    Styles
    • Add global styles
    • Add theme
  • smallComponents.2b055842.png
    Small Components
    • Add button
    • Add heading
    • Add menu screen
    • Add image
    • Add level background image
    • Add health
    • Add grid
  • levels.4c3060cb.png
    Levels
    • Add levels to game machine
    • Add level placeholders to game component
    • Add fast-forward events
    • Replace level placeholders
  • gameMachine.0ccfd2d8.png
    Game Machine
    • Add game machine
    • Add game component with placeholders
    • Replace game component placeholders
  • menuScreens.b61dfd7f.png
    Menu Screens
    • Add home screen
    • Add game over screen
    • Add game complete screen
  • playerMachine.6779aeea.png
    Player Machine
    • Add player machine
    • Add player actor
    • Add player coords
    • Add player controls hook
    • Add player movement
    • Add walking through door - level1
    • Add walking through door - level2
    • Add treasure
    • Add player health
  • monsterMachine.cf37532f.png
    Monster Machine
    • Add monster machine
    • Add monster movement
    • Forward player moved event to monster
    • Store player coords in monster
    • Add attack to monster
    • Add attack to player
    • Add die to player
  • animation.b659fddd.png
    Animation
    • Add screen transition
    • Connect game component to app
Who is this Course for?
A tower

This course is designed for front-end developers of any level, from apprentice to master, who are interested in XState & finite-state machines. Your quest will take you through the fundamentals & then into more advanced topics such as the actor model.
Secondary to XState, you will be taken through building an app using the tech-stack documented above. You will receive instruction of the highest order of teaching practices, developed by the school of mages & scholars. Care has been taken to ensure no step is skipped over & everything is explained in full.
Author
TUTProfessor
Downloads
129
Views
1,123
First release
Last update
Rating
0.00 star(s) 0 ratings

More resources from TUTProfessor