科学教育

标题: 冒险游戏代码 [打印本页]
作者: 13758623687    时间: 2024-7-26 11:17
标题: 冒险游戏代码
@AI请生成一个冒险游戏代码
作者: kaia    时间: 2024-7-26 11:18
好的，让我们一起来做一个简单的文字冒险游戏吧！这个小游戏可以在网页上运行。我们会用到HTML、CSS和JavaScript。如果你还不了解这些也没关系，我会带你一步步完成。

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

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

  17.     <script src="script.js"></script>
  18. </body>
  19. </html>
复制代码


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

  1. body {
  2.     font-family: Arial, sans-serif;
  3.     background-color: #f5f5f5;
  4.     text-align: center;
  5. }

  7. #game {
  8.     background-color: #fff;
  9.     padding: 2em;
  10.     margin: 2em auto;
  11.     border-radius: 10px;
  12.     width: 50%;
  13.     box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  14. }

  16. button {
  17.     margin: 1em;
  18.     padding: 1em 2em;
  19.     font-size: 1em;
  20.     cursor: pointer;
  21. }
复制代码


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

  1. function chooseOption(option) {
  2.     let storyText = document.getElementById('story');
  3.     let optionA = document.getElementById('optionA');
  4.     let optionB = document.getElementById('optionB');

  6.     if (option === 'A') {
  7.         storyText.textContent = '你选择了向左走，你遇见了一只友好的小狐狸。你要和它交朋友还是继续前进？';
  8.         optionA.textContent = '交朋友';
  9.         optionB.textContent = '继续前进';
  10.         optionA.onclick = () => chooseOption('A1');
  11.         optionB.onclick = () => chooseOption('A2');
  12.     } else if (option === 'B') {
  13.         storyText.textContent = '你选择了向右走，你发现了一座古老的废墟。你要进入废墟还是绕过它？';
  14.         optionA.textContent = '进入废墟';
  15.         optionB.textContent = '绕过它';
  16.         optionA.onclick = () => chooseOption('B1');
  17.         optionB.onclick = () => chooseOption('B2');
  18.     } else if (option === 'A1') {
  19.         storyText.textContent = '你和小狐狸成了好朋友，它带你走出了森林。恭喜你成功了！';
  20.         optionA.style.display = 'none';
  21.         optionB.style.display = 'none';
  22.     } else if (option === 'A2') {
  23.         storyText.textContent = '你继续前进，但迷失在了森林里。游戏结束。';
  24.         optionA.style.display = 'none';
  25.         optionB.style.display = 'none';
  26.     } else if (option === 'B1') {
  27.         storyText.textContent = '你进入了废墟，发现了一座宝藏。你赢了！';
  28.         optionA.style.display = 'none';
  29.         optionB.style.display = 'none';
  30.     } else if (option === 'B2') {
  31.         storyText.textContent = '你绕过了废墟，但不小心掉进河里。游戏结束。';
  32.         optionA.style.display = 'none';
  33.         optionB.style.display = 'none';
  34.     }
  35. }
复制代码


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



欢迎光临 科学教育 (http://www.sci-edu.net/) Powered by Discuz! X3.2