javascript中的水果忍者类型游戏

我正试图用javascript制作一个忍者水果风格的游戏，但问题正在发生。我有一个if语句，它将变量“fruit”与“fruits”数组的索引进行比较。问题是当我“消除”了另一个if语句不起作用的结果时

这就是游戏的工作原理：

1当你开始游戏时，会出现一个水果的随机名称供你点击

2你点击水果的图像，它就会消失，在这个点击中会产生另一个随机的水果

3安，然后你完成游戏，这很好

所以这很难解释，但这和忍者水果游戏的逻辑是一样的。我不知道是否需要使用移位函数来消除数组中的结果

var-fruits=[‘香蕉’、‘苹果’、‘菠萝’]；
var fruit=fruits[Math.floor（Math.random（）*fruits.length）]；
document.getElementById（“frut”）.innerHTML=fruit；
如果（果==果[0]）{
bana.onclick=函数（）{
var fruit=fruits[Math.floor（Math.random（）*fruits.length）]；
document.getElementById（“frut”）.innerHTML=fruit；
bana.style.display=“无”；
}
}
如果（水果==水果[1]）{
app.onclick=function（）{
var fruit=fruits[Math.floor（Math.random（）*fruits.length）]；
document.getElementById（“frut”）.innerHTML=fruit；
app.style.display=“无”；
}
}
如果（水果==水果[2]）{
pin.onclick=函数（）{
var fruit=fruits[Math.floor（Math.random（）*fruits.length）]；
document.getElementById（“frut”）.innerHTML=fruit；
pin.style.display=“无”；
}
}
函数movFruit（）{
document.getElementById（“info”）.style.display=“table”；
document.getElementById（“水果动画”）.style.display=“表格”；
document.getElementById（“指令”）.style.display=“无”；
var elem=document.getElementById（“水果动画”）；
var-pos=0；
var id=设置间隔（第10帧）；
函数框架（）{
如果（位置==350）{
清除间隔（id）；
}否则{
pos++；
elem.style.top=pos+'px'；
}
}
}

#动画{
位置：相对位置；
显示：无；
保证金：0自动；
}
先生{
浮动：左；
填充：80px；
}
#信息{
显示：无；
保证金：0自动；
}
#指令{
显示：表格；
保证金：0自动；
利润上限：200px；
边框：1px纯黑；
填充：10px；
}

红果
水果：
开始比赛
点击水果并删除它们！

现在，您只需在

if

语句中的顶层将处理程序附加到水果图像上，但一旦这些语句运行并且主块完成，它就不会再次运行

您应该在开始时立即将处理程序附加到所有水果图像，然后在处理程序中，检查单击的水果是否有效

如果要将文本指定给元素，请指定给

textContent

，而不是

innerHTML

<代码>文本内容更快、更安全、更可预测

constfruits=['香蕉'、'苹果'、'菠萝']；
常量getRandomFruit=（）=>{
const randomIndex=Math.floor（Math.random（）*fruits.length）；
常数水果=水果[随机指数]；
document.getElementById（“frut”）.textContent=水果；
水果.剪接（随机指数，1）；
还果；
};
让水果点击=getRandomFruit（）；
bana.onclick=函数（）{
如果（水果舔！=“香蕉”）返回；
bana.style.display=“无”；
水果点击=getRandomFruit（）；
}
app.onclick=function（）{
如果（水果舔！==‘苹果’）返回；
app.style.display=“无”；
水果点击=getRandomFruit（）；
}
pin.onclick=函数（）{
如果（水果舔！==‘菠萝’）返回；
pin.style.display=“无”；
水果点击=getRandomFruit（）；
}
函数movFruit（）{
document.getElementById（“info”）.style.display=“table”；
document.getElementById（“水果动画”）.style.display=“表格”；
document.getElementById（“指令”）.style.display=“无”；
var elem=document.getElementById（“水果动画”）；
var-pos=0；
var id=设置间隔（第10帧）；
函数框架（）{
如果（位置==350）{
清除间隔（id）；
}否则{
pos++；
elem.style.top=pos+'px'；
}
}
}

#动画{
位置：相对位置；
显示：无；
保证金：0自动；
}
先生{
浮动：左；
填充：80px；
}
#信息{
显示：无；
保证金：0自动；
}
#指令{
显示：表格；
保证金：0自动；
利润上限：200px；
边框：1px纯黑；
填充：10px；
}

红果
水果：
开始比赛
点击水果并删除它们！

开始游戏按钮只工作一次。之后就不工作了。谢谢！这就是我想要的结果。如果（水果舔！=“香蕉”）返回，我就不理解这部分；为什么不平等呢？为什么要回来？我去掉了回车号和感叹号，得到了相同的结果。我想我理解这个逻辑太傻了，哈哈。@VicJordan是的，还有很多需要改进的地方，这只是一个研究案例或原型，不管你想叫什么，我这么做只是为了训练我的javascript技能。@jarwin像那样提前回来减少缩进（更多缩进=更多认知负荷）。当然，如果需要，您可以在这里执行

if（水果点击=='Banana'）{//block

，效果相同，只是更难阅读。