Javascript 浏览器报告“；“递归太多”；在扫雷舰克隆中
我在做扫雷游戏。浏览器显示“递归太多”。你能看一下代码并改正我犯的错误吗Javascript 浏览器报告“；“递归太多”；在扫雷舰克隆中,javascript,php,html,recursion,Javascript,Php,Html,Recursion,我在做扫雷游戏。浏览器显示“递归太多”。你能看一下代码并改正我犯的错误吗 <?php /* Basic PHP code for generating a table 8x8 with every button a unique id */ $tableDesign = "<table>"; $id = 1; for($i=0; $i<8; $i++){ $tableDesign .= "<tr>";
<?php
/*
Basic PHP code for generating a table 8x8 with every button a unique id
*/
$tableDesign = "<table>";
$id = 1;
for($i=0; $i<8; $i++){
$tableDesign .= "<tr>";
for($j=0; $j<8; $j++){
$tableDesign .= "<td><button id='num_$id' onclick='get_button(this.id)'></button></td>";
$id++;
}
$tableDesign .= "</tr>";
}
$tableDesign .= "</table>";
?>
<!DOCTYPE html>
<html>
<head>
<title>Mine Sweeper Ver. 0.1</title>
<style type="text/css">
table {
border-collapse: collapse;
}
td {
width: 60px;
height: 60px;
border: 1px solid #ddd;
}
button {
width: 60px;
height: 60px;
cursor: pointer;
}
img {
width: 50px;
height: 50px;
}
.table{
float: left;
width: 550px;
}
.switch_command {
padding-top: 40px;
font-size: 22px;
font-family: sans-serif;
float: left;
}
</style>
</head>
<body>
<div class="table">
<?php echo $tableDesign; ?>
</div>
<div class="switch_command">
Switch to protect from Expload: <input id="check" type="checkbox">
</div>
<script type="text/javascript">
var randomMinesLocation = new Array(); // this array will contain the id number part of the mines
var mineProtecition = new Array(); // this array will contain the mine with flags to not be abled to open when the player clicks on it
var emptyCells = new Array(); // this array will contain the empty cells opened to prevent the recursion going through the same cell again
// this while loop is responsible for generating 10 different mines in random from 1 to 64
while (randomMinesLocation.length < 10) {
index = randomMinesLocation.length;
match = false;
position = Math.floor((Math.random() * 64) + 1);
for (i = 0; i < randomMinesLocation.length; i++) {
if(position == randomMinesLocation[i])
match = true;
}
if(!match) randomMinesLocation[index] = position;
}
// I made this check function to prevent to equal id to be contained to the openedEmptyCells array which will be used to open the cells in cooperation with another function
function checkForEqualVal(valToTest, openedEmptyCells) {
match = false;
if (openedEmptyCells.length == 0) {
openedEmptyCells.push(valToTest);
} else {
for (i = 0; i < openedEmptyCells.length; i++){
if(openedEmptyCells[i][1] == valToTest[1]) {
match = true;
break;
}
}
if (!match) {
openedEmptyCells.push(valToTest);
}
}
return openedEmptyCells;
}
function logic_game(idNumericPart, randomMinesLocation, openedEmptyCells = []) {
match = false;
numberOfMinesNear = 0;
canditateCells = [];
for (j = -1; j <= 1; j++) {
if (idNumericPart <= 8 && j == 1 || idNumericPart > 56 && j == -1 ) continue;
for(k= -1; k <= 1; k++){
if(((idNumericPart - 1) % 8 == 0 && k == -1) || (idNumericPart % 8 == 0 && k == 1))
continue;
idNumericPartOfNear = idNumericPart - (j * 8) + k;
if(j != 0 && k == 0 || j == 0 && k != 0 || j != 0 && k != 0)
canditateCells.push(idNumericPartOfNear);
for(i=0; i<10; i++){
if(idNumericPart == randomMinesLocation[i]){
match = true;
break;
}
else if(idNumericPartOfNear == randomMinesLocation[i])
numberOfMinesNear++;
}
}
}
if(match)
openedEmptyCells = checkForEqualVal([true, idNumericPart], openedEmptyCells);
else if(numberOfMinesNear > 0){
openedEmptyCells = checkForEqualVal([numberOfMinesNear, idNumericPart], openedEmptyCells);
}
else{
openedEmptyCells = checkForEqualVal([false, idNumericPart], openedEmptyCells);
for(i=0; i<canditateCells.length; i++){
matchedBtw = false;
for(j=0; j<emptyCells.length; j++){
if(canditateCells[i] == emptyCells[j])
matchedBtw = true;
break;
}
if(!matchedBtw)
openedEmptyCells = logic_game(canditateCells[i], randomMinesLocation, openedEmptyCells);
}
}
return openedEmptyCells;
}
function printToScreen(value, idNumericPart){
if(typeof(value) === 'boolean' && value){
document.getElementById("num_" + idNumericPart).parentElement.innerHTML = '<img src="mine.png">';
}
else if(typeof(value) === 'number'){
document.getElementById("num_" + idNumericPart).parentElement.style.backgroundColor = '#eee';
document.getElementById("num_" + idNumericPart).parentElement.innerHTML = value;
}
else{
document.getElementById("num_" + idNumericPart).parentElement.style.backgroundColor = '#eee';
document.getElementById("num_" + idNumericPart).parentElement.innerHTML = '';
}
}
function get_button(id){
idNumericPart = id.substring(4);
checkValue = document.getElementById("check").checked;
matchCheckForMineProtect = false;
if(checkValue){
for(i=0; i<mineProtecition.length; i++){
if(mineProtecition[i] == idNumericPart){
matchCheckForMineProtect = true;
break;
}
}
if(matchCheckForMineProtect){
mineProtecition.splice(i, 1);
valueToBeSubstitude = '<button id="' + id + '" onclick="get_button(this.id)"></button>';
}
else{
mineProtecition.push(idNumericPart);
valueToBeSubstitude = '<button id="' + id + '" style="background: url(' + 'flag.png' + ') no-repeat; background-size: 40px 40px;" onclick="get_button(this.id)"></button>';
}
document.getElementById(id).parentElement.innerHTML = valueToBeSubstitude;
}
else {
matchProtected = false;
for(i=0; i<mineProtecition.length; i++){
if(mineProtecition[i] == idNumericPart){
matchProtected = true;
break;
}
}
if(!matchProtected){
result = logic_game(idNumericPart, randomMinesLocation);
for(i=0; i<result.length; i++){
printToScreen(result[i][0], result[i][1]);
}
}
}
}
</script>
</body>
</html>
将代码中的php替换为java脚本（请参见下面修改的代码），并将console.log添加到方法调用中，从而可以定位无限递归循环的位置，在控制台中提供以下输出：
> logic_game(15)
minesweeper.html:116 randomMinesLocation
minesweeper.html:117 (10) [10, 56, 36, 33, 3, 14, 24, 54, 2, 13]
minesweeper.html:118 openedEmptyCells
minesweeper.html:119 [Array(2)]
minesweeper.html:115 logic_game(24)
minesweeper.html:116 randomMinesLocation
minesweeper.html:117 (10) [10, 56, 36, 33, 3, 14, 24, 54, 2, 13]
minesweeper.html:118 openedEmptyCells
minesweeper.html:119 (2) [Array(2), Array(2)]
minesweeper.html:115 logic_game(15)
minesweeper.html:116 randomMinesLocation
minesweeper.html:117 (10) [10, 56, 36, 33, 3, 14, 24, 54, 2, 13]
minesweeper.html:118 openedEmptyCells
minesweeper.html:119 (3) [Array(2), Array(2), Array(2)]
minesweeper.html:115 logic_game(24)
minesweeper.html:116 randomMinesLocation
minesweeper.html:117 (10) [10, 56, 36, 33, 3, 14, 24, 54, 2, 13]
minesweeper.html:118 openedEmptyCells
minesweeper.html:119 (3) [Array(2), Array(2), Array(2)]
我可以看到，logic_game调用ID15，称为id为24的l logic_game，而id为24的l logic_game又称为logic_game，它继续作为一个无限递归循环
要回答问题本身（这不是正确的修复），修复是针对id堆栈的：
var idStack=[]
对于每个对logic_game函数的递归调用，请检查堆栈，以确保尚未为该id调用该函数，以及该函数是否已从该函数返回以结束无限递归
函数逻辑游戏（idNumericPart、randomMinesLocation、，
openedEmptyCells=[]）{//防止无限递归循环；如果
（idStack.indexOf（idNumericPart）>-1）{
log（“检测到无限循环”）；
返回；}
如果尚未调用该id，则将其添加到堆栈并继续该函数
//将id推送到idStack，这样我们就可以知道此函数是否进入
无限递归循环；
idStack.push（idNumericPart）
最后，在每次单击按钮时清除idStack，以便只跟踪每个递归循环的id
我们现在已经防止了问题中提出的问题，解决了递归太多的问题。但是，您会看到代码中还有其他需要修复的逻辑错误：
Mineswipper.html:180未捕获类型错误：无法读取属性
null的“parentElement”
在printToScreen上（mineswipper.html:180）
点击获取按钮（minesweeper.html:233）
在HTMLButtonElement.onclick（mineswipper.html:1）
下面是修改后的代码，将php替换为javascript，现在可以在浏览器中本地运行而不会崩溃：
<!DOCTYPE html>
<html>
<head>
<title>Mine Sweeper Ver. 0.1</title>
<style type="text/css">
table {
border-collapse: collapse;
}
td {
width: 60px;
height: 60px;
border: 1px solid #ddd;
}
button {
width: 60px;
height: 60px;
cursor: pointer;
}
img {
width: 50px;
height: 50px;
}
.table{
float: left;
width: 550px;
}
.switch_command {
padding-top: 40px;
font-size: 22px;
font-family: sans-serif;
float: left;
}
</style>
<script>
function getTableDesign()
{
var tableDesign = "<table>";
var id = 1;
for(var i=0; i<8; i++){
tableDesign += "<tr>";
for(var j=0; j<8; j++){
tableDesign += "<td><button id='num_" + id + "' onclick='get_button(this.id)'></button></td>";
id++;
}
tableDesign += "</tr>";
}
tableDesign += "</table>";
return tableDesign;
}
</script>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('#tblTableDesign').html(getTableDesign());
});
</script>
</head>
<body>
<div class="table" id="tblTableDesign">
</div>
<div class="switch_command">
Switch to protect from Expload: <input id="check" type="checkbox">
</div>
<script type="text/javascript">
var randomMinesLocation = new Array(); // this array will contain the id number part of the mines
var mineProtecition = new Array(); // this array will contain the mine with flags to not be abled to open when the player clicks on it
var emptyCells = new Array(); // this array will contain the empty cells opened to prevent the recursion going through the same cell again
var idStack =[];
// this while loop is responsible for generating 10 different mines in random from 1 to 64
while (randomMinesLocation.length < 10) {
index = randomMinesLocation.length;
match = false;
position = Math.floor((Math.random() * 64) + 1);
for (i = 0; i < randomMinesLocation.length; i++) {
if(position == randomMinesLocation[i])
match = true;
}
if(!match) randomMinesLocation[index] = position;
}
// I made this check function to prevent to equal id to be contained to the openedEmptyCells array which will be used to open the cells in cooperation with another function
function checkForEqualVal(valToTest, openedEmptyCells) {
match = false;
if (openedEmptyCells.length == 0) {
openedEmptyCells.push(valToTest);
} else {
for (i = 0; i < openedEmptyCells.length; i++){
if(openedEmptyCells[i][1] == valToTest[1]) {
match = true;
break;
}
}
if (!match) {
openedEmptyCells.push(valToTest);
}
}
return openedEmptyCells;
}
function logic_game(idNumericPart, randomMinesLocation, openedEmptyCells = []) {
// prevent infinite recursion loop;
if (idStack.indexOf(idNumericPart)>-1) {
console.log('infinite loop detected');
return;
}
// push the id to the idStack so we can tell if this function enters an infinite recursion loop;
idStack.push(idNumericPart);
console.log('logic_game('+ idNumericPart +')');
console.log('randomMinesLocation');
console.log(randomMinesLocation);
console.log('openedEmptyCells');
console.log(openedEmptyCells);
match = false;
numberOfMinesNear = 0;
canditateCells = [];
for (j = -1; j <= 1; j++) {
if (idNumericPart <= 8 && j == 1 || idNumericPart > 56 && j == -1 ) continue;
for(k= -1; k <= 1; k++){
if(((idNumericPart - 1) % 8 == 0 && k == -1) || (idNumericPart % 8 == 0 && k == 1))
continue;
idNumericPartOfNear = idNumericPart - (j * 8) + k;
if(j != 0 && k == 0 || j == 0 && k != 0 || j != 0 && k != 0)
canditateCells.push(idNumericPartOfNear);
for(i=0; i<10; i++){
if(idNumericPart == randomMinesLocation[i]){
match = true;
break;
}
else if(idNumericPartOfNear == randomMinesLocation[i])
numberOfMinesNear++;
}
}
}
if(match)
openedEmptyCells = checkForEqualVal([true, idNumericPart], openedEmptyCells);
else if(numberOfMinesNear > 0){
openedEmptyCells = checkForEqualVal([numberOfMinesNear, idNumericPart], openedEmptyCells);
}
else{
openedEmptyCells = checkForEqualVal([false, idNumericPart], openedEmptyCells);
for(i=0; i<canditateCells.length; i++){
matchedBtw = false;
for(j=0; j<emptyCells.length; j++){
if(canditateCells[i] == emptyCells[j])
matchedBtw = true;
break;
}
if(!matchedBtw)
openedEmptyCells = logic_game(canditateCells[i], randomMinesLocation, openedEmptyCells);
}
}
return openedEmptyCells;
}
function printToScreen(value, idNumericPart){
if(typeof(value) === 'boolean' && value){
document.getElementById("num_" + idNumericPart).parentElement.innerHTML = '<b>Boom</b>';
}
else if(typeof(value) === 'number'){
document.getElementById("num_" + idNumericPart).parentElement.style.backgroundColor = '#eee';
document.getElementById("num_" + idNumericPart).parentElement.innerHTML = value;
}
else{
document.getElementById("num_" + idNumericPart).parentElement.style.backgroundColor = '#eee';
document.getElementById("num_" + idNumericPart).parentElement.innerHTML = '';
}
}
function get_button(id){
// clear the button ID stack so we can track recursive calls per button click to assure that will only be one call per id per button game;
idStack = [];
console.log('get_button('+ id + ')');
idNumericPart = id.substring(4);
checkValue = document.getElementById("check").checked;
matchCheckForMineProtect = false;
if(checkValue){
for(i=0; i<mineProtecition.length; i++){
if(mineProtecition[i] == idNumericPart){
matchCheckForMineProtect = true;
break;
}
}
if(matchCheckForMineProtect){
mineProtecition.splice(i, 1);
valueToBeSubstitude = '<button id="' + id + '" onclick="get_button(this.id)"></button>';
}
else{
mineProtecition.push(idNumericPart);
valueToBeSubstitude = '<button id="' + id + '" style="background: url(' + 'flag.png' + ') no-repeat; background-size: 40px 40px;" onclick="get_button(this.id)"></button>';
}
document.getElementById(id).parentElement.innerHTML = valueToBeSubstitude;
}
else {
matchProtected = false;
for(i=0; i<mineProtecition.length; i++){
if(mineProtecition[i] == idNumericPart){
matchProtected = true;
break;
}
}
if(!matchProtected){
result = logic_game(idNumericPart, randomMinesLocation);
for(i=0; i<result.length; i++){
printToScreen(result[i][0], result[i][1]);
}
}
}
}
</script>
</body>
</html>
扫雷艇0.1版
桌子{
边界塌陷：塌陷；
}
运输署{
宽度：60px；
高度：60px；
边框：1px实心#ddd；
}
钮扣{
宽度：60px；
高度：60px；
光标：指针；
}
img{
宽度：50px；
高度：50px；
}
.桌子{
浮动：左；
宽度：550px；
}
.switch_命令{
填充顶部：40px；
字体大小：22px；
字体系列：无衬线；
浮动：左；
}
函数getTableDesign（）
{
var tableDesign=“”；
var-id=1；
对于（变量i=0；i-1）{
log（“检测到无限循环”）；
回来
}
//将id推到idStack，这样我们就可以知道该函数是否进入无限递归循环；
idStack.push（idNumericPart）；
log（'logic_game（'+idNumericPart+'）；
console.log（'randomineslocation'）；
控制台日志（随机位置）；
console.log（'openedEmptyCells'）；
控制台日志（openedEmptyCells）；
匹配=假；
numberOfMinesNear=0；
Canditate细胞=[]；
对于（j=-1；j），您能够单步执行该程序吗？您可以放置一些console.log（）吗语句中包含简单的消息，如“board created”、“mines placed”等。然后你会更好地了解问题所在。顺便说一句，我刚刚编辑了你的帖子，让它更清楚，你的代码是PHP而不是javascript。@edzillion实际上两者都是。你说得对。我感到困惑。我会编辑更多；）还有，你有控制台.log（）吗？
<!DOCTYPE html>
<html>
<head>
<title>Mine Sweeper Ver. 0.1</title>
<style type="text/css">
table {
border-collapse: collapse;
}
td {
width: 60px;
height: 60px;
border: 1px solid #ddd;
}
button {
width: 60px;
height: 60px;
cursor: pointer;
}
img {
width: 50px;
height: 50px;
}
.table{
float: left;
width: 550px;
}
.switch_command {
padding-top: 40px;
font-size: 22px;
font-family: sans-serif;
float: left;
}
</style>
<script>
function getTableDesign()
{
var tableDesign = "<table>";
var id = 1;
for(var i=0; i<8; i++){
tableDesign += "<tr>";
for(var j=0; j<8; j++){
tableDesign += "<td><button id='num_" + id + "' onclick='get_button(this.id)'></button></td>";
id++;
}
tableDesign += "</tr>";
}
tableDesign += "</table>";
return tableDesign;
}
</script>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('#tblTableDesign').html(getTableDesign());
});
</script>
</head>
<body>
<div class="table" id="tblTableDesign">
</div>
<div class="switch_command">
Switch to protect from Expload: <input id="check" type="checkbox">
</div>
<script type="text/javascript">
var randomMinesLocation = new Array(); // this array will contain the id number part of the mines
var mineProtecition = new Array(); // this array will contain the mine with flags to not be abled to open when the player clicks on it
var emptyCells = new Array(); // this array will contain the empty cells opened to prevent the recursion going through the same cell again
var idStack =[];
// this while loop is responsible for generating 10 different mines in random from 1 to 64
while (randomMinesLocation.length < 10) {
index = randomMinesLocation.length;
match = false;
position = Math.floor((Math.random() * 64) + 1);
for (i = 0; i < randomMinesLocation.length; i++) {
if(position == randomMinesLocation[i])
match = true;
}
if(!match) randomMinesLocation[index] = position;
}
// I made this check function to prevent to equal id to be contained to the openedEmptyCells array which will be used to open the cells in cooperation with another function
function checkForEqualVal(valToTest, openedEmptyCells) {
match = false;
if (openedEmptyCells.length == 0) {
openedEmptyCells.push(valToTest);
} else {
for (i = 0; i < openedEmptyCells.length; i++){
if(openedEmptyCells[i][1] == valToTest[1]) {
match = true;
break;
}
}
if (!match) {
openedEmptyCells.push(valToTest);
}
}
return openedEmptyCells;
}
function logic_game(idNumericPart, randomMinesLocation, openedEmptyCells = []) {
// prevent infinite recursion loop;
if (idStack.indexOf(idNumericPart)>-1) {
console.log('infinite loop detected');
return;
}
// push the id to the idStack so we can tell if this function enters an infinite recursion loop;
idStack.push(idNumericPart);
console.log('logic_game('+ idNumericPart +')');
console.log('randomMinesLocation');
console.log(randomMinesLocation);
console.log('openedEmptyCells');
console.log(openedEmptyCells);
match = false;
numberOfMinesNear = 0;
canditateCells = [];
for (j = -1; j <= 1; j++) {
if (idNumericPart <= 8 && j == 1 || idNumericPart > 56 && j == -1 ) continue;
for(k= -1; k <= 1; k++){
if(((idNumericPart - 1) % 8 == 0 && k == -1) || (idNumericPart % 8 == 0 && k == 1))
continue;
idNumericPartOfNear = idNumericPart - (j * 8) + k;
if(j != 0 && k == 0 || j == 0 && k != 0 || j != 0 && k != 0)
canditateCells.push(idNumericPartOfNear);
for(i=0; i<10; i++){
if(idNumericPart == randomMinesLocation[i]){
match = true;
break;
}
else if(idNumericPartOfNear == randomMinesLocation[i])
numberOfMinesNear++;
}
}
}
if(match)
openedEmptyCells = checkForEqualVal([true, idNumericPart], openedEmptyCells);
else if(numberOfMinesNear > 0){
openedEmptyCells = checkForEqualVal([numberOfMinesNear, idNumericPart], openedEmptyCells);
}
else{
openedEmptyCells = checkForEqualVal([false, idNumericPart], openedEmptyCells);
for(i=0; i<canditateCells.length; i++){
matchedBtw = false;
for(j=0; j<emptyCells.length; j++){
if(canditateCells[i] == emptyCells[j])
matchedBtw = true;
break;
}
if(!matchedBtw)
openedEmptyCells = logic_game(canditateCells[i], randomMinesLocation, openedEmptyCells);
}
}
return openedEmptyCells;
}
function printToScreen(value, idNumericPart){
if(typeof(value) === 'boolean' && value){
document.getElementById("num_" + idNumericPart).parentElement.innerHTML = '<b>Boom</b>';
}
else if(typeof(value) === 'number'){
document.getElementById("num_" + idNumericPart).parentElement.style.backgroundColor = '#eee';
document.getElementById("num_" + idNumericPart).parentElement.innerHTML = value;
}
else{
document.getElementById("num_" + idNumericPart).parentElement.style.backgroundColor = '#eee';
document.getElementById("num_" + idNumericPart).parentElement.innerHTML = '';
}
}
function get_button(id){
// clear the button ID stack so we can track recursive calls per button click to assure that will only be one call per id per button game;
idStack = [];
console.log('get_button('+ id + ')');
idNumericPart = id.substring(4);
checkValue = document.getElementById("check").checked;
matchCheckForMineProtect = false;
if(checkValue){
for(i=0; i<mineProtecition.length; i++){
if(mineProtecition[i] == idNumericPart){
matchCheckForMineProtect = true;
break;
}
}
if(matchCheckForMineProtect){
mineProtecition.splice(i, 1);
valueToBeSubstitude = '<button id="' + id + '" onclick="get_button(this.id)"></button>';
}
else{
mineProtecition.push(idNumericPart);
valueToBeSubstitude = '<button id="' + id + '" style="background: url(' + 'flag.png' + ') no-repeat; background-size: 40px 40px;" onclick="get_button(this.id)"></button>';
}
document.getElementById(id).parentElement.innerHTML = valueToBeSubstitude;
}
else {
matchProtected = false;
for(i=0; i<mineProtecition.length; i++){
if(mineProtecition[i] == idNumericPart){
matchProtected = true;
break;
}
}
if(!matchProtected){
result = logic_game(idNumericPart, randomMinesLocation);
for(i=0; i<result.length; i++){
printToScreen(result[i][0], result[i][1]);
}
}
}
}
</script>
</body>
</html>