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

No:3415

3880

←

Prev Next

→

the unconscious
Developer anonymous｜Date and time 70/1/1 9:37:30
Build time unknown sec｜Game capacity 2.25KB｜

Script

に反応するリアクションゲームアプリを作成しました。以下がプログラムです。

反応ゲーム

ボタンが押されたらなるべく早く反応しよう！

このアプリは、スタートボタンを押した後、ランダムな時間が経過した後にボタンが押せるようになります。押せるようになったらなるべく早くボタンを押して、タイムを計測します。また、一定時間内にボタンを押せなかった場合はタイムオーバーとなります。スマホでも操作がしやすいようにボタンを大きくしているのと、絵文字を使用しています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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{
			text-align: center;
		}
		h1{
			font-size: 3em;
			margin: 50px;
		}
		button{
			font-size: 2em;
			padding: 20px 40px;
			margin: 50px;
			border-radius: 10px;
			border: none;
			background-color: #4CAF50;
			color: white;
		}
		button:hover{
			background-color: #3E8E41;
		}
	</style>
</head>
<body>
	<h1>反応ゲーム</h1>
	<p>ボタンが押されたらなるべく早く反応しよう！</p>
	<button id="start">スタート</button>
	<button id="end" style="display: none;">終了</button>
	<p id="time" style="font-size: 5em;">0</p>
	<script>
		var startTime;
		var endTime;
		var timer;

function start(){
			startTime = Date.now();
			document.getElementById("start").style.display = "none";
			document.getElementById("end").style.display = "inline";
			document.getElementById("time").textContent = "0";
			timer = setTimeout(showResult, Math.random()*2000 + 1000);
		}

function showResult(){
			alert("押せ！");
			endTime = Date.now();
			var timeResult = (endTime - startTime) / 1000;
			document.getElementById("time").textContent = timeResult;
			document.getElementById("end").style.display = "none";
			document.getElementById("start").style.display = "inline";
		}

document.getElementById("start").addEventListener("click", start);

document.getElementById("end").addEventListener("click", function(){
			clearTimeout(timer);
			alert("タイムオーバー！");
			document.getElementById("end").style.display = "none";
			document.getElementById("start").style.display = "inline";
		});
	</script>
</body>
</html>