Javascript 将随机数输入div，然后按顺序删除div。怎么用？_Javascript_Jquery_Dom

Javascript 将随机数输入div，然后按顺序删除div。怎么用？

javascript jquery dom

Javascript 将随机数输入div，然后按顺序删除div。怎么用？,javascript,jquery,dom,Javascript,Jquery,Dom,所以，我想为我的孩子做一个游戏。缺乏JS方面的经验场景：例如，有4个带空白背景的方形div。刷新（或赢得）后，我想：将随机数生成到div（1…4）中。并展示给他们看然后让玩家通过点击这些div来删除它们，但要按照div的编号顺序 *例如，刷新div后，这些div的编号为2 3 1 4。因此，用户必须有权删除编号为1（2 3 4）的第一个div，依此类推。*如果他单击2，则会出现错误，div将保留在原位，用户可以尝试再次删除正确的一个div 这是一个学习数字的游戏。我有开始 Index.h

所以，我想为我的孩子做一个游戏。缺乏JS方面的经验

场景： 例如，有4个带空白背景的方形div。刷新（或赢得）后，我想：

将随机数生成到div（1…4）中。并展示给他们看

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

*例如，刷新div后，这些div的编号为2 3 1 4。因此，用户必须有权删除编号为1（2 3 4）的第一个div，依此类推。*如果他单击2，则会出现错误，div将保留在原位，用户可以尝试再次删除正确的一个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>

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

有几件事你必须做。首先，您必须创建一个随机数组，使用

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

   });

//按随机顺序排序
var rnd=[1,2,3,4]。排序（函数（）{
return.5-Math.random（）；
});
//映射网格中的每个div
$（'.grid div'）。每个（函数（ii，div）{
$（div）.text（rnd[ii]）；//将文本设置为第二个rnd
});
函数minVisible（）{
var min=1e10；//一个大数字
$（'.grid div'）。每个（函数（ii，div）{
//如果不可见，请忽略
if（$（div.css（'visibility'）=“hidden”）{
返回；
}
//如果是新的，请储存
var curFloatValue=parseFloat（$（div.text（））；
console.log（curFloatValue）；
如果（电流值<最小值）{
最小值=最大值；
}
});
返回最小值；
}
$（“.grid”）.children（“div”）.on（“单击”，函数）（）{
var clickedFloatValue=parseFloat（$（this.text（））；
如果（clickedFloatValue==minVisible（））{
$（this.css（“可见性”、“隐藏”）；
}否则{
警惕（“对不起，小酒鬼”）；
}
});

更新的JSFIDLE大致如下：

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:

请参阅上的工作版本

您需要在每场比赛中重新“运行”小提琴。

请尝试。我想这会对你有帮助

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');
  }
});

var生成的\u随机数\u序列=函数（）{
变量数_数组=[]；
变量编号\u字符串=“”；
var为真=真；
然而（这是真的吗）{
var ran_num=Math.round（1+Math.random（）*3）；
if（number_string.indexOf（ran_num）=-1&&ran_num<5）{
number\u array[number\u array.length]=ran\u num；
数字字符串=数字字符串+随机数；
如果（number_array.length==4）{is_true=false；}
}
}
返回数_数组；
}
变量集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合集合{
var number_array=生成的随机数_sequesce（）；
$（“.grid”）.children（）.each（函数（索引，元素）{
$（this.attr（'data-div_number'，number_数组[索引]）；
});
}
在分区（）上设置分区编号
var=0；
$（“.grid”）.children（“div”）.on（“单击”，函数）（）{
单击+=1；
var current_div_number=$（this.attr（'data-div_number'）；
if（parseInt（当前分区编号）=单击）{
$（this.css（“可见性”、“隐藏”）；
}否则{
单击-=1；
警报（“错误”）；
}
});

请详细说明问题，您的场景不清楚。您想要什么。非常清楚。试试我的代码，你会明白的。我想做一个学习数列的游戏。如果它们显示为4 2 1 3，kid必须可以删除它们，但顺序为1 2 3 4。您可以在JSFIDLE中进行此操作吗？@user3462947您是否能够在div中生成数字，如果是，则如何？如何在赢后自动刷新页面？location.reload（）；我会在“你赢了”警报后加上这一行。错误可以不在警报中显示，而是在div上显示为文本吗？很好。这对你来说怎么容易？我也想学习JS，来制作更多类似的东西。还有一个问题：如何触发游戏结束并重新加载或显示消息-“赢”？@user3462947-如果你没有找到一个“新”的最小值，你知道游戏结束了，那么试着添加

If（minVisible（）==1e10）{alert（'you Win'）}

在

的末尾，单击回调函数。想一想你也可以如何保持分数；）
<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>

#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;
}

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');
  }
});