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.

Demo

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;
}

Demo

Most Helpful This Week

Tic Tac Toe Calculator Carousel Memory Game Search Autocomplete Voting System Compass Clock Arrange Game

Golang Tutorial

Golang Reference

Beego Framework

Dice Game

Most Helpful This Week

Most Helpful This Week