我开始制作一款文字游戏,基本理念是:当游戏开始时,用户必须在输入框中输入他的选择。他输入的文本与函数中的开关交互,如果用户输入"正确的命令",它会调用另一个可能包含另一个开关的函数,以此类推。我在这段代码中有一个bug:第一个函数内部的开关工作良好,当它的第一个case(case"yes")调用另一个函数时,一切都开始正常工作。但是,当用户输入应该与第二个函数的开关交互的文本时,他实际上仍然与第一个函数的开关交互(也与第二个函数交互)。有没有人愿意帮我解决这个问题或者给我指出正确的方向?
var startGame = function(){
showText("Welcome to the virtual pseudo-reality")
showText("Are you ready to start your journey?")
$('#btn').click(function(e) {
e.preventDefault();
switch ($('input[name=myInput]').val().toLowerCase()) {
case "yes": showText("- "+$('input[name=myInput]').val());
showText("Welcome aboard!");
selectChar();
break;
case "no": showText("- "+$('input[name=myInput]').val());
showText("Your choise is no.");
break;
default:
showText("- "+$('input[name=myInput]').val());
showText("Sorry, wrong input.") ;
break;
};
$('input[name=myInput]').val('');
var element = document.getElementById("storyBoard");
element.scrollTop = element.scrollHeight;
});
};
//A first in-game function, needs to select the character that user want to be:
var selectChar = function(){
showText("<br>"+"Choose who you are, you have to choose one of two heroes: Phantomorph and Disogr.");
$('#btn').click(function(e) {
e.preventDefault();
switch ($('input[name=myInput]').val().toLowerCase()) {
case "phantomorph": showText("- "+$('input[name=myInput]').val());
showText("You choosed Phantomorph.");
user = phantomorph; friend = disogr;
break;
case "disogr": showText("- "+$('input[name=myInput]').val());
showText("You choosed Disogr.");
user = disogr; friend = phantomorph;
break;
default: alert("You need to make a right choose.");
selectChar();
break;
};
$('input[name=myInput]').val('');
var element = document.getElementById("storyBoard");
element.scrollTop = element.scrollHeight;
});
};
startGame();
您将多个事件绑定到相同的输入,因此当用户第二次单击时,两个事件处理程序回调都将执行。
因为你正在使用jQuery,我会从使用.click
切换到.on('click'
,然后在切换的情况下,你绑定第二个点击处理程序,你可以使用.off('click'
来删除初始处理程序。
最好还是有一个变量来跟踪游戏状态,并将第二个事件处理程序的绑定移出切换案例。你需要这样做,否则你将在每次用户单击时重新绑定单击处理程序。
[编辑]你可以一次添加任意数量的事件处理程序,只要DOM元素准备好了(在jQuery文档准备好回调),或者绑定一个点击事件,并在事件处理程序中包含逻辑,检查你已经从用户那里捕获的数据,以触发任何任意行为。
我建议您创建一个click
处理程序,并在回调中检查user
变量的值,看看用户是否已经为它设置了值。(您只需要确保该变量的范围是可访问的点击处理程序,您的应用程序的任何部分需要它,目前在您的例子中没有var user;
)