Question

所以，我想为我的孩子制作游戏。缺乏JS的经验。

的方案： 的例如4个方格div与空白bg。刷新（或获胜）之后，我想：

生成随机数到div（1 ... 4）。并将它们显示在其中。

然后让玩家通过点击它们来删除这些div，但按顺序删除div的编号。

*例如，在刷新div之后，这些数字 2 3 1 4。因此，用户必须有权删除编号为 1 的第一个div（2 3 _ 4） *如果他点击 2 就会出错，div会保留原位，用户可以再次尝试删除。

用于学习数字的游戏。我有开始。

的index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css.css">
    <script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
</head>
<body>
<div class="grid">
    <div id="Uleft"></div>
    <div id="Uright"></div>
    <div id="Dleft"></div>
    <div id="Dright"></div>
</div>
<script>
$(".grid").children( "div" ).on("click", function(){
$(this).css("visibility", "hidden");
});
</script>
</body>
</html>

css.css

.grid {
    margin: 0 auto;
    width: 430px;
}

#Uleft, #Uright, #Dleft, #Dright {
    border: 1px solid black;
    width: 200px;
    height: 200px;
    margin: 5px;
}

#Uright {
    float: right;
    background-color: red;
}

#Uleft {
    float: left;
    background-color: blue;
}

#Dleft {
    float: left;
    background-color: green;
}

#Dright {
    float: right;
    background-color: yellow;
}

所以，我想我也使用jQuery，但我不知道如何在刷新页面后使其动态和不同。请帮助：）

http://jsfiddle.net/bNa8Z/

Answer 1

您需要做一些事情。首先，您必须创建一个随机数组，然后使用sort和Math.random()来执行此操作，您需要在方块中插入文本。找到可见方块的最小值，然后根据最小值移除/警告。

   // sort by random
   var rnd = [1,2,3,4].sort(function() {
     return .5 - Math.random();
   });

   // map over each div in the grid
   $('.grid div').each(function(ii, div) {
      $(div).text(rnd[ii]); // set the text to the ii'th rnd
   });

   function minVisible() {
       var min = 1e10; // a big number

       $('.grid div').each(function(ii, div) {
           // if not visible ignore
           if ($(div).css('visibility') === "hidden" ){
               return;
           }

           // if new min, store
           var curFloatValue = parseFloat($(div).text());
           console.log(curFloatValue);
           if (curFloatValue < min) {
               min = curFloatValue;
           }
       });

       return min;
   }

   $(".grid").children( "div" ).on("click", function(){
       var clickedFloatValue = parseFloat($(this).text());
       if (clickedFloatValue == minVisible()) {
          $(this).css("visibility", "hidden");
       } else {
           alert("sorry little tike");
       }

   });

更新了jsfiddle http://jsfiddle.net/bNa8Z/2/

Answer 2

大致这就是它的样子：

var selected = {};

$('.grid div').each(function(idx){
    var is_done = false;
    do{
        var rand = Math.floor((Math.random()*4)+1);
        if( selected[rand] == undefined ){
            $(this).html(rand);
            selected[rand] = 1;
            is_done = true;
        }
    }while(!is_done);
});

alert("Start the game");

var clicked = [];

$('.grid').on('click', 'div.block', function(){
    var num = $(this).html();
    if( num == clicked.length + 1 ){
        //alert(num + " is correct!");
        clicked.push(num);
        $(this).addClass("hide");
    }else{
        alert("Failed!");    
    }
    if( clicked.length == 4 ){
        alert("You Won!");   
    }
});

HTML：

<div class="grid">
    <div class="block" id="Uleft"></div>
    <div class="block" id="Uright"></div>
    <div class="block" id="Dleft"></div>
    <div class="block" id="Dright"></div>
</div>

添加了CSS：

#Uleft, #Uright, #Dleft, #Dright {
    position:absolute;
    ...
}

#Uright {
    left:220px;
    top:0px;
    background-color: red;
}

#Uleft {
    left:0px;
    top:0px;
    background-color: blue;
}

#Dleft {
    left:0px;
    top:220px;
    background-color: green;
}

#Dright {
    left:220px;
    top:220px;
    background-color: yellow;
}


.hide {
    display: none;
}

参见

的工作版本

JSFiddle

你需要重新运行＆＃34;运行＆＃34;每场比赛的小提琴。

Answer 3

请试一试。我认为它会对你有帮助。

var generated_random_number_sequesce = function(){ 
  var number_array = [];
  var number_string = '';
  var is_true = true;
  while(is_true){
    var ran_num = Math.round(1 + Math.random()*3);
    if(number_string.indexOf(ran_num) == -1 && ran_num < 5){
      number_array[number_array.length] = ran_num;
      number_string = number_string + ran_num;
      if(number_array.length == 4){is_true = false;}
   }
 }
 return number_array; 
}

var set_number_on_divs = function(){
  var number_array = generated_random_number_sequesce();
  $(".grid").children().each(function(index, element){
    $(this).attr('data-div_number' , number_array[index]);
  });
}
set_number_on_divs()

var clicked = 0;
$(".grid").children( "div" ).on("click", function(){
  clicked += 1;
  var current_div_number = $(this).attr('data-div_number');
  if( parseInt(current_div_number) == clicked){
    $(this).css("visibility", "hidden");
  } else{
    clicked -= 1;
    alert('error');
  }
});

将随机数转换为div，然后按顺序删除div。怎么样？

3 个答案: