var flag = 1; //var w_f = document.getElementById("width_of_field").value; //var h_f = document.getElementById("height_of_field").value; var w_f = 3; var h_f = 3; var acr1 = w_f * h_f; function gameover(fr, sec, thr) { $("#go").css('display', 'block'); $("#" + fr).css('background-color', 'red'); $("#" + sec).css('background-color', 'red'); $("#" + thr).css('background-color', 'red') } function case1() { var attemps_of_one_string = Math.floor(w_f / 3 * 2); //var attemps = 0; for (var d = 0; d < acr1; d++) { /*if (attemps === attemps_of_one_string) { d = d + 2; attemps = 0; } attemps++;*/ var first = document.getElementById(String(d + 1)).innerHTML; var second = document.getElementById(String(d + 2)).innerHTML; var third = document.getElementById(String(d + 3)).innerHTML; if (first == second && first == third && first != "&nbsp;") { if (first == "X") { document.getElementById("live").innerHTML = "КРЕСТИКS WIN"; gameover(d + 1, d + 2, d + 3) } else { document.getElementById("live").innerHTML = "НОЛИКS WIN"; gameover(d + 1, d + 2, d + 3) } } } } function case2() { for (var k = 0; k < acr1; k++) { var first = document.getElementById(String(k + 1)).innerHTML; var second = document.getElementById(String(k + w_f + 1)).innerHTML; var third = document.getElementById(String(k + (w_f * 2) + 1)).innerHTML; if (first == second && first == third && first != "&nbsp;") { if (first == "X") { document.getElementById("live").innerHTML = "КРЕСТИКS WIN"; gameover(k + 1, k + w_f + 1, k + (w_f * 2) + 1) } else { document.getElementById("live").innerHTML = "НОЛИКS WIN"; gameover(k + 1, k + w_f + 1, k + (w_f * 2) + 1) } } } } function x_o(num) { if (flag === 1) { flag = 0; document.getElementById(num).innerHTML = "X"; document.getElementById("live").innerHTML = "<b>НОЛИК</b>"; $("#" + num).attr('disabled', "disabled"); case1(); case2() } else { flag = 1; document.getElementById(num).innerHTML = "O"; document.getElementById("live").innerHTML = "<b>КРЕСТИК</b>"; $("#" + num).attr('disabled', "disabled"); case1(); case2() } } 
 html, body { margin: 0; padding: 0; background: #878787 } .container { max-width: 423px; width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; text-align: center } .sqr { text-align: center; line-height: 200%; background-color: transparent; border: black solid 0.5px; width: 33.33333333333333%; font-family: "arial"; font-size: 10vh } .sqr:disabled { color: black } 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>КРЕСТИК И НОЛИК</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <body> <div class="container"> <button class="sqr" id="1" onclick="x_o(1)">&nbsp;</button> <button class="sqr" id="2" onclick="x_o(2)">&nbsp;</button> <button class="sqr" id="3" onclick="x_o(3)">&nbsp;</button> <button class="sqr" id="4" onclick="x_o(4)">&nbsp;</button> <button class="sqr" id="5" onclick="x_o(5)">&nbsp;</button> <button class="sqr" id="6" onclick="x_o(6)">&nbsp;</button> <button class="sqr" id="7" onclick="x_o(7)">&nbsp;</button> <button class="sqr" id="8" onclick="x_o(8)">&nbsp;</button> <button class="sqr" id="9" onclick="x_o(9)">&nbsp;</button> <p id="live" style="display: block; margin-left: 43%"><b>КРЕСТИК</b></p> <p id="go" style="cursor: pointer; display: none; margin-top: 10%; font-family: 'arial'" onclick="$(this).hide(50), $('button').text('&#160').css('background-color', 'transparent').attr('disabled', false), $('#live').text('КРЕСТИК'), flag=1"><b>ПОПРОБОВАТЬ СНОВА</b></p> </div> </body </html>

Trying to create a game of cross and zero. For the first time I want to do 3 on 3 field. And then so that the user can choose the width and height of the field. But now is not about that. The function case1 (it calculates the fields horizontally and tries to identify the winner) works correctly. The function case2 should do the same thing only to count the fields vertically. So case2 just doesn't work. I can not understand why

  • Do not worry. The case1 function also does not work. Which, by the way, does it mean “not working”? - Igor
  • The question is good: +1. It has everything you need to answer it. Especially - errors in the console. - Igor
  • I mean that case2 does not calculate the crosses or zeroes vertically. And about case1. Yes, I realized my mistake, changed the code, now case1 calculates horizontally. - Steg_Brind
  • No, it does not calculate. Did you press the "Run code" button in the question? How do you like console errors? - Igor
  • Try either 3 crosses or 3 zeros to line up horizontally. I know that errors are popping up. Just a cycle by pressing a square (button) checks all 9 squares and compares them according to the condition - Steg_Brind

1 answer 1

With a minimum of changes to the original code:

 var flag = 1; //var w_f = document.getElementById("width_of_field").value; //var h_f = document.getElementById("height_of_field").value; var w_f = 3; var h_f = 3; var acr1 = w_f * h_f; function gameover(fr, sec, thr) { $("#go").css('display', 'block'); $("#" + fr).css('background-color', 'red'); $("#" + sec).css('background-color', 'red'); $("#" + thr).css('background-color', 'red') } function case1() { for (var i = 1; i <= 3; i++) { var first = document.getElementById(i + "_1").innerHTML; var second = document.getElementById(i + "_2").innerHTML; var third = document.getElementById(i + "_3").innerHTML; if (first == second && first == third && first != "&nbsp;") { document.getElementById("live").innerHTML = (first == "X") ? "КРЕСТИКS WIN" : "НОЛИКS WIN"; gameover(i + "_1", i + "_2", i + "_3"); break; } } } function case2() { for (var j = 1; j <= 3; j++) { var first = document.getElementById("1_" + j).innerHTML; var second = document.getElementById("2_" + j).innerHTML; var third = document.getElementById("3_" + j).innerHTML; if (first == second && first == third && first != "&nbsp;") { document.getElementById("live").innerHTML = (first == "X") ? "КРЕСТИКS WIN" : "НОЛИКS WIN"; gameover("1_" + j, "2_" + j, "3_" + j); break; } } } function x_o(num) { if (flag === 1) { flag = 0; document.getElementById(num).innerHTML = "X"; document.getElementById("live").innerHTML = "<b>НОЛИК</b>"; $("#" + num).attr('disabled', "disabled"); case1(); case2(); } else { flag = 1; document.getElementById(num).innerHTML = "O"; document.getElementById("live").innerHTML = "<b>КРЕСТИК</b>"; $("#" + num).attr('disabled', "disabled"); case1(); case2(); } } 
 html, body { margin: 0; padding: 0; background: #878787 } .container { max-width: 423px; width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; text-align: center } .sqr { text-align: center; line-height: 200%; background-color: transparent; border: black solid 0.5px; width: 33.33333333333333%; font-family: "arial"; font-size: 10vh } .sqr:disabled { color: black } 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>КРЕСТИК И НОЛИК</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <body> <div class="container"> <button class="sqr" id="1_1" onclick="x_o(this.id)">&nbsp;</button> <button class="sqr" id="1_2" onclick="x_o(this.id)">&nbsp;</button> <button class="sqr" id="1_3" onclick="x_o(this.id)">&nbsp;</button> <button class="sqr" id="2_1" onclick="x_o(this.id)">&nbsp;</button> <button class="sqr" id="2_2" onclick="x_o(this.id)">&nbsp;</button> <button class="sqr" id="2_3" onclick="x_o(this.id)">&nbsp;</button> <button class="sqr" id="3_1" onclick="x_o(this.id)">&nbsp;</button> <button class="sqr" id="3_2" onclick="x_o(this.id)">&nbsp;</button> <button class="sqr" id="3_3" onclick="x_o(this.id)">&nbsp;</button> <p id="live" style="display: block; margin-left: 43%"><b>КРЕСТИК</b></p> <p id="go" style="cursor: pointer; display: none; margin-top: 10%; font-family: 'arial'" onclick="$(this).hide(50), $('button').text('&#160').css('background-color', 'transparent').attr('disabled', false), $('#live').text('КРЕСТИК'), flag=1"><b>ПОПРОБОВАТЬ СНОВА</b></p> </div> </body </html>