我正在制作一个基于文本的角色扮演游戏,你可以在每个屏幕上说是或否,我需要帮助删除事件监听器
I am making a text-based RPG, and you can say yes or no on each screen, and I need help removing the eventlistener
所以,我有一个功能可以检查你是否按下了 'n' 或 'y',当你按下 'n' 时,一个人物攻击你,在它应该删除事件之后听众,然后给你一个赢得战斗的机会,但在那之前有一个屏幕说按任意键继续,但那个屏幕没有显示。帮忙?
我已经为此工作了一段时间,但它不会工作,它不会删除事件侦听器。
这是开始屏幕代码,在命名你的角色和东西之后
document.body.innerHTML = "<h4>As you are walking to the bar at a pub, a dark, hooded figure, pulls you aside to a corner: 'Listen, I have a job for you...'</h4><h2>Press 'Y' to accept, and 'N' to turn back to the bar</h2><img id='hoodedFigure' src='https://render.fineartamerica.com/images/rendered/default/print/6.125/8.000/break/images-medium/the-hooded-figure-kayleigh-semeniuk.jpg'>";
//然后添加事件监听器:
var event1 = window.addEventListener("keydown", checkKeyPressed, false);
//这是它调用的函数:
{if (evt.keyCode == "89") {
changeContentOnPressY(1);
} if (evt.keyCode == "78") {
changeContentOnPressN(1);
}}}```
//Then it calls this function to change the screen:
```function changeContentOnPressN(num) {
if (num == 1) {
window.removeEventListener("keydown", checkKeyPressed, false);
document.body.innerHTML = "The strange figure draws his weapons and agresses on you. You draw your small blade, and attempt to slash his stomach.<h3 style='text-align:center;'>Press any key to continue...</h3>";
window.addEventListener("keydown", chance(1), false);
} if(num == 2) {
window.addEventListener("keydown", checkKeyPressed2, false);
document.body.innerHTML = ""; // for 2nd n path}}```
//This is the part that is not working:
```window.removeEventListener("keydown", checkKeyPressed, false);```
This is the chance() function:
```function chance(num) {
if (num == 1) {
var chance = Math.random(0.1, 1);
if (chance >= 0.80) {
document.body.innerHTML = "Suddenly a swaggering figure walks towards you he says intrduces himself as Jean-Jacques le Tourment des Ombres, Grand Connoisseur of the Ombres House, he says 'You made the right choice, he was not to be trusted. I too dont like the Sabbath Family. Together we can get revenge'. Press Y to accept and N top refuse";
} else {
document.body.innerHTML = "He quickly slits your right wrist, and collects the blood spilled in a barrel. Soon nobles will enjoy this aged red. <br> <h1 style='text-align:center;'>GAME OVER<h1><br><h3 style='text-align:center;'>Press any key to continue...</h3>";
window.addEventListener("keydown", startGame1, false);}}}}```
您的问题涉及很多内容,我将重点关注我认为是跳过的屏幕。据我所知,它应该删除事件侦听器。
在您的代码中有这个片段,它应该等待玩家按下任意键。
window.addEventListener("keydown", chance(1), false);
问题是您立即调用了 "chance" 函数,而不是等待。
如果您想再次取消绑定该功能,您有
function waitForChance() {
chance(1)
}
window.addEventListener("keydown", waitForChance, false);
然后您可以稍后使用
解除绑定
window.removeEventListener("keydown", waitForChance, false);
顺便说一句,如果我是你,我可能会尽量避免取消绑定和重新绑定事件侦听器,因为它很容易出错(而且难以阅读)。我可能会创建一个像这样的状态系统,您可以在其中创建对象并在它们之间切换。我认为它更清楚哪些功能属于哪个状态。
// every state has 2 properties text and options
// text is what is displayed on the screen
// options contain the functions that are executed when the user presses a key
// if you want to bind a specific just bind enter that key in lower case
// if you want to accept any key add a function on anyKey
//---------------- STATES --------------------------
let startState = {
text: `<h4>As you are walking to the bar at a pub, a dark, hooded figure, pulls you aside to a corner: 'Listen, I have a job for you...'</h4><h2>Press 'Y' to accept, and 'N' to turn back to the bar</h2><img id='hoodedFigure' src='https://render.fineartamerica.com/images/rendered/default/print/6.125/8.000/break/images-medium/the-hooded-figure-kayleigh-semeniuk.jpg'>`,
options: {
y: function() {
loadState(takeDealState)
},
n: function() {
loadState(ambushState)
}
}
}
let takeDealState = {
text: `What ever happend when you take the deal (for now i reload the game on anykey)`,
options: {
/*Your options when you take the deal for now I just reset the game*/
anyKey: function() {
loadState(startState)
}
}
}
let ambushState = {
text: `The strange figure draws his weapons and agresses on you. You draw your small blade, and attempt to slash his stomach.<h3 style='text-align:center;'>Press any key to continue...</h3>`,
options: {
anyKey: function() {
var chance = Math.random(0.1, 1)
if (chance >= 0.80) {
loadState(successfullAmbush)
} else {
loadState(failedAmbush)
}
}
}
}
let successfullAmbush = {
text: `Suddenly a swaggering figure walks towards you he says intrduces himself as Jean-Jacques le Tourment des Ombres, Grand Connoisseur of the Ombres House, he says 'You made the right choice, he was not to be trusted. I too dont like the Sabbath Family. Together we can get revenge'. Press Y to accept and N top refuse`,
options: {
y: function() {
console.log("accept")
},
n: function() {
console.log("decline")
}
}
}
let failedAmbush = {
text: `He quickly slits your right wrist, and collects the blood spilled in a barrel. Soon nobles will enjoy this aged red. <br> <h1 style='text-align:center;'>GAME OVER<h1><br><h3 style='text-align:center;'>Press any key to continue...</h3>`,
options: {
anyKey: function() {
loadState(startState)
}
}
}
///---------------- LOGIC show and handle keypresses ----------------------------------
let currentState;
function loadState(state) {
// set the state as the current state, so it can
currentState = state;
// let the state descibe the scene
document.body.innerHTML = state.text;
}
function keyHandler(event) {
if(currentState.options.anyKey) {
// handle anykey
currentState.options.anyKey(event.key)
} else if(currentState.options[event.key]) {
// handle other key presses such as y/n
currentState.options[event.key](event.key)
}
}
window.addEventListener("keypress", keyHandler, true)
// start the game
loadState(startState)
所以,我有一个功能可以检查你是否按下了 'n' 或 'y',当你按下 'n' 时,一个人物攻击你,在它应该删除事件之后听众,然后给你一个赢得战斗的机会,但在那之前有一个屏幕说按任意键继续,但那个屏幕没有显示。帮忙?
我已经为此工作了一段时间,但它不会工作,它不会删除事件侦听器。
这是开始屏幕代码,在命名你的角色和东西之后
document.body.innerHTML = "<h4>As you are walking to the bar at a pub, a dark, hooded figure, pulls you aside to a corner: 'Listen, I have a job for you...'</h4><h2>Press 'Y' to accept, and 'N' to turn back to the bar</h2><img id='hoodedFigure' src='https://render.fineartamerica.com/images/rendered/default/print/6.125/8.000/break/images-medium/the-hooded-figure-kayleigh-semeniuk.jpg'>";
//然后添加事件监听器:
var event1 = window.addEventListener("keydown", checkKeyPressed, false);
//这是它调用的函数:
{if (evt.keyCode == "89") {
changeContentOnPressY(1);
} if (evt.keyCode == "78") {
changeContentOnPressN(1);
}}}```
//Then it calls this function to change the screen:
```function changeContentOnPressN(num) {
if (num == 1) {
window.removeEventListener("keydown", checkKeyPressed, false);
document.body.innerHTML = "The strange figure draws his weapons and agresses on you. You draw your small blade, and attempt to slash his stomach.<h3 style='text-align:center;'>Press any key to continue...</h3>";
window.addEventListener("keydown", chance(1), false);
} if(num == 2) {
window.addEventListener("keydown", checkKeyPressed2, false);
document.body.innerHTML = ""; // for 2nd n path}}```
//This is the part that is not working:
```window.removeEventListener("keydown", checkKeyPressed, false);```
This is the chance() function:
```function chance(num) {
if (num == 1) {
var chance = Math.random(0.1, 1);
if (chance >= 0.80) {
document.body.innerHTML = "Suddenly a swaggering figure walks towards you he says intrduces himself as Jean-Jacques le Tourment des Ombres, Grand Connoisseur of the Ombres House, he says 'You made the right choice, he was not to be trusted. I too dont like the Sabbath Family. Together we can get revenge'. Press Y to accept and N top refuse";
} else {
document.body.innerHTML = "He quickly slits your right wrist, and collects the blood spilled in a barrel. Soon nobles will enjoy this aged red. <br> <h1 style='text-align:center;'>GAME OVER<h1><br><h3 style='text-align:center;'>Press any key to continue...</h3>";
window.addEventListener("keydown", startGame1, false);}}}}```
您的问题涉及很多内容,我将重点关注我认为是跳过的屏幕。据我所知,它应该删除事件侦听器。
在您的代码中有这个片段,它应该等待玩家按下任意键。
window.addEventListener("keydown", chance(1), false);
问题是您立即调用了 "chance" 函数,而不是等待。
如果您想再次取消绑定该功能,您有
function waitForChance() {
chance(1)
}
window.addEventListener("keydown", waitForChance, false);
然后您可以稍后使用
解除绑定window.removeEventListener("keydown", waitForChance, false);
顺便说一句,如果我是你,我可能会尽量避免取消绑定和重新绑定事件侦听器,因为它很容易出错(而且难以阅读)。我可能会创建一个像这样的状态系统,您可以在其中创建对象并在它们之间切换。我认为它更清楚哪些功能属于哪个状态。
// every state has 2 properties text and options
// text is what is displayed on the screen
// options contain the functions that are executed when the user presses a key
// if you want to bind a specific just bind enter that key in lower case
// if you want to accept any key add a function on anyKey
//---------------- STATES --------------------------
let startState = {
text: `<h4>As you are walking to the bar at a pub, a dark, hooded figure, pulls you aside to a corner: 'Listen, I have a job for you...'</h4><h2>Press 'Y' to accept, and 'N' to turn back to the bar</h2><img id='hoodedFigure' src='https://render.fineartamerica.com/images/rendered/default/print/6.125/8.000/break/images-medium/the-hooded-figure-kayleigh-semeniuk.jpg'>`,
options: {
y: function() {
loadState(takeDealState)
},
n: function() {
loadState(ambushState)
}
}
}
let takeDealState = {
text: `What ever happend when you take the deal (for now i reload the game on anykey)`,
options: {
/*Your options when you take the deal for now I just reset the game*/
anyKey: function() {
loadState(startState)
}
}
}
let ambushState = {
text: `The strange figure draws his weapons and agresses on you. You draw your small blade, and attempt to slash his stomach.<h3 style='text-align:center;'>Press any key to continue...</h3>`,
options: {
anyKey: function() {
var chance = Math.random(0.1, 1)
if (chance >= 0.80) {
loadState(successfullAmbush)
} else {
loadState(failedAmbush)
}
}
}
}
let successfullAmbush = {
text: `Suddenly a swaggering figure walks towards you he says intrduces himself as Jean-Jacques le Tourment des Ombres, Grand Connoisseur of the Ombres House, he says 'You made the right choice, he was not to be trusted. I too dont like the Sabbath Family. Together we can get revenge'. Press Y to accept and N top refuse`,
options: {
y: function() {
console.log("accept")
},
n: function() {
console.log("decline")
}
}
}
let failedAmbush = {
text: `He quickly slits your right wrist, and collects the blood spilled in a barrel. Soon nobles will enjoy this aged red. <br> <h1 style='text-align:center;'>GAME OVER<h1><br><h3 style='text-align:center;'>Press any key to continue...</h3>`,
options: {
anyKey: function() {
loadState(startState)
}
}
}
///---------------- LOGIC show and handle keypresses ----------------------------------
let currentState;
function loadState(state) {
// set the state as the current state, so it can
currentState = state;
// let the state descibe the scene
document.body.innerHTML = state.text;
}
function keyHandler(event) {
if(currentState.options.anyKey) {
// handle anykey
currentState.options.anyKey(event.key)
} else if(currentState.options[event.key]) {
// handle other key presses such as y/n
currentState.options[event.key](event.key)
}
}
window.addEventListener("keypress", keyHandler, true)
// start the game
loadState(startState)