Coin Toss Game using JavaScript & CSS

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 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.

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.

<div class="container">

</div>

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

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. 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.

<div class="coin" id="coin">

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

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

</div>

.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.

@keyframes spin-tails{
    0%{
        transform: rotateX(0);
    }
    100%{
        transform: rotateX(1980deg);
    }
}
@keyframes spin-heads{
    0%{
        transform: rotateX(0);
    }
    100%{
        transform: rotateX(2160deg);
    }
}

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.

<div class="stats">
    <p id="heads-count">Heads: 0</p>
    <p id="tails-count">Tails: 0</p>
</div>

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

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.

<div class="buttons">
   <button id="flip-button">Flip Coin</button>
   <button id="reset-button">Reset</button>
</div>

.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.

#flip-button{
    background-color: #053469;
    color: #ffffff;
}

#reset-button{
    background-color: #674706;
    color: white;
}

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.

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.

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.

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.

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.

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.

resetBtn.addEventListener("click",() => {
    coin.style.animation = "none";
    heads = 0;
    tails = 0;
    updateStats();
});

Now this javascript Coin Toss Game is completely made to entertain you. Now I have used some amount of css code to design the disable button.

#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.

Related Post:

1. Responsive Footer HTML CSS
2. International Schools in Bangalore
3. Simple Stopwatch using JavaScript
4. International Schools in Hyderabad
5. javaScript Password Generator
6. Sidebar Menu Using HTML CSS

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.