Игра на 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 **[ТС]**

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

Новые блоги и статьи Все статьи Все блоги /
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .

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

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

Решение