如何使用节点值创建配对游戏，并设置setTimeout()方法

How to create pair game using node values and set a setTimeout() method

本文关键字：设置 setTimeout 方法 游戏 节点 何使用 创建      更新时间：2023-09-26

我想创建一个配对游戏，如果相同的文本节点是匹配的，它将设置白色的背景，以显示匹配的文本节点，如果不是，它将设置一个超时，并回到原来的状态。问题是如果我使用子节点。nodeValue在match中表示ChildNodes。nodeValue不是一个函数。我试了另一个代码。我声明了一个变量，它调用div的元素标签名，即我在div中附加一个textNode。我想比较div的两个连续的子节点，如果是相同的节点，我将背景颜色更改为白色。我使用settimeout方法，如果没有，背景颜色会回到原始状态也就是黑色，我对此很困惑。

你能扫描我的代码并帮我找出这段代码的问题是什么吗?

代码如下:

 <html>
  <head>
  <style>
   div.row {
   clear : left;
   margin: auto;
   width: 520px;   
 } 
 div.col {width:100px;
      height:100px;
      border: 3px solid black;
      float : left;
      margin: 10px;
      font-size: 75px;
      text-align: center;
      background-color: black;
    }
   </style>
   </head>
   <body>
  <div class="row">
  <div id="00" class="col"></div>  
  <div id="01"class="col"></div>
  <div id="02"class="col"></div>
  <div id="03"class="col"></div>
</div>  
<div class="row">
  <div id="10" class="col"></div>  
  <div id="11"class="col"></div>
  <div id="12"class="col"></div>
  <div id="13"class="col"></div>
</div> 
<div class="row">
  <div id="20" class="col"></div>  
  <div id="21"class="col"></div>
  <div id="22"class="col"></div>
  <div id="23"class="col"></div>
</div> 
<div class="row">
  <div id="30" class="col"></div>  
  <div id="31"class="col"></div>
  <div id="32"class="col"></div>
  <div id="33"class="col"></div>
</div> 
 <script>
var size = 4;
var player = 0;
var board = new Array(size);
for (var i = 0; i < size; i++) {
board[i] = new Array(size);
for (var j = 0; j < size; j++) {
   board[i][j] = 0;
    }
  }
 var div_elements = document.getElementsByClassName("col");
 for (var i = 0; i < div_elements.length;i++) {
     div_elements[i].addEventListener("click", function() {mclick(this);});
 }
var count=0;
 function mclick(obj) {
   if(match(div_elements.childNodes[0].nodeValue) == match(div_elements.childNodes[1].nodeValue)
   {
     obj.style.backgroundColor="white";
   }
   else{
    setTimeout(function(){ obj.style.backgroundColor="white" }, 1000);
   }
  }
 function shuffle() {
      var value;
    var text;
    var text_node;
    for (var i = 0; i < (size * size) ; i++) {
          value = Math.ceil(Math.random() * 8);
       board[Math.floor(i/4)][i %4] = value;
    }  
    for (var i = 0; i < div_elements.length; i++)
    {
        text = board[Math.floor(i/4)][i%4];
        text_node = document.createTextNode( text);
         div_elements[i].appendChild(text_node);
    }
 }

 shuffle();
</script>
 </body>
 </html>

你必须更具体。你有什么问题?错误消息是什么?你做了什么会引发这个问题?

至少，把代码放在pastebin.com或类似的地方，这样别人就不需要建立一个项目来测试你的整个东西。

相关文章：