Flip coin game

1,317 kevekıbhack

Open In Editor Publish Your Code

Flip coin game

Recommended

11 February 2026

Five Nights at Diddy's HTML Game Code

27 January 2026

Elastic Face Game HTML: David Li's Interactive Art

4 February 2026

Five Nights at Candy's 1 HTML5 Game

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Coin Flip Game with Score</title>

<style>

body {

margin: 0;

padding: 0;

font-family: Arial, sans-serif;

background: #1a1a1a;

color: white;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 100vh;

}

.coin {

width: 150px;

height: 150px;

border-radius: 50%;

background: radial-gradient(circle at center, gold, orange);

display: flex;

justify-content: center;

align-items: center;

font-size: 2rem;

font-weight: bold;

box-shadow: 0 0 20px rgba(255, 215, 0, 0.7);

margin-bottom: 20px;

transition: transform 1s ease;

}

.flipping {

animation: flip 1s ease;

}

@keyframes flip {

0%   { transform: rotateY(0); }

50%  { transform: rotateY(180deg); }

100% { transform: rotateY(360deg); }

}

button {

padding: 10px 20px;

background: #444;

color: white;

border: none;

border-radius: 6px;

cursor: pointer;

font-size: 1rem;

margin-bottom: 20px;

}

button:hover {

background: #666;

}

.scoreboard {

display: flex;

gap: 40px;

font-size: 1.2rem;

}

.scoreboard div {

text-align: center;

}

</style>

</head>

<body>

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

<button onclick="flipCoin()">Flip Coin</button>

<div class="scoreboard">

<div>

<strong>Heads</strong>

<div id="headsCount">0</div>

</div>

<div>

<strong>Tails</strong>

<div id="tailsCount">0</div>

</div>

</div>

<audio id="flipSound" src="https://www.soundjay.com/button/sounds/button-16.mp3" preload="auto"></audio>

<script>

const coin = document.getElementById('coin');

const headsCount = document.getElementById('headsCount');

const tailsCount = document.getElementById('tailsCount');

const flipSound = document.getElementById('flipSound');

let heads = 0, tails = 0;

function flipCoin() {

const result = Math.random() < 0.5 ? 'Heads' : 'Tails';

coin.classList.add('flipping');

flipSound.currentTime = 0;

flipSound.play();

setTimeout(() => {

coin.textContent = result;

coin.classList.remove('flipping');

if (result === 'Heads') {

heads++;

headsCount.textContent = heads;

} else {

tails++;

tailsCount.textContent = tails;

}

}, 1000);

}

</script>

</body>

</html>

CSS

JS