gioco del lancio della moneta

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

1 April 2025

Elenco intelligente delle cose da fare

18 June 2025

</body>

CSS

body {
 margin: 0;
 padding: 0;
 height: 100vh;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 background: linear-gradient(135deg, #000000 0%, #1a1a2e 50%, #16213e 100%);
 font-family: Arial, sans-serif;
}
/*container do jogo*/
.game-container {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content:center;
 gap: 50px;
}
/*container do cilindro com scaleY para ajustar a altura sem deformar */
.cylinder-container {
 transform-style: preserve-3d;
 transform:rotateX(0) scaleY(0.35);
}
/*animacao para o cilindro agrupado */
.cylinder-container.flipping {
 animation: flipflip 2s linear forwards;
}

@keyframes flipflip{
 0%{
  transform: translateY(0) rotateX(0) scaleY(0.35);
 }
 50%{
  transform: translateY(-300px) rotateX(1080deg) scaleY(0.35);
 }
 100%{
  transform: translateY(0) rotateX(0) scaleY(0.35);
 }
}
/*segmentos formando 360deg para fazer um cilindro com altura reduzida (moeda)*/
.cylinder-nano-segment{
 position: absolute;
 width: 2.5px;
 height: 30px;
 left: 55.5px;
 top: 0;
 transform-origin: 6px 150px;
 background: gold;
 border: 2px solid goldenrod;
}
/*tudo */  
.cylinder-nano-segment:nth-child(1) {
 transform: rotateY(0deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(2) {
 transform: rotateY(6deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(3) {
 transform: rotateY(12deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(4) {
 transform: rotateY(18deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(5) {
 transform: rotateY(24deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(6) {
 transform: rotateY(30deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(7) {
 transform: rotateY(36deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(8) {
 transform: rotateY(42deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(9) {
 transform: rotateY(48deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(10) {
 transform: rotateY(54deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(11) {
 transform: rotateY(60deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(12) {
 transform: rotateY(66deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(13) {
 transform: rotateY(72deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(14) {
 transform: rotateY(78deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(15) {
 transform: rotateY(84deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(16) {
 transform: rotateY(90deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(17) {
 transform: rotateY(96deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(18) {
 transform: rotateY(102deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(19) {
 transform: rotateY(108deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(20) {
 transform: rotateY(114deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(21) {
 transform: rotateY(120deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(22) {
 transform: rotateY(126deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(23) {
 transform: rotateY(132deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(24) {
 transform: rotateY(138deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(25) {
 transform: rotateY(144deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(26) {
 transform: rotateY(150deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(27) {
 transform: rotateY(156deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(28) {
 transform: rotateY(162deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(29) {
 transform: rotateY(168deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(30) {
 transform: rotateY(174deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(31) {
 transform: rotateY(180deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(32) {
 transform: rotateY(186deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(33) {
 transform: rotateY(192deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(34) {
 transform: rotateY(198deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(35) {
 transform: rotateY(204deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(36) {
 transform: rotateY(210deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(37) {
 transform: rotateY(216deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(38) {
 transform: rotateY(222deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(39) {
 transform: rotateY(228deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(40) {
 transform: rotateY(234deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(41) {
 transform: rotateY(240deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(42) {
 transform: rotateY(246deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(43) {
 transform: rotateY(252deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(44) {
 transform: rotateY(258deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(45) {
 transform: rotateY(264deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(46) {
 transform: rotateY(270deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(47) {
 transform: rotateY(276deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(48) {
 transform: rotateY(282deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(49) {
 transform: rotateY(288deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(50) {
 transform: rotateY(294deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(51) {
 transform: rotateY(300deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(52) {
 transform: rotateY(306deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(53) {
 transform: rotateY(312deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(54) {
 transform: rotateY(318deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(55) {
 transform: rotateY(324deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(56) {
 transform: rotateY(330deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(57) {
 transform: rotateY(336deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(58) {
 transform: rotateY(342deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(59) {
 transform: rotateY(348deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(60) {
 transform: rotateY(354deg) translateZ(60px);
}
/*tampas da moeda e emoji de cara e coroa no before delas*/
.cylinder-nano-top{
 border: 1px solid goldenrod;
 background: gold;
 position: absolute;
 width: 120px;
 height: 120px;
 border-radius: 50%;
 top: -60px;
 left: 0;
 transform: rotateX(90deg);
 display: flex;
 flex-direction:column;
 align-items: center;
 justify-content: center;
}

.cylinder-nano-bottom{
 border: 1px solid goldenrod;
 background: gold;
 position: absolute;
 width: 120px;
 height:120px;
 border-radius: 50%;
 top: -30px;
 left: 0;
 transform: rotateX(90deg);
 display: flex;
 flex-direction:column;
 align-items: center;
 justify-content: center;
}

.cylinder-nano-bottom::before {
 content: 'head';
 font-size: 60px;
 opacity: 0.6;
 filter: drop-shadow(0 0 5px #ffd700) drop-shadow(0 0 10px #ffd700) drop-shadow(0 0 20px #ffed4e) drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
}

.cylinder-nano-top::before {
 content: 'tail';
 font-size: 60px;
 opacity: 0.6;
 filter: drop-shadow(0 0 5px #ffd700) drop-shadow(0 0 10px #ffd700) drop-shadow(0 0 20px #ffed4e) drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
}
/*botao play */
.play-button {
 background: lime;
 border: none;
 color: white;
 padding: 10px 30px;
 left: 62px;
 font-size: 15px;
 font-weight: bold;
 border-radius: 50px;
 cursor: pointer;
 box-shadow: 0 8px 15px rgba(0,0,0,0.2);
 transition: all 0.3s ease;
 text-transform: uppercase;
 letter-spacing: 1px;
 position: relative;
 overflow: hidden;
}

.play-button:active {
 transform: translateY(0);
 box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

.play-button.disabled {
 background: darkgreen;
 cursor: not-allowed;
 transform: none;
 box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/*texto aparecendo */
.result {
 position:relative;
 left: 62px;
 top:20px;
 font-size: 20px;
 font-weight: bold;
 color: white;
 opacity: 0;
 animation-fill-mode: forwards;
}

.result.show {
 animation: fadeInResult 0.8s ease-in-out 2.2s forwards;
}
/*animacao texto aparecendo */
@keyframes fadeInResult {
 from {
  opacity: 0;

}
 to {
  opacity: 1;
 }
}

gioco del lancio della moneta

Consigliato

Elenco intelligente delle cose da fare

Libro delle streghe

gioco del serpente

HTML

CSS

JS

Consigliato

Elenco intelligente delle cose da fare

Libro delle streghe

gioco del serpente

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS