Latest topics
» [GAME] What are you thinking right now?
by universecat Yesterday at 21:46

» [GAME] Animal Game
by universecat Yesterday at 21:43

» [GAME] Count to 1000 using even numbers Van-Helsing Edition
by universecat Yesterday at 21:40

» [GAME] Count to One Million!
by universecat Yesterday at 21:40

» [GAME] Last Letter Game
by universecat Yesterday at 21:39

» [GAME] Post a random picture
by SLGray Yesterday at 16:28

» Dark Mode + Another Question
by Ace 1 Yesterday at 13:31

» Hi everyone!
by skouliki Yesterday at 02:01

» Hai Guys~
by skouliki Yesterday at 01:59

» Add a login popup for the toolbar
by Ape Sun 15 Oct 2017, 13:51

» Mobile Usability Test
by Ange Tuteur Sat 14 Oct 2017, 11:20

» Chit Chat Thread
by Ange Tuteur Sat 14 Oct 2017, 11:20

» [GAME] World Snake
by SLGray Thu 12 Oct 2017, 16:12

» [GAME] Never have I ever..
by Valoish Thu 12 Oct 2017, 13:01

» Browsers & Updates
by SLGray Mon 09 Oct 2017, 12:11

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

jlmic

[ 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 : 249
Points : 1204
Reputation : 79
Language : Romanian and English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
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