patternjavascriptMinor
beginner TICTACTOE game for my school projet
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")) {
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
What's wrong is that if
Next, since each
The repetition in these conditions is obvious, they all follow the format:
So you can put the ids in an array, and use a loop:
You can also generate the elements of
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:
Note that this preserve the original logic of your conditions on
but as I explained above, you probably want to change something here,
as in its current form, these conditions don't make much sense.
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.