Flip coin game

1,365 kevekıbhack

Open In Editor Publish Your Code

Flip coin game

Recommended

29 May 2026

Gn math Unblocked games

11 March 2026

Super Clicker game

18 February 2026

Titans Games Galactic

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