ノベルアプリ

ある日、主人公は森の中を歩いていました。
突然、目の前に巨大なドラゴンが現れました。
主人公はどうしますか？
// 以下が実際のプログラムです

<!DOCTYPE html>
<html>
<head>
	<title>ノベルアプリ</title>
	<style type="text/css">
		body {
			font-family: Arial, Helvetica, sans-serif;
			margin: 0;
			padding: 0;
		}

		.container {
			width: 80%;
			margin: 0 auto;
			padding: 20px;
		}

		h1 {
			text-align: center;
		}

		.story {
			text-align: justify;
			margin-bottom: 20px;
		}

		.choices {
			text-align: center;
			margin-top: 20px;
		}

		button {
			margin: 10px;
			padding: 10px 20px;
			font-size: 16px;
			border-radius: 5px;
			background-color: #007bff;
			color: #fff;
			border: none;
			cursor: pointer;
		}

		button:hover {
			background-color: #0062cc;
		}

	</style>
</head>
<body>
	<div class="container">
		<h1>ノベルアプリ</h1>
		<div class="story" id="story">
			<p>ある日、主人公は森の中を歩いていました。</p>
			<p>突然、目の前に巨大なドラゴンが現れました。</p>
			<p>主人公はどうしますか？</p>
		</div>
		<div class="choices" id="choices">
			<button onclick="storyOption1()">ドラゴンに立ち向かう</button>
			<button onclick="storyOption2()">逃げる</button>
		</div>
	</div>

	<script type="text/javascript">

		function storyOption1() {
			var story = document.getElementById("story");
			story.innerHTML = '<p>主人公は勇敢に立ち向かい、ドラゴンに剣を振りかざします。</p><p>しかし、ドラゴンの攻撃は強力で、主人公は敗れてしまいました。</p><p>GAME OVER</p>';

			var choices = document.getElementById("choices");
			choices.innerHTML = '';
		}

		function storyOption2() {
			var story = document.getElementById("story");
			story.innerHTML = '<p>主人公は必死に逃げます。</p><p>逃げる途中で、主人公は見知らぬ洞窟に迷い込んでしまいました。</p><p>次はどうする？</p>';

			var choices = document.getElementById("choices");
			choices.innerHTML = '<button onclick="storyOption3()">洞窟を調べる</button><button onclick="storyOption4()">また逃げる</button>';
		}

		function storyOption3() {
			var story = document.getElementById("story");
			story.innerHTML = '<p>洞窟を調べると、中には宝箱がありました。</p><p>主人公は宝箱を開ける？</p>';

			var choices = document.getElementById("choices");
			choices.innerHTML = '<button onclick="alert(\'宝箱からは毒ガスが出てきました。主人公は死亡しました。\')">開ける</button><button onclick="storyOption4()">開けない</button>';
		}

		function storyOption4() {
			var story = document.getElementById("story");
			story.innerHTML = '<p>主人公は再び森に戻って逃げます。</p><p>しかし、森は見知らぬ場所で、帰る道が分からなくなってしまいました。</p><p>GAME OVER</p>';

			var choices = document.getElementById("choices");
			choices.innerHTML = '';
		}

	</script>
</body>
</html>

// ジョークは本アプリには含まれていません。