Question

我正在创建一个允许用户绘制平面图的应用程序。它为他们提供了一个12 x 8网格，让他们点击最多50个平方。当它们达到50时它会停止它们但是它们可以点击已经选择的sqaure将其变为空白然后选择另一个。

我需要做的是检查计划。他们不能有任何差距。所有方块只能在四个主要方向（无对角线）上从所有其他方块进行访问。

是否有某种功能可以让一个站在正方形的男人想象并确保他可以访问所有其他方块。

如果需要，我愿意使用php或JavaScript。是否有任何东西可以做到这一点，或者有人能够帮助我。

下面是创建平面图的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

  <head>
    <title>Plan</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <script type="text/javascript">
    <!--
      var count=0;

      function plan(id)
      {
        var obj = document.getElementById(id);

        if(obj.style.backgroundColor == "rgb(0, 0, 0)")
        {
          if(count <= 49)
          {
            count++;
          }
          else
          {
             alert('You can have a maximum of 50');
            count++;
          }
        }
        else if(obj.style.backgroundColor == "rgb(255, 0, 0)")
        {
          count--;
        }
        if(count <= 50)
        {
          obj.style.backgroundColor = (obj.style.backgroundColor == "rgb(0, 0, 0)") ? "#ff0000" : "#000000";
          obj.style.color = (obj.style.backgroundColor == "rgb(0, 0, 0)") ? "#000000" : "#ffffff";
        }
        if (count>50)
        {
            count--;
        }
      }

      function number()
      {
        var room_number=0;
        col=0;
        row="a";
        for (var i=1; i<97; i++)
        {
          col++;
          if (i<97)
          {
            row="h";
          }
          if (i<85)
          {
            row="g";
          }
          if (i<73)
          {
            row="f";
          }
          if (i<61)
          {
            row="e";
          }
          if (i<49)
          {
            row="d";
          }
          if (i<37)
          {
            row="c";
          }
          if (i<25)
          {
            row="b";
          }
          if (i<13)
          {
            row="a";
          }

          if (col>12)
          {
            col=1;
          }
          var room = document.getElementById(row+col);
          if (room.style.backgroundColor == "rgb(255, 0, 0)")
          {
            room_number++;
            room.textContent=room_number;
          }
          else
          {
            room.textContent="";
          }
        }
      }
    //-->
    </script>
  </head>

  <body style="background-color: #000000; width: 386px; margin: 10px auto 0;">
<?php
    $l=0;
    $j=0;

    for ($i=0; $i<96; $i++)
    {
      $l++;
      $j++;
      if ($j<97)
      {
        $letter=h;
      }
      if ($j<85)
      {
        $letter=g;
      }
      if ($j<73)
      {
        $letter=f;
      }
      if ($j<61)
      {
        $letter=e;
      }
      if ($j<49)
      {
        $letter=d;
      }
      if ($j<37)
      {
        $letter=c;
      }
      if ($j<25)
      {
        $letter=b;
      }
      if ($j<13)
      {
        $letter=a;
      }

      if ($l>12)
      {
        $l=1;
      }
      $border="2px 0 0 2px";
      if ($l==12)
      {
        $border="2px 2px 0 2px";
      }
      if ($j>84)
      {
        $border="2px 0 2px 2px";
      }
      if ($j==96)
      {
          $border="2px 2px 2px 2px";
      }
?>
      <div style="width: 30px; height: 30px; line-height: 30px; border-style: solid; border-color: #ffffff; border-width: <?=$border;?>; float: left; background-color: #000000; color: #ffffff; text-align: center; vertical-align: middle; font-weight: 700;" id="<?=$letter, $l;?>" onclick="plan('<?=$letter, $l;?>');">&nbsp;</div>
<?php
    }
?>
    <input type="button" value="Done" onclick="number();"/>
  </body>
</html>

Answer 1

你所描述的基本上是一个Connected Graph problem，但是以一种更简单的方式 - 你所关心的是，对于每个选择的方格，如果它不是迄今为止唯一选择的方格，它有一个邻居方这不是空白。你可以确保在每个方形标记后保持这个不变量，但是你必须在将一个方块变成空白之后测试它，确保每个现在空白的方形邻居都有一个选定的邻居。

代码方面，您当前的解决方案似乎有点缺乏。你依靠方形背景来确定它是否被选中，这不是一个好主意 - 想象一下，你想要从CSS文件中控制这些颜色或允许多种颜色。它会变得混乱。

我建议您创建一个将保持网格的数据结构，并为每个方块保存表示该方块状态的数据。例如，12x8矩阵，如果方形为空白则保持为0，如果选择则为1。这样，搜索正方形邻居比遍历DOM要容易得多。为（1..12,1。8）范围内的每个绘制正方形提供坐标，并在通过PHP创建文档时为每个正方形onclick动作指定坐标。例如，PHP绘图可以通过以下方式完成：

<?php
  for ($i = 1; $i <= 12; ++$i) {
      for ($j = 1; $j <= 8; ++$j) {
      ?>
      <div style="width: 30px; height: 30px; line-height: 30px; border-style: solid; border-color: #ffffff; border-width: <?=$border;?>; float: left; background-color: #000000; color: #ffffff; text-align: center; vertical-align: middle; font-weight: 700;" id="<?=$letter, $l;?>" onclick="plan(<?=$i;?>, <?=$j;?>, '<?=$letter, $l;?>');">&nbsp;</div>
      <?php
      }
    }
?>

然后处理($i, $j)的{{1}}坐标，以更新代表网格的JavaScript矩阵中的正方形。

您可以按照以下(wrapped up in a nice jsFiddle)初始化JavaScript矩阵：

plan()

作为奖励，您还可以保存对表示此正方形的DOM元素的引用，以便轻松更新网格。

Answer 2

<?php 

    function WhatNeedsActive($row,$square){
        $baserow = '1'; //Cannot goto row 0
        $maxrow = '4'; //Cannot goto row 5
        $base_square = '1';
        $max_square = '10';
        $active_squares = array(); 
        if ($row != $baserow){
            $active_squares[] = "Row: " . ($row - 1) . " Square: " . $square;
        }
        if ($row != $maxrow){
            $active_squares[] = "Row: " . ($row + 1) . " Square: " . $square;
        }
        if ($square != $max_square){
            $active_squares[] = "Row: " . $row . " Square: " . ($square + 1);
        }
        if ($square != $base_square){
            $active_squares[] = "Row: " . $row . " Square: " . ($square - 1);
        }
        var_dump ($active_squares);
    }
    WhatNeedsActive('2','5');

?>

检查计划的功能

2 个答案: