Build a game with React part 3 - simple animations by using setInterval and clearInterval in React JSposted on: 16-mar-2018
We will see in this final part of the series how to use React with setInterval to generate a basic animation and also how to end the running of a setInterval.
- 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
We achieved a lot with our application. Our game has now a basic layout, knows how to draw some random symbols and also how to show the corresponding icons for these symbols.
The main difference between them is that setTimeout will execute the given function just once, meanwhile setInterval will execute it until canceled. Given the fact that in our example this shuffling effect is made from multiple random picks, we will use the setInterval function.
This being said, what we should do now is go back into our code first I will take all the part that generates the random symbols and wrap it in a function, and use this function with the setInterval function. I will give a interval of 100 milliseconds, meaning that this function will be run every 100 ms until canceled. And after the save , if we press the run game button, we will see the animation in action.
Still things are not yet complete. One issue that we face now is that the animation is not stopping. For now I will just stop it manually, by refreshing the page.
We need to find a way to stop the execution of this function in a programatic way. If we go back into the documentation we will discover this clear interval function that we can use combined with a reference to a specific set interval.
Knowing this the plan will be like : we will let the function run for 40 times and after use this clear interval to cancel the execution of our function. First I will go back into the source and in here I will create a new variable called counter. This counter start with the value of 0 in a new game. Every time this function runs, the counter gets incremented.
Next we will need a reference to our interval, and I will defined here a new variable called my interval and as you can see it will point to the setInterval.
After this I will use a if statement to check if the counter had reach a level above 40 and if so I will say clearInterval of my interval.
After the save, when the page refreshes when we will run again the game we will see that our animation will stop after 40 runs.
And the final step: we should teach the game on how to decide the winner. For this , we will introduce a new value on the state, called winner, and set it to an empty string. The decision will be taken in a new function called decideWinner and this function will be called after we clear the interval.
Given the fact that we will have to deal with state variables we will use setState and say that the winner should be this do decideWinner and out of this function will return the result of our game.
We will start by using a destructor statement to extract the value of player blue and player red out of this state.
We will start by checking player red is equal with player blue, case in which we will return a draw result.
Next we will check if the payer Red is not the winner. Begin a longer statement I will just paste this code, but basically we just check here for every on the three cases that could make playerRed the winner and in this case we will return that player red is the winner.
And finally if we don’t have a draw and if playerRed is not the winner it’s safe to assume that playerBlue won the game.
Now all that is left to do is go inside the render method and in here in a paragraph I will display the state variable for the winner and close the paragraph.
So our game should be ready to go for a testdrive. If we run the game it will select for the red player paper, for the blue payer rock and it will tell us that the red player wins.
By the end of the tutorial we will build something like this: