Javascript 使用阵列选择选择图像地图中的区域

我正在用JavaScript编写一个游戏，其中计算机从数组中随机抽取一个食物。然后，用户正确拼写单词，如果拼写正确，则会重定向到厨房图像。他们必须在厨房里找到他们拼写的东西。例如，电脑显示“papel”，用户输入“apple”，点击go，可以看到一个厨房，里面有隐藏在div中的各种物品，这些物品通过点击各个区域显示（图像映射）。但是，我如何让它工作，以便用户只有在选择了正确的项目（如苹果）时，才能得到一个“祝贺”弹出窗口，而不是厨房中的其他项目（桔子、蛋糕等）？下面是我正在尝试的技术。。。（大学作业，不擅长编码）

函数appleans（）{ if（document.getElementById（“apple”）.className==words[count]。正确）{ 警惕（“干得好！”）； document.getElementById（“水果碗”）.style.display=“无”； document.getElementById（“landingpage”）.style.display=“block”； }否则{ 警告（“再试一次！”）； } }

不清楚您的“单词”数组是如何设置的，我也没有看到任何与地图区域相关的类。我想你只是想做这样的事情：

首先添加id属性，并将函数调用更改为chooseFruit，以显示地图中的区域：

<area alt="apple" id="apple" title="" href="" onClick="chooseFruit('apple'); return false;" shape="poly" coords="325,211,287,246,265,302,263,345,274,388,78,335,57,246,80,182,145,149,156,114,288,159" />

---

希望这能有所帮助。

成功了，非常感谢！还有一个问题——可以选择“厨房”的其他区域来寻找某些物品（如冰箱、橱柜等）。为此，我可以像上面一样处理映射，但是每个区域（例如冰箱等）的功能不同吗？非常欢迎：-）如果这些其他项目也在

单词[…]

数组中并且在相同的映射中，那么您可以使用相同的功能。然后，为了可读性，您可能希望使函数稍微抽象一些。例如：

函数选择项（item）{if（item==correctWord）..

。您还必须相应地将映射中的区域更改为

onClick=“choositem（…）；…

。

...

  var correctWord = words[count];

  function chooseFruit(fruit) {

    if (fruit == correctWord)  {
         alert("Good job!");
         document.getElementById("fruitbowl").style.display = "none"; 
         document.getElementById("landingpage").style.display = "block"; 
     } else {
        alert("Try Again!");
     }  

  }