Народ, подскажите пожалуйста кто чем может! Есть такая вот проблема, что в скрипте, который я тут выкладываю, присутствует рекурсивная функция, исследующая значения в массиве и определяющая совпадения со случайным получаемым значением в этой функции. В целом, сценарий направлен на создание игры "Пятнашки".
Глюк такой, что когда я вставляю строчные выражения внутрь функции, никак на прямую не связанные с логикой функции и не влияющие на её работу, то мой сценарий начинает нормально работать и не допускает повторения значений в результирующем массиве. Они только лишь для вывода отчетов по этапам работы функции и в окончательном варианте не нужны. НО как только функция лишается этих выражений с отчетом, то сразу же наблюдается повторное попадание совпадающих значений в массив.
script.js ( обратить внимание на рекурсивную функцию
getCubeCoords(), если в ней убрать или закомментировать все строки, где встречается переменная
otchet1, то все будет плохо
, а именно, может быть не с первого раза, но со второго или третьего раза обновления страницы, появятся совпадающие значения в массиве
cubeMap, что пагубно отражается на расстановке квадратов в выделенном для них поле
field):
var fieldSize = 16;
var cubeMap = [];
var otchet1 = '<table border="1">\n'
+ '<tr><td>№<\/td><td>Выбранные координаты<\/td><td>Результат<\/td><td>Окончательные координаты<\/td><\/tr>';
genCubeMap();
otchet1 += '<\/table>';
function genCubeMap(){
var reqX, reqY;
for (var i=0; i < fieldSize; i++){
getCubeCoords();
}
function getCubeCoords(){
reqX = parseInt(Math.random()*4);
reqY = parseInt(Math.random()*4);
otchet1 += '<tr><td>'+ (i+1) +'<\/td><td>'+ reqX +':'+ reqY +'<\/td>';
var zanyato = false;
for (var n=0; n < i+1; n++){
if (cubeMap[n] && cubeMap[n][1] == reqX && cubeMap[n][2] == reqY){
zanyato = true;
break;
}
}
if (zanyato !== false){
otchet1 += '<td>заняты квадратом №'+ (n+1) +'<\/td><td> <\/td><\/tr>\n';
getCubeCoords();
return;
} else {
otchet1 += '<td>Свободны<\/td><td>'+ reqX +':'+ reqY +'<\/td><\/tr>\n';
}
cubeMap[i] = [i<fieldSize-1 ? i+1 : null, reqX, reqY, '|'];
}
}
function placeCubs(){
for (var i=0; i < fieldSize-1; i++){
this['cube'+(i+1)].style.left = cubeMap[i][1]*53 +'px';
this['cube'+(i+1)].style.top = cubeMap[i][2]*53 +'px';
}
}
var d = document;
var field, cube1, cube2, cube3, cube4, cube5, cube6, cube7, cube8, cube9, cube10, cube11, cube12, cube13, cube14, cube15;
var info, info2;
window.onload = function(){
info = d.getElementById('info');
info2 = d.getElementById('info2');
field = d.getElementById('field');
cube1 = d.getElementById('cube1');
cube2 = d.getElementById('cube2');
cube3 = d.getElementById('cube3');
cube4 = d.getElementById('cube4');
cube5 = d.getElementById('cube5');
cube6 = d.getElementById('cube6');
cube7 = d.getElementById('cube7');
cube8 = d.getElementById('cube8');
cube9 = d.getElementById('cube9');
cube10 = d.getElementById('cube10');
cube11 = d.getElementById('cube11');
cube12 = d.getElementById('cube12');
cube13 = d.getElementById('cube13');
cube14 = d.getElementById('cube14');
cube15 = d.getElementById('cube15');
placeCubs();
info.innerHTML = otchet1;
}
default.css :
body {
background: #fff;
color: #000;
margin: 5px;
padding-top: 1px;
}
#info {
position: absolute;
font: normal 12px Arial;
}
#info2 {
position: absolute;
right: 0;
}
#field {
border: 1px solid #000;
width: 211px; height: 211px;
padding: 1px;
margin: 100px auto 0;
background: #FFF;
}
#field div {
width: 50px; height: 50px;
border: 1px solid #000;
margin: 0 -52px -52px 0;
background: #566DFF;
text-align: center;
font: bold 38px Arial;
position: relative;
cursor: pointer;
}
index.html :
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript - "Пятнашки"</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="./default.css" />
<script type="text/javascript" src="./script.js"></script>
</head>
<body>
<div id="info"> </div>
<div id="info2"> </div>
<div id="field">
<div id="cube1">1</div>
<div id="cube2">2</div>
<div id="cube3">3</div>
<div id="cube4">4</div>
<div id="cube5">5</div>
<div id="cube6">6</div>
<div id="cube7">7</div>
<div id="cube8">8</div>
<div id="cube9">9</div>
<div id="cube10">10</div>
<div id="cube11">11</div>
<div id="cube12">12</div>
<div id="cube13">13</div>
<div id="cube14">14</div>
<div id="cube15">15</div>
</div>
</body>
</html>
Никак не могу взять в толк в чем здесь проблема. ХЕЛП!
