JavaScript Coin Flip Animation

This JavaScript code snippet helps you to create a coin flip animation (toss game). It allows the user to click a button to flip a virtual coin. The code defines variables for the coin, button, result, headsCounter, and tailsCounter elements on the page. Two additional variables are created for heads and tails counts.

When the button is clicked, the coinToss function generates a random number (0 or 1) to simulate the coin flip. If the result is 0, the code displays an image of a heads coin, increases the count of heads, and updates the result and headsCounter display on the page. If the result is 1, the code displays an image of a tails coin, increases the count of tails, and updates the result and tailsCounter display on the page.

The code also includes an animation effect for the flipping of the coin image. Finally, after the coin is tossed, the featureCoin element is removed from the page.

How to Create Javascript Coin Flip Animation

First of all, create a container div to hold all the elements of the coin flip animation. Within this div, add an image element for the featureCoin, which is the coin that will be flipped in the game. Create a div element for the coin, where the result of the flip will be displayed.

Also, create a button element for flipping the coin and a div element for displaying the result of the coin flip. So, the following the complete HTML structure for coin flip animation:

<div class='container'>
  <img id="featureCoin" src="https://upload.wikimedia.org/wikipedia/en/5/52/British_fifty_pence_coin_2015_obverse.png"/>
  <div id='coin'></div>
  <div id='button'>
    Flip coin
  </div>
  <div id='result'></div>
  <div id='headsCounter'></div>
  <div id='tailsCounter'></div> 
</div>

Now, style the toss game using the following CSS. The #coin and #button selectors apply margin and padding, respectively, as well as animation for the coin. The @keyframes flip selector defines the animation sequence for the coin toss. The .container selector centralizes the content, while other selectors define font size, color, and other visual aspects of the game elements.

body {
  font-family: "Ubuntu", sans-serif;
  background: #fafafa;
}

#coin {
  margin-bottom: 100px;
}

#button {
  background: #64ffda;
  color: #111;
  padding: 10px 20px;
  border-radius: 2px;
  display: inline-block;
  transition: 0.5s;
  cursor: pointer;
  font-size: 23px;
  margin-bottom: 30px;
  box-shadow: 1px 1px 8px #DCDCDC;
}
#button:hover {
  opacity: 0.5;
}

.animate-coin {
  -webkit-animation: flip 1.4s 1;
          animation: flip 1.4s 1;
}

@-webkit-keyframes flip {
  0% {
    transform: scale3d(1, 1, 1) rotateX(0deg);
  }
  50% {
    transform: scale3d(2, 2, 2) rotateX(3600deg);
  }
  100% {
    transform: scale3d(1, 1, 1) rotateX(7200deg);
  }
}

@keyframes flip {
  0% {
    transform: scale3d(1, 1, 1) rotateX(0deg);
  }
  50% {
    transform: scale3d(2, 2, 2) rotateX(3600deg);
  }
  100% {
    transform: scale3d(1, 1, 1) rotateX(7200deg);
  }
}
/* Centralise content */
.container {
  width: 80%;
  margin: 200px auto;
  text-align: Center;
}

img {
  max-width: 100%;
}

#tailsCounter span, #headsCounter span {
  color: #6ab344;
}

#result {
  color: #6ab344;
}

Finally, add the following JavaScript coin flip animation function:

var coin = document.getElementById('coin');
var button = document.getElementById('button');
var result = document.getElementById('result');
var headsCounter = document.getElementById('headsCounter');
var TailsCounter = document.getElementById('TailsCounter');
var featureCoin = document.getElementById('featureCoin');
var heads = 0;
var tails = 0;

/* On click of button spin coin ainamtion */
function coinToss() {
  /* Random number 0 or 1  */
  var x = Math.floor(Math.random() * 2);
  /* If x = 0 change coin html to image of heads along with animation for flipping effect */
  if (x === 0) {
    coin.innerHTML = '<img class="heads animate-coin" src="https://upload.wikimedia.org/wikipedia/en/5/52/British_fifty_pence_coin_2015_obverse.png"/>';
    /* Heads count increase by 1 */
    heads += 1;
    /* Display result of flip */
    result.innerHTML = '<h2>You got heads</h2>';
    /* Display number of heads */
    headsCounter.innerHTML = '<h3> Number of heads:<span> ' + heads + '</span></h3>';
    /* Else x =  change coin html to image of tails along with animation for flipping effect */
  } else {
    coin.innerHTML = '<img class="tails animate-coin" src="https://upload.wikimedia.org/wikipedia/en/d/d8/British_fifty_pence_coin_2015_reverse.png"/>';
    /* Tails count increase by 1 */
    tails += 1;
    /* Display result of flip */
    result.innerHTML = '<h2>You got tails</h2>';
    /* Display number of tails */
    tailsCounter.innerHTML = '<h3> Number of tails:<span> ' + tails + '</span></h3>';

  }

}
/* Add the coin toss function to the button using on click */
button.onclick = function() {
  coinToss();
  featureCoin.remove();
}

That’s all! hopefully, you have successfully created a coin flip animation using JavaScript. If you have any questions or suggestions, feel free to comment below.