形を当てるゲーム

以下の図形の形と色を当ててください。
形と色を選んで、「回答する」をクリックしてください。
以下が形を当てるゲームの実装例です。このゲームは、ランダムに生成された図形をユーザーが当てるもので、正解するごとに新しい図形が生成されます。図形は円、三角形、四角形のいずれかで、色は赤、青、緑、黄色のいずれかで表示されます。

注意：evalや他のサイトへの遷移、リダイレクトは使用せず、セキュリティ脆弱性に配慮しています。

```
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>形を当てるゲーム</title>
	<style>
		body {
			font-family: Arial, sans-serif;
			text-align: center;
		}

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

		p {
			font-size: 18px;
			margin-bottom: 20px;
		}

		#canvas {
			width: 500px;
			height: 500px;
			margin: auto;
			margin-bottom: 30px;
			border: solid 3px black;
		}

		button {
			font-size: 22px;
			padding: 10px 20px;
			background-color: #3399FF;
			color: white;
			border: none;
			border-radius: 5px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>形を当てるゲーム</h1>
	<p>以下の図形の形と色を当ててください。</p>
	<canvas id="canvas"></canvas>
	<p>形と色を選んで、「回答する」をクリックしてください。</p>
	<div>
		<select id="shape" name="shape">
			<option value="circle">円</option>
			<option value="triangle">三角形</option>
			<option value="rectangle">四角形</option>
		</select>
		<select id="color" name="color">
			<option value="red">赤</option>
			<option value="blue">青</option>
			<option value="green">緑</option>
			<option value="yellow">黄色</option>
		</select>
		<button id="answerBtn" onclick="checkAnswer()">回答する</button>
	</div>
	<script>
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		var shape, color;

		// ランダムな形と色を生成する関数
		function generateShapeAndColor() {
			var shapes = ["circle", "triangle", "rectangle"];
			var shapeIndex = Math.floor(Math.random()*shapes.length);
			shape = shapes[shapeIndex];

			var colors = ["red", "blue", "green", "yellow"];
			var colorIndex = Math.floor(Math.random()*colors.length);
			color = colors[colorIndex];
		}

		// 図形を描画する関数
		function drawShape() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			switch(shape) {
				case "circle":
					ctx.beginPath();
					ctx.arc(canvas.width/2, canvas.height/2, 100, 0, 2*Math.PI);
					ctx.fillStyle = color;
					ctx.fill();
					break;
				case "triangle":
					ctx.beginPath();
					ctx.moveTo(canvas.width/2, canvas.height/2 - 100);
					ctx.lineTo(canvas.width/2 - 100, canvas.height/2 + 100);
					ctx.lineTo(canvas.width/2 + 100, canvas.height/2 + 100);
					ctx.fillStyle = color;
					ctx.fill();
					break;
				case "rectangle":
					ctx.fillStyle = color;
					ctx.fillRect(canvas.width/2 - 100, canvas.height/2 - 100, 200, 200);
					break;
			}
		}

		// 回答をチェックする関数
		function checkAnswer() {
			var userShape = document.getElementById("shape").value;
			var userColor = document.getElementById("color").value;
			if(userShape == shape && userColor == color) {
				alert("正解！");
				generateShapeAndColor();
				drawShape();
			} else {
				alert("不正解。形と色をもう一度確認してください。");
			}
		}

		generateShapeAndColor();
		drawShape();
	</script>
</body>
</html>
```