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

No:148

230

←

Prev Next

→

Guess the slightest difference in color
Developer User2587｜Date and time 23/5/29 1:57:05
Build time 44.105 sec｜Game capacity 1.836KB｜

Script

game of chance similar to rock, paper scissors, where the different hand gestures symbolize a color on a white background

Three color boxes are shown. Only one of them has a slightly different color.、Guess what it is.

←

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>
</head>
<body>
	<h1>色当てゲーム</h1>
	<p>3つのカラーボックスが表示されます。そのうち1つだけ微妙に色が異なるので、それを当ててください。</p>
	<div id="colors">
		<div id="box1" class="box"></div>
		<div id="box2" class="box"></div>
		<div id="box3" class="box"></div>
	</div>
	<button onclick="checkAnswer()">答えをチェック</button>

// 正解のボックスをランダムに選択する
		var answer = Math.floor(Math.random() * 3) + 1;

function checkAnswer() {
			// 選択されたボックスのIDを取得する
			var selectedBoxId = "";
			var boxes = document.getElementsByClassName("box");
			for (var i = 0; i < boxes.length; i++) {
				if (boxes[i].style.backgroundColor === "rgb(255, 255, 254)") {
					selectedBoxId = boxes[i].id;
					break;
				}
			}

// 正解かどうかを判定する
			if (selectedBoxId === "box" + answer) {
				alert("正解！");
			} else {
				alert("不正解…　もう一度挑戦してみてね！");
			}

// ボックスの色を再設定する
			document.getElementById("box1").style.backgroundColor = "rgb(255, 255, 255)";
			document.getElementById("box2").style.backgroundColor = "rgb(255, 255, 254)";
			document.getElementById("box3").style.backgroundColor = "rgb(255, 255, 255)";
			answer = Math.floor(Math.random() * 3) + 1; // 正解のボックスを再度ランダムに選択する
		}
	</script>
</body>
</html>