ある日、主人公は森の中を歩いていました。
突然、目の前に巨大なドラゴンが現れました。
主人公はどうしますか?
ある日、主人公は森の中を歩いていました。
突然、目の前に巨大なドラゴンが現れました。
主人公はどうしますか?
// 以下が実際のプログラムです
<!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>
// ジョークは本アプリには含まれていません。