Ошибка в игре крестики нолики на JavaScript

@RtlSdr · Регистрация: 14.11.2018

Студворк — интернет-сервис помощи студентам

Добрый вечер,
Написал игру крестики нолики с использованием Jquery, и после переписал на чистый Javascript, в результате чего не пойму, почему при клике на определенном div контейнере крестик или нолик ставится на другом.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
var counter=1;
var res= ["2","2","2","2","2","2","2","2","2"];
 
function ScoreCheck() {
  console.log("CL: "+document.getElementsByClassName("inner-square")[0].className)
  console.log(document.getElementsByClassName("square").length)
 
  for (i = 0; i < document.getElementsByClassName("square").length; i++) {
    if (document.getElementsByClassName("inner-square")[i].className == "inner-square inner-square-circle") {
      res[i] = '0';
    }
    if (document.getElementsByClassName("inner-square")[i].className == "inner-square inner-square-cross") {
      res[i] = '1';
    }
  }
 
  console.log(res);
 
  if ((res[0] == '0' && res[1] == '0' && res[2] == '0') ||
        (res[3] == '0' && res[4] == '0' && res[5] == '0') ||
        (res[6] == '0' && res[7] == '0' && res[8] == '0') ||
        (res[0] == '0' && res[3] == '0' && res[6] == '0') ||
        (res[1] == '0' && res[4] == '0' && res[7] == '0') ||
        (res[2] == '0' && res[5] == '0' && res[8] == '0') ||
        (res[0] == '0' && res[4] == '0' && res[8] == '0') ||
        (res[2] == '0' && res[4] == '0' && res[6] == '0')) {
    console.log("Gamer circle WIN");
    document.getElementById("tour").innerHTML = +document.getElementById("player-1").value + " A GAGNE!"
    counter = "win";
  }
 
  if ((res[0] == '1' && res[1] == '1' && res[2] == '1') ||
        (res[3] == '1' && res[4] == '1' && res[5] == '1') ||
        (res[6] == '1' && res[7] == '1' && res[8] == '1') ||
        (res[0] == '1' && res[3] == '1' && res[6] == '1') ||
        (res[1] == '1' && res[4] == '1' && res[7] == '1') ||
        (res[2] == '1' && res[5] == '1' && res[8] == '1') ||
        (res[0] == '1' && res[4] == '1' && res[8] == '1') ||
        (res[2] == '1' && res[4] == '1' && res[6] == '1')) {
    console.log("Gamer cross WIN");
    document.getElementById("tour").innerHTML = +document.getElementById("player-2").value + " A GAGNE!"
    counter = "win";
  }
}
 
function croix(num) {
  console.log("counter: "+counter);
  console.log("num: "+num);
  console.log( "inner-square: "+ document.getElementsByClassName('inner-square')[num].className);
 
  if (counter != "win" ) {
    if (counter) {
      console.log("counter: "+counter)
 
      document.getElementsByClassName('inner-square')[num].className = 'inner-square-circle'
      document.getElementById("tour").innerHTML = "Tour de: " + 
document.getElementById("player-1").value;
      counter = 0;
      //ScoreCheck();
    } else {
      console.log("counter: "+counter)
 
      document.getElementsByClassName('inner-square')[num].className = 'inner-square-cross'
      document.getElementById("tour").innerHTML = "Tour de: " + 
      document.getElementById("player-2").value;
      counter = 1;
      //ScoreCheck();
    }
  }
}
 
function clean() {
  for (i = 0; i < document.getElementsByClassName("square").length; i++) {
    document.getElementsByClassName("inner-square")[i].className = "inner-square";
  }
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 
    <link href="assets/styles/bootstrap.min.css" type="text/css" rel="stylesheet">
    <link href="assets/styles/styles.css" type="text/css" rel="stylesheet">
</head>
<body>
 
   <nav class="navbar navbar-expand-lg navbar-light bg-dark">
    <div class="container">
        <h1 class="navbar-brand text-white">
            Morpion
        </h1>
     </div>
     </nav>
 
     <div class="container mt-4">
    <section class="card">
        <h2 class="card-header h5">
            Paramétrage de la partie
        </h2>
 
        <div class="card-body">
            <div class="form-group">
                <label for="player-1">Nom du Joueur 1 :</label>
 
                <input id="player-1" type="text" class="form-control" 
     placeholder="Joueur 1">
            </div>
 
            <div class="form-group">
                <label for="player-2">Nom du Joueur 2 :</label>
 
                <input id="player-2" type="text" class="form-control" 
    placeholder="Joueur 2">
            </div>
        </div>
    </section>
 
    <section class="card mt-4">
        <h2 class="card-header h5">
            Jeu
        </h2>
 
        <div class="card-body">
            <div class="text-center" id="tour">
                Tour de <span>Cédric</span>
            </div>
 
 
            <div class="squares-wrapper">
                <div class="squares-line">
                    <div class="square" onclick="croix('0')">
                        <span class="inner-square"   ></span>
                    </div>
                    <div class="square" onclick="croix('1')">
                        <span class="inner-square"  ></span>
                    </div>
                    <div class="square"  onclick="croix('2')">
                        <span class="inner-square"></span>
                    </div>
                </div>
 
                <div class="squares-line">
                    <div class="square" onclick="croix('3')">
                        <span class="inner-square"></span>
                    </div>
                    <div class="square" onclick="croix('4')">
                        <span class="inner-square"></span>
                    </div>
                    <div class="square" onclick="croix('5')">
                        <span class="inner-square" ></span>
                    </div>
                </div>
 
                <div class="squares-line">
                    <div class="square" onclick="croix('6')">
                        <span class="inner-square"></span>
                    </div>
                    <div class="square" onclick="croix('7')">
                        <span class="inner-square"></span>
                    </div>
                    <div class="square" onclick="croix('8')">
                        <span class="inner-square"></span>
                    </div>
                </div>
            </div>
 
        </div>
    </section>
 
     <div class="text-center mt-4">
       <button type="button" class="btn btn-primary btn-raised" 
       onclick="clean();">
            Recommencer la partie
        </button>
    </div>
</div>
 
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
 
<script src="assets/scripts/functions.js"></script>
 
 
</body>
</html>

@diadiavova · 05.12.2018, 00:23

RtlSdr, Искать элементы с заданным классом по всему документу и идентифицировать их по порядковому номеру - плохая идея. Проще и надежнее "плясать" непосредственно от того элемента, по которому был осуществлен клик.
Я внес минимальные изменения, только те, что описал, остальное не трогал, хотя может и стоило бы ))) Получилось следующее

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 
    <link href="assets/styles/bootstrap.min.css" type="text/css" rel="stylesheet">
    <link href="assets/styles/styles.css" type="text/css" rel="stylesheet">
</head>
<body>
 
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
    <div class="container">
        <h1 class="navbar-brand text-white">
            Morpion
        </h1>
    </div>
</nav>
 
<div class="container mt-4">
    <section class="card">
        <h2 class="card-header h5">
            Paramétrage de la partie
        </h2>
 
        <div class="card-body">
            <div class="form-group">
                <label for="player-1">Nom du Joueur 1 :</label>
 
                <input id="player-1" type="text" class="form-control" placeholder="Joueur 1">
            </div>
 
            <div class="form-group">
                <label for="player-2">Nom du Joueur 2 :</label>
 
                <input id="player-2" type="text" class="form-control" placeholder="Joueur 2">
            </div>
        </div>
    </section>
 
    <section class="card mt-4">
        <h2 class="card-header h5">
            Jeu
        </h2>
 
        <div class="card-body">
            <div class="text-center" id="tour">
                Tour de <span>Cédric</span>
            </div>
 
 
            <div class="squares-wrapper">
                <div class="squares-line">
                    <div class="square" >
                        <span class="inner-square"   ></span>
                    </div>
                    <div class="square" >
                        <span class="inner-square"  ></span>
                    </div>
                    <div class="square"  >
                        <span class="inner-square"></span>
                    </div>
                </div>
 
                <div class="squares-line">
                    <div class="square" >
                        <span class="inner-square"></span>
                    </div>
                    <div class="square" >
                        <span class="inner-square"></span>
                    </div>
                    <div class="square" >
                        <span class="inner-square" ></span>
                    </div>
                </div>
 
                <div class="squares-line">
                    <div class="square" >
                        <span class="inner-square"></span>
                    </div>
                    <div class="square" >
                        <span class="inner-square"></span>
                    </div>
                    <div class="square" >
                        <span class="inner-square"></span>
                    </div>
                </div>
            </div>
 
        </div>
    </section>
 
    <div class="text-center mt-4">
        <button type="button" class="btn btn-primary btn-raised" onclick="clean();">
            Recommencer la partie
        </button>
    </div>
</div>
 
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
 
<script src="assets/scripts/functions.js"></script>
 
 
</body>
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
var counter = 1;
var res = ["2", "2", "2", "2", "2", "2", "2", "2", "2"];
for (let square of document.getElementsByClassName("square"))
    square.addEventListener("click", croix);
 
function ScoreCheck()
{
 
    console.log("CL: " + document.getElementsByClassName("inner-square")[0].className)
    console.log(document.getElementsByClassName("square").length)
 
    for (i = 0; i < document.getElementsByClassName("square").length; i++)
    {
        if (document.getElementsByClassName("inner-square")[i].className == "inner-square inner-square-circle")
        {
            res[i] = '0';
        }
        if (document.getElementsByClassName("inner-square")[i].className == "inner-square inner-square-cross")
        {
            res[i] = '1';
        }
    }
 
    console.log(res);
 
    if ((res[0] == '0' && res[1] == '0' && res[2] == '0') ||
        (res[3] == '0' && res[4] == '0' && res[5] == '0') ||
        (res[6] == '0' && res[7] == '0' && res[8] == '0') ||
        (res[0] == '0' && res[3] == '0' && res[6] == '0') ||
        (res[1] == '0' && res[4] == '0' && res[7] == '0') ||
        (res[2] == '0' && res[5] == '0' && res[8] == '0') ||
        (res[0] == '0' && res[4] == '0' && res[8] == '0') ||
        (res[2] == '0' && res[4] == '0' && res[6] == '0'))
    {
        console.log("Gamer circle WIN");
        document.getElementById("tour").innerHTML = +document.getElementById("player-1").value + " A GAGNE!"
        counter = "win";
    }
 
    if ((res[0] == '1' && res[1] == '1' && res[2] == '1') ||
        (res[3] == '1' && res[4] == '1' && res[5] == '1') ||
        (res[6] == '1' && res[7] == '1' && res[8] == '1') ||
        (res[0] == '1' && res[3] == '1' && res[6] == '1') ||
        (res[1] == '1' && res[4] == '1' && res[7] == '1') ||
        (res[2] == '1' && res[5] == '1' && res[8] == '1') ||
        (res[0] == '1' && res[4] == '1' && res[8] == '1') ||
        (res[2] == '1' && res[4] == '1' && res[6] == '1'))
    {
        console.log("Gamer cross WIN");
        document.getElementById("tour").innerHTML = +document.getElementById("player-2").value + " A GAGNE!"
        counter = "win";
    }
 
}
 
 
function croix(evt)
{
    console.log("counter: " + counter)
    //console.log("num: " + num)
    //console.log("inner-square: " + document.getElementsByClassName('inner-square')[num].className)
 
 
 
    if (counter != "win")
    {
        if (counter)
        {
            console.log("counter: " + counter)
 
            evt.target.querySelector('.inner-square').className = 'inner-square-circle'
            document.getElementById("tour").innerHTML = "Tour de: " + document.getElementById("player-1").value;
            counter = 0;
            //ScoreCheck();
        }
        else
        {
            console.log("counter: " + counter)
 
            evt.target.querySelector('.inner-square').className = 'inner-square-cross'
            document.getElementById("tour").innerHTML = "Tour de: " + document.getElementById("player-2").value;
            counter = 1;
            //ScoreCheck();
        }
    }
 
}
 
function clean()
{
    for (i = 0; i < document.getElementsByClassName("square").length; i++)
    {
        document.getElementsByClassName("inner-square")[i].className = "inner-square";
    }
}

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .