Let's make Pong!
Building Sprite-Based Games in ReactJS
Andrew McPherson
Web/Game Developer
Seattle, Washington
I talk really really fast.
I
I
I
I make sprite-based games
What is a "sprite?"
Rendering the sprites
Over and over
again... at 60 fps?!
Any mis-optimization
causes "screen tearing"
Our current model is
very "mono-directional"
There has to
be a better way!!
React
for rendering
sprites as DOM
What is React?
- A javascript framework
- In an MVC, it is the "view"
- Built/used by Facebook
Why React?
- Re-renders whenever changed
- Embeds markup in your scripts
- Doesn't try to be comprehensive
DOM for DOMmies!
Let's make a game of
Pong using React!!
Rendering JSX into the DOM
Defining a class
Reusing that class
Adding properties
Rendering CSS into the DOM
"Absolutely" positioning the CSS
Dynamically positioning the CSS
Adding a loop
Adding a state
Manipulating the state
Handling collision
Moving diagonally
Randomizing positions
Coloring everything
Recording the score
Displaying the score
Decorating the score
Defining the paddles
Adding the paddles
Moving the paddles
Colliding with the paddles
Tada! "Ponk!"
The DOM is fast
Using the VirtualDOM in React
The DOM is hierarchical
For cameras and ragdolls and more
The DOM is responsive
Using Media Queries, Viewports, and SVGs
(this is my spritesheet)
Rendering an SVG spritesheet
The DOM is animated
Using Keyframes and Transitions
The DOM is devfriendly
Through Webtools and Jest
- twitter.com/ehgoodenough
- yeahgoodenough.tumblr.com
- github.com/ehgoodenough
React is awesome for rendering stuff. :]
In Conclusion
Thank you so much for listening to me ramble on and on!! Any questions?