Adding logic to the game part-2 day#10
By K. BoopathiHello, guys welcome back today. We are at the last day of learning react fundamental in 10 days. This is part-2 of adding logic to the game if you don’t check part-1 check that first.
- Introduction to react js
- Hello world in React JS day#1
- Components in React JS day#2
- Add style to components in React JS day#3
- State in React JS day#4
- Props in React day#5
- Handling events in React JS day#6
- Accessing DOM elements in React JS day#7
- Conditional rendering in React JS day#8
- Adding logic to the game part-1 day#9
- Adding logic to the game part-2 day#10
Adding logic to the game
let revise what are the things we do until now. We simply create Register and Player component and add some functionality to each component.
The thing we need to do are
- Displaying the weapons once the player registered.
- Allow the player to click any one weapon by adding an event listener to the weapon.
- Generate a random number to select the weapon for the bot.
- Find who is the winner.
The first two things we did in the previous article in this we going to do see last two things. So let’s get started.
Generate a random number to select the weapon for the bot
It’s time to do for bot we need to Generate random number by using that we need to select a weapon for our bot.
Let add the function botClicked() to the player Component the function will return the random weapon for each time.
To Generate random numbers we use the random function present in the Math library. Math.floor(Math.random()*3) it always returns random between 0 to 2 by using that random number we choose a weapon from an array.
Player.js
import React from 'react';
import "./player.css";
import Weapon from "./Weapon.js";
class Player extends React.Component
{
constructor(props)
{
super(props);
//weapons name
this.weapons=["rock","paper","scissor"];
//binding this
this.playerClicked=this.playerClicked.bind(this);
}
//Event listener
playerClicked(player_weapon)
{
console.log("Weapon:"+player_weapon);
}
botClicked()
{
return this.weapons[Math.floor(Math.random()*3)];
}
render()
{
return(
<div className="weapon_container">
<Weapon weapon_name={this.weapons[0]}clicked={this.playerClicked}/>
<Weapon weapon_name={this.weapons[1]}clicked={this.playerClicked}/>
<Weapon weapon_name={this.weapons[2]}clicked={this.playerClicked}/>
</div>
);
}
}
Find who is the winner
we are at the final step to complete the game. Add the findWinner(player_weapon,bot_weapon) function which will return who is the winner and use the state to store the player_score,bot_score, game result because when the player_score, bot_score, or game result change we need to change the UI of the page.
Player.js
import React from 'react';
import "./player.css";
import Weapon from "./Weapon.js";
class Player extends React.Component
{
constructor(props)
{
super(props);
//weapons name
this.weapons=["rock","paper","scissor"];
//state
this.state={player_score:0,bot_score:0,result:""};
//binding this
this.playerClicked=this.playerClicked.bind(this);
}
//Event listener
playerClicked(player_weapon)
{
console.log("Weapon:"+player_weapon);
}
botClicked()
{
return this.weapons[Math.floor(Math.random()*3)];
}
findWinner(player_weapon,bot_weapon)
{
//checking
if((player_weapon==="rock" && bot_weapon==="scissor") ||
(player_weapon==="scissor" && bot_weapon==="paper") ||
(player_weapon==="paper" && bot_weapon==="rock")
)
{
//if player win we simply increase the player score and set result as You Won
this.setState((state)=>({player_score:state.player_score+1,bot_score:state.bot_score,result:"You Won"}));
}
else if((bot_weapon==="rock" && player_weapon==="scissor") ||
(bot_weapon==="scissor" && player_weapon==="paper") ||
(bot_weapon==="paper" && player_weapon==="rock"))
{
//if bot win we simply increase the bot score and set result as You Loose
this.setState((state)=>({player_score:state.player_score,bot_score:state.bot_score+1,result:"You Loose"}));
}
else
{
//if battle draw we simply set result as Draw
this.setState((state)=>({player_score:state.player_score,bot_score:state.bot_score,result:"Draw"}));
}
render()
{
return(
<div className="player_battle">
<div className="scoreboard">
<div className="player_score">
<p>{this.player_name}</p>
<p>{this.state.player_score}</p>
</div>
<div className="bot_score">
<p>Bot</p>
<p>{this.state.bot_score}</p>
</div>
</div>
<div className="weapon_container">
<Weapon weapon_name={this.weapons[0]}clicked={this.playerClicked}/>
<Weapon weapon_name={this.weapons[1]}clicked={this.playerClicked}/>
<Weapon weapon_name={this.weapons[2]}clicked={this.playerClicked}/>
</div>
<div className="result">
<p>{this.state.result}</p>
</div>
</div>
);
}
}
We also add some HTML to display the score.
Did you notice at the setState function we use a function to change the state value because our state depends on the previous state value so the best practice is to use a function.
now update our Player.css file
.player_battle
{
display: flex;
justify-content: center;
flex-direction: column;
margin-top: 2rem;
width: 100%;
}
.scoreboard
{
display: flex;
justify-content: space-around;
width: 100%;
}
.weapon_container
{
display: flex;
justify-content: space-around;
}
.player_score,
.bot_score
{
margin:0 35px
}
.result
{
display: flex;
justify-content: center;
color: red;
font-size: 1.3rem;
}Save the code and run the program you will get the output similar to the below image.
Everything working fine but we didn’t add a function to check if the battle is finished. So let’s add it.
Player.js
import React from 'react';
import "./player.css";
import Weapon from "./Weapon.js";
class Player extends React.Component
{
constructor(props)
{
super(props);
//weapons name
this.weapons=["rock","paper","scissor"];
//state
this.state={player_score:0,bot_score:0,result:""};
//binding this
this.playerClicked=this.playerClicked.bind(this);
}
//Event listener
playerClicked(player_weapon)
{
let bot_weapon=this.botClicked();
this.findWinner(player_weapon,bot_weapon);
}
botClicked()
{
return this.weapons[Math.floor(Math.random()*3)];
}
findWinner(player_weapon,bot_weapon)
{
//checking if the battle is finished are not if finished don't update the state
if(!this.isBattleOver())
{
if((player_weapon==="rock" && bot_weapon==="scissor") ||
(player_weapon==="scissor" && bot_weapon==="paper") ||
(player_weapon==="paper" && bot_weapon==="rock")
)
{
this.setState({player_score:this.state.player_score+1,bot_score:this.state.bot_score,result:"You Won"},()=>{this.isBattleOver();});
}
else if((bot_weapon==="rock" && player_weapon==="scissor") ||
(bot_weapon==="scissor" && player_weapon==="paper") ||
(bot_weapon==="paper" && player_weapon==="rock"))
{
this.setState({player_score:this.state.player_score,bot_score:this.state.bot_score+1,result:"You Loose"},()=>{this.isBattleOver();});
}
else
{
this.setState({player_score:this.state.player_score,bot_score:this.state.bot_score,result:"Draw"},()=>{this.isBattleOver();});
}
}
isBattleOver()
{
//checking if the player score is greater or lesser then the 5 if yes reset the score
if(this.state.player_score>=5)
{
alert("You Won The Battle ");
//setting back the state to zero
this.setState({player_score:0,bot_score:0,result:""});
return true;
}
else if (this.state.bot_score>=5)
{
alert("You Loose The Battle ");
this.setState({player_score:0,bot_score:0,result:""})
return true;
}
else
{
return false;
}
}
render()
{
return(
<div className="player_battle">
<div className="scoreboard">
<div className="player_score">
<p>{this.player_name}</p>
<p>{this.state.player_score}</p>
</div>
<div className="bot_score">
<p>Bot</p>
<p>{this.state.bot_score}</p>
</div>
</div>
<div className="weapon_container">
<Weapon weapon_name={this.weapons[0]}clicked={this.playerClicked}/>
<Weapon weapon_name={this.weapons[1]}clicked={this.playerClicked}/>
<Weapon weapon_name={this.weapons[2]}clicked={this.playerClicked}/>
</div>
<div className="result">
<p>{this.state.result}</p>
</div>
</div>
);
}
}We add the isBattleOver() function which checks the score and if it is equal to or greater than five we reset the score.
Did you notice we call the isBattleOver() function as callback in the setState function because we need to call the function once we successfully updated the score.
If you run the code and play once you get 5 points it will popup an alert box saying that “you won the battle”.
Hurray! congrats you learn react fundamental and build a simple game with that knowledge. You can get the full source code from my Github.
Thank you guys we will soon meet in some other article.
Leave a Reply