能给出一个具体的例子吗
时间: 2024-03-23 19:43:24 浏览: 10
当然可以!这是一个简单的多级故事展示网页的例子,它以“冒险”为主题,用户需要在不同的决策点上进行选择,以决定他们的故事走向何方。
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>冒险之旅</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="story">
<h1>冒险之旅</h1>
<p>你正在森林里漫步,突然发现你迷路了。你会怎么做?</p>
<button id="left">向左走</button>
<button id="right">向右走</button>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS 代码:
```css
body {
font-family: Arial, sans-serif;
background-color: #F0F0F0;
text-align: center;
}
#story {
margin: 100px auto;
width: 500px;
background-color: #FFF;
border: 2px solid #CCC;
padding: 20px;
box-shadow: 0px 0px 10px #CCC;
}
h1 {
font-size: 36px;
margin-bottom: 20px;
}
p {
font-size: 24px;
margin-bottom: 20px;
}
button {
font-size: 18px;
padding: 10px 20px;
margin-right: 10px;
background-color: #008CBA;
color: #FFF;
border: none;
border-radius: 5px;
cursor: pointer;
}
```
JavaScript 代码:
```js
var story = document.getElementById("story");
var leftButton = document.getElementById("left");
var rightButton = document.getElementById("right");
function leftPath() {
story.innerHTML = "<h1>你走进了一个洞穴</h1><p>你看到了两个洞口,你会选择哪一个?</p><button id='left'>左边的洞口</button><button id='right'>右边的洞口</button>";
leftButton = document.getElementById("left");
rightButton = document.getElementById("right");
leftButton.onclick = function() {
story.innerHTML = "<h1>你遇到了一个巨大的怪物</h1><p>你会怎么做?</p><button id='attack'>攻击它</button><button id='run'>逃跑</button>";
leftButton = document.getElementById("attack");
rightButton = document.getElementById("run");
leftButton.onclick = function() {
story.innerHTML = "<h1>你打败了怪物!</h1><p>你发现了一扇门,你会怎么做?</p><button id='open'>打开门</button><button id='leave'>离开这里</button>";
leftButton = document.getElementById("open");
rightButton = document.getElementById("leave");
leftButton.onclick = function() {
story.innerHTML = "<h1>你成功找到了出口!</h1><p>恭喜你完成了这次冒险!</p>";
}
rightButton.onclick = function() {
story.innerHTML = "<h1>你离开了这里!</h1><p>好运!</p>";
}
}
rightButton.onclick = function() {
story.innerHTML = "<h1>你失败了,怪物追上了你!</h1><p>游戏结束!</p>";
}
}
rightButton.onclick = function() {
story.innerHTML = "<h1>你掉进了陷阱!</h1><p>游戏结束!</p>";
}
}
function rightPath() {
story.innerHTML = "<h1>你走到了河边</h1><p>你会怎么做?</p><button id='swim'>游泳过去</button><button id='build'>建造一条船</button>";
leftButton = document.getElementById("swim");
rightButton = document.getElementById("build");
leftButton.onclick = function() {
story.innerHTML = "<h1>你被河流冲走了!</h1><p>游戏结束!</p>";
}
rightButton.onclick = function() {
story.innerHTML = "<h1>你成功穿过了河流!</h1><p>你发现了一扇门,你会怎么做?</p><button id='open'>打开门</button><button id='leave'>离开这里</button>";
leftButton = document.getElementById("open");
rightButton = document.getElementById("leave");
leftButton.onclick = function() {
story.innerHTML = "<h1>你成功找到了出口!</h1><p>恭喜你完成了这次冒险!</p>";
}
rightButton.onclick = function() {
story.innerHTML = "<h1>你离开了这里!</h1><p>好运!</p>";
}
}
}
leftButton.onclick = function() {
leftPath();
}
rightButton.onclick = function() {
rightPath();
}
```
这个例子中,用户最初会看到一个提示,提示他们选择向左或向右走。然后,根据用户的选择,他们将被引导到不同的故事路径上。在每个决策点上,用户将被提示做出选择,并根据他们的选择更新页面内容。
希望这个例子对您有所帮助!