Recent Tutorials
Who is online?
In total there are 8 users online :: 0 Registered, 0 Hidden and 8 Guests :: 1 Bot

None

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

Js question

View previous topic View next topic Go down

avatar
Wolfuryo

Gender : Male
Posts : 186
Points : 990
Reputation : 61
Language : Romanian and English
Browser : Browser : Google Chrome Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile

PostWolfuryo on 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;
}

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum