Coin Toss Game using JavaScript & CSS
Tags: html, javascript, webdev, beginners
Published: 2021-10-23 16:07:33

In this article you will learn how to create Coin Toss Game using JavaScript. JavaScript Coin Flip Game We often see different types of cricket matches or other types of matches. Here I have shown you how to make it with coding. For this you need to have a basic idea about HTML CSS and JavaScript.

[Watch its live demo](https://www.foolishdeveloper.com/2021/10/coin-flip-game-using-javascript.html) to learn how it works. I made a box here. I first created a coin in that box using two images. Then there is a small box where the results of this game will show. Below all are two buttons, one to launch the game and the other to restart the game. 

{% youtube QQh8PNp8KcQ %}

When you click on the 'flip coin' button, the coin will continue to rotate along the x-axis. After rotating for three seconds it will stop in a certain direction. Which way to stop will be completely randomly determined. For this I have used JavaScript's Math.random function.

### Step 1: The basic structure of the Coin Toss game

 Created a basic structure of this coin game using the following HTML and CSS code. This `width is 400px` and the height depends on the padding. 

Here I have used `white as background-color`. The border-radius helped to make the four corners of the box somewhat round.
```html
<div class="container">
 
</div>
```

```css
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Rubik",sans-serif;
}

body{
    height: 100%;
    background: #1f5a82;
}

.container{
    background-color: #ffffff;
    width: 400px;
    padding: 35px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    box-shadow: 15px 30px 35px rgba(0,0,0,0.1);
    border-radius: 10px;
    -webkit-perspective: 300px;
    perspective: 300px;
}
```
![The basic structure of the Coin Toss game](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t2enzl4hd4slmeil5jsa.jpg)

### Step 2: Create coin with the help of image
 Now I have created the coin using two images. For this coin I have used head and tail images. You can download the images by clicking on [this link](https://www.foolishdeveloper.com/2021/10/coin-flip-game-using-javascript.html). Or you can take it from the internet of your choice. 

Try to make your images the same size and transparent background. The height and width of the `images are 145 px` and `position: absolute`.

I have used `transform: rotateX` here to place the two images on opposite sides of each other. Here I rotate the second image `180  along the x axis`. As a result, the first and second images are on opposite sides of each other. Whenever we rotate the coin 180, we see the second image.
```html
<div class="coin" id="coin">

   <div class="heads">
      <img src="head.jpg">
   </div>

   <div class="tails">
      <img src="tails.jpg">
   </div>

</div>
```

```css
.coin{
    height: 150px;
    width: 150px;
    position: relative;
    margin: 32px auto;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.coin img{
    width: 145px;
}
.heads,.tails{
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}
.tails{
    transform: rotateX(180deg);
}
```
 Now I have arranged to rotate the coin with the help of `@keyframes`. The coin will rotate a few times when you click on the button. The following codes have been used to specify this rotation.

In this case I used 180 degrees more than the first image. You may wonder why I did that

> The main reason for this is that I have already seen the second image rotated at a 180 degree angle. So in this case I used a 180 degree angle less.

```css
@keyframes spin-tails{
    0%{
        transform: rotateX(0);
    }
    100%{
        transform: rotateX(1980deg);
    }
}
@keyframes spin-heads{
    0%{
        transform: rotateX(0);
    }
    100%{
        transform: rotateX(2160deg);
    }
}
```
![Create coin with the help of image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6evwn15t3o41yskyhd91.jpg)

### Step 3: Create a display to see the results of the game
Now I have created a display where the results of this game can be seen.
```html
<div class="stats">
    <p id="heads-count">Heads: 0</p>
    <p id="tails-count">Tails: 0</p>
</div>
```
```css
.stats{
    display: flex;
    color: #101020;
    font-weight: 500;
    padding: 20px;
    margin-bottom: 40px;
    margin-top: 55px;
    box-shadow: 0 0 20px rgba(0,139,253,0.25);
}

.stats p:nth-last-child(1){
  margin-left: 50%;
}
```
![Create a display to see the results of the game](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dlsg0ya4tz13wici9kn6.jpg)

### Step 4: Buttons to control the coin flip game
 Now at the end of it all I made two buttons. To start one game, to restart another game. The buttons are two `widths 150 px` and I used border-radius to make it round.
```html
<div class="buttons">
   <button id="flip-button">Flip Coin</button>
   <button id="reset-button">Reset</button>
</div>
```

```css
.buttons{
    display: flex;
    justify-content: space-between;
}
button{
    width: 150px;
    padding: 15px 0;
    border: none;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
}
```
 Now I have used different colors for two buttons. I have used blue as the background color of the first one and I have used ocher of the second one.
```css
#flip-button{
    background-color: #053469;
    color: #ffffff;
}

#reset-button{
    background-color: #674706;
    color: white;
}
```
![Buttons to control the coin flip game](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tj5jrjadxafq3nypztjj.jpg)

### Step 5: Activate this coin toss game using JavaScript
Above we have designed the whole thing through HTML and CSS. Now is the time to make this javascript Coin Toss Game fully functional with the help of JavaScript. First I have determined a solid solvent of some class and ID function.
```javascript
let coin = document.querySelector(".coin");
let flipBtn = document.querySelector("#flip-button");
let resetBtn = document.querySelector("#reset-button");
```
I have set the value of head and tail to zero, which means that when the game is launched under normal conditions, the value of these two `will be zero`.
```javascript
let heads = 0;
let tails = 0;
```
Now I have implemented it using the if function. I set a random value in i using `Math.random` and set a time using setTimeout. Here I have used 3000 milliseconds which means this coin will continue to rotate up to 3000 milliseconds.
```javascript
flipBtn.addEventListener("click", () => {
    let i = Math.floor(Math.random() * 2);
    coin.style.animation = "none";
    if(i){
        setTimeout(function(){
            coin.style.animation = "spin-heads 3s forwards";
        }, 100);
        heads++;
    }
    else{
        setTimeout(function(){
            coin.style.animation = "spin-tails 3s forwards";
        }, 100);
        tails++;
    }
    setTimeout(updateStats, 3000);
    disableButton();
});
```
 Now I have used the following codes to show the result of the game in the display. This will help you to count live the value of the head and tail.
```javascript
function updateStats(){
    document.querySelector("#heads-count").textContent = `Heads: ${heads}`;
    document.querySelector("#tails-count").textContent = `Tails: ${tails}`;
}
```
Now I am activating the disable button. You may be thinking that there is no decibel button here❓🤔

In fact, the 'flip button' will go into full decibel mode when the coin continues to rotate. As a result, you will not be able to click this button within those three seconds. This is mainly done to maintain the balance of the game.

```javascript
function disableButton(){
    flipBtn.disabled = true;
    setTimeout(function(){
        flipBtn.disabled = false;
    },3000);
}
```
Now I have activated the reset button. When you click on the reset button, the value of the head and tail will be zero. No animation can be seen with it, meaning the coin will remain stationary.
```javascript
resetBtn.addEventListener("click",() => {
    coin.style.animation = "none";
    heads = 0;
    tails = 0;
    updateStats();
});
```
![coin toss game using JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qwjx8rnthpkf6qcdm20m.jpg)
 Now this [**javascript Coin Toss Game**](https://www.foolishdeveloper.com/2021/10/coin-flip-game-using-javascript.html) is completely made to entertain you. Now I have used some amount of css code to design the disable button.
```css
#flip-button:disabled{
    background-color: #e1e0ee;
    border-color: #e1e0ee;
    color: #101020;
}
```

When you click on that button, the background color and text color of this button will change for three seconds.

I hope you have learned from this article how I created this Coin Toss Game using JavaScript. Be sure to comment on how you like this tutorial.

You can visit my blog for more tutorials like this. 😊
https://www.foolishdeveloper.com/