Jogo de cara ou coroa

335 kevekıbhack

Abrir no Editor Publique Seu Código

Recomendado

24 July 2025

Estrutura de Stickman HTML com gancho de agarrar

1 August 2025

Protocolo de paralisia de rolagem

21 December 2024

Um código por cleancloud166

HTML

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

Jogo de cara ou coroa

Recomendado

Estrutura de Stickman HTML com gancho de agarrar

Protocolo de paralisia de rolagem

Um código por cleancloud166

HTML

CSS

JS

Recomendado

Estrutura de Stickman HTML com gancho de agarrar

Protocolo de paralisia de rolagem

Um código por cleancloud166

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS