Click here for free DL of the app version that can save data.

No:85

344

←

Prev Next

→

guess the flip side of the coin and the other side..ALL
Developer User1691｜Date and time 23/5/12 21:21:15
Build time 51.502 sec｜Game capacity 1.863KB｜

Script

Coin Toss Game

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Coin Toss Game</title>
	<script>
		// Coin Toss Game
		var coin;
		var score = 0;
		var resultText = document.getElementById("result");

function guessHeads() {
			if (coin == 0) {
				score++;
				resultText.innerHTML = "Correct! Score: " + score;
			} else {
				score--;
				resultText.innerHTML = "Wrong! Score: " + score;
			}
		}

.container {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100vh;
		}

h1 {
			font-size: 2rem;
			margin-bottom: 20px;
		}

.coin {
			margin-bottom: 20px;
		}

.btn {
			border: none;
			background-color: #333;
			color: #fff;
			padding: 10px 20px;
			font-size: 1.2rem;
			border-radius: 5px;
			cursor: pointer;
			margin: 10px;
		}

.btn:hover {
			background-color: #555;

}

.btn:active {
			transform: translateY(2px);
		}

.result {
			font-size: 1.5rem;
			margin-top: 20px;
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>Coin Toss Game</h1>
		<img class="coin" id="coin-img" src="heads.png">
		<button onclick="guessHeads()" class="btn">HEADS</button>
		<button onclick="guessTails()" class="btn">TAILS</button>
		<p class="result" id="result"></p>
	</div>