HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

beginner TICTACTOE game for my school projet

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
tictactoeprojetschoolbeginnergamefor

Problem

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("");
var table1 = $("#bord1").children();
table1.append("");
table1.append("");
table1.append("");
$("#bord1").fadeIn("slow");
$("#bord2").empty();
$("#bord3").empty();

} else { // BEGIN VAN DE GROTE ELSE

if ($("#easy").prop("checked", false) && $("#medium").prop("checked")) {

Solution

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  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.

Code Snippets

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");
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");
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");
    }
if ($(id).text() !== x && $(id).text() !== o) {
        $(id).text(o);
        return $(id);
    }
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);
    }
}

Context

StackExchange Code Review Q#126865, answer score: 3

Revisions (0)

No revisions yet.