我正在创建一个允许用户绘制平面图的应用程序。它给了他们一个12 x 8的网格，让他们点击多达50个正方形。当他们到达50时，它会停止他们，但他们可以点击一个已经选择的正方形，使其变为空白，然后选择另一个。
我需要能够做的是检查计划。不能有任何缝隙。所有的广场只有在四个主要方向上(没有对角线)才有可达性。
有没有某种函数可以想象一个人站在第一个广场上，并确保他可以访问所有其他的广场。
如果需要，我愿意使用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;?>');"> </div>
<?php
}
?>
<input type="button" value="Done" onclick="number();"/>
</body>
</html>
你所描述的基本上是一个连通图问题，但以一种更简单的方式-你所关心的是对于每个选定的正方形，如果它不是迄今为止唯一选定的，它有一个相邻的非空白的正方形。你可以确保这个不变量在每个正方形标记后都成立，但你也必须在将正方形变成空白后测试它，通过确保每个现在为空白的正方形邻居都有一个选择的邻居。
代码方面，您当前的解决方案似乎有点欠缺。你依靠方形背景来识别它是否被选中，这不是一个好主意——想象一下，以后你想从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;?>');"> </div>
<?php
}
}
?>
，然后处理给定给plan()的($i, $j)坐标，以更新代表网格的JavaScript矩阵中的右正方形。
您可以初始化JavaScript矩阵如下(包装在一个漂亮的jsFiddle):
var maxY = 12;
var maxX = 8;
var grid = new Array(maxY);
for (var i = 0; i < maxY; ++i) {
grid[i] = new Array(maxX);
for (var j = 0; j < maxX; ++j) {
grid[i][j] = 0;
}
}
function checkConnectedSquare(grid, y, x) {
// one of the neighbors must be chosen
return (x > 0 && grid[y][x-1] == 1)
|| (x < maxX-1 && grid[y][x+1] == 1)
|| (y > 0 && grid[y-1][x] == 1)
|| (y < maxY-1 && grid[y+1][x] == 1);
}
function checkConnected(grid) {
var countChosenSquares = 0;
var isConnected = true;
for (var i = 0; i < maxY; ++i) {
for (var j = 0; j < maxX; ++j) {
if (grid[i][j] == 1) {
if (!checkConnectedSquare(grid, i, j)) {
isConnected = false;
}
countChosenSquares++;
}
}
}
// if no squares were chosen or only one, the grid is 'connected'
// or every square that is chosen is connected.
return (countChosenSquares <= 1 || isConnected);
}
// test the code
function printGrid(grid) {
var html = '';
for (var i = 0; i < maxY; ++i) {
for (var j = 0; j < maxX; ++j) {
html += grid[i][j] + ' ';
}
html += '<br />';
}
document.body.innerHTML = html;
}
grid[3][6] = 1;
grid[3][7] = 1;
// should be true
console.log(checkConnectedSquare(grid, 3, 6));
// should be true
console.log(checkConnectedSquare(grid, 3, 7));
// should be false
console.log(checkConnectedSquare(grid, 2, 5));
// should be true
console.log(checkConnected(grid));
grid[2][5] = 1;
// should be false
console.log(checkConnected(grid));
grid[2][5] = 0;
grid[3][6] = 0;
// should be true
console.log(checkConnected(grid));
printGrid(grid);
作为附加功能，您还可以保存对表示该正方形的DOM元素的引用，以便轻松地更新网格。
<?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');
?>