一个用于测试是否所有svg对象都可见的函数

A function to test if all svg objects are visible

本文关键字：对象 svg 函数 一个 用于 是否 测试      更新时间：2023-09-26

我正在svg和javascript中制作一个简单的内存游戏。游戏的基本轮廓是匹配正确的形状。总共有20个矩形。我现在正试图创建一个函数，当所有矩形不透明度为0时进行检查，创建一个警报框并停止计时器。我想知道如何做到这一点，这是我迄今为止的代码。提前谢谢。

 <script language="JavaScript" type="text/javascript">
 var shape1;
 var shape2;
 var prevTile;
 var click = 0;
 function changerect(evt, shape) { // this reduces the opacity to o of the tiles
    var svgobj=evt.target; // Reduced of pressed Rect
    svgobj.style.opacity= 0;

    click++;  // Increment Click counter        
              // If click == 1 we should take note of shape
              // If click == 2 we should take note of shape and compare to previous shape
    if(click == 1) {
        // We're taking note of what has been pressed
        // Taking note of shape and tile
        shape1 = shape;
        prevTile = svgobj;
    }
    else if (click == 2) {
        shape2 = shape;   // Check to see if there is a match
        if(shape1 == shape2);// YES there is a match
              // NO there is no match
        else {
        // Hide 2 shapes after some time
            setTimeout(hideTiles, 2000);
               function hideTiles() {
                 svgobj.style.opacity = 1;
                     prevTile.style.opacity = 1;
            } } }
    if(click == 2) {// Reset click to 0 after 2 clicks
        click = 0;
    }
  }
  function rectClicked(shape) {     
  }
   </script>

这是HTML的正文。

  <body onload="startstop();"> 
  <input id="clock" type="text" value="00:00" style="text-align:     center;background-color:white;border:1px solid gray;font-weight:bold;font-size:14pt;" readonly><br>
<input id="startstoptimer" TYPE=HIDDEN><br>

 <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='700'   width='700'>

 <defs><!--GRADIENT  ON TILES/STYLING-->
     <linearGradient id="gradient">
         <stop offset="0%" style="stop-color: #ffefdb"></stop>
         <stop offset="100%" style="stop-color: #8b8878"></stop>
     </linearGradient>
</defs>

 <!--BACKGRROUND-->
<rect x="20" y="2" rx="20" ry="20" width="600" height="480"     style="fill:rgb(197, 213, 209)"/>
<!--TILE ONE-->
<!--my svg shape  underneath-->
<rect id="rectB" x="245" y="125" width="50" height="50" style="fill:green;stroke:orange;stroke-width:5;fill-opacity:1.0;stroke- opacity:1.0"/>
 <!--below is the rect that covers svg shape-->
 <rect id="recB" onclick='changerect(evt,"rectB")' x="220" y="100" rx="20" ry="20" width="100" height="100" fill="url(#gradient)">
<!-- initial animation-->
<animate attributeType="CSS" attributeName="opacity" from="0" to="1" dur="5s" repeatCount="definite"/>


<!--my svg shape  underneath-->
<circle id="circleC" cx="270" cy="260" r="20" fill="purple"/> 
<!--below is the rect that covers svg shape-->
<rect id="cirC" onclick='changerect(evt,"circleC")' x="220" y="210" rx="20" ry="20" width="100" height="100" fill="url(#gradient)">
<!-- initial animation-->
<animate attributeType="CSS" attributeName="opacity" from="0" to="1" dur="5s" repeatCount="definite"/></rect>

<!--TILE THREE-->
<circle id="circleC" cx="380" cy="150" r="20" fill="purple"/> 
<rect id="cirC" onclick='changerect(evt,"circleC")' x="330" y="100" rx="20" ry="20" width="100" height="100" fill="url(#gradient)">
<animate attributeType="CSS" attributeName="opacity" from="0" to="1" dur="5s" repeatCount="definite"/> </rect>  
<!--TILE FOUR-->
<rect id="rectC" x="355" y="235" width="50" height="50" style="fill:green;stroke:orange;stroke-width:5;fill-opacity:1.0;stroke-opacity:1.0"/>
<rect id="recB" onclick='changerect(evt,"rectB")' x="330" y="210" rx="20" ry="20" width="100" height="100" fill="url(#gradient)">
<animate attributeType="CSS" attributeName="opacity" from="0" to="1" dur="5s" repeatCount="definite"/></rect>               
</svg>
</body>
</html>

我只是这里的初学者，提前谢谢。

我假设图像在某种容器中，如下所示：

<div id="testContainer">
 <img src="">
 <img src="">
 <img src="">
 <img src="">
</div>

这样您就可以遍历这个容器的子容器：

var counter = 0
var children = document.getElementById("testContainer").children;
for (var i = 0; i < children.length; i++) {
   if(children[i].style.opacity === 0)
   {
      counter++;
   }
}
if(counter === 20){
   console.log('finished!');
   window.alert('finished!');
   // stop timer
}
else{
   counter = 0;
}

有更复杂的方法可以做到这一点，但为了解决这个特定的问题，这可能是一种简单的方法。

编辑：好的，这些形状在svg图像里面。如果你想保留你的结构，我假设给你所有的矩形分配一个类属性，如下所示：

<rect class="shapeToFlip" x="20" y="2" rx="20" ry="20" width="600" height="480"     style="fill:rgb(197, 213, 209)"/>

为了获得所有形状，您可以使用getElementsByClassName函数，该函数返回一个数组：

var allShapes = document.getElementsByClassName("shapeToFlip");

之后，您可以像前面提到的那样遍历数组。

相关文章：