Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

As i have it now my script makes the 3x3 grid clickable, and I dont know exactly how to turn on the click once it has been clicked. This is using jQuery and a simple if else statement to switch between turns.

    $(document).ready(function(){
  var turn = 0;
    $("#cell11, #cell12, #cell21,  #cell22, #cell13, #cell23, #cell31, #cell32, #cell33, ")
            .click(
            function(){
                var cell = $(this);
                if(turn===0){
                    turn = 1;
                cell.css("background","url(images/o.png)");
                }
                else{
                    turn = 0;
                    cell.css("background","url(images/x.png)");
                }
            })
});
share|improve this question
add comment

2 Answers

up vote 1 down vote accepted

You should keep track of which cells have been clicked on. Either make a 3x3 array and store the state in there, or store the state directly on each cell. Then in the click event, check to see if the state is the default (0 should be fine) then proceed. Otherwise, just exit the onclick event

Something like this should work:

$(document).ready(function()
{
    var turn = 0;

    $("#cell11, #cell12, #cell21, #cell22, #cell13, #cell23, #cell31, #cell32, #cell33").click(function()
    {
        var cell = $(this);

        if(cell.attr('data-state') == 0)
        {
            if(turn===0)
            {
                turn = 1;
                cell.css("background","url(images/o.png)").attr('data-state', 1);
            }
            else
            {
                turn = 0;
                cell.css("background","url(images/x.png)").attr('data-state', 2);
            }
        }
    })
});
share|improve this answer
    
when i tried this code the X and O images would no longer show up when i click the cells –  phi1o Jun 14 '12 at 5:37
    
Oh, you need to initialize the cells to have a data-state='0'. Or you could just change the if statement to if(cell.attr('data-state') == null) –  Telanor Jun 14 '12 at 5:50
    
THANK YOU. that worked. thank you –  phi1o Jun 15 '12 at 22:56
add comment

I would suggest you use a class attribute to keep track of which cells are clicked. Then you can move your styles to your css file. This would make your javascript code a little cleaner.

So, for example, in your javascript:

$(document).ready(function(){
    var turn = 0;
    $("#cell11, #cell12, #cell21,  #cell22, #cell13, #cell23, #cell31, #cell32, #cell33, ").click(function(){
        var cell = $(this);
        if ( !cell.hasClass("x") && !cell.hashClass("o") ) {
            if(turn==0){
                turn = 1;
                cell.addClass("o");
            }else{
                turn = 0;
                cell.addClass("x");
            }
        }
    });
});

Then somewhere in your css file:

.o {
    background: url(images/o.png);
}
.x {
    background: url(images/x.png);
}
share|improve this answer
    
in the console of firefox i get "cell.hashClass is not a function [Break On This Error] if ( !cell.hashClass("x") && !cell.hashClass("o") ) {" –  phi1o Jun 14 '12 at 6:00
    
Also, I don't think you need those ids, just use class .cell to indicate these grids. then code can look even more cleaner. –  zinking Jun 14 '12 at 7:33
    
I'm not sure what you mean by using .cell I stead of ids. Can you elaborate please –  phi1o Jun 14 '12 at 16:54
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.