用Javascript制作游戏，有点像视觉小说
我是JS初学者。我想做一个视觉新颖的游戏。就像你在法庭上做律师的游戏一样。在这个游戏中，你遇到人们，而不是战斗，你与他们交谈。在相遇中，最上面的是一幅图像。此图像将根据您的响应而改变。它下面有一个文本框，显示当前文本。以及下面的两个(或更多)选项框。你有一个耐心表(就像一个健康表)，它有100分。取决于你选择的选项，你会失去或获得耐心。你用完了你就输了。目标是使用正确的反应，并在不失去所有耐心的情况下达到对话的终点。根据您的选择，将有不同的对话框。所以我在准备一个对话框树。
对如何编码有什么想法吗？我很难弄清楚在哪里储存所有的文本和选项。以及如何访问文本和选项。
以下是文本和选项的示例。一开始，我尝试将文本放入对象中。sales1是介绍性文本。如果选择opt1，sales2文本将显示在屏幕上。如果选择opt2，sales3文本将显示在屏幕上。
const sales1 ={ action：“查德推销员想谈谈！”，opt1：“告诉他你不感兴趣”，opt2：“听他说完”}；
const sales2 ={ action：“他对此有反驳！”“先生，像您这样有品位的人需要这辆车！”，opt1：“我们甚至不在经销店！”，opt2：“噢，一辆新车”}；
const sales3 ={ action：“Ssssoooooooo，您有什么样的电视服务？”，opt1：“告诉他房东付钱”，opt2：“告诉他你不看太多电视”}；
@font-face {
font-family: "Game Over Cre";
src: url(fonts/gameovercre1.ttf);
font-style: normal;
font-weight: 300;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Game Over Cre", sans-serif;
font-size: 40px;
}
body {
background: black;
color: white;
}
#image-box {
border: 4px solid white;
height: 500px;
width: 60%;
margin: 10px auto;
align-items: center;
display: flex;
justify-content: center;
}
#opponent {
height: 400px;
}
#text-box {
border: 4px solid white;
height: 150px;
width: 60%;
margin: 10px auto;
padding: 20px;
}
#options {
display: flex;
width: 60%;
/* background: gray; */
margin: auto;
flex-wrap: wrap;
justify-content: space-between;
}
#option-1, #option-2, #option-3, #option-4 {
height: 100px;
width: 49.5%;
border: 4px solid white;
margin-bottom: 10px;
font-size: 35px;
padding: 10px;
}
#option-1:hover, #option-2:hover, #option-3:hover, #option-4:hover {
background: white;
color: black;
}<body>
<section class="main-hub">
<div id="image-box">
<img id="opponent" src="img/salesman-chad.png">
</div>
<div id="text-box">
<h1 id="action-text">Salesman Chad wants to talk!</h1>
</div>
<div id="options">
<div id="option-1">Tell him you're not interested</div>
<div id="option-2">Hear him out</div>
<!-- <div id="option-3"></div>
<div id="option-4"></div> -->
</div>
</section>
<script src="main.js"></script>
</body>
回答 2
Stack Overflow用户
发布于 2020-09-19 21:13:36
您可以将数据结构从简单的opt1:sometext扩展到opt1:{text:sometext, nextpoint:2}，这样，您就可以以相对简单的方式显示和遍历您的新游戏。您只需要从这里继续执行JSON即可。
使用代码示例，尝试在下面玩一个迷你版本的游戏！
const sales = [
{
action: "Salesman Chad wants to talk!",
opt1: {
text: "Tell him you're not interested",
nextpoint: 1,
},
opt2: {
text: "Hear him out",
nextpoint: 2,
},
},
{
action: "He has a rebuttal for that! 'Sir, a classy man like you needs this car!'",
opt1: {
text: "We're not even at a dealership!",
nextpoint: 0,
},
opt2: {
text: "Ooo a new car",
nextpoint: 2,
}
},
{
action: "Ssssoooooooo, what kind of TV service do you have?",
opt1: {
text: "Tell him your landlord pays for it",
nextpoint: 1,
},
opt2: {
text: "Tell him you don't watch much TV",
nextpoint: 0,
}
}
];
function applyPoint(next) {
const point = sales[next];
$('#action-text').text(point.action);
$('#option-1').text(point.opt1.text);
$('#option-2').text(point.opt2.text);
$('#option-1').attr('data-nextpoint', point.opt1.nextpoint);
$('#option-2').attr('data-nextpoint', point.opt2.nextpoint);
}
$('#option-1').click(function(e) {
applyPoint($(this).attr('data-nextpoint'));
});
$('#option-2').click(function(e) {
applyPoint($(this).attr('data-nextpoint'));
});
applyPoint(0);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<section class="main-hub">
<div id="image-box">
<img id="opponent" src="img/salesman-chad.png">
</div>
<div id="text-box">
<h1 id="action-text"></h1>
</div>
<div id="options">
<div id="option-1"></div>
<div id="option-2"></div>
</div>
</section>
</body>
如您所见，小说本身存储在const sales中，作为一个简单的JSON对象数组。在函数applyPoint()中，我们从故事的当前点转移到故事的一个新点。控制这两个选项的按钮是jQuery语法，用于$('#option-1').click(function(e) {...})和#option-2。
有了所有这些定义，我开始游戏/小说的初始点，起点，简单的方法是：applyPoint(1);。
Stack Overflow用户
发布于 2020-09-21 19:25:19
这是对@HoldOfHugers答案的扩展，它包含了几个概念(数据存储之外)，可以使开发一个更复杂的游戏更容易理解。
<body>
<section class="main-hub">
<div id="image-box">
<img id="opponent" src="img/salesman-chad.png">
</div>
<div id="text-box">
<h1 id="action-text"></h1>
</div>
<div id="options">
<div id="option-1"></div>
<div id="option-2"></div>
</div>
</section>
</body>const sales = [
{
action: "Salesman Chad wants to talk!",
opt1: {
text: "Tell him you're not interested",
nextpoint: 1,
},
opt2: {
text: "Hear him out",
nextpoint: 2,
},
},
{
action: "He has a rebuttal for that! 'Sir, a classy man like you needs this car!'",
opt1: {
text: "We're not even at a dealership!",
nextpoint: 0,
},
opt2: {
text: "Ooo a new car",
nextpoint: 2,
}
},
{
action: "Ssssoooooooo, what kind of TV service do you have?",
opt1: {
text: "Tell him your landlord pays for it",
nextpoint: 1,
},
opt2: {
text: "Tell him you don't watch much TV",
nextpoint: 0,
}
}
];
const state = {
index: 0,
data: sales,
get current() {
return this.data[this.index]
}
};
const ui = {
action: document.querySelector('#action-text'),
left: document.querySelector('#option-1'),
right: document.querySelector('#option-2')
};
const update = (nextpoint) => {
state.index = nextpoint;
render();
};
const render = () => {
ui.action.innerText = state.current.action;
ui.left.innerText = state.current.opt1.text;
ui.right.innerText = state.current.opt2.text;
};
ui.left.addEventListener('click', () => update(state.current.opt1.nextpoint));
ui.right.addEventListener('click', () => update(state.current.opt2.nextpoint));
render();我添加的第一件事是游戏状态对象。这实际上可以是任何东西，但是通常将游戏状态保持在一个可访问的区域，例如变量或变量集，而不是在DOM中是一个好主意。您可以想象添加patience、score值、timer、inventory、npcs或其他可能代表游戏的内容。对于我们的情况，我们可能只需要对话框中的当前index，可能需要所有的dialog信息，然后是当前派生的对话框值，这样查找起来就更容易了。它可以是任何让你的生活变得简单的东西。
const state = {
index: 0,
data: sales,
get current() {
return this.data[this.index]
}
};接下来是更新方法。这可以被认为是我们游戏中的一步。它负责获取我们当前的游戏状态和一些输入和integrating，或者派生下一个状态。更新函数通常在一个固定的时间间隔内调用，比如每秒60次，但是对于这个游戏，我们只需要响应用户。在更复杂的游戏中，更新函数调用处理许多子系统，如物理、动画、游戏逻辑等。为了我们的目的，我们的游戏‘步骤’，当我们从我们的用户收到一个新的决定。
const update = (nextpoint) => {
state.index = nextpoint;
render();
};代码的最后一部分只是呈现当前的游戏状态。render函数从字面上查看当前状态，并确保UI反映这些值。ui对象只允许我以语义方式组织ui元素，而不是必需的。
如果您在过去做过任何web编程，您可能会发现这与MVC或反应性ui框架非常相似。数据单向流动。
https://stackoverflow.com/questions/63973286
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号