Making Games

with React

Nice to meet you

Don't be afraid

of what you don't know

Game engines are great

...but, it's just as fun to learn how they work

Making Games

with React Javascript

Getting Started

with Parcel and Codepen

// terminal
npm install -g parcel-bundler
// index.html
<html>
    <body>
        <script src="./index.js"></script>
    </body>
</html>
// index.js
console.log("hello world")
// terminal
parcel index.html
// terminal
npm install -S babel-preset-env
npm install -S babel-plugin-transform-object-rest-spread
// .babelrc
{
    "presets": [
        ["env", {
            "targets": {
                "browsers": [">0.25%"]
            }
        }]
    ],
    "plugins": [
        "transform-object-rest-spread"
    ]
}

How the game loop works

  1. Draw the player

  2. Animate the player 60 frames per second

Handling player input

  1. Capture mouse and keyboard input

  2. Move player with WASD

  3. Accelerate and decelerate player

Detecting collisions

with circles

  1. Use pythagorean theorem

  2. Stop movement on collisions

Detecting collisions

with rectangles

  1. Use axis-aligned bounding boxes

  2. Caveats with these approaches

How can we?

  1. Add gravity

  2. Make stairs

  3. Make ladders

  4. Make mobs

  5. Add health

  6. Add projectiles

Drawing with React

  1. Encapsulate player and boxes

  2. Animate all the things

// terminal
npm install -S babel-preset-react
npm install -S react react-dom

Higher-order components

Other ways to draw

Getting started with iOS

facebook.github.io/react-native/docs/getting-started.html

// terminal
react-native init SuperGame2000
cd SuperGame2000
react-native run-ios

To the editor!

Just about done...

  1. Phaser

  2. React Game Kit

Thanks

twitter.com/assertchris

Making Games with React (July 2018)

By Christopher Pitt

Making Games with React (July 2018)

  • 286
Loading comments...

More from Christopher Pitt