Вход

Крестики и нолики на JavaScript

Крестики и нолики на JavaScript

В этом уроке мы создадим простую браузерную игру крестики и нолики на javascript.


Крустики и нолики на javascript

Создадим html основу нашего интерфейса:

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Крестики/нолики</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="rez_war">
    <p class="rez_text"></p>
</div>
<div class="rez_war_no">
    <p class="rez_text_no">Ничья</p>
</div>
<section>
    <div class="statistics"><p>Раунд <span>1</span></p></div>
    <div class="score">Компьютер <span class="num_c">0</span> - <span class="num_u">0</span>  Игрок</div>
    <div class="wrapper">
        <div class="victory">победа</div>
 
        <div class="cell" id="1"></div>
        <div class="cell" id="2"></div>
        <div class="cell" id="3"></div>
 
        <div class="cell" id="4"></div>
        <div class="cell" id="5"></div>
        <div class="cell" id="6"></div>
 
        <div class="cell" id="7"></div>
        <div class="cell" id="8"></div>
        <div class="cell" id="9"></div>
    </div>
 
    <div class="restart">
        <a href="index.html">Начать заново</a>
    </div>
</section>
</body>
</html>

Блоки:

1

<div class="cell" id="1"></div>

это ячейки игрового поля у которых есть атрибуты id с соответствующим порядковым номером ячейки (здесь атрибут id используется не совсем корректно — нарушено правило именования, но так как это учебный пример и это существенно упрощает код, то этим упущением можно пренебречь)

Блоки

1

<div class="rez_war"></div>

и

1

<div class="rez_war_no"></div>

выводят сообщение о статусе раунда (победа игрока или компьютера)

Для придания нашему интерфейсу «правильного» вида, добавим таблицу стилей (style.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
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

html, body{
    margin:0px;
    padding:0px;
}
.section{
    text-align: center;
    margin:0 auto;
}
.wrapper{
    width:450px;
    height:450px;
    margin:0 auto;
    position: relative;
}
.wrapper .cell{
    background-color: aliceblue;
    border: 1px solid #cfcfcf;
    cursor: pointer;
    float: left;
    font-size: 100px;
    height: 148px;
    text-align: center;
    width: 148px;
}
.wrapper .cell.victory{
    background-color: #e96e6e;
}
.statistics{
    font-weight: bold;
    text-align: center;
}
.score{
    text-align: center;
    margin-bottom:20px;
}
.restart{
    text-align: center;
    padding-top: 20px;
}
.restart a{
    display:inline-block;
    padding:10px 20px;
    background-color: brown;
    color:#fff;
}
.rez_war{
    background-color: brown;
    padding: 50px 0;
    position: absolute;
    text-align: center;
    top: 130px;
    width: 100%;
    display: none;
}
.rez_war p{
    color: #fff;
    font-size: 66px;
    font-weight: bold;
    text-transform: uppercase;
}
.rez_war_no{
    background-color: darkolivegreen;
    padding: 50px 0;
    position: absolute;
    text-align: center;
    top: 130px;
    width: 100%;
    display: none;
}
.rez_text_no{
    color: #fff;
    font-size: 66px;
    font-weight: bold;
    text-transform: uppercase;
}
.victory{
    text-align: center;
    color: #fff;
    background-color: brown;
    padding: 30px 0;
    font-size: 35px;
    position: absolute;
    width: 100%;
    top: 39%;
    display: none;
}

Интерфейс готов и нам остаётся только добавить алгоритм самой игры (файл script.js)

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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185

 
    jQuery(document).ready(function(){
 
        var mass = new Array(); // массив всех занятых клеток
        var mass_x = new Array(); // массив клеток с "х"
        var mass_o = new Array(); // массив клеток с "0"
        var v = 0; // флаг, есть ли победитель (если да, то "1")
 
        jQuery(".cell").on("click", function(){
            var cell_text = jQuery(this).text();
            if(cell_text != "")
                alert("занято");
            else {
                jQuery(this).text("x");
 
                var id_cell = jQuery(this).attr('id');
                id_cell = parseInt(id_cell);
 
                mass.push(id_cell);
                mass_x.push(id_cell);
 
                mass_x.sort(mass_x);
 
                var v = victory(mass_x, "Игрок");
 
                //alert(mass.length);
                if(mass_x.length != 0 && mass.length < 8)
                    computer();
                if(mass.length == 9 && v != 1)
                    noneVictory();
 
            }
        });
 
        // Проверка на победу
        function victory(metka, user){
 
            var srt1 = 0; // переменная проверки первой строки
            var srt2 = 0; // переменная проверки второй строки
            var srt3 = 0; // переменная проверки третьей строки
 
            var st1 = 0; // переменная проверки первого столбца
            var st2 = 0; // переменная проверки второго столбца
            var st3 = 0; // переменная проверки третьего столбца
 
            var d1 = 0; // переменная проверки первой диагонали
            var d2 = 0; // переменная проверки второй диагонали
 
 
            for (var i = 0; i < metka.length; i++){
                switch(metka[i]) {
                    case 1: { srt1++; st1++; d1++; break; }
                    case 2: { srt1++; st2++; break; }
                    case 3: { srt1++; st3++; d2++; break; }
                    case 4: { srt2++; st1++; break; }
                    case 5: { srt2++; st2++; d1++; d2++;  break; }
                    case 6: { srt2++; st3++; break; }
                    case 7: { srt3++; st1++; d2++; break; }
                    case 8: { srt3++; st2++; break; }
                    case 9: { srt3++; st3++; d1++;break; }
                }
 
                if(srt1 == 3 || srt2 == 3 || srt3 == 3)
                {
                    jQuery(".victory").text("Победил " + user);
                    jQuery(".victory").css("display", "block");
                    victoryBegin(user);
                }
                if(st1 == 3 || st2 == 3 || st3 == 3)
                {
                    jQuery(".victory").text("Победил " + user);
                    jQuery(".victory").css("display", "block");
                    victoryBegin(user);
                }
                if(d1 == 3 || d2 == 3)
                {
                    jQuery(".victory").text("Победил " + user);
                    jQuery(".victory").css("display", "block");
                    victoryBegin(user);
                }
            }
 
            if(srt1 == 3 || srt2 == 3 || srt3 == 3 || st1 == 3 || st2 == 3 || st3 == 3 || d1 == 3 || d2 == 3)
                return 1;
        }
 
        // действия в случае победы
        function victoryBegin(user){
 
            setTimeout(function(){
                jQuery(".victory").css("display", "none");
                jQuery(".cell").text("");
 
                var raund = jQuery(".statistics span").text();
                raund++;
                jQuery(".statistics span").text(raund);
 
                if(user == "Компьютер")
                {
                    var num = jQuery(".num_c").text();
                    num++;
                    jQuery(".num_c").text(num);
                }
                else
                {
                    var num = jQuery(".num_u").text();
                    num++;
                    jQuery(".num_u").text(num);
                }
 
                mass.length = 0;
                mass_x.length = 0;
                mass_o.length = 0;
            }, 1000);
 
        }
 
        // Ход Компьютера
        function computer(){
 
            var number;
            $flag = false;
 
            mass.sort(mass);
 
            while(true) {
 
                if(mass.length == 9)
                {
                    noneVictory();
                }
 
                number = getRandomInRange(1, 9);
 
                for (var i = 0; i < mass.length; i++) {
                    if(number == mass[i])
                        $flag = true;
                }
 
                if($flag == false)
                    break;
                else
                {
                    $flag = false;
                    continue;
                }
 
 
 
            }
 
            jQuery(".cell").eq(number-1).text("o");
 
            mass.push(number);
            mass_o.push(number);
            victory(mass_o, "Компьютер");
        }
 
        // ничья
        function noneVictory(){
            setTimeout(function(){
                jQuery(".victory").text("Ничья");
                jQuery(".victory").css("display", "block");
            }, 500);
 
            setTimeout(function(){
                jQuery(".victory").css("display", "none");
                jQuery(".cell").text("");
 
                var raund = jQuery(".statistics span").text();
                raund++;
                jQuery(".statistics span").text(raund);
 
                mass.length = 0;
                mass_x.length = 0;
                mass_o.length = 0;
 
            }, 1000);
        }
 
        // Функция генерации случайного числа (возвращает число от 1-9)
        function getRandomInRange(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
    })

Наша игра готова

Дополнительные материалы:

22 мая 2017 /

32586 Views /

12 комментариев
Ilya Web developer
Author

«Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете.»Martin Golding

Путь web разработчика. Фриланс или офис

Теги

Bootstrap bower cms CSS 3 framework Game Git github grid gulp ide JavaScript joomla jQuery js Less MySQL npm php pug SASS SEO smartgrid SMM SQL svg TypeScript Yii2 Администрирование Дизайн Реклама Репозиторий видеокурсы редакторы и ide