Игра на 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 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/

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

	Игра на java script крестики-нолики 12.11.2018, 12:26. Показов 15237. Ответов 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 крестики-нолики

Решение