Js question

**Wolfuryo** · **Wolfuryo** Thu 05 Jan 2017, 13:40

Long post coming. lol!

I've been working on creating a javascript version of Minesweeper(https://en.wikipedia.org/wiki/Minesweeper_(video_game)). I have almost completed it, but i have a little problem. When the player clicks a cell with no mine in it and no mines in the cells adiacent to it, the game reveals the adiacent cells following this rules:
1)if the cell has no adiacent cells with mines in them, reveal it(make it white) and continue to the next cell in the same direction;
2)if the cell has adiacent cells with mines in them, show the number of cells and stop.
It does this for every direction(up, down, left, right, up left, up right, down left, down right).
For this I have this function:

Code:: function expand(x){ var up_a, down_a, left_a, right_a, up_left_a, up_right_a, down_left_a, down_right_a; $("cell").eq(x).css("color", "white"); if(x>=$("[ran]").val()){ up_a=parseInt(x-parseInt($("[ran]").val())); if(x>=parseInt($("[ran]").val()) && !($("cell").eq(up_a).hasClass("n0"))){ $("cell").eq(up_a).text(" "+$("cell").eq(up_a).attr("class").split("")[1]+" "); }; if(x>=parseInt($("[ran]").val()) && ($("cell").eq(up_a).hasClass("n0"))){ expand(up_a); }; }; if(x<=$("[ran]").val()*($("[col]").val()-1)-1){ down_a=parseInt(x+parseInt($("[ran]").val())); if((x<=$("[ran]").val()*($("[col]").val()-1)) && !($("cell").eq(down_a).hasClass("n0"))){ $("cell").eq(down_a).text(" "+$("cell").eq(down_a).attr("class").split("")[1]); }; if((x<=$("[ran]").val()*($("[col]").val()-1)) && ($("cell").eq(down_a).hasClass("n0"))){ expand(down_a); }; };

The _a at the end of the variables names is there intentionally.
$("[ran]").val() is the number of lines.
$("[col]").val() is the number of columns.
The class n0 is given to cells with no adiacent cells that have mines in them.
The function is called when the player clicks a cell with class .n0.
The problem is that i call the function inside itself and when playing, the browser freezes for more than 10 seconds, and than throws an error in the console, saying:RangeError: Maximum call stack size exceeded. Is there any way to make it work?

These are all the codes.
HTML:

Code:: <!DOCTYPE html> <html> <head> <title>Minesweeper</title> <script src="javascript\jquery.js"></script> <script src="javascript\main.js"></script> <link type="text/css" rel="stylesheet" href="css\main.css"> </head> <center><body> <div id="stats"> <div id="left"><center><br/><br/><br/><br/>Statistici si optiuni</center></div> <group> <div id="button_start">Start joc</div> <div id="nr_mine">Mine marcate:0</div> <div id="timer">Timp: <tt><mm>00</mm>:<ss>00<ss></tt></div> <div class="check" style="display:none">Verifica tabela de joc</div> </group><br/> <br/><group> <input type="text" onkeypress="return event.charCode >= 48 && event.charCode <= 57" placeholder="Coloane" col></input> <input type="text" onkeypress="return event.charCode >= 48 && event.charCode <= 57" placeholder="Randuri" ran></input> </group> </div> <div id="game"> <div id="left_game"><center><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>Tabela de joc</center></div> <br/><br/><br/><group cell> </group> </div> </body></center> </html>

JS:

Code:: $(document).ready(function(){ function resize(){ $("#stats, #left").height($(document).height()/3); $("game, #left_game, group[cell]").height(2/3*$(document).height()); } function timer(){ var tsecunde=0; var secunde=$("ss"); var minute=$("mm"); setInterval(setTime, 1000); function setTime(){ tsecunde++; secunde.text(pad(tsecunde%60)); minute.text(pad(parseInt(tsecunde/60))); } function pad(val){ var ss=val+""; if(ss.length<2){ return "0"+ss; } else{ return ss } } } function create(){ var i, j, k, d=0, n; if(coloane>randuri){ n=2} else{ n=0; }; var container=$("group[cell]"); var randuri=$("[ran]").val(); var coloane=$("[col]").val(); if(randuri=="" || coloane==""){ if(d==0){ alert("Inserati nr de coloane si de randuri"); d=1; } }; if(randuri>15 || coloane>15){ if(d==0){ alert("Alegeti un numar de randuri si de coloane mai mic sau egal cu 15"); d=1; } }; if(randuri<5 || coloane<5){ if(d==0){ alert("Alegeti un numar de randuri si de coloane mai mare sau egal cu 5"); d=1; } }; if(d!=1){ for(i=0;i<coloane;i++){ container.append("<cell a> * </cell><br/>"); } for(k=0;k<randuri-1;k++){ for(j=0;j<(randuri+n);j++){ $("cell[a]").eq(j).after("<cell b> * </cell>"); } } } else{window.location.reload()} } function plasare_mine(){ var i=0, j=0, k=0;; var mineposibile=[]; var minemarcate=[]; for(i=0;i<parseInt($("[ran]").val()*$("[col]").val());i++){ mineposibile.push(i); }; for(j=0;j<parseInt($("[ran]").val()*$("[col]").val()/4);j++){ var a=Math.floor(Math.random()*(mineposibile.length)); var b=mineposibile.indexOf(a); mineposibile.splice(b-1, 1); minemarcate.push(a); }; for(k=0;k<=minemarcate.length;k++){ $("cell").eq(minemarcate[k]).addClass("bomb"); } } function calc(x){ var sus, jos, stanga, dreapta, sus_stanga, sus_dreapta, jos_stanga, jos_dreapta; sus=x-parseInt($("[ran]").val()); jos=x+parseInt($("[ran]").val()); if(x%parseInt($("[ran]").val())!=0){ stanga=x-1; } else { stanga=-1; }; if(x%parseInt($("[ran]").val())!=(parseInt(($("[ran]")).val()))-1){ dreapta=x+1; } else { dreapta=-1; }; if(x%parseInt($("[ran]").val())!=0){ sus_stanga=sus-1; } else { sus_stanga=-1; }; if(x%parseInt($("[ran]").val())!=(parseInt(($("[ran]")).val()))-1){ sus_dreapta=sus+1; } else { sus_dreapta=-1; }; if(x%parseInt($("[ran]").val())!=0){ jos_stanga=jos-1; } else { jos_stanga=-1; }; if(x%parseInt($("[ran]").val())!=(parseInt(($("[ran]")).val()))-1){ jos_dreapta=jos+1; } else { jos_dreapta=-1; }; return isBomb(sus)+isBomb(jos)+isBomb(stanga)+isBomb(dreapta)+isBomb(sus_stanga)+isBomb(sus_dreapta)+isBomb(jos_dreapta)+isBomb(jos_stanga); }; function isBomb(x){ if(x>=0 && x<=($("[col]").val()*$("[ran]").val())){ return $("cell").eq(x).hasClass("bomb"); } else { return 0; }; } /* if(x%parseInt($("[ran]").val())!=0){ stanga_a=x-1; }; if(x%parseInt($("[ran]").val())!=(parseInt(($("[ran]")).val()))-1){ dreapta_a=x+1; }; if(x%parseInt($("[ran]").val())!=0){ sus_stanga_a=sus_a-1; }; if(x%parseInt($("[ran]").val())!=(parseInt(($("[ran]")).val()))-1){ sus_dreapta_a=sus_a+1; }; if(x%parseInt($("[ran]").val())!=0){ jos_stanga_a=jos_a-1; }; if(x%parseInt($("[ran]").val())!=(parseInt(($("[ran]")).val()))-1){ jos_dreapta_a=jos_a+1; };*/ }; function check(){ if($(".bomb.marked").length==$(".bomb").length){ alert("Bravo! Ai dezamorsat toate bombele"); window.location.reload(); } else { alert("Mai incearca"); }; }; function click_cell(){ oncontextmenu=function(){return false}; $("cell").mousedown(function(event){ if(event.which==3){ $(this).toggleClass("marked"); if($("#nr_mine").text()!="0 mine"){ if($(this).hasClass("marked")){ $("#nr_mine").text((parseInt($("#nr_mine").text().split(" mine")[0])-1)+" mine"); } else { $("#nr_mine").text((parseInt($("#nr_mine").text().split(" mine")[0])+1)+" mine"); }; }; }; }); $(".bomb").click(function(){ if(!($(this).hasClass("marked"))){ alert("Ai dat click pe o bomba"); window.location.reload(); } }); var tt=0; for(tt;tt<parseInt(($("[col]").val())*parseInt($("[ran]").val()));tt++){ if(isBomb(tt)==false){ $("cell").eq(tt).addClass("n"+calc(tt)); }; }; $("cell:not(bomb)").click(function(){ if(!($(this).hasClass("n0")) && !($(this).hasClass("marked"))){ $(this).text(" "+$(this).attr("class").split("")[1]+" "); }; }); $(".n0").click(function(){ expand($(this).index("cell"), "all"); }); }; function start(){ $(".check").show(); $("#button_start").hide(); create(); timer(); plasare_mine(); click_cell(); $("#nr_mine").text($(".bomb").length+" mine"); $("input").hide(); $(".check").click(function(){ check(); }); } $("#button_start").click(function(){ start(); }); resize(); })

CSS:

Code:: *{ margin:0px !important; padding:0px !important; } body{ background:#2196F3; } #stats{ background:#009688; } #left{ background:#2196F3; width:100px; float:left; } #game{ background:#2196F3 !important; } #left_game{ background:#009688; width:100px; } #left, #left_game{ color:white; font-size:20px; float:left; } group>div{ display:inline; padding:5px !important; margin:5px !important; background:#2196F3; color:white; } group>div:hover{ cursor:pointer; } group>input{ display:inline; padding:5px !important; margin:5px !important; opacity:0.9; color:#2196F3; } cell[a]{ opacity:0.8; background:white; } cell[b]{ border:1px solid #2196F3; opacity:0.8; background:white; } cell{ color:#2196F3; font-size:20px; background:white !important; width:25px !important; width:26px !important; } .marked{ background:red !important; color:red !important; }

IMPORTANT

Js question

Js question

Create an account or log in to leave a reply

Create an account

Log in