In the second part of this tutorial we will see in action things like how to change the state of a component, will add images to our game and "teach" it how to draw some random symbols.
- Part 1: project setup, basic React componets, inline styles
- Part 2: using setState, event handling and generating random symbols in React
- Part 3: simple animations by using setInterval and clearInterval in React JS
These examples are created by using create-react-app. You can check here a short guide on how to setup your machine to run the code samples.
Hello and welcome back ! In the first part we added the basic parts for our game. Let’s now make our game to select some random symbol.
In order to achieve this we will need to tell the game what are all available options. I will do in the main app and add a default constructor, that just makes a super call with the default properties.
The next step will be to add a symbols filed of the this reference.It will point to an array will all of the available symbols: “rock”, “paper” and “scissors”.
We will also need a button to start the game. I will go in the main render and here add this button with the text run game.
Will will also add a run game method that initially will just have a simple console log with the text start the game.
This method will be assigned to the onClick event of the button. After the save, if I open the console you will see that every time we press the button we have this message appearing in the console.
Having this set in place , the next logical step will be to teach the game how draw a random element at the button click. Basically we will need to generate a random index and get the corresponding element out of this array.
First I will create the random index, and give it a name of index. To generate a random number I will use Math.random and will multiply this by the maximum number of symbols, in our case 3.
We will also use Math.floor to be sure that we will not get numbers like 2.5 or 1.3 or anything that is not a whole number.
And with this random index constructed we can now just console log of this dot symbols and of index.
Now if we refresh the page , when we press the button we will get a random element after that another one , another one and so on.
Let’s get these random symbols into the view now. We have to replace this static value and also this one with something like the random element generated in here.
This a perfect example to use the state of the components. First I will replace this with this dot state playerRed and also for this one I will write this dot state dot player blue.
These two state values will be set in the run game method. Given the fact that we to deal with state properties we will have to use this setState and pass it a object. Inside this object I will sat that player red equals this dot and as and index I will get this whole formula.
Will reuse exactly the same formula but this time for player blue.
Will delete the not needed code , and after we save we will see that we get an error.
This is because in here we are trying to access something from the sate and we have not yet created that state.
This is very easy to fix. I go inside the constructor and write that the state equals an empty object.
And with this set in place, if we go back in the game window can see now that every time we press the Run button we get a random symbol displayed on our screen.
Let’s go and take another look at the the final version of the game. In here we have these nice icons for the symbols and not a static text. Coming back to the code you can see that in the public folder we have this img folder, that contains the three symbol icons. All of them have a png extension.
To build this into our project we can use the background image property for the inline style . Here I will set the URL to be the image folder plus the corresponding symbol and plus the file extension of PNG.
We will also remove the former code .. and now if we save and run the game you will see that new now also have the icons on screen.
You may wonder why this second image is rotated 180 deg. Well this is because of this css property I’ve added here and that defines that the second item that this type should have a css scale and css flip as a filter.