Javascript 检查计划的函数
我正在创建一个允许用户绘制平面图的应用程序。它给他们一个12 x 8的网格，让他们点击多达50平方米。当他们达到50岁时，它会阻止他们，但他们可以点击一个已经选择的sqaure，将其变为空白，然后选择另一个 我需要做的是检查计划。他们不能有任何差距。所有方格只能在四个主要方向（无对角线）上与所有其他方格接触 是否有某种功能可以想象一个人站在第一广场，确保他可以参观所有其他广场 如果需要，我愿意使用php或JavaScript。是否已经有什么东西可以做到这一点，或者有人可以帮助我 下面是创建楼层平面的代码Javascript 检查计划的函数,javascript,php,html,Javascript,Php,Html,我正在创建一个允许用户绘制平面图的应用程序。它给他们一个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;?>');"> </div>
<?php
}
?>
<input type="button" value="Done" onclick="number();"/>
</body>
</html>
计划
您所描述的基本上是a，但以一种更简单的方式-您所关心的是，对于所选择的每个正方形，如果它不是迄今为止唯一选择的一个，那么它有一个不是空白的相邻正方形。
您可以确保该不变量在每个正方形标记后保持不变，但也必须在将正方形变为空白后进行测试，方法是确保每个现在空白的正方形邻居都有一个选定的邻居
就代码而言，您当前的解决方案似乎有点欠缺。
您依赖于方形背景来确定是否选择了它，这不是一个好主意-想象一下，稍后您希望从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
}
}
?>
作为奖励，您还可以保留对表示该正方形的DOM元素的引用，以便轻松更新网格。你好，Richard，我会将您的方框放入多维数组中，这样您就可以遍历数组，并知道是否可以“移动”。如果E3是楼层，则E2、E4、D3或F3需要处于活动状态。。。我希望我了解你在做什么。我曾想过这样做，但如果E3是活动的，A9是活动的，我需要检查你可以从一个到下一个。只要检查每一个正方形都有一个相邻的区域，就意味着你最多可以有25个“岛”。你的网格将设置为从一个位置开始，比如A1，然后在F10结束。。。它将检查您的网格，如果A1处于活动状态，则A2或B2必须处于活动状态。。。所以，它会检查这两个点。。。如果它们不处于活动状态，则会出现错误。。。它将对每个网格位置执行此操作，直到最后一个网格位置。如果它发现没有找到逻辑移动，就会出错。它从哪里开始和结束并不重要，它只是通过阵列直到失败或阵列结束。谢谢Martin。我会在周末试一试，然后告诉你我是如何得到它的。我不太确定我该如何把它融入我目前的计划中。我假设我可以省略上面的第一个函数，因为我只想在用户完成后验证网格。当他们单击“完成”时，它会检查网格，或者说“不允许”，让他们来修复它，或者如果允许，则对其进行编号。@RichardYoung:我不会这样做，因为第二个函数使用第一个函数。第一个函数用于验证单个正方形，第二个函数用于确保整个网格正常。您需要做的是将网格保存在一个类似于我所描述的数据结构中，以便能够查询它以进行验证。否则，你将不得不处理大量的黑客代码来完成这项工作，并且随着项目的进展，你将很难进一步扩展它。我将不得不忘记它。我不能那样做。有一个需要有两个或更多的远程广场，然后你加入。如果它继续验证，我就无法使用它。然后当用户按submit而不是每次标记时调用validate函数。
<?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
}
}
?>
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);