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

No:1325

111

←

Prev Next

→

A game to find the ball in the three cups
Developer User3307｜Date and time 23/6/18 11:05:47
Build time 21.321 sec｜Game capacity 2.027KB｜

Script

カップを選んでボールを探そう！

当たりのカップには🎾の絵文字が入っています。

🎾

←

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>ボールを探そう！</title>
	<style>
		body {
			font-size: 1.2rem;
			text-align: center;
			background-color: #F8F8FF;
		}

#gameArea {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 70%;
		}

.cup {
			background-color: #FFDAB9;
			padding: 1rem;
			margin: 2rem;
			border-radius: 50%;
			width: 8rem;
			height: 8rem;
			cursor: pointer;
		}

.ball {
			display: none;
			position: relative;
			top: 2rem;
			font-size: 3rem;
		}
	</style>
	<script>
		window.onload = function() {
			var cups = document.querySelectorAll('.cup');
			var ball = document.querySelector('.ball');
			var winText = document.querySelector('#winText');
			var count = 0;

function shuffle() {
				cups.forEach(function(cup) {
					var randomOrder = Math.floor(Math.random() * 3);
					cup.style.order = randomOrder;
				});
			}

shuffle();

function reset() {
				cups.forEach(function(cup) {
					cup.addEventListener('click', reveal);
					cup.classList.remove('selected');
				});
				winText.textContent = '';
				count = 0;
				shuffle();
			}

cups.forEach(function(cup) {
				cup.addEventListener('click', reveal);
			});
		};
	</script>
</head>
<body>
	<h1>カップを選んでボールを探そう！</h1>
	<p>当たりのカップには🎾の絵文字が入っています。</p>
	<div id="gameArea">
		<div class="cup" id="cup1"><span class="ball">🎾</span></div>
		<div class="cup" id="cup2"></div>
		<div class="cup" id="cup3"></div>
	</div>
	<p id="winText"></p>
</body>
</html>