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

No:3041

2705

←

Prev Next

→

The gauge is moving and stops perfectly.
Developer User3494｜Date and time 23/6/23 13:32:11
Build time 26.832 sec｜Game capacity 2.888KB｜

Script

ピッタリ止めゲーム

←

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 {
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
			background-color: #f3f3f3;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			min-height: 100vh;
		}

h1 {
			margin: 0;
			font-size: 2rem;
			color: #333;
			margin-bottom: 1rem;
		}

.game-container {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

.gauge-container {
			margin-bottom: 2rem;
			background-color: #e0e0e0;
			border-radius: 4px;
			height: 10px;
			width: 200px;
			position: relative;
		}

.gauge-bar {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			background-color: #4caf50;
			border-radius: 4px;
			width: 50%;
			transition: width 1s linear;
		}

.button-container {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
		}

.button {
			background-color: #4caf50;
			color: #fff;
			font-size: 1.2rem;
			border-radius: 4px;
			padding: 0.5rem 1rem;
			margin-right: 0.5rem;
			cursor: pointer;
			transition: background-color 0.2s ease-in-out;
		}

.button:hover {
			background-color: #388e3c;
		}

.reset-button {
			background-color: #f44336;
		}

.reset-button:hover {
			background-color: #d32f2f;
		}
	</style>
</head>
<body>
	<h1>ピッタリ止めゲーム</h1>
	<div class="game-container">
		<div class="gauge-container">
			<div class="gauge-bar"></div>
		</div>
		<div class="button-container">
			<button class="button start-button">スタート</button>
			<button class="button reset-button">リセット</button>
		</div>
	</div>

function resetGame() {
			clearInterval(intervalId);
			gaugeBar.style.width = '0%';
			resetButton.style.display = 'none';
			startButton.addEventListener('click', startGame);
		}

function gameOver() {
			clearInterval(intervalId);
			alert('ゲームオーバー！ ゲージを止められませんでした。');
			resetGame();
		}

startButton.addEventListener('click', startGame);
		resetButton.addEventListener('click', resetGame);
	</script>
</body>
</html>