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

No:3464

4522

←

Prev Next

→

Tap a random number from 1 to 10 in sequence each ..ALL
Developer User3707｜Date and time 23/6/25 6:02:05
Build time 26.352 sec｜Game capacity 2.426KB｜

Script

1から10までランダムに並んだ数をタップしよう！

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>ランダムタップゲーム</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #eee;
			font-family: sans-serif;
			text-align: center;
		}
		h1 {
			margin-top: 50px;
			font-size: 30px;
		}
		#countdown {
			color: #666;
			margin-top: 20px;
			font-size: 20px;
		}
		#numbers {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin-top: 50px;
		}
		.number {
			width: 100px;
			height: 100px;
			margin: 10px;
			background-color: #fff;
			color: #666;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 40px;
			cursor: pointer;
			transition: all 0.3s;
		}
		.number:hover {
			transform: scale(1.1);
			box-shadow: 0px 0px 10px #999;
		}
		.number.clicked {
			background-color: #666;
			color: #fff;
		}
	</style>
	<script>
		window.onload = function() {
			var numbers = document.querySelectorAll('.number');
			var countdown = document.getElementById('countdown');
			var count = 1;
			var timer;

// 数字をランダムに並び替える
			for (var i = 0; i < numbers.length; i++) {
				numbers[i].innerText = Math.floor(Math.random() * 10) + 1;
			}

// クリックしたときの処理
			function clickNumber() {
				if (this.innerText == count) {
					this.classList.add('clicked');
					count++;
				}
				if (count == 11) {
					clearInterval(timer);
					countdown.innerText = 'Finish!';
				}
			}

// カウントダウンの処理
			var time = 60;
			countdown.innerText = time;
			timer = setInterval(function() {
				time--;
				countdown.innerText = time;
				if (time == 0) {
					clearInterval(timer);
					countdown.innerText = 'Time Up!';
				}
			}, 1000);

// クリックイベントの設定
			for (var i = 0; i < numbers.length; i++) {
				numbers[i].addEventListener('click', clickNumber);
			}
		}
	</script>
</head>
<body>
	<h1>1から10までランダムに並んだ数をタップしよう！</h1>
	<div id="countdown"></div>
	<div id="numbers">
		<div class="number"></div>
		<div class="number"></div>
		<div class="number"></div>
		<div class="number"></div>
		<div class="number"></div>
		<div class="number"></div>
		<div class="number"></div>
		<div class="number"></div>
		<div class="number"></div>
		<div class="number"></div>
	</div>
</body>
</html>