Webleb - HTML UI Elements - Gioco del lancio della moneta

HTML

CSS

<!DOCTYPE html>

<head>

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

<strong>Heads</strong>

</div>

<div>

<strong>Tails</strong>

</div>

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>

Validating your code, please wait...

HTML

CSS

<!DOCTYPE html>

<head>

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

<strong>Heads</strong>

</div>

<div>

<strong>Tails</strong>

</div>

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>