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 != " ") {
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 != " ") {
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)"> </button>
<button class="sqr" id="2" onclick="x_o(2)"> </button>
<button class="sqr" id="3" onclick="x_o(3)"> </button>
<button class="sqr" id="4" onclick="x_o(4)"> </button>
<button class="sqr" id="5" onclick="x_o(5)"> </button>
<button class="sqr" id="6" onclick="x_o(6)"> </button>
<button class="sqr" id="7" onclick="x_o(7)"> </button>
<button class="sqr" id="8" onclick="x_o(8)"> </button>
<button class="sqr" id="9" onclick="x_o(9)"> </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(' ').css('background-color', 'transparent').attr('disabled', false), $('#live').text('КРЕСТИК'), flag=1"><b>ПОПРОБОВАТЬ СНОВА</b></p>
</div>
</body </html>
Пытаюсь создать игру Крестик и Нолик. На первый раз хочу сделать 3 на 3 поле. А потом чтобы пользователь смог сам выбирать ширину и высоту поля. Но сейчас не об этом. Функция case1(она вычисляет поля по горизонтали и пытается выявить победителя) - работает правильно. Функция case2 должна делать тоже самое только считать поля по вертикали. Так вот case2 просто не работает. Не могу понять почему
case1
тоже "не работает". Что, кстати, это значит - "не работает"?