Question

我正在使用JavaScript编写游戏，其中计算机从数组中提取随机食物。然后用户正确地拼写单词，如果它们是正确的，则将它们重定向到厨房的图像。他们必须找到他们拼写在厨房里的物品。例如，计算机显示＆＃34; papel＆＃34;，用户输入＆＃34; apple＆＃34;，点击进入并看到厨房中隐藏在div中的各种项目，通过各种区域的点击显示（图像映射）。但是，我如何让它工作，以便用户只得到一个＆＃34;恭喜＆＃34;弹出如果他们选择正确的项目（例如苹果），而不是厨房里的其他项目（橙子，蛋糕等）？以下是我正在尝试的技术......（大学任务，不擅长代码）

＆＃13;

function appleans() {

    if (document.getElementById("apple").className == words[count].correct) {
        alert("Good job!");
        document.getElementById("fruitbowl").style.display = "none";
        document.getElementById("landingpage").style.display = "block";
    } else {
        alert("Try Again!");
    }

}

＆＃13;

<div id="fruitbowl">

    <img src="Imagesbg/bowl.png" class="bowl" alt="" usemap="#fruitbowl" />

    <map name="fruitbowl" id="fruitbowl">

        <area alt="apple" title="" href="" onClick="appleans(); 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" />

        <area alt="orange" title="" href="" onClick="orangeans(); return false;" shape="poly" coords="284,389,269,342,281,272,309,235,336,204,421,165,515,186,565,222,597,273,608,336,601,377,460,391" />

        <area alt="banana" title="" href="" shape="poly" onClick="bananaans(); return false;" coords="559,207,594,151,619,123,615,66,652,38,681,95,713,120,744,167,748,219,746,267,731,310,722,343,609,373,616,319,600,251" />
    </map>
</div>

＆＃13;

Answer 1

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

首先添加 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" />

对地图中的其他水果区域进行类似的更改 - 即添加 id 并将功能调用更改为 chooseFruit

编辑：使该功能更通用，因此可以重复使用所有水果。

然后在你的javascript中：

...

  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!");
     }  

  }

希望这有帮助。

使用数组选择来选择图像映射中的区域

1 个答案: