拖放JavaScript如果语句问题

Question

我目前正在使用HTML的拖放功能开发JavaScript游戏。我在这里要做的是允许随机生成的水果图像是可拖动的，并可以在果冻图像上掉落。然后，如果拖动的图像是匹配条件集(这是数字图像数索引== x，而水果图像索引为== y(，则允许它降低。为了宣布此语句，我正在从背景图像中获取值。(如果数字的背景图像为x，而水果的背景图像为y(我的代码执行正常，直到我尝试为其设置条件。从逻辑上讲，我不明白为什么有if语句时它不起作用，甚至不会显示图像。

编辑：尝试使用===而不是=，仍然不响应

编辑：在评论中删除分号后，其余代码执行正常。但是拖放不会响应。

编辑：已声明图像URL的变量，而不是直接在on Drop函数中使用URL。拖放仍然无法使用。

var myNumber = new Array(9);
myNumber[0] = '1.png';
myNumber[1] = '2.png';
myNumber[2] = '3.png';
myNumber[3] = '4.png';
myNumber[4] = '5.png';
myNumber[5] = '6.png';
myNumber[6] = '7.png';
myNumber[7] = '8.png';
myNumber[8] = '9.png';
var numberImage1 =  "url(" + numberAddress + myNumber[0] + ")";
var numberImage2 =  "url(" + numberAddress + myNumber[1] + ")";
var numberImage3 =  "url(" + numberAddress + myNumber[2] + ")";
var numberImage4 =  "url(" + numberAddress + myNumber[3] + ")";
var numberImage5 =  "url(" + numberAddress + myNumber[4] + ")";
var numberImage6 =  "url(" + numberAddress + myNumber[5] + ")";
var numberImage7 =  "url(" + numberAddress + myNumber[6] + ")";
var numberImage8 =  "url(" + numberAddress + myNumber[7] + ")";
var numberImage9 =  "url(" + numberAddress + myNumber[8] + ")";
var fruitCloudOne = new Array(15);
fruitCloudOne[0] = '3apple.png';
fruitCloudOne[1] = '3banana.png';
fruitCloudOne[2] = '3blueberry.png';
fruitCloudOne[3] = '3plum.png';
fruitCloudOne[4] = '3strawberry.png';
fruitCloudOne[5] = '5apple.png';
fruitCloudOne[6] = '5banana.png';
fruitCloudOne[7] = '5blueberry.png';
fruitCloudOne[8] = '5plum.png';
fruitCloudOne[9] = '5strawberry.png';
fruitCloudOne[10] = '8apple.png';
fruitCloudOne[11] = '8banana.png';
fruitCloudOne[12] = '8blueberry.png';
fruitCloudOne[13] = '8plum.png';
fruitCloudOne[14] = '8strawberry.png';
var apple3 = "url(" + fruit1Address + fruitCloudOne[0] + ")";
var banana3 = "url(" + fruit1Address + fruitCloudOne[1] + ")";
var blueberry3 = "url(" + fruit1Address + fruitCloudOne[2] + ")";
var plum3 = "url(" + fruit1Address + fruitCloudOne[3] + ")";
var strawberry3 = "url(" + fruit1Address + fruitCloudOne[4] + ")";
var apple5 = "url(" + fruit1Address + fruitCloudOne[5] + ")";
var banana5 = "url(" + fruit1Address + fruitCloudOne[6] + ")";
var blueberry5 = "url(" + fruit1Address + fruitCloudOne[7] + ")";
var plum5 = "url(" + fruit1Address + fruitCloudOne[8] + ")";
var strawberry5 = "url(" + fruit1Address + fruitCloudOne[9] + ")";
var apple8 = "url(" + fruit1Address + fruitCloudOne[10] + ")";
var banana8 = "url(" + fruit1Address + fruitCloudOne[11] + ")";
var blueberry8 = "url(" + fruit1Address + fruitCloudOne[12] + ")";
var plum8 = "url(" + fruit1Address + fruitCloudOne[13] + ")";
var strawberry8 = "url(" + fruit1Address + fruitCloudOne[14] + ")";
var fruitCloudTwo = new Array(15);
fruitCloudTwo[0] = '1apple.png';
fruitCloudTwo[1] = '1banana.png';
fruitCloudTwo[2] = '1blueberry.png';
fruitCloudTwo[3] = '1plum.png';
fruitCloudTwo[4] = '1strawberry.png';
fruitCloudTwo[5] = '2apple.png';
fruitCloudTwo[6] = '2banana.png';
fruitCloudTwo[7] = '2blueberry.png';
fruitCloudTwo[8] = '2plum.png';
fruitCloudTwo[9] = '2strawberry.png';
fruitCloudTwo[10] = '4apple.png';
fruitCloudTwo[11] = '4banana.png';
fruitCloudTwo[12] = '4blueberry.png';
fruitCloudTwo[13] = '4plum.png';
fruitCloudTwo[14] = '4strawberry.png';
var apple1 = "url(" + fruit2Address + fruitCloudTwo[0] + ")";
var banana1 = "url(" + fruit2Address + fruitCloudTwo[1] + ")";
var blueberry1 = "url(" + fruit2Address + fruitCloudTwo[2] + ")";
var plum1 = "url(" + fruit2Address + fruitCloudTwo[3] + ")";
var strawberry1 = "url(" + fruit2Address + fruitCloudTwo[4] + ")";
var apple2 = "url(" + fruit2Address + fruitCloudTwo[5] + ")";
var banana2 = "url(" + fruit2Address + fruitCloudTwo[6] + ")";
var blueberry2 = "url(" + fruit2Address + fruitCloudTwo[7] + ")";
var plum2 = "url(" + fruit2Address + fruitCloudTwo[8] + ")";
var strawberry2 = "url(" + fruit2Address + fruitCloudTwo[9] + ")";
var apple4 = "url(" + fruit2Address + fruitCloudTwo[10] + ")";
var banana4 = "url(" + fruit2Address + fruitCloudTwo[11] + ")";
var blueberry4 = "url(" + fruit2Address + fruitCloudTwo[12] + ")";
var plum4 = "url(" + fruit2Address + fruitCloudTwo[13] + ")";
var strawberry4 = "url(" + fruit2Address + fruitCloudTwo[14] + ")";
var fruitCloudThree = new Array(15);
fruitCloudThree[0] = '6apple.png';
fruitCloudThree[1] = '6banana.png';
fruitCloudThree[2] = '6blueberry.png';
fruitCloudThree[3] = '6plum.png';
fruitCloudThree[4] = '6strawberry.png';
fruitCloudThree[5] = '7apple.png';
fruitCloudThree[6] = '7banana.png';
fruitCloudThree[7] = '7blueberry.png';
fruitCloudThree[8] = '7plum.png';
fruitCloudThree[9] = '7strawberry.png';
fruitCloudThree[10] = '9apple.png';
fruitCloudThree[11] = '9banana.png';
fruitCloudThree[12] = '9blueberry.png';
fruitCloudThree[13] = '9plum.png';
fruitCloudThree[14] = '9strawberry.png';
var apple6 = "url(" + fruit3Address + fruitCloudThree[0] + ")";
var banana6 = "url(" + fruit3Address + fruitCloudThree[1] + ")";
var blueberry6 = "url(" + fruit3Address + fruitCloudThree[2] + ")";
var plum6 = "url(" + fruit3Address + fruitCloudThree[3] + ")";
var strawberry6 = "url(" + fruit3Address + fruitCloudThree[4] + ")";
var apple7 = "url(" + fruit3Address + fruitCloudThree[5] + ")";
var banana7 = "url(" + fruit3Address + fruitCloudThree[6] + ")";
var blueberry7 = "url(" + fruit3Address + fruitCloudThree[7] + ")";
var plum7 = "url(" + fruit3Address + fruitCloudThree[8] + ")";
var strawberry7 = "url(" + fruit3Address + fruitCloudThree[9] + ")";
var apple9 = "url(" + fruit3Address + fruitCloudThree[10] + ")";
var banana9 = "url(" + fruit3Address + fruitCloudThree[11] + ")";
var blueberry9 = "url(" + fruit3Address + fruitCloudThree[12] + ")";
var plum9 = "url(" + fruit3Address + fruitCloudThree[13] + ")";
var strawberry9 = "url(" + fruit3Address + fruitCloudThree[14] + ")";
//random generation of number and fruits & display
var numberAddress = 'Assets/Numbers/';
var fruit1Address = 'Assets/FruitCloud1/';
var randFruit1 = Math.floor(Math.random() * (fruitCloudOne.length));
var randFruit1Image = "url(" + fruit1Address + fruitCloudOne[randFruit1] + ")";
var fruit2Address = 'Assets/FruitCloud2/';
var randFruit2 = Math.floor(Math.random() * (fruitCloudTwo.length));
var randFruit2Image = "url(" + fruit2Address + fruitCloudTwo[randFruit2] + ")";
var fruit3Address = 'Assets/FruitCloud3/';
var randFruit3 = Math.floor(Math.random() * (fruitCloudThree.length));
var randFruit3Image = "url(" + fruit3Address + fruitCloudThree[randFruit3] + ")";
//refresh fruit images
function refreshFruits() {
    var fruit1Address = 'Assets/FruitCloud1/';
    var randFruit1 = Math.floor(Math.random() * (fruitCloudOne.length));
    var randFruit1Image = "url(" + fruit1Address + fruitCloudOne[randFruit1] + ")";
    document.getElementById("fruit1").style.backgroundImage = randFruit1Image;
    var fruit2Address = 'Assets/FruitCloud2/';
    var randFruit2 = Math.floor(Math.random() * (fruitCloudTwo.length));
    var randFruit2Image = "url(" + fruit2Address + fruitCloudTwo[randFruit2] + ")";
    document.getElementById("fruit2").style.backgroundImage = randFruit2Image;
    var fruit3Address = 'Assets/FruitCloud3/';
    var randFruit3 = Math.floor(Math.random() * (fruitCloudThree.length));
    var randFruit3Image = "url(" + fruit3Address + fruitCloudThree[randFruit3] + ")";
    document.getElementById("fruit3").style.backgroundImage = randFruit3Image;
}
//display number and three fruit images
function startGame() {
    var numberImage1 =  "url(" + numberAddress + myNumber[0] + ")";
    document.getElementById("number").style.backgroundImage = numberImage1;
    document.getElementById("fruit1").style.backgroundImage = randFruit1Image;
    document.getElementById("fruit2").style.backgroundImage = randFruit2Image;
    document.getElementById("fruit3").style.backgroundImage = randFruit3Image;
}
    
function dragOver(ev) {
    ev.preventDefault();
}
function dragStart(ev) {
    ev.dataTransfer.setData("fruit", ev.target.id);
}
function onDrop(ev) {
    var numberImage1 =  "url(" + numberAddress + myNumber[0] + ")";
    var apple1 = "url(" + fruit2Address + fruitCloudTwo[0] + ")";
    var banana1 = "url(" + fruit2Address + fruitCloudTwo[1] + ")";
    var blueberry1 = "url(" + fruit2Address + fruitCloudTwo[2] + ")";
    var plum1 = "url(" + fruit2Address + fruitCloudTwo[3] + ")";
    var strawberry1 = "url(" + fruit2Address + fruitCloudTwo[4] + ")";
    
    ev.preventDefault();
    if (document.getElementById("number").style.backgroundImage == numberImage1 && document.getElementById("fruit2").style.backgroundImage == apple1) {
        var data = ev.dataTransfer.getData("fruit");
        ev.target.appendChild(document.getElementById(data));
    }
    
    if (document.getElementById("number").style.backgroundImage == numberImage1 && document.getElementById("fruit2").style.backgroundImage == banana1) {
        var data = ev.dataTransfer.getData("fruit");
        ev.target.appendChild(document.getElementById(data));
    }
    
    if (document.getElementById("number").style.backgroundImage == numberImage1 && document.getElementById("fruit2").style.backgroundImage == blueberry1) {
        var data = ev.dataTransfer.getData("fruit");
        ev.target.appendChild(document.getElementById(data));
    }
    
    if (document.getElementById("number").style.backgroundImage == numberImage1 && document.getElementById("fruit2").style.backgroundImage == plum1) {
        var data = ev.dataTransfer.getData("fruit");
        ev.target.appendChild(document.getElementById(data));
    }
    
    if (document.getElementById("number").style.backgroundImage == numberImage1 && document.getElementById("fruit2").style.backgroundImage == strawberry1) {
        var data = ev.dataTransfer.getData("fruit");
        ev.target.appendChild(document.getElementById(data));
    }
}

body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    background-color: black;
}
#background {
    position: absolute;
    background-image: url(Assets/Background_cloudPosition.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    bottom: 0%;
    z-index: -10;
}
#startGame {
    position: absolute;
    left: 90px;
    width: 80px;
    height: 80px;
    background-color: green;
}
#refreshFruits {
    position: absolute;
    left: 180px;
    width: 80px;
    height: 80px;
    background-color: blue;
}
#number {
    position: absolute;
    width: 230px;
    height: 230px;
    left: 450px;
    bottom: 415px;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 15;
}
#fruitCloud1 {
    position: absolute;
    width: 240px;
    height: 120px;
    bottom: 460px;
    left: 135px;
    z-index: 15;
}
#fruitCloud2 {
    position: absolute;
    width: 240px;
    height: 120px;
    bottom: 320px;
    left: 300px;
    z-index: 15;
}
#fruitCloud3 {
    position: absolute;
    width: 240px;
    height: 120px;
    bottom: 185px;
    left: 110px;
    z-index: 15;
}
#fruit1 {
    position: absolute;
    width: 240px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
}
#fruit2 {
    position: absolute;
    width: 240px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
}
#fruit3 {
    position: absolute;
    width: 240px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
}
#jelly {
    position: absolute;
    background-image: url(Assets/JellyMonster/JellyMonsterDefault.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 260px;
    height: 190px;
    bottom: 50px;
    right: 390px;
    z-index: 10;
}

<!DOCTYPE html>
<html>
    
<head>
    
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <script type="text/javascript" src="script.js"></script>
    <title>This is an experiment.</title>
    
</head>
    
<body>
<!--- 
<a id="download" href="index.html"></a>--->
    
<button id="startGame" onclick="startGame()"></button>
<button id="refreshFruits" onclick="refreshFruits()"></button>
<div id="number"></div>
    
<div id="jelly" ondrop="onDrop(event)" ondragover="dragOver(event)"></div>
<div class="fruit" id="fruitCloud1">
    <div id="fruit1" draggable="true" ondragstart="dragStart(event)"></div>
</div>
<div class="fruit" id="fruitCloud2">
    <div id="fruit2" draggable="true" ondragstart="dragStart(event)"></div>
</div>
    
<div class="fruit" id="fruitCloud3">
    <div id="fruit3" draggable="true" ondragstart="dragStart(event)"></div>
</div>
    
</body>
    
</html>

Answer 1

因此让此代码工作。

我更改了if语句，事实证明其中有一个类型错误。我添加了一些控制台日志语句，以便您可以看到输出。当条件匹配时，由于随机生成的时间，拖放正在工作，有时我在测试时不得不经常刷新屏幕才能下降。这个概念很酷，可以开箱即用，但是可能需要一些重构以帮助最大程度地减少代码并允许可读性。查看示例时，您需要在全屏中显示它，因为它在此处将所有内容放在一起...

希望这会有所帮助

var myNumber = new Array(9);
myNumber[0] = '1.png';
myNumber[1] = '2.png';
myNumber[2] = '3.png';
myNumber[3] = '4.png';
myNumber[4] = '5.png';
myNumber[5] = '6.png';
myNumber[6] = '7.png';
myNumber[7] = '8.png';
myNumber[8] = '9.png';
var fruitCloudOne = new Array(15);
fruitCloudOne[0] = '3apple.png';
fruitCloudOne[1] = '3banana.png';
fruitCloudOne[2] = '3blueberry.png';
fruitCloudOne[3] = '3plum.png';
fruitCloudOne[4] = '3strawberry.png';
fruitCloudOne[5] = '5apple.png';
fruitCloudOne[6] = '5banana.png';
fruitCloudOne[7] = '5blueberry.png';
fruitCloudOne[8] = '5plum.png';
fruitCloudOne[9] = '5strawberry.png';
fruitCloudOne[10] = '8apple.png';
fruitCloudOne[11] = '8banana.png';
fruitCloudOne[12] = '8blueberry.png';
fruitCloudOne[13] = '8plum.png';
fruitCloudOne[14] = '8strawberry.png';
var fruitCloudTwo = new Array(15);
fruitCloudTwo[0] = '1apple.png';
fruitCloudTwo[1] = '1banana.png';
fruitCloudTwo[2] = '1blueberry.png';
fruitCloudTwo[3] = '1plum.png';
fruitCloudTwo[4] = '1strawberry.png';
fruitCloudTwo[5] = '2apple.png';
fruitCloudTwo[6] = '2banana.png';
fruitCloudTwo[7] = '2blueberry.png';
fruitCloudTwo[8] = '2plum.png';
fruitCloudTwo[9] = '2strawberry.png';
fruitCloudTwo[10] = '4apple.png';
fruitCloudTwo[11] = '4banana.png';
fruitCloudTwo[12] = '4blueberry.png';
fruitCloudTwo[13] = '4plum.png';
fruitCloudTwo[14] = '4strawberry.png';
var fruitCloudThree = new Array(15);
fruitCloudThree[0] = '6apple.png';
fruitCloudThree[1] = '6banana.png';
fruitCloudThree[2] = '6blueberry.png';
fruitCloudThree[3] = '6plum.png';
fruitCloudThree[4] = '6strawberry.png';
fruitCloudThree[5] = '7apple.png';
fruitCloudThree[6] = '7banana.png';
fruitCloudThree[7] = '7blueberry.png';
fruitCloudThree[8] = '7plum.png';
fruitCloudThree[9] = '7strawberry.png';
fruitCloudThree[10] = '9apple.png';
fruitCloudThree[11] = '9banana.png';
fruitCloudThree[12] = '9blueberry.png';
fruitCloudThree[13] = '9plum.png';
fruitCloudThree[14] = '9strawberry.png';
//random generation of number and fruits & display
var numberAddress = 'Assets/Numbers/';
var numberIndex = 0;
var fruitOneIndex = 0;
var fruitTwoIndex = 0;
var fruitThreeIndex = 0;
var fruit1Address = 'Assets/FruitCloud1/';
var randFruit1 = Math.floor(Math.random() * (fruitCloudOne.length));
var fruit2Address = 'Assets/FruitCloud2/';
var randFruit2 = Math.floor(Math.random() * (fruitCloudTwo.length));
var fruit3Address = 'Assets/FruitCloud3/';
var randFruit3 = Math.floor(Math.random() * (fruitCloudThree.length));
function refreshFruits() {
  var fruit1Address = 'Assets/FruitCloud1/';
  var randFruit1 = Math.floor(Math.random() * (fruitCloudOne.length));
  document.getElementById("fruit1").style.backgroundImage = "url(" + fruit1Address + fruitCloudOne[randFruit1] + ")";
  var fruit2Address = 'Assets/FruitCloud2/';
  var randFruit2 = Math.floor(Math.random() * (fruitCloudTwo.length));
  document.getElementById("fruit2").style.backgroundImage = "url(" + fruit2Address + fruitCloudTwo[randFruit2] + ")";
  var fruit3Address = 'Assets/FruitCloud3/';
  var randFruit3 = Math.floor(Math.random() * (fruitCloudThree.length));
  document.getElementById("fruit3").style.backgroundImage = "url(" + fruit3Address + fruitCloudThree[randFruit3] + ")";
}
function startGame() {
  document.getElementById("number").style.backgroundImage = "url(" + numberAddress + myNumber[numberIndex] + ")";
  document.getElementById("fruit1").style.backgroundImage = "url(" + fruit1Address + fruitCloudOne[randFruit1] + ")";
  document.getElementById("fruit2").style.backgroundImage = "url(" + fruit2Address + fruitCloudTwo[randFruit2] + ")";
  document.getElementById("fruit3").style.backgroundImage = "url(" + fruit3Address + fruitCloudThree[randFruit3] + ")";
}
function dragOver(ev) {
  ev.preventDefault();
}
function dragStart(ev) {
  ev.dataTransfer.setData("fruit", ev.target.id);
}
//PROBLEM ARISE HERE
function onDrop(ev) {
  ev.preventDefault();
  console.log(document.getElementById("number").style.backgroundImage);
  console.log("What we are expecting to see " + document.getElementById("fruit2").style.backgroundImage );
  console.log("What we are getting " + 'url("' + fruit2Address + fruitCloudTwo[fruitTwoIndex] + '")');
  
  if (document.getElementById("number").style.backgroundImage == 'url("' + numberAddress + myNumber[numberIndex] +'")' && document.getElementById("fruit2").style.backgroundImage == 'url("' + fruit2Address + fruitCloudTwo[fruitTwoIndex] + '")') {
    var data = ev.dataTransfer.getData("fruit");
    ev.target.appendChild(document.getElementById(data));
    console.log('finally got one');
  }else{
    console.log('Try Again');
  }
}

body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    background-color: black;
  }
  
  #background {
    position: absolute;
    background-image: url(Assets/Background_cloudPosition.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    bottom: 0%;
    z-index: -10;
  }
  
  #number {
    position: absolute;
    width: 230px;
    height: 230px;
    left: 450px;
    bottom: 415px;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 15;
  }
  
  #fruitCloud1 {
    position: absolute;
    width: 240px;
    height: 120px;
    bottom: 460px;
    left: 135px;
    z-index: 15;
  }
  
  #fruitCloud2 {
    position: absolute;
    width: 240px;
    height: 120px;
    bottom: 320px;
    left: 300px;
    z-index: 15;
  }
  
  #fruitCloud3 {
    position: absolute;
    width: 240px;
    height: 120px;
    bottom: 185px;
    left: 110px;
    z-index: 15;
  }
  
  #fruit1 {
    position: absolute;
    top: 0px;
    width: 240px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: rosybrown;
  }
  
  #fruit2 {
    position: absolute;
    width: 240px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: aqua;
  }
  
  #fruit3 {
    position: absolute;
    width: 240px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
  }
  
  #jelly {
    position: absolute;
    background-image: url(Assets/JellyMonster/JellyMonsterDefault.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 260px;
    height: 190px;
    bottom: 50px;
    right: 390px;
    z-index: 10;
    background-color: white;
  }
  
  #startGame {
    width: 80px;
    height: 80px;
    background-color: green;
  }
  
  #refreshFruits {
    width: 80px;
    height: 80px;
    background-color: blue;
  }
  
  

<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <script type="text/javascript" src="script.js"></script>
  <title>This is an experiment.</title>
</head>
<body>
  <button id="startGame" onclick="startGame()">Start</button>
  <button id="refreshFruits" onclick="refreshFruits()">Refresh</button>
  <div id="number"></div>
  <div id="jelly" ondrop="onDrop(event)" ondragover="dragOver(event)">Jelly</div>
  <div class="fruit" id="fruitCloud1">
    <div id="fruit1" draggable="true" ondragstart="dragStart(event)">Fruit 1</div>
  </div>
  <div class="fruit" id="fruitCloud2">
    <div id="fruit2" draggable="true" ondragstart="dragStart(event)">Fruit 2</div>
  </div>
  <div class="fruit" id="fruitCloud3">
    <div id="fruit3" draggable="true" ondragstart="dragStart(event)">Fruit 3</div>
  </div>
</body>
<html>

Answer 2

我还找到了一种更理想的测试方法。我没有测试背景图像，而是使用IF条件来测试拖动数据的ID是否与DIV想要的ID相匹配。为此，我不得不将所有图像放在一个数组中，然后改变随机的水果图像，以确保我将始终获得每个阶段所需的图像。