Цикл не корректно работает. JS
294
26 декабря 2018, 16:40
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 просто не работает. Не могу понять почему
Answer 1
С минимумом изменений первоначального кода:
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 != " ") {
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 != " ") {
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)"> </button>
<button class="sqr" id="1_2" onclick="x_o(this.id)"> </button>
<button class="sqr" id="1_3" onclick="x_o(this.id)"> </button>
<button class="sqr" id="2_1" onclick="x_o(this.id)"> </button>
<button class="sqr" id="2_2" onclick="x_o(this.id)"> </button>
<button class="sqr" id="2_3" onclick="x_o(this.id)"> </button>
<button class="sqr" id="3_1" onclick="x_o(this.id)"> </button>
<button class="sqr" id="3_2" onclick="x_o(this.id)"> </button>
<button class="sqr" id="3_3" onclick="x_o(this.id)"> </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>
-
13:29
Кофе для программистов: как напиток влияет на продуктивность кодеров?
-
22:13
Рекламные вывески: как привлечь внимание и увеличить продажи
-
19:13
-
16:04
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
-
17:27
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
-
22:17
-
18:08
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
-
18:54
-
17:35
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47914 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30568 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23900 visits
- Как через css изменить цвет png изображения? 10401 visits
- Blob video url download 10005 visits
- Php curl запрос через прокси с авторизацией 9278 visits
- Работа с captcha vk api 8147 visits
© "hostciti.net" 26.3.2025 | 09:41