Игра крестики-нолики

@Илья Смолин · Регистрация: 28.08.2019

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

Приветствую! Есть простенькая игра крестики-нолики. В ней сейчас можно делать бесконечное количество кликов - то есть, если нажать на область, то появится крестик, еще раз в нее нажать - нолик. И так до бесконечности. Я же хочу, чтобы было как в жизни, чтобы в один квадрат можно было ввести крестик или нолик только один раз.

Сам как сделать что-то не могу додуматься, пробовал через this.onclick = 'false', но ничего из этого не вышло, и в гугле не особо нашел информации доступной. Поэтому прошу помощи, хотя бы с чего начать. Спасибо!

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <h1>Крестики нолики</h1>
    <div class="area-wrapper">
        <div id="area">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>
    </div>
    <script src="js/main.js">
        
    </script>
</body>
</html>

CSS
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
.area-wrapper{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#area{
    width: 300px;
    height: 300px;
    background-color: #ffeca1;
    display: flex;
    flex-wrap: wrap;
}
.box{
    width: 100px;
    height: 100px;
    border: 1px solid black;
    box-sizing: border-box;
    color:#ec2a00;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
}

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
var move = 0;
document.getElementById('area').onclick = function(event){
    console.log(event.target);
    if (move % 2 === 0){
        event.target.innerHTML = 'X';
    }
    else {
        event.target.innerHTML = 'O';
    }
    move++; 
    check();
};
function check(){
    var boxes = document.getElementsByClassName('box');
    var arr = [
    [0,1,2],
    [3,4,5],
    [6,7,8],
    [0,3,6],
    [1,4,7],
    [2,5,8],
    ]
    for(var i = 0; i<arr.length; i++)
        {
            if(boxes[arr[i][0]].innerHTML == 'X' && boxes[arr[i][1]].innerHTML == 'X' && boxes[arr[i][2]].innerHTML == 'X')
            {
                alert('Победили крестики');
                location.reload();
            }
            else if(boxes[arr[i][0]].innerHTML == 'O' && boxes[arr[i][1]].innerHTML == 'O' && boxes[arr[i][2]].innerHTML == 'O')
            {
                alert('Победили нолики');
                location.reload();
            }
        }
}

@klopp · 15.10.2019, 19:21

перед тем как записывать Х или О в ячейку, делайте проверку, пустая она или нет.

@Azdeman · 15.10.2019, 21:36

Сообщение от Илья Смолин

document.getElementById('area').onclick

Либо меняйте id элемента при клике и на него больше нельзя будет клацнуть.

@Илья Смолин · 16.10.2019, 16:38 **[ТС]**

А как он запоминает, пустой или нет? Попробовал сделать так: if (document.getElementsByClassName('box') == null), но безрезультатно

@Azdeman · 16.10.2019, 22:29

нужно проверять

JavaScript
1
event.target.innerHTML

@Mr_Sergo · 17.10.2019, 00:35

Сообщение от Илья Смолин

если нажать на область, то появится крестик, еще раз в нее нажать - нолик

Да там нужно то всего

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
document.getElementById('area').onclick = function(event){
    
    if (event.target.innerHTML) return;  // вот эту строку добавить
    
    if (move % 2 === 0){
        event.target.innerHTML = 'X';
    }
    
    else {
        event.target.innerHTML = 'O';
    }
    move++; 
    check();
};

Добавлено через 42 минуты
кстати у вас не хватает двух выигрышных комбинаций

JavaScript
1
2
[2,4,6],
[0,4,8]

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@klopp 566 / 465 / 183 Регистрация: 14.10.2017 Сообщений: 1,259
	15.10.2019, 19:21
	перед тем как записывать Х или О в ячейку, делайте проверку, пустая она или нет. 0

@Илья Смолин 0 / 0 / 0 Регистрация: 28.08.2019 Сообщений: 4
	16.10.2019, 16:38 [ТС]
	А как он запоминает, пустой или нет? Попробовал сделать так: if (document.getElementsByClassName('box') == null), но безрезультатно 0