javascript - 将低效代码变成循环？ JavaScript

Question

我有一个带有彩色框的网页，如下所示:

每个框都有自己的 div，第一个框的 id 为“one”，第二个框的 id 为“two”，依此类推。这应该是一个猜谜游戏，如果你点击正确的盒子，你就赢了，如果你选择了错误的盒子，你就输了。使用数字生成器随机选择正确的盒子。我的 javascript 代码正在运行，但我想知道是否有更有效的方法来编写它？这是我现在拥有的:

function rand(){
  temp = Math.floor((Math.random()*6)+1);
  document.getElementById("one").onclick = one;
  document.getElementById("two").onclick = two;
  document.getElementById("three").onclick = three;
  document.getElementById("four").onclick = four;
  document.getElementById("five").onclick = five;
  document.getElementById("six").onclick = six; 
}

function correct(){
  alert("You are correct");
}

function incorrect(){
  alert("You are incorrect");
}

function one(){
 if (temp == 1){
   correct();
 }
 else {
   incorrect();
 }
}

function two(){
 if (temp == 2){
   correct();
 }
 else {
   incorrect();
 }
}

function three(){
 if (temp == 3){
   correct();
 }
 else {
   incorrect();
 }
}

对于所有六个框，代码都是这样的。我已经思考了好几个小时如何用循环或其他东西来做到这一点，但我就是想不出来。任何帮助将不胜感激。

Answer 1

由于它是随机生成的，因此您单击哪个框并不重要。举个例子，我的网站上有一个小游戏，它是刮刮卡:有十二个区域可供选择，但只能选择一个。在内部，您选择哪一个完全没有区别。这同样适用于这里。

所以，试试这个:

HTML:

<div id="board">
    <div id="one"></div>
    <div id="two"></div>
    ....
</div>

JS:

document.getElementById('board').onclick = function() {
    if( Math.random() < 1/6) {
        alert("You win!");
    }
    else {
        alert("Sorry, you lost...");
    }
}

编辑:Here是一个展示如何允许多次获胜机会的演示。但请注意，出于任何严肃的目的，您应该向服务器提交请求，并让服务器告诉您您是赢了还是输了，否则很容易被欺骗;)