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

@12131415yulia · Регистрация: 22.09.2017

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

Помогите написать игру на javascript крестики-нолики.
Крестики-нолики запускаются в режиме одного пользователя. Логика должна отрабатывать следующие ситуации:
• При обновлении страницы, состояние процесса не должно быть нарушено, т.е. все измененные элементы должны остаться на месте. Отсчёт времени продолжается.
• В ничейной ситуации победителя нет и пользователю просто предлагается начать игру заново.
• Поле игры состоит из квадрата с 9 полями. Они пронумерованы следующим образом:
123
456
789

• По умолчанию всегда используется фото “default-user”, но как только игрок загрузит свое изображение хотя бы раз перед игрой, оно будет использоваться далее для всех игровых сессий (в текущей сессии браузера). (т.е. при рестарте не надо просить фото снова)
• При старте новой игры, все поля очищаются. Игрок ходит первым. Выбранное им поле маркируется его фотографией по умолчанию (или той что загружена однажды).
• Компьютер делает следующий ход. Он случайным образом выбирает одно из свободных полей и маркирует его большим X. Компьютер всегда думает 2 секунды и осуществляет ход на игровом поле.
• Количество совершенных шагов и время игры постоянно отображается и обновляется над игровым полем.
• Сообщение отображается для информирования игрока об его победе или проигрыше.
Вот такие условия, пишу сама,не получается сделать в режиме одного пользователя

@Norwich · 12.11.2018, 20:25

Что именно не получается-то? Покажите, что уже написали

@12131415yulia · 13.11.2018, 16:09 **[ТС]**

Написала только с позиции X O, а как сделать чтобы компьютер ходил не могу сделать. ( Компьютер делает следующий ход. Он случайным образом выбирает одно из свободных полей и маркирует его большим X. Компьютер всегда думает 2 секунды и осуществляет ход на игровом поле.) и сложность еще с тем,чтобы при перезагрузке страницы оставалось все на месте.(При обновлении страницы, состояние процесса не должно быть нарушено, т.е. все измененные элементы должны остаться на месте. Отсчёт времени продолжается.) вот это тоже непонятно с фото. По умолчанию всегда используется фото “default-user”, но как только игрок загрузит свое изображение хотя бы раз перед игрой, оно будет использоваться далее для всех игровых сессий (в текущей сессии браузера). (т.е. при рестарте не надо просить фото снова)

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
window.onload = function(){
    for (var i=0; i<9; i++){
    document.getElementById('game').innerHTML+='<div class="block"></div>';
}
 
    var hod = 0;
    
    document.getElementById('game').onclick = function(event){
        console.log(event);
        if (event.target.className == 'block'){
            if (hod%2==0){ //процент это остаток от деления, т.е целое 0,2,4,6,8//
                event.target.innerHTML = '0'; //клики на блоки //
            }
            else{
                event.target.innerHTML ='x';
            }
            hod++;
            checkWinner();
        }
    }
 
     function checkWinner(){
         var allblock = document.getElementsByClassName('block');
         //console.log(allblock);
        if(allblock[0].innerHTML=='x' && allblock[1].innerHTML=='x' && allblock[2].innerHTML=='x') alert('Победили крестики');
        if(allblock[3].innerHTML=='x' && allblock[4].innerHTML=='x' && allblock[5].innerHTML=='x') alert('Победили крестики');
        if(allblock[6].innerHTML=='x' && allblock[7].innerHTML=='x' && allblock[8].innerHTML=='x') alert('Победили крестики');
        if(allblock[0].innerHTML=='x' && allblock[3].innerHTML=='x' && allblock[6].innerHTML=='x') alert('Победили крестики');
        if(allblock[1].innerHTML=='x' && allblock[4].innerHTML=='x' && allblock[7].innerHTML=='x') alert('Победили крестики');
        if(allblock[2].innerHTML=='x' && allblock[5].innerHTML=='x' && allblock[8].innerHTML=='x') alert('Победили крестики');
        if(allblock[0].innerHTML=='x' && allblock[4].innerHTML=='x' && allblock[8].innerHTML=='x') alert('Победили крестики');
        if(allblock[2].innerHTML=='x' && allblock[4].innerHTML=='x' && allblock[6].innerHTML=='x') alert('Победили крестики');
        //нолики
        if(allblock[0].innerHTML=='0' && allblock[1].innerHTML=='0' && allblock[2].innerHTML=='0') alert('Победили нолики');
        if(allblock[3].innerHTML=='0' && allblock[4].innerHTML=='0' && allblock[5].innerHTML=='0') alert('Победили нолики');
        if(allblock[6].innerHTML=='0' && allblock[7].innerHTML=='0' && allblock[8].innerHTML=='0') alert('Победили нолики');
        if(allblock[0].innerHTML=='0' && allblock[3].innerHTML=='0' && allblock[6].innerHTML=='0') alert('Победили нолики');
        if(allblock[1].innerHTML=='0' && allblock[4].innerHTML=='0' && allblock[7].innerHTML=='0') alert('Победили нолики');
        if(allblock[2].innerHTML=='0' && allblock[5].innerHTML=='0' && allblock[8].innerHTML=='0') alert('Победили нолики');
        if(allblock[0].innerHTML=='0' && allblock[4].innerHTML=='0' && allblock[8].innerHTML=='0') alert('Победили нолики');
        if(allblock[2].innerHTML=='0' && allblock[4].innerHTML=='0' && allblock[6].innerHTML=='0') alert('Победили нолики');
            
        }
    
    }
 
//012
//345
//678

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
26
27
28
29
30
31
32
33
34
35
36
#game{
    width: 150px;
    height: 150px;
    background: red;
    position: absolute;
    left: 50%;
    margin-top: 12%;
    
}
.block {
    width: 50px;
    height: 50px;
    float: left;
    border: 1px solid white;
    box-sizing: border-box;
    line-height: 50px;
    text-align: center;
    font-size: 40px;
    text-transform: uppercase;
}/*блок разделенный на сетку */
 
blockquote {
  quotes: "\2039" "\203A";
  font-size: 40px;
  font-family: 'Sigmar One', cursive;
}
blockquote:before {
  content: open-quote;
  color: mediumvioletred;
  margin-right: 50px;
}
  blockquote:after  {
  content: close-quote;
  color: mediumvioletred;
  margin-left: 50px;
}/*надпись с кавычками*/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="utf-8">
      <title>Document</title>
      <blockquote>Игра крестики-нолики</blockquote>
      <link rel="stylesheet" href="style.css">
      <script src="js.js">
      </script> 
</head>
<body style="background-image:url(img/obo.jpg)" >
       <div id="game"></div> <!--квадрат с рабочим полем-->
      
</body>
</html>

@Norwich · 13.11.2018, 18:53

В обработке события сразу проверяем наша ли очередь ходить (нельзя сделать ход, пока компьютер "думает" 2 секунды). Игрок делает ход, за ним сразу же ходит компьютер:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
document.getElementById('game').onclick = function(event){
    console.log(event);
    //Клик на пустой блок в наш ход:
    if (event.target.className == 'block' && !event.target.innerHTML && hod%2==0) { 
        event.target.innerHTML = '0'; 
        hod++;
        checkWinner();
        //Ход компьютера:
        setTimeout(function(){ //Думает 2 секунды
            while (true) {
                var r = randomInt(0, 8); //Выбирает случайную ячейку
                if (!document.querySelectorAll('.block')[r].innerHTML) {    //Если находит пустую
                    document.querySelectorAll('.block')[r].innerHTML = 'x'; //Ставит крестик в неё
                    break;
                }
            }
            hod++;
            checkWinner();
        }, 2000);
    }
}

Функция randomInt выглядит классически:

JavaScript
1
2
3
4
function randomInt(min, max) // Случайное целое число в диапазоне min-max
{
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

Процесс игры, аватарки и прочее сохраняется в куки браузера (Инструкция)
Фото, насколько я понимаю, никуда не загружается (ведь нет серверной части игры?), а в куки сохраняется url, как и всё остальное.

@12131415yulia · 13.11.2018, 19:05 **[ТС]**

Спасибо большое, действительно все заработало, если будут вопросы то еще обращусь)))) спасибо,спасибо))))

@12131415yulia · 15.11.2018, 16:22 **[ТС]**

Помогите еще с операцией "Ничья". Это нужно еще условие добавить?

@Norwich · 15.11.2018, 18:10

Сообщение от 12131415yulia

Помогите еще с операцией "Ничья". Это нужно еще условие добавить?

Логично. Если сделано 8 ходов и победителя нет = ничья

@12131415yulia · 10.12.2018, 20:23 **[ТС]**

Помогите пожалуйста , так и не смогла сделать ничью в игре крестики нолики. Перепробовала много вариантов,ничего не работает

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
window.onload = function(){
    
    for (var i=0; i<9; i++)  {
    document.getElementById('game').innerHTML+='<div class="block"></div>';
}
 
    var hod = 0;
    
    document.getElementById('game').onclick = function(event){
    console.log(event);
    //Клик на пустой блок в наш ход:
    if (event.target.className == 'block' && !event.target.innerHTML && hod%2==0) { 
        event.target.innerHTML = 'О'; 
        hod++;
        checkWinner();
        //Ход компьютера:
        setTimeout(function(){ //Думает 2 секунды
            while (true) {
                var r = randomInt(0, 8); //Выбирает случайную ячейку
                if (!document.querySelectorAll('.block')[r].innerHTML) {    //Если находит пустую
                    document.querySelectorAll('.block')[r].innerHTML = 'x'; //Ставит крестик в неё
                    break;
                }
            }
            hod++;
            checkWinner();
        }, 2000);
    }
}
    
 
     function checkWinner()
     {
         var flag = false;
         var allblock = document.getElementsByClassName('block');
         //console.log(allblock);
     if(allblock[0].innerHTML=='x' && allblock[1].innerHTML=='x' && allblock[2].innerHTML=='x') alert('Победили крестики'); flag = true;
        if(allblock[3].innerHTML=='x' && allblock[4].innerHTML=='x' && allblock[5].innerHTML=='x') alert('Победили крестики'); flag = true;
        if(allblock[6].innerHTML=='x' && allblock[7].innerHTML=='x' && allblock[8].innerHTML=='x') alert('Победили крестики'); flag = true;
        if(allblock[0].innerHTML=='x' && allblock[3].innerHTML=='x' && allblock[6].innerHTML=='x') alert('Победили крестики'); flag = true;
        if(allblock[1].innerHTML=='x' && allblock[4].innerHTML=='x' && allblock[7].innerHTML=='x') alert('Победили крестики'); flag = true; 
        if(allblock[2].innerHTML=='x' && allblock[5].innerHTML=='x' && allblock[8].innerHTML=='x') alert('Победили крестики'); flag = true;
        if(allblock[0].innerHTML=='x' && allblock[4].innerHTML=='x' && allblock[8].innerHTML=='x') alert('Победили крестики'); flag = true;
        if(allblock[2].innerHTML=='x' && allblock[4].innerHTML=='x' && allblock[6].innerHTML=='x') alert('Победили крестики'); flag = true;
        
        //нолики
        if(allblock[0].innerHTML=='О' && allblock[1].innerHTML=='О' && allblock[2].innerHTML=='О') alert('Победили нолики'); flag = true;
        if(allblock[3].innerHTML=='О' && allblock[4].innerHTML=='О' && allblock[5].innerHTML=='О') alert('Победили нолики'); flag = true;
        if(allblock[6].innerHTML=='О' && allblock[7].innerHTML=='О' && allblock[8].innerHTML=='О') alert('Победили нолики'); flag = true;
        if(allblock[0].innerHTML=='О' && allblock[3].innerHTML=='О' && allblock[6].innerHTML=='О') alert('Победили нолики'); flag = true;
        if(allblock[1].innerHTML=='О' && allblock[4].innerHTML=='О' && allblock[7].innerHTML=='О') alert('Победили нолики'); flag = true;
        if(allblock[2].innerHTML=='О' && allblock[5].innerHTML=='О' && allblock[8].innerHTML=='О') alert('Победили нолики'); flag = true;
        if(allblock[0].innerHTML=='О' && allblock[4].innerHTML=='О' && allblock[8].innerHTML=='О') alert('Победили нолики'); flag = true;
        if(allblock[2].innerHTML=='О' && allblock[4].innerHTML=='О' && allblock[6].innerHTML=='О') alert('Победили нолики'); flag = true;
        if (flag == 'false')
        {alert('Ничья!');}
        }
        
    function randomInt(min, max) // Случайное целое число в диапазоне min-max
{
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
    if (window.sessionStorage && window.localStorage) {
  //объекты sessionStorage и localtorage поддерживаются
}
else {
  //объекты sessionStorage и localtorage не поддерживаются
}
//012
//345
//678

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
<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="utf-8">
      <title>Document</title>
    
      <link rel="stylesheet" href="style.css">
      <script src="js.js">
      </script> 
</head>
<body style="background-image:url(img/.jpg)" >
       <div id="game"></div> <!--квадрат с рабочим полем-->
      <h1>Крестики-нолики</h1>
      
    
</script>
</body>
</html>   
 
#game{
    width: 150px;
    height: 150px;
    background: red;
    position: absolute;
    left: 50%;
    margin-top: 12%;
    
}
.block {
    width: 50px;
    height: 50px;
    float: left;
    border: 1px solid white;
    box-sizing: border-box;
    line-height: 50px;
    text-align: center;
    font-size: 40px;
    text-transform: uppercase;
}/*блок разделенный на сетку */
 
blockquote {
  quotes: "\2039" "\203A";
  font-size: 40px;
  font-family: 'Sigmar One', cursive;
}
blockquote:before {
  content: open-quote;
  color: mediumvioletred;
  margin-right: 50px;
}
  blockquote:after  {
  content: close-quote;
  color: mediumvioletred;
  margin-left: 50px;
}/*надпись с кавычками*/

Комментарий модератора

Правила форума

4. Порядок создания тем.
4.9 Используйте тэги форматирования текста и редактор формул для удобства восприятия ваших сообщений другими пользователями.
Памятка «Как работать в редакторе сообщений»

@Norwich · 10.12.2018, 21:56

Тут в checkWinner() никакие флаги не нужны. Проверяем количество сделанных ходов. Если пустые клетки закончились, а победитель не найден, произошла ничья. Чтоб заполнить всё поле, игрокам нужно сделать в общей сложности 8 ходов (считая от нуля).

JavaScript
1
if (hod > 7) alert('Ничья!');

Также, при обнаружении победителя, используем конструкцию return. Во-первых, скрипт не будет выполнять лишних проверок, если найдёт победителя, а во вторых не объявит ничью в случае победы на последнем ходу.
Как-то так...

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
function checkWinner() {
    var allblock = document.getElementsByClassName('block');
    //console.log(allblock);
    if(allblock[0].innerHTML=='x' && allblock[1].innerHTML=='x' && allblock[2].innerHTML=='x') return alert('Победили крестики');
    if(allblock[3].innerHTML=='x' && allblock[4].innerHTML=='x' && allblock[5].innerHTML=='x') return alert('Победили крестики');
    if(allblock[6].innerHTML=='x' && allblock[7].innerHTML=='x' && allblock[8].innerHTML=='x') return alert('Победили крестики');
    if(allblock[0].innerHTML=='x' && allblock[3].innerHTML=='x' && allblock[6].innerHTML=='x') return alert('Победили крестики');
    if(allblock[1].innerHTML=='x' && allblock[4].innerHTML=='x' && allblock[7].innerHTML=='x') return alert('Победили крестики');
    if(allblock[2].innerHTML=='x' && allblock[5].innerHTML=='x' && allblock[8].innerHTML=='x') return alert('Победили крестики');
    if(allblock[0].innerHTML=='x' && allblock[4].innerHTML=='x' && allblock[8].innerHTML=='x') return alert('Победили крестики');
    if(allblock[2].innerHTML=='x' && allblock[4].innerHTML=='x' && allblock[6].innerHTML=='x') return alert('Победили крестики');
    
    //нолики
    if(allblock[0].innerHTML=='О' && allblock[1].innerHTML=='О' && allblock[2].innerHTML=='О') return alert('Победили нолики');
    if(allblock[3].innerHTML=='О' && allblock[4].innerHTML=='О' && allblock[5].innerHTML=='О') return alert('Победили нолики');
    if(allblock[6].innerHTML=='О' && allblock[7].innerHTML=='О' && allblock[8].innerHTML=='О') return alert('Победили нолики');
    if(allblock[0].innerHTML=='О' && allblock[3].innerHTML=='О' && allblock[6].innerHTML=='О') return alert('Победили нолики');
    if(allblock[1].innerHTML=='О' && allblock[4].innerHTML=='О' && allblock[7].innerHTML=='О') return alert('Победили нолики');
    if(allblock[2].innerHTML=='О' && allblock[5].innerHTML=='О' && allblock[8].innerHTML=='О') return alert('Победили нолики');
    if(allblock[0].innerHTML=='О' && allblock[4].innerHTML=='О' && allblock[8].innerHTML=='О') return alert('Победили нолики');
    if(allblock[2].innerHTML=='О' && allblock[4].innerHTML=='О' && allblock[6].innerHTML=='О') return alert('Победили нолики');
    
    //ничья
    if (hod > 7) alert('Ничья!');
}

@12131415yulia · 12.12.2018, 20:08 **[ТС]**

Спасибо еще раз большое. Ох и трудно мне это дается

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа 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 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@12131415yulia 1 / 1 / 0 Регистрация: 22.09.2017 Сообщений: 13

	Игра на java script крестики-нолики 12.11.2018, 12:26. Показов 15233. Ответов 9 Метки Игра, крестики-нолики (Все метки) Помогите написать игру на javascript крестики-нолики. Крестики-нолики запускаются в режиме одного пользователя. Логика должна отрабатывать следующие ситуации: • При обновлении страницы, состояние процесса не должно быть нарушено, т.е. все измененные элементы должны остаться на месте. Отсчёт времени продолжается. • В ничейной ситуации победителя нет и пользователю просто предлагается начать игру заново. • Поле игры состоит из квадрата с 9 полями. Они пронумерованы следующим образом: 123 456 789 • По умолчанию всегда используется фото “default-user”, но как только игрок загрузит свое изображение хотя бы раз перед игрой, оно будет использоваться далее для всех игровых сессий (в текущей сессии браузера). (т.е. при рестарте не надо просить фото снова) • При старте новой игры, все поля очищаются. Игрок ходит первым. Выбранное им поле маркируется его фотографией по умолчанию (или той что загружена однажды). • Компьютер делает следующий ход. Он случайным образом выбирает одно из свободных полей и маркирует его большим X. Компьютер всегда думает 2 секунды и осуществляет ход на игровом поле. • Количество совершенных шагов и время игры постоянно отображается и обновляется над игровым полем. • Сообщение отображается для информирования игрока об его победе или проигрыше. Вот такие условия, пишу сама,не получается сделать в режиме одного пользователя 0

@Norwich 17 / 11 / 6 Регистрация: 09.06.2016 Сообщений: 31
	12.11.2018, 20:25
	Что именно не получается-то? Покажите, что уже написали 0

@12131415yulia 1 / 1 / 0 Регистрация: 22.09.2017 Сообщений: 13
	13.11.2018, 19:05 [ТС]
	Спасибо большое, действительно все заработало, если будут вопросы то еще обращусь)))) спасибо,спасибо)))) 1

@12131415yulia 1 / 1 / 0 Регистрация: 22.09.2017 Сообщений: 13
	15.11.2018, 16:22 [ТС]
	Помогите еще с операцией "Ничья". Это нужно еще условие добавить? 0

@12131415yulia 1 / 1 / 0 Регистрация: 22.09.2017 Сообщений: 13
	12.12.2018, 20:08 [ТС]
	Спасибо еще раз большое. Ох и трудно мне это дается 0

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

Решение