React Game Tutorial — Part 1 👾

React Game basics tutorial by Iván Cabral

Ivan Cabral
Jan 5 · 3 min read

React JS is an open-source, component-based Javascript library, which is used to build UI specifically for single-page applications. It’s one of the most popular Javascript libraries used to build apps front-end right now. Facebook developers created ReactJS in 2011 and used first in the Facebook app, and until today it has a huge community supporting it and lots of resources to learn it.

I will show you how to make a simple game in ReactJS, this is the first tutorial of my collection, in this part, we see how to create a basic animation with sprite

Let’s started!!

First, open the terminal and type the following commands to create the react project

$ npx create-react-app react-game
$ cd react-game
$ npm start

Open the folder of the project in your text editor, I use visual code but another is the same

Edit file ./src/App.js

In this file, we import the “taco” sprite, set the loop game with 10milliseconds and the canvas element with the size of the screen.

import React from 'react';
import taco from "./sprites/taco";
import './App.css';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
canvas: null,
interval: null,
ctx: null,
tacoSprite: null,
gravitySpeed: 2,
};
}
componentDidMount() {
const canvas = this.refs.myCanvas;
const ctx = canvas.getContext("2d");

const tacoImage = new Image();
tacoImage.src = "taco.svg";
let setTaco = () => {
let tacoSprite = taco({
canvas,
context: ctx,
taco: tacoImage,
gravitySpeed: this.state.gravitySpeed,
});
this.setState({ canvas, ctx, tacoSprite: tacoSprite }, ()=> {
this.update();
});
};
tacoImage.addEventListener("load", () => {
setTaco();
});
}
update() {
if (this.state.canvas && this.state.ctx && this.state.tacoSprite) this.state.tacoSprite.render();
setTimeout(() => {
requestAnimationFrame(() => {
this.update();
});
}, 10);
}
render() {
return (
<div className="App">
<canvas ref="myCanvas" width={window.innerWidth} height={window.innerHeight} />
</div>
);
}
}
export default App;

Create a folder and file ./src/Sprites/taco.js

This file is the object of the “Taco” sprite, we set the position and the gravity. After in the next tutorial we use this file to make the click listener

function tacoSprite(options) {
let that = {};
that.canvas = options.canvas;
that.context = options.context;
that.taco = options.taco;
that.gravitySpeed = options.gravitySpeed;
that.positionX = Math.floor(Math.random() * window.innerWidth - 49);
that.positionY = -50;
that.findCollition = (uX, uY, callback) => {
if (that.taco) {
if (
uX > that.taco.positionX &&
uX < that.taco.positionX + that.taco.width &&
uY > that.taco.positionY &&
uY < that.taco.positionY + that.taco.height
) {
that.taco.animated = true;
callback(that.taco.points);
}
}
};
that.render = function() {
if (that.context) {
that.context.clearRect(
that.positionX,
that.positionY,
50,
40
);
that.positionY += that.gravitySpeed;
if (that.positionY > window.innerHeight+50) {
that.positionX = Math.floor(Math.random() * window.innerWidth - 49);
that.positionY = -50;
}
that.context.drawImage(
that.taco,
that.positionX,
that.positionY,
50,
40
);
that.context.save();
}
};
return that;
}
export default tacoSprite;
Preview

GitHub: https://github.com/ivanrcabral/react-game-part-1

Remember if you have any questions or inquiry tell me, I would be very glad to help you.

Thank you for seeing my post! I hope I’ve been helpful 😁

HAPPY CODING! 👏👏👏👏

    Ivan Cabral

    Written by

    I‘m a daily coder FullStack developer with more than 10 years of experience, creator of gambling web sites, writer for JavaScript and Cryptocurrencies

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade