テキストクエスト

ようこそテキストクエストへ！あなたは今、不思議な世界に迷い込んでしまったようです。この世界には多くのシナリオが存在しています。どのシナリオに進むか選択してください。
あなたは、森の中を歩いていました。突然、大きな熊が現れてあなたを襲ってきました。あなたはどうしますか？
熊と戦います
逃げます
以下が実際のプログラムです。

<!DOCTYPE html>
<html>
<head>
	<title>テキストクエスト</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style type="text/css">
		body {
			background-color: #f2f2f2;
			font-family: sans-serif;
			margin: 0;
		}

		h1 {
			color: #333;
		}

		.container {
			max-width: 800px;
			margin: 0 auto;
			padding: 20px;
			background-color: #fff;
			box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
			border-radius: 5px;
			margin-top: 30px;
		}

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

		button {
			background-color: #008CBA;
			color: #fff;
			border: none;
			padding: 10px 20px;
			font-size: 16px;
			border-radius: 5px;
			cursor: pointer;
			transition: all 0.3s ease;
		}

		button:hover {
			background-color: #004d60;
			box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
		}

		.choices {
			display: flex;
			flex-wrap: wrap;
		}

		.choice {
			width: 48%;
			background-color: #f2f2f2;
			padding: 10px;
			margin-bottom: 10px;
			border-radius: 5px;
			box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
			cursor: pointer;
			transition: all 0.3s ease;
		}

		.choice:hover {
			background-color: #e2e2e2;
			box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
		}

		.choice p {
			margin: 0;
			font-size: 16px;
			line-height: 1.3;
		}

		.hidden {
			display: none;
		}

		span {
			font-weight: bold;
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>テキストクエスト</h1>
		<p>ようこそテキストクエストへ！あなたは今、不思議な世界に迷い込んでしまったようです。この世界には多くのシナリオが存在しています。どのシナリオに進むか選択してください。</p>
		<div id="scenario1" class="scenario">
			<p>あなたは、森の中を歩いていました。突然、大きな熊が現れてあなたを襲ってきました。あなたはどうしますか？</p>
			<div class="choices">
				<div class="choice" onclick="scenario1Choice1()">
					<p>熊と戦います</p>
				</div>
				<div class="choice" onclick="scenario1Choice2()">
					<p>逃げます</p>
				</div>
			</div>
		</div>
		<div id="scenario1Result1" class="hidden">
			<p>あなたは熊と戦い、勝利しました！おめでとうございます！</p>
			<button onclick="startOver()">最初に戻る</button>
		</div>
		<div id="scenario1Result2" class="hidden">
			<p>あなたは熊から逃げることができました。しかし、目の前には洞窟があり、そこには何が待っているのかわかりません。どうしますか？</p>
			<div class="choices">
				<div class="choice" onclick="scenario2Choice1()">
					<p>洞窟に入ります</p>
				</div>
				<div class="choice" onclick="scenario2Choice2()">
					<p>洞窟を避けて、森を進みます</p>
				</div>
			</div>
		</div>
		<div id="scenario2Result1" class="hidden">
			<p>あなたは洞窟に入りました。そこには、宝物がたくさんありました！おめでとうございます！！</p>
			<button onclick="startOver()">最初に戻る</button>
		</div>
		<div id="scenario2Result2" class="hidden">
			<p>あなたは森を進んでいました。しかし、道に迷ってしまいました。あなたは、絶望的な気持ちになります。残念でした。</p>
			<button onclick="startOver()">最初に戻る</button>
		</div>
	</div>

	<script type="text/javascript">
		function scenario1Choice1() {
			document.getElementById("scenario1").classList.add("hidden");
			document.getElementById("scenario1Result1").classList.remove("hidden");
		}

		function scenario1Choice2() {
			document.getElementById("scenario1").classList.add("hidden");
			document.getElementById("scenario1Result2").classList.remove("hidden");
		}

		function scenario2Choice1() {
			document.getElementById("scenario1Result2").classList.add("hidden");
			document.getElementById("scenario2Result1").classList.remove("hidden");
		}

		function scenario2Choice2() {
			document.getElementById("scenario1Result2").classList.add("hidden");
			document.getElementById("scenario2Result2").classList.remove("hidden");
		}

		function startOver() {
			document.getElementById("scenario1Result1").classList.add("hidden");
			document.getElementById("scenario1Result2").classList.add("hidden");
			document.getElementById("scenario2Result1").classList.add("hidden");
			document.getElementById("scenario2Result2").classList.add("hidden");
			document.getElementById("scenario1").classList.remove("hidden");
		}
	</script>
</body>
</html>

ジョーク: プレイヤーが失敗したとき、メッセージが表示される前に、「うーん、これは想定されていませんでした。まあ、誰でも失敗することがあります」というコメントが表示されます。