冒险游戏代码

13758623687 · 发表于 2024-7-26 11:17:53

@AI请生成一个冒险游戏代码

kaia · 发表于 2024-7-26 11:18:08

好的，让我们一起来做一个简单的文字冒险游戏吧！这个小游戏可以在网页上运行。我们会用到HTML、CSS和JavaScript。如果你还不了解这些也没关系，我会带你一步步完成。

1. 我们先准备HTML文件，创建一些基础结构，命名为`index.html`：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>冒险游戏</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="game">
<h1>欢迎来到冒险游戏！</h1>
<p id="story">你醒来发现自己身处一座神秘的森林。你可以做什么？</p>
<button onclick="chooseOption('A')" id="optionA">向左走</button>
<button onclick="chooseOption('B')" id="optionB">向右走</button>
</div>
<script src="script.js"></script>
</body>
</html>

复制代码

2. 然后我们写一个CSS文件来使我们的游戏看起来更好，命名为`styles.css`：

body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
text-align: center;
}
#game {
background-color: #fff;
padding: 2em;
margin: 2em auto;
border-radius: 10px;
width: 50%;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
button {
margin: 1em;
padding: 1em 2em;
font-size: 1em;
cursor: pointer;
}

复制代码

3. 最后我们来编写JavaScript文件，这将是游戏的逻辑核心，命名为`script.js`：

function chooseOption(option) {
let storyText = document.getElementById('story');
let optionA = document.getElementById('optionA');
let optionB = document.getElementById('optionB');
if (option === 'A') {
storyText.textContent = '你选择了向左走，你遇见了一只友好的小狐狸。你要和它交朋友还是继续前进？';
optionA.textContent = '交朋友';
optionB.textContent = '继续前进';
optionA.onclick = () => chooseOption('A1');
optionB.onclick = () => chooseOption('A2');
} else if (option === 'B') {
storyText.textContent = '你选择了向右走，你发现了一座古老的废墟。你要进入废墟还是绕过它？';
optionA.textContent = '进入废墟';
optionB.textContent = '绕过它';
optionA.onclick = () => chooseOption('B1');
optionB.onclick = () => chooseOption('B2');
} else if (option === 'A1') {
storyText.textContent = '你和小狐狸成了好朋友，它带你走出了森林。恭喜你成功了！';
optionA.style.display = 'none';
optionB.style.display = 'none';
} else if (option === 'A2') {
storyText.textContent = '你继续前进，但迷失在了森林里。游戏结束。';
optionA.style.display = 'none';
optionB.style.display = 'none';
} else if (option === 'B1') {
storyText.textContent = '你进入了废墟，发现了一座宝藏。你赢了！';
optionA.style.display = 'none';
optionB.style.display = 'none';
} else if (option === 'B2') {
storyText.textContent = '你绕过了废墟，但不小心掉进河里。游戏结束。';
optionA.style.display = 'none';
optionB.style.display = 'none';
}
}

复制代码

现在我们有一个非常基本的文字冒险游戏，简单易懂。你只需要创建这三个文件`index.html`, `styles.css`, `script.js`并放在同一个文件夹里，然后用浏览器打开`index.html`就可以开始你的冒险游戏了！希望你玩的开心，有问题随时问哦！