Coin Flip Game using HTML5, CSS3 And JAVASCRIPT

Coin Flip Game using HTML5, CSS3 And JAVASCRIPT (Source Code)

Coin Flip Game using HTML5, CSS3 And JAVASCRIPT (Source Code)

Coin Flip Game is a way to inaugurate each sport. There are two sides in it Head and Tail a man flips it and an another calls it, If the call was correct then the person wins and if it is false he losses. This method is been repeat since long time ago.

But now in the generation of technology we as a coder can create this toss in PC where the system will decide and calling out process will be nullified. Excited? So with that excitement I Welcome all the coders & learners on this to new blog on Codewithrandom Today we’ll see how to create a coin game using HTML5, CSS3 & JS.

HTML Code for Coin Flip Game

<html>
    <head>
        <title>Coin Flip Simulation</title>
        <link href="https://fonts.googleapis.com/css?family=Bungee+Shade|Montserrat" rel="stylesheet">
    </head>
    <body>
        <h1>Coin Flip Sim!</h1>
        <div id="wrapper">

            <div id="coin-container">
                <div id="coin">
                    <span id="heads"><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 765.49 765.49"><defs><style>.cls-1{fill:#fffb59;stroke:#fffb59;stroke-miterlimit:10;stroke-width:5px;}.cls-2{fill:#ff404c;}</style></defs><title>coin-heads</title><circle class="cls-1" cx="382.75" cy="382.75" r="380.25"/><path class="cls-2" d="M340.39,210.36c-23.61,17.56-29.95,45.37-28.79,60.17,1.49,18.09,5.16,41.65,5.16,41.65s-7.27,3.95-7.27,19.84c2.53,39.88,15.87,22.67,18.61,40.16,6.59,42.14,21.67,34.63,21.67,57.63,0,38.31-15.8,56.22-65.11,77.45-49.48,21.32-100.49,48.15-100.49,94.61V625.1H602.3V601.87c0-46.46-51-73.29-100.54-94.59-49.32-21.23-65.06-39.12-65.06-77.45,0-23,15-15.49,21.65-57.63,2.76-17.49,16.07-.28,18.65-40.16,0-15.89-7.3-19.84-7.3-19.84s3.67-23.55,5.14-41.65c1.51-19-9.25-59.49-53.43-71.92-7.74-7.9-13-20.46,10.83-33.08-52-2.44-64.14,24.79-91.85,44.81Z" transform="translate(-10.49 -12.5)"/></svg></span>
                    <span id="tails"><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 765.49 765.49"><defs><style>.cls-1{fill:#fffb59;stroke:#fffb59;stroke-miterlimit:10;stroke-width:5px;}.cls-2{fill:#ff404c;}</style></defs><title>coin-tails</title><circle class="cls-1" cx="382.75" cy="382.75" r="380.25"/><path class="cls-2" d="M263.61,622.78c7.2-23,18.06-55.45,32.63-102.32,63.49-10.06,89.76,8,130.08-64-32.72,10-72.17-18.58-70.06-31s91.78,8.94,150.49-74.42c-74,16.32-97.67-19.61-88.12-25,22-12.52,87.39-5.21,122.25-39.14,18-17.48,26.38-60,19.06-75.11-8.77-18.32-62.29-45.64-91.8-43.06s-75.78,112.35-89.53,111.5-16.49-49.2,7.49-94.12C360.83,197.28,314.53,232,300,261.75c-27,55.29,2.53,182.16-6.95,186.66s-41.42-58.19-50.94-86.64c-13,43.6-13.32,87.27,24.7,145.28-14.33,38.07-22.17,81.88-23.36,104.16-.57,17.8,17,21.63,20.14,11.57Z" transform="translate(-15.64 -12.5)"/></svg></span>
                </div>
            </div>

            <div id="button-container">
                <p id="notification">This toss resulted in... <span id="result"></span></p>
                <button id="flip">FLIP</button>
            </div>

            <div id="stats-container">
                <div id="heads-stats">
                    <p># of Heads: <span id="heads-stat"> </span></p>
                </div>
                <div id="tails-stats">
                        <p># of Tails: <span id="tails-stat"> </span></p>
                </div>
                <button id="reset-stats">RESET</button>
            </div>

        </div>
    </body>
</html>

In this HTML Code we have defined the structure we have defined the button container and created two sections for Head & Tail and a Reset Button to restart the game. Now we’ll style the gamepage using CSS3

Portfolio Website Using Html And Css | portfolio website sourcecode

CSS Code in Coin Flip Game

/* -------- Coin Flip Sim styles -------- */
body {
  padding:50px 25px;
  background-color:#444349;
}

h1 {
    font-family: 'Bungee Shade', cursive;
    text-align:center;
    font-size:5em;
    color:rgba(255,64,76,1);
}

#flip, #stats-container, #reset-stats {
    font-family: 'Montserrat', sans-serif;
}

#flip, #reset-stats {
    letter-spacing:1px;
    border-radius:5px;
    border-bottom-width:3px;
    outline:none;
}

#flip:hover, #reset-stats:hover {
    cursor:pointer;
}

#wrapper {
    background-color:rbga(34,33,39,1) !important;
    width:500px;
    padding:50px 50px;
    margin:auto;
    border:3px solid rgba(150,150,150,0.1);
    border-bottom-width:6px;
    border-radius:5px;
    background-color:rgba(225,225,225,1);
    text-align:center;
}

#coin-container { text-align:center; }
#coin {
    width:300px;
    height:300px;
    margin:auto;
    position:relative;
}

#heads, #tails {
    width:300px;
    height:300px;
    display:inline-block;
    backface-visibility: hidden;
    position:absolute;
    right:0;
    left:0;
    top:0;
    bottom:0;
}

#heads {
    z-index:12;
    opacity:1;
}
#tails {
    z-index:10;
    opacity:1;
}
.heads-flip-animation { animation: flip-heads 0.2s linear 0s infinite alternate; }
.tails-flip-animation { animation: flip-tails 0.2s linear 0s infinite alternate; }

@keyframes flip-heads {
    0%, 100% { transform: rotateY(0deg); }
    50% { transform: rotateY(180deg); }
  }
  
  @keyframes flip-tails {
    0%, 100% { transform: rotateY(180deg); }
    50% { transform: rotateY(0deg); }
  }

#notification {
    margin-top:25px;
    font-family: 'Montserrat', sans-serif;
    font-size:1.25em;
    color:rgba(68,67,73,1);
    opacity:0;
}

#result {
    font-family: 'Bungee Shade', cursive;
    color:rgba(255,64,76,1);
    font-size:3em;
    display:block;
}

#flip {
    margin:auto;
    margin-top:25px;
    padding:20px 50px;
    background-color:rgba(255,251,89,1);
    border-color:rgba(255,251,89,0.5);
    color:rgba(255,64,76,1);
    font-size:2.2em;
    transition:0.3s;
    letter-spacing:3px;
}

#stats-container {
    margin-top:20px;
}

#heads-stats, #tails-stats {
    display:inline-block;
    width:45%;
    background-color:rgba(240,240,240,1);
    border:1px solid rgba(150,150,150,0.25);
    border-bottom-width:3px;
    border-radius:5px;
    font-size:1.5em;
}

#heads-stat, #tails-stat { 
    display:block; 
    font-size:2.5em; 
    color:rgba(255,64,76,1);
    margin-top:10px;
}
#reset-stats {
    margin:auto;
    margin-top:20px;
    padding:10px 25px;
    font-size:1.3em;
    color:rgba(255,255,255,1);
    background-color:rgba(68,67,73,1);
    border-color:rgba(68,67,73,0.5);
}

/* -- Media Queries -- */
@media screen and (max-width:1200px) {
    body { padding-bottom:50px; }
    #reset-stats { font-size:2.5em; padding: 25px 50px; }
}

In this CSS code we have aligned and padded all the pre defined tags in HTML Code and then we have given the opacity for head & tail. So that it has a fixed position and some colours using rgba or hex code to look like cool.

Create Horizontal Flip Image Using Simple HTML And CSS

Now to make it responsive we have to script it in Java Language.

JavaScript Code in Coin Flip Game

// ---- Variable Declarations
const coin = document.querySelector("#coin");
const coinHeads = document.querySelector("#heads");
const coinTails = document.querySelector("#tails");

const flipButton = document.querySelector("#flip");
const notif = document.querySelector("#notification");
const result = document.querySelector("#result");

const headsStat= document.querySelector("#heads-stat");
const tailsStat = document.querySelector("#tails-stat");

const resetStats = document.querySelector("#reset-stats");

// ---- Setting initial stat displays
headsStat.textContent = 0;
tailsStat.textContent = 0;

// ---- Removing the results if user clicks the RESET button
function resetResult() {
    notif.style.opacity = "0";
    result.textContent = "";
}

// ---- Initiating a coin flip
flipButton.addEventListener('click', function() {
    resetResult();
    coinHeads.style.opacity = "1";
    coinHeads.classList.add('heads-flip-animation');
    coinTails.classList.add('tails-flip-animation');
    flipButton.textContent = "FLIP AGAIN";
    window.setTimeout(function() {
        coinHeads.classList.remove('heads-flip-animation');
        coinTails.classList.remove('tails-flip-animation');
        getCoinFace();
    }, 1000);
});

// ---- Determining the coin face
function getCoinFace() {
    notif.style.opacity = "1";
    let face = Math.random();
    let h = parseInt(headsStat.textContent);
    let t  = parseInt(tailsStat.textContent);
    if ( face > 0.5 ) {
        headsStat.textContent = (h + 1);
        result.textContent = "HEADS!";
    } else {
        tailsStat.textContent = (t + 1);
        coinHeads.style.opacity = "0";
        result.textContent = "TAILS!";
    }
}

// ----
resetStats.addEventListener('click', function() {
    headsStat.textContent = 0;
    tailsStat.textContent = 0;
    resetResult();
    flipButton.textContent = "FLIP";
});

In this JS Code we have first defined the coin, head, tail, result under document.querySelector so that we can call it in our code without any error and indentation then assume some variables we have applied if-else statement so that it acts as per the condition and the throw the message which satiesfies the condition. Let’s see the final output.

FINAL Output of Coin Flip Game

We have Successfully created our Coin Game using HTML5, CSS3 & JS (Source Code) | Coin Flip Game You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned below.

100+ Front-end Projects for Web developers (Source Code)

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written By – Harsh Sawant

Code By – Michael Wilson



Tags: , , , , ,

Leave a Reply