2 回答
TA贡献1860条经验 获得超9个赞
您可以将您的数据结构从简单的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);
。
TA贡献2036条经验 获得超8个赞
这个解决方案包括几个概念(除了数据存储),这些概念可以使开发更复杂的游戏更容易推理。
<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();
};
代码的最后一部分只是渲染当前的游戏状态。渲染函数从字面上看当前状态并确保 UI 反映这些值。该ui对象仅允许我以语义方式组织 ui 元素,这不是必需的。
如果你过去做过任何网络编程,你可能会发现这与 MVC 或反应式 ui 框架非常相似。数据单向流动。
添加回答
举报