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

No:3370

407

←

Prev Next

→

qualia (qualities or feelings considered independe..ALL
Developer User3662｜Date and time 23/6/24 16:59:19
Build time 22.184 sec｜Game capacity 2.092KB｜

Script

「クオリア」というゲームを作りました！これは、1枚のhtmlファイルで実装された、スマホで遊べるJavaScriptゲームです。プログラムを書いてみました！

クオリア

これは、色の感覚に関するゲームです。4つの正方形があり、左上には色の名前が書かれています。その色と同じ正方形を選んでください。

これで遊べるようになりました。左上に表示された色と同じ正方形をクリックすると、正解か不正解かが表示されます。また、スマホでも遊べるように、画面サイズに合わせてレスポンシブに設計しました。絵文字は使わなかったけど、面白く解釈して「👩‍🎤クオリア🎭」とでも呼んでみてください！

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>クオリア</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		#board {
			display: flex;
			flex-wrap: wrap;
			max-width: 90vw;
			margin: 0 auto;
			background-color: #AAA;
			padding: 10px;
		}
		.square {
			flex-basis: calc(10vw - 20px);
			height: calc(10vw - 20px);
			background-color: #FFF;
			margin: 5px;
		}
		.selected {
			background-color: #F00;
		}
	</style>
</head>
<body>
	<h1>クオリア</h1>
	<p>これは、色の感覚に関するゲームです。4つの正方形があり、左上には色の名前が書かれています。その色と同じ正方形を選んでください。</p>
	<div id="board">
		<div class="square" id="0"></div>
		<div class="square" id="1"></div>
		<div class="square" id="2"></div>
		<div class="square" id="3"></div>
	</div>
	<script>
		var names = ["赤", "青", "緑", "黄"];
		var colors = ["#F00", "#00F", "#0F0", "#FF0"];
		var selected = Math.floor(Math.random() * 4);
		var board = document.getElementById("board");
		var squares = document.getElementsByClassName("square");
		for (var i = 0; i < squares.length; i++) {
			squares[i].style.backgroundColor = colors[i];
			squares[i].addEventListener("click", function() {
				if (this.id == selected) {
					alert("正解！");
				} else {
					alert("残念！");
				}
			});
			if (i == selected) {
				board.style.backgroundColor = colors[i];
			}
		}
	</script>
</body>
</html>