Here comes the Boom…..Part 1.

So having gotten the Hangman,  I got my next assigned project to work on for the next several days.  The idea is to make a Minesweeper like clone.  That seemed easy enough.  Start with a table to create the grid,  create a loop that then assigns a ‘bomb’ class to each square that has a bomb (randomly with:

[code language=”javascript”]

var X = Math.floor(Math.random() * 7 + 1);

var Y = Math.floor(Math.random() * 7 + 1);

[/code]

Then do another loop to go around the bomb square and place a number depending on how many bombs that square is touching.  This proved to be a snag as I could get the loop to go around the squares,  but it was replacing the numbers rather than adding to them.  After a very intimate session with Google,  I finally found the answer:

[code language=”javascript”]

$.fn.counts = function(row, column) {

for (i = row – 1; i <= row + 1; i++) {

for (p = column – 1; p <= column + 1; p++) {

if ($(“#field tr:nth-child(” + i + “) td:nth-child(” + p + “)”).html() == “X”) {

return;

}

else {

$(“#field tr:nth-child(” + i + “) td:nth-child(” + p + “)” ).html(function(m, val) {

return + val + 1;

});

$(“#field tr:nth-child(” + i + “) td:nth-child(” + p + “)” ).css(‘backgroundColor’, ‘green’);

$(“#field tr:nth-child(” + i + “) td:nth-child(” + p +”)” ).removeClass(“space”).addClass(“numbered”);

}

}

}

}

[/code]

(Sorry for the poor formatting,  still have figure out to properly place code in this blog.  It looks A LOT better in my Sublime. )

The loop tells it to go around the ‘Bomb’ squares.  If it has an X (meaning Bomb),  then do nothing to that square.  Else return a value of +1 into that square and change the class of “space” (meaning empty square) to be “numbered”,  a square with a number in it.

So now I have Bombs,  and numbers calculated around the bombs so you know when you are getting close.  The idea was to create a click function that would blow you up if you click on a bomb,  open up a square if it is a number, and if it is a space then do a loop that would keep opening squares until it opened up a numbered square.

 

Concept-wise this proved a good strategy,  but one I tried to put it into practice I ran into many problems.  I created the click for the bombs and numbered squares easily.  The loop for opening squares is where things went awry.  I started with the loop I used above for assigning numbers,  only to check the squares around each and then open them if they are blank or numbered.  Upon first trying this,  things looked like they were working.  But the celebration got cut short after a few more rounds of testing.  It would in fact go through the squares,  but each time it would jump to the new square and apply the ‘Click’,  it seemed to abandon the initial click function.  So instead of opening all squares it would only open the one.

 

I then tried to fix this using a ‘While’ loop,  thinking up some logic of “While the square next to it was empty keep opening.  After several hours of playing with this,  and talking with my support trainers,  we determined the original way that I had planned on doing it would be the best and that we should continue debugging to find out what is wrong.  That is when I got a nice lesson in line by line debugging.  Basically throwing in a debugger at the beginning of the code and stepping through it.  Upon each step,  using the console to verify information (variables, functions, etc.), and even copy and pasting snips of code from the editor (sublime) into the console to see if it in fact runs or errors.

 

This time-consuming process allowed me find one problem,  that the ‘clicks’ went out-of-bounds (off the game board) and thus caused it to hit into an infinite loop.  After setting up a function to check to make sure each ‘click’ was in the boundaries,  things started improving.  Once I fixed that,  and I took at the extra check of “If has class space” (because that was already being handled by the ‘click’),  things worked beautifully.

 

I added a bit more of code such as ability to Command-Click on Macs to mark spots.  Sorry PC people, didn’t include other clicks in this release.  And started the work on the win condition.  It came time to show my work and though it looked pretty good,  there was still a glaring issue.  The fact that I was using Classes and putting the data directly into the cells,  made it not much of a game since you could see where everything was.  The plan was going to be make all the squares black (since the text was black, it would then hide the items) for a simple solution and a more complex solution would be to include a graphic file that would layer on top and be ‘hidden’ on ‘click’.  After showing my progress,  they gave me my next task that would be a better way of handling the last touches of the game.  That is to put the data into an array and use that as reference,  thus only populating the board squares when the click function runs on them.

So tune-in next time when I rebuild the entire game using an array of data.

For this session you can see what I built here: Minesweeper Version 1

Leave a Reply