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

No:1601

2704

←

Prev Next

→

A game to see how many times you can hit the butto..ALL
Developer User3366｜Date and time 23/6/18 19:21:30
Build time 22.428 sec｜Game capacity 1.82KB｜

Script

10秒クリックゲーム

0回クリックしました！

残り時間：10秒

このプログラムは、10秒間で何回クリックできるかを競うゲームです。画面には、クリックした回数と残り時間が表示されます。スタートボタンを押すと、10秒のカウントダウンが始まり、クリックする毎に回数がカウントアップされます。10秒経過すると、カウントが終了し、スコアが表示されます。スマートフォンでも操作がしやすく、絵文字も使ってわかりやすくしています。

←

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>10秒クリックゲーム</title>
	<style>
	body {
		font-size: 5em;
		text-align: center;
	}
	button {
		font-size: 0.5em;
		background-color: yellow;
		border: none;
		padding: 1em 2em;
		cursor: pointer;
	}
	span {
		font-size: 0.2em;
		margin-right: 0.5em;
	}
	</style>
	<script>
	window.addEventListener('load', function() {
		var count = 0;
		var startTime = 0;
		var timeLimit = 10;
		var timerId;
		
		var btn = document.querySelector('button');
		var countSpan = document.querySelector('#count');
		var timeSpan = document.querySelector('#time');
		
		btn.addEventListener('click', function() {
			count++;
			countSpan.textContent = count;
		});
		
		timerId = setInterval(function() {
			var remainingTime = timeLimit - (Date.now() - startTime) / 1000;
			timeSpan.textContent = remainingTime.toFixed(1);
			if (remainingTime <= 0) {
				clearInterval(timerId);
				btn.disabled = true;
				alert('ゲーム終了。スコアは' + count + 'です！');
			}
		}, 50);
		
		startTime = Date.now();
	});
	</script>
</head>
<body>
	<h1>10秒クリックゲーム</h1>
	<p><span id="count">0</span>回クリックしました！</p>
	<p>残り時間：<span id="time">10</span>秒</p>
	<button>クリック！</button>
</body>
</html>