Question

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

enter image description here

每个框都有自己的div，第一个框的id为“one”，第二个框为“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是一个演示，展示了如何获得多个获胜机会。但请注意，出于任何严重的目的，您应该向服务器提交请求并让服务器告诉您是否赢了或丢失，否则很容易作弊;）

Answer 2

使用像jQuery这样的DOM操作库在这种情况下确实很有帮助。但是如果你愿意继续使用vanilla javascript，你可以使用querySelectorAll / addEventListener事件委托，并检查调用元素的id，并处理那个

检查http://jsfiddle.net/KYvGf/

上的工作代码

$(function(){
  var $box, $boxes = [], secret = Math.floor((Math.random()*6)+1);

  $(document).on('click', '.box', function(event){
    var $el = $(event.target);
    if ($el.data('id') === secret){
      alert('bingo!');
    }
  });

  for (var i = 1; i < 7; i++){
    $box = $('<div/>', {'class': 'box'});
    switch (i){
      case 1:
        $box.css({'backgroundColor': 'red'});
        break;
      case 2:
        $box.css({'backgroundColor': 'blue'});
        break;
      case 3:
        $box.css({'backgroundColor': 'green'});
        break;
      case 4:
        $box.css({'backgroundColor': 'yellow'});
        break;
      case 5:
        $box.css({'backgroundColor': 'purple'});
        break;
      case 6:
        $box.css({'backgroundColor': 'orange'});
        break;
    }
    $box.data('id', i);
    $boxes.push($box);
  }
  $('#holder').append($boxes);
});

<div id="holder"></div>

将低效的代码转换为循环？使用Javascript

2 个答案: