A game to see how many times you can hit the button in a row in 10 seconds.'s game

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

No:1600

3009

←

Prev Next

→

A game to see how many times you can hit the butto..ALL
Developer User3366｜Date and time 23/6/18 19:20:52
Build time 19.716 sec｜Game capacity 1.648KB｜

Script

💢

このゲームは、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>
	* {
		margin: 0;
		padding: 0;
	}
	body {
		background-color: #f9f7e8;
	}
	.container {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.btn {
		width: 10rem;
		height: 10rem;
		border-radius: 50%;
		background-color: #f9690e;
		color: white;
		font-size: 3rem;
		line-height: 10rem;
		text-align: center;
		cursor: pointer;
	}
	.btn:hover {
		background-color: #f3722c;
	}
	.result {
		margin-top: 2rem;
		font-size: 3rem;
		text-align: center;
	}
	</style>
</head>
<body>
	<div class="container">
		<div class="btn" onclick="count()">💢</div>
		<div class="result"></div>
	</div>
	<script>
		var count = 0;
		var timer;

function count() {
			count++;
			document.querySelector('.btn').innerHTML = count;
		}

timer = setTimeout(function() {
			document.querySelector('.btn').removeAttribute('onclick');
			document.querySelector('.btn').style.backgroundColor = 'grey';
			document.querySelector('.btn').style.cursor = 'default';
			document.querySelector('.result').innerHTML = '10秒間の連打数：' + count;
		}, 10000);
	</script>
</body>
</html>