3
\$\begingroup\$

I just wanted to know how can I code more efficiently with my project. I'm pretty sure that all these nested "if's" can be done easier and with less code. I made a TicTacToe game with 3 difficulty levels. Easy, Medium and Hard. The Easy level you have 3X3 table, Medium: 4X4 table & Hard: 5X5 table. As you can see I made the game tables with jQuery. All the else-if are the CPU moves. I was wondering how can i write less code. The randomMove1 function is the CPU move so it places the O's on the game table.

$(document).ready(function () {

                var x = "X",
                    o = "O",
                    move = 0,
                    score = 0,
                    random1 = Math.floor(Math.random() * 10),
                    random2 = Math.floor(Math.random() * 20);

                // $(".container").hide();
                $("#again").attr("disabled", "disabled");

                $("#score").hide();
                // $("#buttonStart").click(function(){
                $(".container").show();
                $("#buttonStart").hide();
                $("img").hide();

                //  })

                $("#new").click(function StartGame() { // tabelen maken

                            $("#score").fadeIn(100);

                            if ($("#easy").prop("checked") && $("#medium").prop("checked", false)) {
                                $("#bord1").append("<table1></table1>");
                                var table1 = $("#bord1").children();
                                table1.append("<tr><td id='t1td1'></td><td id='t1td2'></td><td id='t1td3'></td></tr>");
                                table1.append("<tr><td id='t1td4'></td><td id='t1td5'></td><td id='t1td6'></td></tr>");
                                table1.append("<tr><td id='t1td7'></td><td id='t1td8'></td><td id='t1td9'></td></tr>");
                                $("#bord1").fadeIn("slow");
                                $("#bord2").empty();
                                $("#bord3").empty();

                            } else { // BEGIN VAN DE GROTE ELSE


                                if ($("#easy").prop("checked", false) && $("#medium").prop("checked")) {
                                    $("#bord2").append("<table2></table2>");
                                    var table2 = $("#bord2").children();
                                    table2.append("<tr><td id='t2td1'></td><td id='t2td2'></td><td id='t2td3'></td><td id='t2td4'></td></tr>");
                                    table2.append("<tr><td id='t2td5'></td><td id='t2td6'></td><td id='t2td7'></td><td id='t2td8'></td></tr>");
                                    table2.append("<tr><td id='t2td9'></td><td id='t2td10'></td><td id='t2td11'></td><td id='t2td12'></td></tr>");
                                    table2.append("<tr><td id='t2td13'></td><td id='t2td14'></td><td id='t2td15'></td><td id='t2td16'></td></tr>");
                                    $("#bord2").fadeIn("slow");
                                    $("#bord1").empty();
                                    $("#bord3").empty();


                                } else {
                                    $("#new").prop("disabled", false);
                                    if ($("#hard").prop("checked") && $("#easy").prop("checked", false) && $("#medium").prop("checked", false)) {
                                        $("#bord3").append("<table3></table3>");
                                        var table3 = $("#bord3").children();
                                        table3.append("<tr><td id='t3td1'></td><td id='t3td2'></td><td id='t3td3'></td><td id='t3td4'></td><td id='t3td5'></td></tr>");
                                        table3.append("<tr><td id='t3td6'></td><td id='t3td7'></td><td id='t3td8'></td><td id='t3td9'></td><td id='t3td10'></td></tr>");
                                        table3.append("<tr><td id='t3td11'></td><td id='t3td12'></td><td id='t3td13'></td><td id='t3td14'></td><td id='t3td15'></td></tr>");
                                        table3.append("<tr><td id='t3td16'></td><td id='t3td17'></td><td id='t3td18'></td><td id='t3td19'></td><td id='t3td20'></td></tr>");
                                        table3.append("<tr><td id='t3td21'></td><td id='t3td22'></td><td id='t3td23'></td><td id='t3td24'></td><td id='t3td25'></td></tr>");
                                        $("#bord3").fadeIn("slow");
                                        $("#bord2").empty();
                                        $("#bord1").empty();


                                    }
                                }

                            } //EINDE GROTE ELSE

                            $("td").one("click", function () { //X of O op de tabelen
                                if (move === 0) {
                                    $(this).text(x);
                                    move === 1;
                                    RandomMove1();
                                    RandomMove2();

                                }

                            });

                            // GEBRUIKER MOVE
                            function UserMove() {
                                if (table1.text() !== x && table1.text() !== o) {
                                    table1.text(x);
                                } else if (table2.text() !== x && table2.text() !== o) {
                                    table2.text(x);
                                } else if (table3.text() !== x && table3.text() !== o) {
                                    table3.text(x);
                                }

                            };

                            // CPU PLAYER MOVE
                            // TABEL 1
                            function RandomMove1() {
                                if (random1 > 0.89) {
                                    if ($("#t1td1").text() !== x && $("#t1td1").text() !== o) {
                                        $("#t1td1").text(o);
                                        return $("#t1td1").text(o);
                                    } else if (random1 > 0.78) {
                                        if ($("#t1td2").text() !== x && $("#t1td2").text() !== o) {
                                            $("#t1td2").text(o);
                                            return $("#t1td2");
                                        } else if (random1 > 0.68) {
                                            if ($("#t1td3").text() !== x && $("#t1td3").text() !== o) {
                                                $("#t1td3").text(o);
                                                return $("#t1td3");
                                            } else if (random1 > 0.57) {
                                                if ($("#t1td4").text() !== x && $("#t1td4").text() !== o) {
                                                    $("#t1td4").text(o);
                                                    return $("t1td4");
                                                } else if (random1 > 0.48) {
                                                    if ($("#t1td5").text() !== x && $("#t1td5").text() !== o) {
                                                        $("#t1td5").text(o);
                                                        return $("#t1td5");
                                                    } else if (random1 > 0.38) {
                                                        if ($("#t1td6").text() !== x && $("#t1td6").text() !== o) {
                                                            $("#t1td6").text(o);
                                                            return $("#t1td6");
                                                        } else if (random1 > 0.26) {
                                                            if ($("#t1td7").text() !== x && $("#t1td7").text() !== o) {
                                                                $("#t1td7").text(o);
                                                                return $("#t1td7");
                                                            } else if (random1 > 0.15) {
                                                                if ($("#t1td8").text() !== x && $("#t1td8").text() !== o) {
                                                                    $("#t1td8").text(o);
                                                                    return $("#t1td8");
                                                                } else if (random1 > 0.08) {
                                                                    if ($("#t1td9").text() !== x && $("#t1td9").text() !== o) {
                                                                        $("#t1td9").text(o);
                                                                        return $("#t1td9");
                                                                    }
                                                                }
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                            // TABEL 2
                            - function RandomMove2() {
                                if (random2 > 0.99) {
                                    if ($("#t2td1").text() !== x && $("#t2td1").text() !== o) {
                                        $("#t2td1").text(o);
                                        return $("#t2td1");
                                    } else if (random2 > 0.88) {
                                        if ($("#t2td2").text() !== x && $("#t2td2").text() !== o) {
                                            $("#t2td2").text(o);
                                            return $("#t2td2");
                                        } else if (random2 > 0.80) {
                                            if ($("#t2td3").text() !== x && $("#t2td3").text() !== o) {
                                                $("#t2td3").text(o);
                                                return $("#t2td3");
                                            } else if (random2 > 0.77) {
                                                if ($("#t2td4").text() !== x && $("#t2td4").text() !== o) {
                                                    $("#t2td4").text(o);
                                                    return $("t2td4");
                                                } else if (random2 > 0.72) {
                                                    if ($("#t2td5").text() !== x && $("#t2td5").text() !== o) {
                                                        $("#t2td5").text(o);
                                                        return $("#t2td5");
                                                    } else if (random2 > 0.48) {
                                                        if ($("#t2td6").text() !== x && $("#t2td6").text() !== o) {
                                                            $("#t2td6").text(o);
                                                            return $("#t2td6");
                                                        } else if (random2 > 0.36) {
                                                            if ($("#t2td7").text() !== x && $("#t2td7").text() !== o) {
                                                                $("#t2td7").text(o);
                                                                return $("#t2td7");
                                                            } else if (random2 > 0.55) {
                                                                if ($("#t2td8").text() !== x && $("#t2td8").text() !== o) {
                                                                    $("#t2td8").text(o);
                                                                    return $("#t1td8");
                                                                } else if (random2 > 0.42) {
                                                                    if ($("#t2td9").text() !== x && $("#t2td9").text() !== o) {
                                                                        $("#t2td9").text(o);
                                                                        return $("#t2td9");
                                                                    } else if (random2 > 0.22) {
                                                                        if ($("#t2td10").text() !== x && $("#t2td10").text() !== o) {
                                                                            $("#t2td10").text(o);
                                                                            return $("#t2td10");
                                                                        } else if (random2 > 0.29) {
                                                                            if ($("#t2td11").text() !== x && $("#t2td11").text() !== o) {
                                                                                $("#t2td11").text(o);
                                                                                return $("#t2td11");
                                                                            } else if (random2 > 0.69) {
                                                                                if ($("#t2td12").text() !== x && $("#t2td12").text() !== o) {
                                                                                    $("#t2td12").text(o);
                                                                                    return $("#t2td12");
                                                                                } else if (random2 > 0.04) {
                                                                                    if ($("#t2td13").text() !== x && $("#t2td13").text() !== o) {
                                                                                        $("#t2td13").text(o);
                                                                                        return $("#t2td13");
                                                                                    } else if (random2 > 0.72) {
                                                                                        if ($("#t2td14").text() !== x && $("#t2td14").text() !== o) {
                                                                                            $("#t2td14").text(o);
                                                                                            return $("#t2td14");
                                                                                        } else if (random2 > 0.10) {
                                                                                            if ($("#t2td15").text() !== x && $("#t2td15").text() !== o) {
                                                                                                $("#t2td15").text(o);
                                                                                                return $("#t2td15");
                                                                                            } else if (random2 > 0.94) {
                                                                                                if ($("#t2td16").text() !== x && $("#t2td16").text() !== o) {
                                                                                                    $("#t2td16").text(o);
                                                                                                    return $("#t2td16");
                                                                                                }
                                                                                            }
                                                                                        }
                                                                                    }
                                                                                }
                                                                            }
                                                                        }
                                                                    }
                                                                }
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
   //TABEL 3
\$\endgroup\$
3
  • \$\begingroup\$ have you tested this code? does it follow the requirements of the project? \$\endgroup\$
    – Malachi
    Commented Apr 27, 2016 at 19:09
  • \$\begingroup\$ @Malachi yes i tested but its not finished yet. I can put X & O's on the table, so thatwas my first step \$\endgroup\$
    – Carlos Chu
    Commented Apr 27, 2016 at 19:14
  • \$\begingroup\$ so you haven't tested the if then statements yet? because the randomness isn't working the way you want it too, I edited it into my answer \$\endgroup\$
    – Malachi
    Commented Apr 27, 2016 at 19:29

2 Answers 2

3
\$\begingroup\$

Holy mother of arrow-shaped code!

First of all, something's very wrong with the conditions on random2 (and random1):

if (random2 > 0.99) {
    if ($("#t2td1").text() !== x && $("#t2td1").text() !== o) {
        $("#t2td1").text(o);
        return $("#t2td1");
    } else if (random2 > 0.88) {
        if ($("#t2td2").text() !== x && $("#t2td2").text() !== o) {
            $("#t2td2").text(o);
            return $("#t2td2");
        } else if (random2 > 0.80) {
            if ($("#t2td3").text() !== x && $("#t2td3").text() !== o) {
                $("#t2td3").text(o);
                return $("#t2td3");
            } else if (random2 > 0.77) {
                if ($("#t2td4").text() !== x && $("#t2td4").text() !== o) {
                    $("#t2td4").text(o);
                    return $("t2td4");

What's wrong is that if random2 > 0.99 is true, then all the other will be true. As such, this is equivalent code:

if (random2 > 0.99) {
    if ($("#t2td1").text() !== x && $("#t2td1").text() !== o) {
        $("#t2td1").text(o);
        return $("#t2td1");
    } else if (true) {
        if ($("#t2td2").text() !== x && $("#t2td2").text() !== o) {
            $("#t2td2").text(o);
            return $("#t2td2");
        } else if (true) {
            if ($("#t2td3").text() !== x && $("#t2td3").text() !== o) {
                $("#t2td3").text(o);
                return $("#t2td3");
            } else if (true) {
                if ($("#t2td4").text() !== x && $("#t2td4").text() !== o) {
                    $("#t2td4").text(o);
                    return $("t2td4");

Next, since each if-branch returns, you can flatten this to:

if (random2 > 0.99) {
    if ($("#t2td1").text() !== x && $("#t2td1").text() !== o) {
        $("#t2td1").text(o);
        return $("#t2td1");
    }
    if ($("#t2td2").text() !== x && $("#t2td2").text() !== o) {
        $("#t2td2").text(o);
        return $("#t2td2");
    }
    if ($("#t2td3").text() !== x && $("#t2td3").text() !== o) {
        $("#t2td3").text(o);
        return $("#t2td3");
    }
    if ($("#t2td4").text() !== x && $("#t2td4").text() !== o) {
        $("#t2td4").text(o);
        return $("t2td4");
    }

The repetition in these conditions is obvious, they all follow the format:

    if ($(id).text() !== x && $(id).text() !== o) {
        $(id).text(o);
        return $(id);
    }

So you can put the ids in an array, and use a loop:

var ids = ['#t2td1', '#t2td2', '#t2td3', '#t2td4'];
for (var i = 0; i < ids.length; i++) {
    var id = ids[i];
    if ($(id).text() !== x && $(id).text() !== o) {
        $(id).text(o);
        return $(id);
    }
}

You can also generate the elements of ids using a nested loop.

For the random numbers, it's not very clear how you want to use them, but probably you want to do something with them in this loop. For that, you can create an array of random numbers, and build appropriate conditions, for example:

var ids = ['#t2td1', '#t2td2', '#t2td3', '#t2td4'];
var randoms = [0.99, 0.88, 0.80, 0.77];
for (var i = 0; i < ids.length; i++) {
    if (random2 > randoms[i]) {
        var id = ids[i];
        if ($(id).text() !== x && $(id).text() !== o) {
            $(id).text(o);
            return $(id);
        }
    } else {
        break;
    }
}

Note that this preserve the original logic of your conditions on random2, but as I explained above, you probably want to change something here, as in its current form, these conditions don't make much sense.

\$\endgroup\$
3
  • \$\begingroup\$ Thank you so much janos,! & what can i do for the random number? \$\endgroup\$
    – Carlos Chu
    Commented Apr 27, 2016 at 19:10
  • \$\begingroup\$ @CarlosChu I added more explanation at the end concerning random, I hope this helps \$\endgroup\$
    – janos
    Commented Apr 27, 2016 at 19:17
  • \$\begingroup\$ my random doenst work now, if I click on the box, it show the O's but does not show randomly \$\endgroup\$
    – Carlos Chu
    Commented Apr 28, 2016 at 9:46
1
\$\begingroup\$

If you multiply your random variable by 10 you will get a whole number 0-8 in the ones place and then you could set the id of the gameboard places to either 0-8 or 1-9 and then set the spaces that way.

your code here

random1 = Math.floor(Math.random() * 10)

gives a whole number, and all your if statements for random1 > will evaluate to true, so you will not get a random distribution of moves.

If you create the HTML like this

<table>
    <tr>
        <td id="1"></td>
        <td id="2"></td>
        <td id="3"></td>
    </tr>
    <tr>
        <td id="4"></td>
        <td id="5"></td>
        <td id="6"></td>
    </tr>
    <tr>
        <td id="7"></td>
        <td id="8"></td>
        <td id="9"></td>
    </tr>
</table>

not Necessarily with a table, I am just using it as an example

then you could rewrite the javascript if statements to something like this

if ($('#' + random1).text() !== x && $('#' + random1).text() !== 0) {
    return $('#' + random1).text(o)
}

you will probably not be able to use straight numbers for the id's but you could do something similar.


I would probably go about creating the table like this

function CreateTable (tableSize, tableId) {
    var table = $("#" + tableId);
    table.empty();
    var spaceNumber = 1
    for (var i = 1; i <= tableSize; i++) {
        var newRow = document.createElement("tr");
        for (var j = 1; j <= tableSize; j++) {
            var newSpace = document.createElement("td");
            newSpace.setAttribute("id","space" + spaceNumber);
            newRow.appendChild(newSpace);
            spaceNumber++;
        }
        table.appendChild(newRow);
    }
}

this way I could start with an empty table element and create a table of whatever size without having to write so much code to get the table made. it wouldn't be too hard to rig up a random move for a CPU player either because the spaces are numbered in a way where I just add a number at the end of the ID.

I added the table.empty(); so that I could start with a pre-made board or change the board at any point, this code will wipe out everything in the element for the id that I gave and then create the rows and cells that I need.


JavaScript is powerful for a lot of things, always be on the look out for ways to stop doing something repetitive. Search Engines are filled with JavaScript answers.

\$\endgroup\$
5
  • \$\begingroup\$ what do you mean? \$\endgroup\$
    – Carlos Chu
    Commented Apr 27, 2016 at 18:41
  • \$\begingroup\$ but if i do random1 < it doenst put the O's xs \$\endgroup\$
    – Carlos Chu
    Commented Apr 27, 2016 at 19:35
  • \$\begingroup\$ because random1 is never less than .99 \$\endgroup\$
    – Malachi
    Commented Apr 27, 2016 at 19:38
  • \$\begingroup\$ my random doenst work now, if I click on the box, it show the O's but does not show randomly \$\endgroup\$
    – Carlos Chu
    Commented Apr 28, 2016 at 9:55
  • \$\begingroup\$ you probably have some other changes that you need to make \$\endgroup\$
    – Malachi
    Commented Apr 28, 2016 at 14:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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