Dice Game
This Dice game use two dices as their central component, usually as a random device. Each time user clicks on ? image a new number generate for you and AI(computer). This will also calculate your and AI points on each click until your click on Clear to restart game.
Prepare Project for Dice Game
To create the example project for this example, open command prompt, navigate to a convenient location, and run the command as shown below :
create-react-app example15
src\App.js
import React from "react";
import { Game } from "./Game";
import { Interface } from "./Interface";
import { AIresult } from "./AIresult";
import { YourResult } from "./YourResult";
import { Ranking } from "./Ranking";
import "./App.css";
class App extends React.Component {
draws = [];
losses = [];
wins = [];
state = {
games: 0,
yourChoice: "",
AIChoice: null,
one:
"https://game-icons.net/icons/ffffff/000000/1x1/delapouite/dice-six-faces-one.svg",
two:
"https://game-icons.net/icons/ffffff/000000/1x1/delapouite/dice-six-faces-two.svg",
three:
"https://game-icons.net/icons/ffffff/000000/1x1/delapouite/dice-six-faces-three.svg",
four:
"https://game-icons.net/icons/ffffff/000000/1x1/delapouite/dice-six-faces-four.svg",
five:
"https://game-icons.net/icons/ffffff/000000/1x1/delapouite/dice-six-faces-five.svg",
six:
"https://game-icons.net/icons/ffffff/000000/1x1/delapouite/dice-six-faces-six.svg"
};
AIChoice = () => {
this.setState({
AIChoice: Math.floor(Math.random() * 6) + 1
});
};
startGame = () => {
this.setState({
yourChoice: Math.floor(Math.random() * 6) + 1,
games: this.state.games + 1
});
this.AIChoice();
};
clearState = () => {
this.losses = [];
this.wins = [];
this.draws = [];
this.setState({
yourChoice: "",
AIChoice: null,
games: 0
});
};
render() {
return (
<>
<Interface
games={this.state.games}
clearState={this.clearState}
startGame={this.startGame}
yourChoice={this.state.yourChoice}
AIChoice={this.state.AIChoice}
/>
<div className="effects">
<YourResult allstates={this.state} />
<AIresult allstates={this.state} />
</div>
<Game results={this.state} />
<Ranking
wins={this.wins}
losses={this.losses}
draws={this.draws}
yourChoice={this.state.yourChoice}
AIChoice={this.state.AIChoice}
/>
</>
);
}
}
export default App;
src\Interface.js
import React from "react";
export const Interface = props => {
return (
<>
<img
alt="choose"
onClick={props.startGame}
style={{ cursor: "pointer" }}
width="10%"
src="https://game-icons.net/icons/ffffff/000000/1x1/delapouite/perspective-dice-six-faces-random.svg"
/>
<span style={{ cursor: "pointer" }} onClick={props.clearState}>
Clear
</span>
<div className="table" style={{ fontSize: "30px" }}>
You: {props.yourChoice} AI: {props.AIChoice}
</div>
Games: {props.games}
</>
);
};
src\YourResult.js
import React from "react";
export const YourResult = props => {
const { one, two, three, four, five, six, yourChoice } = props.allstates;
if (yourChoice === 1) {
return (
<div className="result">
<div>You:</div> <img alt="dice" width="50%" src={one} />
</div>
);
} else if (yourChoice === 2) {
return (
<div className="result">
<div>You:</div> <img alt="dice" width="50%" src={two} />
</div>
);
} else if (yourChoice === 3) {
return (
<div className="result">
<div>You:</div> <img alt="dice" width="50%" src={three} />
</div>
);
} else if (yourChoice === 4) {
return (
<div className="result">
<div>You:</div> <img alt="dice" width="50%" src={four} />
</div>
);
} else if (yourChoice === 5) {
return (
<div className="result">
<div>You:</div> <img alt="dice" width="50%" src={five} />
</div>
);
} else if (yourChoice === 6) {
return (
<div className="result">
<div>You:</div> <img alt="dice" width="50%" src={six} />
</div>
);
} else {
return null;
}
};
src\AIresult.js
import React from "react";
export const AIresult = props => {
const { one, two, three, four, five, six, AIChoice } = props.allstates;
if (AIChoice === 1) {
return (
<div className="result">
<div>AI:</div> <img alt="dice" width="50%" src={one} />
</div>
);
} else if (AIChoice === 2) {
return (
<div className="result">
<div>AI:</div> <img alt="dice" width="50%" src={two} />
</div>
);
} else if (AIChoice === 3) {
return (
<div className="result">
<div>AI:</div> <img alt="dice" width="50%" src={three} />
</div>
);
} else if (AIChoice === 4) {
return (
<div className="result">
<div>AI:</div> <img alt="dice" width="50%" src={four} />
</div>
);
} else if (AIChoice === 5) {
return (
<div className="result">
<div>AI:</div> <img alt="dice" width="50%" src={five} />
</div>
);
} else if (AIChoice === 6) {
return (
<div className="result">
<div>AI:</div> <img alt="dice" width="50%" src={six} />
</div>
);
} else {
return null;
}
};
src\Game.js
import React from "react";
export const Game = props => {
const { yourChoice, AIChoice } = props.results;
if (yourChoice > AIChoice) {
return <h1 className="won">You Won!</h1>;
} else if (AIChoice > yourChoice) {
return <h1 className="lost">You Lost!</h1>;
} else if (AIChoice === null && yourChoice === "") {
return <h1>Start Game!</h1>;
} else {
return <h1 className="draw">Draw</h1>;
}
};
src\Ranking.js
import React from "react";
export const Ranking = props => {
if (props.yourChoice > props.AIChoice) {
props.wins.push(1);
return (
<h2>
wins: {props.wins.length} losses: {props.losses.length} draws:{" "}
{props.draws.length}
</h2>
);
} else if (props.AIChoice > props.yourChoice) {
props.losses.push(1);
return (
<h2>
wins: {props.wins.length} losses: {props.losses.length} draws:{" "}
{props.draws.length}
</h2>
);
} else if (props.AIChoice === props.yourChoice) {
props.draws.push(1);
return (
<h2>
wins: {props.wins.length} losses: {props.losses.length} draws:{" "}
{props.draws.length}
</h2>
);
} else if (props.AIChoice === null && props.yourChoice === "") {
return (
<h2>
wins: {props.wins.length} losses: {props.losses.length} draws:{" "}
{props.draws.length}
</h2>
);
} else {
return null;
}
};
src\App.css
Replace the placeholder content of App.css with given below content :
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 40vmin;
pointer-events: none;
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.effects {
display: flex;
}
* {
text-align: center;
margin-top: 20px;
}
.won {
color: white;
background: rgb(39, 156, 39);
padding: 5px;
width: 200px;
margin: 0 auto;
}
.lost {
color: white;
background: rgb(182, 60, 56);
padding: 5px;
width: 200px;
margin: 0 auto;
}
.draw {
color: white;
background: rgb(93, 98, 168);
padding: 5px;
border-radius: 10px;
width: 200px;
margin: 0 auto;
}
img {
border-radius: 10px;
}
span {
margin-left: 5px;
background: rgb(230, 86, 86);
color: white;
padding: 5px 15px;
}
span:hover {
background: rgb(138, 49, 49);
transition: 0.5s;
}
.table {
color: white;
margin: 20px auto;
width: 200px;
background: rgb(138, 138, 241);
padding: 5px;
}
.result {
display: flex;
flex-direction: row;
padding: 10px;
margin: 0 auto;
}