0

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

在此处输入图像描述

每个盒子都有自己的 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();
 }
}

所有六个盒子的代码都是这样的。几个小时以来，我一直在思考如何使用循环或其他东西来做到这一点，但我就是想不通。任何帮助将非常感激。

4

2 回答 2

4

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

所以，试试这个：

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

编辑：这是一个演示如何允许多次获胜的机会。但是请注意，出于任何严肃的目的，您应该向服务器提交请求并让服务器告诉您您是赢还是输，否则非常容易作弊；）

于 2013-04-25T02:14:20.213 回答
1

在这种情况下，使用像 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>
于 2013-04-25T02:14:55.727 回答