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
-
Draw the player
-
Animate the player 60 frames per second
Handling player input
-
Capture mouse and keyboard input
-
Move player with WASD
-
Accelerate and decelerate player
Detecting collisions
with circles
-
Use pythagorean theorem
-
Stop movement on collisions
Detecting collisions
with rectangles
-
Use axis-aligned bounding boxes
-
Caveats with these approaches
How can we?
-
Add gravity
-
Make stairs
-
Make ladders
-
Make mobs
-
Add health
-
Add projectiles
Drawing with React
-
Encapsulate player and boxes
-
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...
-
Phaser
-
React Game Kit
Thanks
twitter.com/assertchris
Bonus round:
Projectiles