アップデートゲーム

開発者ひさしは、スクリーンショットをアップデートする必要があります。でも、彼はあまりにも怠惰で、自分で更新しようとしません。

あなたの助けが必要です！

このゲームは、ボタンをクリックしてカウントするだけのシンプルなものです。カウントが一定数に達すると、スクリーンショットが更新されたことになり、ボタンが無効になります。絵文字は使用していませんが、スタイルや文章の見た目を調整し、見やすくしたつもりです。スマートフォンでも遊べるように、ボタンの大きさや配置を調整しています。

←

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>アプデゲー</title>
	<style>
		body {
			font-size: 36px;
			text-align: center;
		}
		button {
			padding: 20px;
			margin: 20px;
			border-radius: 10px;
			background-color: #ff9900;
			color: #ffffff;
			font-size: 24px;
			border: none;
			box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
			cursor: pointer;
		}
		button:hover {
			background-color: #ff6600;
		}
	</style>
</head>
<body>
	<h1>アップデートゲーム</h1>
	<p>開発者ひさしは、スクリーンショットをアップデートする必要があります。でも、彼はあまりにも怠惰で、自分で更新しようとしません。</p>
	<p>あなたの助けが必要です！</p>
	<button id="updateBtn">スクリーンショットをアップデートする！</button>
	<p id="status"></p>
	<script>
		var count = 0;
		var updateBtn = document.getElementById("updateBtn");
		var status = document.getElementById("status");
		updateBtn.addEventListener("click", function() {
			count++;
			if(count <= 5) {
				status.textContent = "まだだ！もっと押して！";
			}else if(count > 5 && count <= 10) {
				status.textContent = "もう少し頑張れ！もう" + (10-count) + "回押せ！";
			}else if(count > 10 && count < 20) {
				status.textContent = "あと" + (20-count) + "回！もうちょっとだ！";
			}else if(count == 20) {
				status.textContent = "やった！アップデート完了！";
				updateBtn.disabled = true;
			}
		});
	</script>
</body>
</html>