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

No:8

608

←

Prev Next

→

Timing game
Developer User1006｜Date and time 23/4/19 22:45:13
Build time unknown sec｜Game capacity 2.21KB｜

Script

Timing game

←

Prev　Next

→ 　

Back　

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

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: #f0f0f0;
			font-family: Arial, sans-serif;
			text-align: center;
			margin: 0;
			padding: 0;
		}

h1{
			font-size: 36px;
			margin-top: 50px;
			margin-bottom: 30px;
		}

#timer{
			font-size: 72px;
			margin-bottom: 50px;
			color: #ff0000;
		}

#startButton{
			padding: 20px;
			border-radius: 10px;
			background-color: #4CAF50;
			color: #ffffff;
			font-size: 24px;
			cursor: pointer;
		}

#startButton:hover{
			background-color: #3e8e41;
		}

#target{
			width: 200px;
			height: 200px;
			margin: auto;
			background-color: #2196F3;
			border-radius: 50%;
			margin-top: 50px;
			cursor: pointer;
		}

#target:hover{
			background-color: #0c7cd5;
			box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
		}
	</style>
</head>
<body>
	<h1>タイミングゲーム</h1>
	<div id="timer">0</div>
	<button id="startButton">START</button>
	<div id="target"></div>

// クリックされた時の処理
		function onClick(){
			var endTime = new Date();
			var timeDiff = endTime - startTime;
			score = Math.floor(1000 / timeDiff);
			clearInterval(timerId);
			alert("スコア: " + score);
			startButton.disabled = false;
			target.removeEventListener("click", onClick);
			target.style.backgroundColor = "#2196F3";
		}

// STARTボタンがクリックされた時の処理
		function startGame(){
			score = 0;
			timerId = setInterval(updateTimer, 10);
			startTime = new Date();
			target.style.backgroundColor = "#ff0000";
			target.addEventListener("click", onClick);
			startButton.disabled = true;
		}

// タイマーの更新
		function updateTimer(){
			var currentTime = new Date();
			var diffTime = currentTime - startTime;
			document.getElementById("timer").innerHTML = (diffTime / 1000).toFixed(2);
		}

var startButton = document.getElementById("startButton");
		startButton.addEventListener("click", startGame);
	</script>
</body>
</html>