{"id":1320,"date":"2026-09-24T09:00:00","date_gmt":"2026-09-24T09:00:00","guid":{"rendered":"https:\/\/otus.ru\/journal\/?p=1320"},"modified":"2026-09-25T15:32:06","modified_gmt":"2026-09-25T15:32:06","slug":"krestiki-noliki","status":"publish","type":"post","link":"https:\/\/otus.ru\/journal\/krestiki-noliki\/","title":{"rendered":"\u041a\u0440\u0435\u0441\u0442\u0438\u043a\u0438-\u043d\u043e\u043b\u0438\u043a\u0438 \u043d\u0430 JavaScript: \u043a\u0430\u043a \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0438\u0433\u0440\u0443 \u043d\u0430 \u0441\u0430\u0439\u0442"},"content":{"rendered":"

\u0427\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u0440\u0435\u0441\u0442\u0438\u043a\u0438-\u043d\u043e\u043b\u0438\u043a\u0438 \u043d\u0430 \u0441\u0430\u0439\u0442<\/strong>, \u043d\u0435 \u043d\u0443\u0436\u043d\u044b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440: \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u043e\u0434\u043d\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u0438\u0437 \u0442\u0440\u0435\u0445 \u0447\u0430\u0441\u0442\u0435\u0439. \u042d\u0442\u043e HTML-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u043f\u043e\u043b\u044f 3×3, \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0430\u0432\u0438\u043b CSS \u0438 \u0441\u043a\u0440\u0438\u043f\u0442 \u043d\u0430 JavaScript, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0445\u0440\u0430\u043d\u0438\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043e\u0441\u043a\u0438, \u0447\u0435\u0440\u0435\u0434\u0443\u0435\u0442 \u0445\u043e\u0434\u044b, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 8 \u0432\u044b\u0438\u0433\u0440\u044b\u0448\u043d\u044b\u0445 \u043b\u0438\u043d\u0438\u0439 \u0438 \u043f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438 \u0445\u043e\u0434\u0438\u0442 \u0437\u0430 \u0441\u043e\u043f\u0435\u0440\u043d\u0438\u043a\u0430. \u0411\u043b\u043e\u043a \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043f\u0435\u0440\u0435\u0434 <\/body><\/code>, \u0432 HTML-\u0432\u0438\u0434\u0436\u0435\u0442 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 \u0438\u043b\u0438 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c \u0444\u0430\u0439\u043b\u043e\u043c \u0447\u0435\u0440\u0435\u0437 iframe<\/code>.<\/p>\n

\n

\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/strong><\/p>\n

    \n
  1. \u0413\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u0434: \u0441\u043a\u043e\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u0438 \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435<\/a><\/li>\n
  2. \u041a\u0430\u043a \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0438\u0433\u0440\u0443 \u043d\u0430 \u0441\u0430\u0439\u0442<\/a><\/li>\n
  3. \u041a\u0430\u043a \u0443\u0441\u0442\u0440\u043e\u0435\u043d \u043a\u043e\u0434<\/a><\/li>\n
  4. \u041d\u0435\u043f\u043e\u0431\u0435\u0434\u0438\u043c\u044b\u0439 \u0431\u043e\u0442 \u043d\u0430 \u043c\u0438\u043d\u0438\u043c\u0430\u043a\u0441\u0435<\/a><\/li>\n
  5. \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043b\u043e\u0433\u0438\u043a\u0438 \u0432 Node.js<\/a><\/li>\n
  6. \u0415\u0441\u043b\u0438 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c<\/a><\/li>\n
  7. \u0412\u044b\u0432\u043e\u0434\u044b<\/a><\/li>\n
  8. \u0413\u0434\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \/ \u0441\u0432\u044f\u0437\u044c \u0441 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0439<\/a><\/li>\n
  9. FAQ<\/a><\/li>\n<\/ol>\n<\/div>\n

    \u041d\u0438\u0436\u0435 — \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u0434 \u0446\u0435\u043b\u0438\u043a\u043e\u043c, \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0432\u0441\u0442\u0430\u0432\u043a\u0438, \u0440\u0430\u0437\u0431\u043e\u0440 \u043b\u043e\u0433\u0438\u043a\u0438, \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0431\u043e\u0442 \u0438 \u0431\u043e\u0442, \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0435\u043b\u044c\u0437\u044f \u043e\u0431\u044b\u0433\u0440\u0430\u0442\u044c. \u041a\u043e\u0434 \u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d 24.09.2026: \u043b\u043e\u0433\u0438\u043a\u0430 — \u0432 Node.js 24.21, \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (\u043a\u043b\u0438\u043a\u0438, \u043d\u0438\u0447\u044c\u044f, \u0441\u0431\u0440\u043e\u0441) — \u0432 \u044d\u043c\u0443\u043b\u044f\u0446\u0438\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 jsdom.<\/p>\n

    \u0413\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u0434: \u0441\u043a\u043e\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u0438 \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435<\/h2>\n

    \u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u0444\u0430\u0439\u043b \u043a\u0430\u043a tic-tac-toe.html<\/code> \u0438 \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0434\u0432\u043e\u0439\u043d\u044b\u043c \u0449\u0435\u043b\u0447\u043a\u043e\u043c. \u041f\u0435\u0440\u0432\u044b\u043c \u0445\u043e\u0434\u0438\u0442 X (\u0432\u044b), \u0431\u043e\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u043d\u043e\u043b\u0438\u043a\u043e\u043c \u0447\u0435\u0440\u0435\u0437 0,3 \u0441\u0435\u043a\u0443\u043d\u0434\u044b.<\/p>\n

    <!doctype html><\/span>\n<<\/span>html<\/span> lang<\/span>=<\/span>\"ru\"<\/span>><\/span>\n<<\/span>head<\/span>><\/span>\n  <<\/span>meta<\/span> charset<\/span>=<\/span>\"utf-8\"<\/span>><\/span>\n  <<\/span>meta<\/span> name<\/span>=<\/span>\"viewport\"<\/span> content<\/span>=<\/span>\"width=device-width, initial-scale=1\"<\/span>><\/span>\n  <<\/span>title<\/span>><\/span>\u041a\u0440\u0435\u0441\u0442\u0438\u043a\u0438-\u043d\u043e\u043b\u0438\u043a\u0438<\/<\/span>title<\/span>><\/span>\n  <<\/span>style<\/span>><\/span>\n    .<\/span>ttt<\/span> { <\/span>max-width<\/span>: <\/span>320<\/span>px<\/span>; <\/span>font-family<\/span>: <\/span>system-ui<\/span>, <\/span>sans-serif<\/span>; }<\/span>\n    .<\/span>ttt-board<\/span> { <\/span>display<\/span>: <\/span>grid<\/span>; <\/span>grid-template-columns<\/span>: <\/span>repeat<\/span>(<\/span>3<\/span>, <\/span>1<\/span>fr<\/span>); <\/span>gap<\/span>: <\/span>6<\/span>px<\/span>; <\/span>margin<\/span>: <\/span>12<\/span>px<\/span> <\/span>0<\/span>; }<\/span>\n    .<\/span>ttt-cell<\/span> { <\/span>aspect-ratio<\/span>: <\/span>1<\/span>; <\/span>font-size<\/span>: <\/span>2.5<\/span>rem<\/span>; <\/span>font-weight<\/span>: <\/span>700<\/span>; <\/span>color<\/span>: <\/span>#222<\/span>;<\/span>\n                <\/span>border<\/span>: <\/span>2<\/span>px<\/span> <\/span>solid<\/span> <\/span>#454fce<\/span>; <\/span>border-radius<\/span>: <\/span>8<\/span>px<\/span>; <\/span>background<\/span>: <\/span>#fff<\/span>; <\/span>cursor<\/span>: <\/span>pointer<\/span>; }<\/span>\n    .<\/span>ttt-cell<\/span>:<\/span>disabled<\/span> { <\/span>cursor<\/span>: <\/span>default<\/span>; <\/span>color<\/span>: <\/span>#222<\/span>; }<\/span>\n    .<\/span>ttt-cell<\/span>.<\/span>win<\/span> { <\/span>background<\/span>: <\/span>#ffe082<\/span>; }<\/span>\n  <\/<\/span>style<\/span>><\/span>\n<\/<\/span>head<\/span>><\/span>\n<<\/span>body<\/span>><\/span>\n  <<\/span>div<\/span> class<\/span>=<\/span>\"ttt\"<\/span> id<\/span>=<\/span>\"ttt\"<\/span>><\/span>\n    <<\/span>p<\/span> class<\/span>=<\/span>\"ttt-status\"<\/span> aria-live<\/span>=<\/span>\"polite\"<\/span>><\/<\/span>p<\/span>><\/span>\n    <<\/span>div<\/span> class<\/span>=<\/span>\"ttt-board\"<\/span>><\/<\/span>div<\/span>><\/span>\n    <<\/span>label<\/span>><<\/span>input<\/span> type<\/span>=<\/span>\"checkbox\"<\/span> class<\/span>=<\/span>\"ttt-bot\"<\/span> checked<\/span>><\/span> \u0411\u043e\u0442 \u0438\u0433\u0440\u0430\u0435\u0442 \u0437\u0430 O<\/<\/span>label<\/span>><\/span>\n    <<\/span>button<\/span> type<\/span>=<\/span>\"button\"<\/span> class<\/span>=<\/span>\"ttt-reset\"<\/span>><\/span>\u041d\u043e\u0432\u0430\u044f \u0438\u0433\u0440\u0430<\/<\/span>button<\/span>><\/span>\n  <\/<\/span>div<\/span>><\/span>\n\n  <<\/span>script<\/span>><\/span>\n  (<\/span>function<\/span> (<\/span>root<\/span>) {<\/span>\n    <\/span>const<\/span> <\/span>LINES<\/span> <\/span>=<\/span> [<\/span>\n      [<\/span>0<\/span>, <\/span>1<\/span>, <\/span>2<\/span>], [<\/span>3<\/span>, <\/span>4<\/span>, <\/span>5<\/span>], [<\/span>6<\/span>, <\/span>7<\/span>, <\/span>8<\/span>], <\/span>\/\/ \u0441\u0442\u0440\u043e\u043a\u0438<\/span>\n      [<\/span>0<\/span>, <\/span>3<\/span>, <\/span>6<\/span>], [<\/span>1<\/span>, <\/span>4<\/span>, <\/span>7<\/span>], [<\/span>2<\/span>, <\/span>5<\/span>, <\/span>8<\/span>], <\/span>\/\/ \u0441\u0442\u043e\u043b\u0431\u0446\u044b<\/span>\n      [<\/span>0<\/span>, <\/span>4<\/span>, <\/span>8<\/span>], [<\/span>2<\/span>, <\/span>4<\/span>, <\/span>6<\/span>]             <\/span>\/\/ \u0434\u0438\u0430\u0433\u043e\u043d\u0430\u043b\u0438<\/span>\n    ];<\/span>\n\n    <\/span>function<\/span> <\/span>getWinner<\/span>(<\/span>board<\/span>) {<\/span>\n      <\/span>for<\/span> (<\/span>const<\/span> [<\/span>a<\/span>, <\/span>b<\/span>, <\/span>c<\/span>] <\/span>of<\/span> <\/span>LINES<\/span>) {<\/span>\n        <\/span>if<\/span> (<\/span>board<\/span>[<\/span>a<\/span>] <\/span>&&<\/span> <\/span>board<\/span>[<\/span>a<\/span>] <\/span>===<\/span> <\/span>board<\/span>[<\/span>b<\/span>] <\/span>&&<\/span> <\/span>board<\/span>[<\/span>a<\/span>] <\/span>===<\/span> <\/span>board<\/span>[<\/span>c<\/span>]) {<\/span>\n          <\/span>return<\/span> { <\/span>player<\/span>:<\/span> <\/span>board<\/span>[<\/span>a<\/span>], <\/span>line<\/span>:<\/span> [<\/span>a<\/span>, <\/span>b<\/span>, <\/span>c<\/span>] };<\/span>\n        }<\/span>\n      }<\/span>\n      <\/span>return<\/span> <\/span>null<\/span>;<\/span>\n    }<\/span>\n\n    <\/span>\/\/ \u041a\u043b\u0435\u0442\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0430\u043c\u044b\u043a\u0430\u0435\u0442 \u043b\u0438\u043d\u0438\u044e \u0438\u0437 \u0434\u0432\u0443\u0445 \u0437\u043d\u0430\u043a\u043e\u0432 player, \u0438\u043b\u0438 -1<\/span>\n    <\/span>function<\/span> <\/span>findLineMove<\/span>(<\/span>board<\/span>, <\/span>player<\/span>) {<\/span>\n      <\/span>for<\/span> (<\/span>const<\/span> <\/span>line<\/span> <\/span>of<\/span> <\/span>LINES<\/span>) {<\/span>\n        <\/span>const<\/span> <\/span>mine<\/span> <\/span>=<\/span> <\/span>line<\/span>.<\/span>filter<\/span>(<\/span>i<\/span> => <\/span>board<\/span>[<\/span>i<\/span>] <\/span>===<\/span> <\/span>player<\/span>).<\/span>length<\/span>;<\/span>\n        <\/span>const<\/span> <\/span>empty<\/span> <\/span>=<\/span> <\/span>line<\/span>.<\/span>filter<\/span>(<\/span>i<\/span> => <\/span>board<\/span>[<\/span>i<\/span>] <\/span>===<\/span> <\/span>null<\/span>);<\/span>\n        <\/span>if<\/span> (<\/span>mine<\/span> <\/span>===<\/span> <\/span>2<\/span> <\/span>&&<\/span> <\/span>empty<\/span>.<\/span>length<\/span> <\/span>===<\/span> <\/span>1<\/span>) <\/span>return<\/span> <\/span>empty<\/span>[<\/span>0<\/span>];<\/span>\n      }<\/span>\n      <\/span>return<\/span> <\/span>-<\/span>1<\/span>;<\/span>\n    }<\/span>\n\n    <\/span>function<\/span> <\/span>botMove<\/span>(<\/span>board<\/span>, <\/span>bot<\/span>, <\/span>human<\/span>) {<\/span>\n      <\/span>let<\/span> <\/span>move<\/span> <\/span>=<\/span> <\/span>findLineMove<\/span>(<\/span>board<\/span>, <\/span>bot<\/span>);                  <\/span>\/\/ 1. \u0432\u044b\u0438\u0433\u0440\u0430\u0442\u044c<\/span>\n      <\/span>if<\/span> (<\/span>move<\/span> <\/span>===<\/span> <\/span>-<\/span>1<\/span>) <\/span>move<\/span> <\/span>=<\/span> <\/span>findLineMove<\/span>(<\/span>board<\/span>, <\/span>human<\/span>);   <\/span>\/\/ 2. \u0437\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u0442\u044c<\/span>\n      <\/span>if<\/span> (<\/span>move<\/span> <\/span>===<\/span> <\/span>-<\/span>1<\/span> <\/span>&&<\/span> <\/span>board<\/span>[<\/span>4<\/span>] <\/span>===<\/span> <\/span>null<\/span>) <\/span>move<\/span> <\/span>=<\/span> <\/span>4<\/span>;       <\/span>\/\/ 3. \u0446\u0435\u043d\u0442\u0440<\/span>\n      <\/span>if<\/span> (<\/span>move<\/span> <\/span>===<\/span> <\/span>-<\/span>1<\/span>) {                                    <\/span>\/\/ 4. \u0443\u0433\u043e\u043b, \u0438\u043d\u0430\u0447\u0435 \u043b\u044e\u0431\u0430\u044f<\/span>\n        <\/span>const<\/span> <\/span>free<\/span> <\/span>=<\/span> <\/span>board<\/span>.<\/span>map<\/span>((<\/span>v<\/span>, <\/span>i<\/span>) => <\/span>v<\/span> <\/span>===<\/span> <\/span>null<\/span> <\/span>?<\/span> <\/span>i<\/span> <\/span>:<\/span> <\/span>-<\/span>1<\/span>).<\/span>filter<\/span>(<\/span>i<\/span> => <\/span>i<\/span> <\/span>!==<\/span> <\/span>-<\/span>1<\/span>);<\/span>\n        <\/span>const<\/span> <\/span>corners<\/span> <\/span>=<\/span> <\/span>free<\/span>.<\/span>filter<\/span>(<\/span>i<\/span> => [<\/span>0<\/span>, <\/span>2<\/span>, <\/span>6<\/span>, <\/span>8<\/span>].<\/span>includes<\/span>(<\/span>i<\/span>));<\/span>\n        <\/span>const<\/span> <\/span>pool<\/span> <\/span>=<\/span> <\/span>corners<\/span>.<\/span>length<\/span> <\/span>?<\/span> <\/span>corners<\/span> <\/span>:<\/span> <\/span>free<\/span>;<\/span>\n        <\/span>move<\/span> <\/span>=<\/span> <\/span>pool<\/span>[<\/span>Math<\/span>.<\/span>floor<\/span>(<\/span>Math<\/span>.<\/span>random<\/span>() <\/span>*<\/span> <\/span>pool<\/span>.<\/span>length<\/span>)];<\/span>\n      }<\/span>\n      <\/span>return<\/span> <\/span>move<\/span>;<\/span>\n    }<\/span>\n\n    <\/span>const<\/span> <\/span>board<\/span> <\/span>=<\/span> <\/span>Array<\/span>(<\/span>9<\/span>).<\/span>fill<\/span>(<\/span>null<\/span>);<\/span>\n    <\/span>const<\/span> <\/span>statusEl<\/span> <\/span>=<\/span> <\/span>root<\/span>.<\/span>querySelector<\/span>(<\/span>'.ttt-status'<\/span>);<\/span>\n    <\/span>const<\/span> <\/span>boardEl<\/span> <\/span>=<\/span> <\/span>root<\/span>.<\/span>querySelector<\/span>(<\/span>'.ttt-board'<\/span>);<\/span>\n    <\/span>const<\/span> <\/span>botBox<\/span> <\/span>=<\/span> <\/span>root<\/span>.<\/span>querySelector<\/span>(<\/span>'.ttt-bot'<\/span>);<\/span>\n    <\/span>const<\/span> <\/span>cells<\/span> <\/span>=<\/span> [];<\/span>\n    <\/span>let<\/span> <\/span>current<\/span>, <\/span>finished<\/span>, <\/span>botTimer<\/span> <\/span>=<\/span> <\/span>null<\/span>;<\/span>\n\n    <\/span>for<\/span> (<\/span>let<\/span> <\/span>i<\/span> <\/span>=<\/span> <\/span>0<\/span>; <\/span>i<\/span> <\/span><<\/span> <\/span>9<\/span>; <\/span>i<\/span>++<\/span>) {<\/span>\n      <\/span>const<\/span> <\/span>btn<\/span> <\/span>=<\/span> <\/span>document<\/span>.<\/span>createElement<\/span>(<\/span>'button'<\/span>);<\/span>\n      <\/span>btn<\/span>.<\/span>type<\/span> <\/span>=<\/span> <\/span>'button'<\/span>;<\/span>\n      <\/span>btn<\/span>.<\/span>className<\/span> <\/span>=<\/span> <\/span>'ttt-cell'<\/span>;<\/span>\n      <\/span>btn<\/span>.<\/span>setAttribute<\/span>(<\/span>'aria-label'<\/span>, <\/span>'\u041a\u043b\u0435\u0442\u043a\u0430 '<\/span> <\/span>+<\/span> (<\/span>i<\/span> <\/span>+<\/span> <\/span>1<\/span>));<\/span>\n      <\/span>btn<\/span>.<\/span>addEventListener<\/span>(<\/span>'click'<\/span>, () => <\/span>onCellClick<\/span>(<\/span>i<\/span>));<\/span>\n      <\/span>boardEl<\/span>.<\/span>append<\/span>(<\/span>btn<\/span>);<\/span>\n      <\/span>cells<\/span>.<\/span>push<\/span>(<\/span>btn<\/span>);<\/span>\n    }<\/span>\n\n    <\/span>function<\/span> <\/span>play<\/span>(<\/span>i<\/span>) {<\/span>\n      <\/span>board<\/span>[<\/span>i<\/span>] <\/span>=<\/span> <\/span>current<\/span>;<\/span>\n      <\/span>cells<\/span>[<\/span>i<\/span>].<\/span>textContent<\/span> <\/span>=<\/span> <\/span>current<\/span>;<\/span>\n      <\/span>cells<\/span>[<\/span>i<\/span>].<\/span>disabled<\/span> <\/span>=<\/span> <\/span>true<\/span>;<\/span>\n      <\/span>const<\/span> <\/span>win<\/span> <\/span>=<\/span> <\/span>getWinner<\/span>(<\/span>board<\/span>);<\/span>\n      <\/span>if<\/span> (<\/span>win<\/span>) {<\/span>\n        <\/span>win<\/span>.<\/span>line<\/span>.<\/span>forEach<\/span>(<\/span>k<\/span> => <\/span>cells<\/span>[<\/span>k<\/span>].<\/span>classList<\/span>.<\/span>add<\/span>(<\/span>'win'<\/span>));<\/span>\n        <\/span>return<\/span> <\/span>finish<\/span>(<\/span>'\u041f\u043e\u0431\u0435\u0434\u0438\u043b '<\/span> <\/span>+<\/span> <\/span>win<\/span>.<\/span>player<\/span>);<\/span>\n      }<\/span>\n      <\/span>if<\/span> (<\/span>board<\/span>.<\/span>every<\/span>(<\/span>Boolean<\/span>)) <\/span>return<\/span> <\/span>finish<\/span>(<\/span>'\u041d\u0438\u0447\u044c\u044f'<\/span>);<\/span>\n      <\/span>current<\/span> <\/span>=<\/span> <\/span>current<\/span> <\/span>===<\/span> <\/span>'X'<\/span> <\/span>?<\/span> <\/span>'O'<\/span> <\/span>:<\/span> <\/span>'X'<\/span>;<\/span>\n      <\/span>statusEl<\/span>.<\/span>textContent<\/span> <\/span>=<\/span> <\/span>'\u0425\u043e\u0434\u0438\u0442 '<\/span> <\/span>+<\/span> <\/span>current<\/span>;<\/span>\n    }<\/span>\n\n    <\/span>function<\/span> <\/span>finish<\/span>(<\/span>text<\/span>) {<\/span>\n      <\/span>finished<\/span> <\/span>=<\/span> <\/span>true<\/span>;<\/span>\n      <\/span>statusEl<\/span>.<\/span>textContent<\/span> <\/span>=<\/span> <\/span>text<\/span>;<\/span>\n      <\/span>cells<\/span>.<\/span>forEach<\/span>(<\/span>c<\/span> => { <\/span>c<\/span>.<\/span>disabled<\/span> <\/span>=<\/span> <\/span>true<\/span>; });<\/span>\n    }<\/span>\n\n    <\/span>function<\/span> <\/span>onCellClick<\/span>(<\/span>i<\/span>) {<\/span>\n      <\/span>if<\/span> (<\/span>finished<\/span> <\/span>||<\/span> <\/span>board<\/span>[<\/span>i<\/span>] <\/span>!==<\/span> <\/span>null<\/span> <\/span>||<\/span> <\/span>botTimer<\/span> <\/span>!==<\/span> <\/span>null<\/span>) <\/span>return<\/span>;<\/span>\n      <\/span>play<\/span>(<\/span>i<\/span>);<\/span>\n      <\/span>if<\/span> (<\/span>!<\/span>finished<\/span> <\/span>&&<\/span> <\/span>botBox<\/span>.<\/span>checked<\/span> <\/span>&&<\/span> <\/span>current<\/span> <\/span>===<\/span> <\/span>'O'<\/span>) {<\/span>\n        <\/span>botTimer<\/span> <\/span>=<\/span> <\/span>setTimeout<\/span>(() => {<\/span>\n          <\/span>botTimer<\/span> <\/span>=<\/span> <\/span>null<\/span>;<\/span>\n          <\/span>play<\/span>(<\/span>botMove<\/span>(<\/span>board<\/span>, <\/span>'O'<\/span>, <\/span>'X'<\/span>));<\/span>\n        }, <\/span>300<\/span>);<\/span>\n      }<\/span>\n    }<\/span>\n\n    <\/span>function<\/span> <\/span>reset<\/span>() {<\/span>\n      <\/span>clearTimeout<\/span>(<\/span>botTimer<\/span>);<\/span>\n      <\/span>botTimer<\/span> <\/span>=<\/span> <\/span>null<\/span>;<\/span>\n      <\/span>board<\/span>.<\/span>fill<\/span>(<\/span>null<\/span>);<\/span>\n      <\/span>current<\/span> <\/span>=<\/span> <\/span>'X'<\/span>;<\/span>\n      <\/span>finished<\/span> <\/span>=<\/span> <\/span>false<\/span>;<\/span>\n      <\/span>cells<\/span>.<\/span>forEach<\/span>(<\/span>c<\/span> => { <\/span>c<\/span>.<\/span>textContent<\/span> <\/span>=<\/span> <\/span>''<\/span>; <\/span>c<\/span>.<\/span>disabled<\/span> <\/span>=<\/span> <\/span>false<\/span>; <\/span>c<\/span>.<\/span>classList<\/span>.<\/span>remove<\/span>(<\/span>'win'<\/span>); });<\/span>\n      <\/span>statusEl<\/span>.<\/span>textContent<\/span> <\/span>=<\/span> <\/span>'\u0425\u043e\u0434\u0438\u0442 X'<\/span>;<\/span>\n    }<\/span>\n\n    <\/span>root<\/span>.<\/span>querySelector<\/span>(<\/span>'.ttt-reset'<\/span>).<\/span>addEventListener<\/span>(<\/span>'click'<\/span>, <\/span>reset<\/span>);<\/span>\n    <\/span>botBox<\/span>.<\/span>addEventListener<\/span>(<\/span>'change'<\/span>, <\/span>reset<\/span>); <\/span>\/\/ \u0441\u043c\u0435\u043d\u0430 \u0440\u0435\u0436\u0438\u043c\u0430 = \u043d\u043e\u0432\u0430\u044f \u043f\u0430\u0440\u0442\u0438\u044f<\/span>\n    <\/span>reset<\/span>();<\/span>\n  })(<\/span>document<\/span>.<\/span>getElementById<\/span>(<\/span>'ttt'<\/span>));<\/span>\n  <\/<\/span>script<\/span>><\/span>\n<\/<\/span>body<\/span>><\/span>\n<\/<\/span>html<\/span>><\/span><\/code><\/pre>\n
    \u0427\u0442\u043e \u0443\u0432\u0438\u0434\u0438\u0442\u0435: \u043d\u0430\u0434 \u043f\u043e\u043b\u0435\u043c \u0441\u0442\u0440\u043e\u043a\u0430 \u00ab\u0425\u043e\u0434\u0438\u0442 X\u00bb, \u0434\u0435\u0432\u044f\u0442\u044c \u043f\u0443\u0441\u0442\u044b\u0445 \u043a\u043b\u0435\u0442\u043e\u043a \u0438 \u0444\u043b\u0430\u0436\u043e\u043a \u00ab\u0411\u043e\u0442 \u0438\u0433\u0440\u0430\u0435\u0442 \u0437\u0430 O\u00bb. \u041f\u043e\u0441\u043b\u0435 \u043f\u043e\u0431\u0435\u0434\u044b \u0432\u044b\u0438\u0433\u0440\u044b\u0448\u043d\u0430\u044f \u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0436\u0435\u043b\u0442\u044b\u043c, \u0441\u0442\u0430\u0442\u0443\u0441 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u00ab\u041f\u043e\u0431\u0435\u0434\u0438\u043b X\u00bb \u0438\u043b\u0438 \u00ab\u041f\u043e\u0431\u0435\u0434\u0438\u043b O\u00bb, \u043f\u043e\u043b\u0435 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442\u0441\u044f. \u0415\u0441\u043b\u0438 \u043a\u043b\u0435\u0442\u043a\u0438 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u044b \u0431\u0435\u0437 \u0442\u0440\u043e\u0439\u043a\u0438 — \u00ab\u041d\u0438\u0447\u044c\u044f\u00bb. \u041a\u043d\u043e\u043f\u043a\u0430 \u00ab\u041d\u043e\u0432\u0430\u044f \u0438\u0433\u0440\u0430\u00bb \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0437\u0430\u043d\u043e\u0432\u043e. \u0421\u043d\u0438\u043c\u0438\u0442\u0435 \u0444\u043b\u0430\u0436\u043e\u043a — \u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u0433\u0440\u0430\u0442\u044c \u0432\u0434\u0432\u043e\u0435\u043c \u0437\u0430 \u043e\u0434\u043d\u0438\u043c \u044d\u043a\u0440\u0430\u043d\u043e\u043c. \u041f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0444\u043b\u0430\u0436\u043a\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043d\u043e\u0432\u0443\u044e \u043f\u0430\u0440\u0442\u0438\u044e: \u0438\u043d\u0430\u0447\u0435 \u043f\u0440\u0438 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u0431\u043e\u0442\u0430 \u043f\u043e\u0441\u0440\u0435\u0434\u0438 \u0438\u0433\u0440\u044b \u0437\u0430 O \u0443\u0441\u043f\u0435\u043b \u0431\u044b \u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0447\u0435\u043b\u043e\u0432\u0435\u043a, \u0430 \u043f\u0440\u0438 \u0432\u044b\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0430\u0443\u0437\u044b \u0431\u043e\u0442 \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u043b \u0431\u044b \u0443\u0436\u0435 \u0437\u0430\u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0445\u043e\u0434.<\/p>\n
    \u041a\u0430\u043a \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0438\u0433\u0440\u0443 \u043d\u0430 \u0441\u0430\u0439\u0442<\/h2>\n
    \u041a\u043e\u0434 \u0441\u0430\u043c\u043e\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u044b\u0439: \u0441\u0442\u0438\u043b\u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0430 .ttt<\/code>, \u0430 \u0441\u043a\u0440\u0438\u043f\u0442 \u043e\u0431\u0435\u0440\u043d\u0443\u0442 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0438 \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043d \u043d\u0435 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u0443\u0435\u0442 \u0441 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439. \u0421\u043f\u043e\u0441\u043e\u0431 \u0432\u0441\u0442\u0430\u0432\u043a\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u043d \u0441\u0430\u0439\u0442.<\/p>\n\n\n\n\n\n\n\n
    \u0413\u0434\u0435 \u0441\u0430\u0439\u0442<\/th>\n\u0427\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c<\/th>\n\u041d\u0430 \u0447\u0442\u043e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/th>\n<\/tr>\n<\/thead>\n
    \u0421\u0432\u043e\u0439 HTML-\u0444\u0430\u0439\u043b<\/td>\n\u0421\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c <style><\/code> \u0432 <head><\/code>, \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 <div class=\"ttt\"><\/code> — \u0432 \u043d\u0443\u0436\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e, <script><\/code> — \u043f\u043e\u0441\u043b\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0434 <\/body><\/code><\/td>\n\u0421\u043a\u0440\u0438\u043f\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438<\/td>\n<\/tr>\n
    \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0438\u043b\u0438 CMS \u0441 HTML-\u0431\u043b\u043e\u043a\u043e\u043c<\/td>\n\u0412\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, <style><\/code> \u0438 <script><\/code> \u0432 \u0431\u043b\u043e\u043a \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u043e\u0433\u043e HTML<\/td>\nCMS \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0440\u0435\u0437\u0430\u0442\u044c <script><\/code> \u043f\u043e \u043f\u0440\u0430\u0432\u0430\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438\u043b\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c \u0444\u0438\u043b\u044c\u0442\u0440\u0430<\/td>\n<\/tr>\n
    \u041b\u044e\u0431\u043e\u0439 \u0441\u0430\u0439\u0442, \u0433\u0434\u0435 \u043d\u0443\u0436\u043d\u0430 \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u044f<\/td>\n\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c tic-tac-toe.html<\/code> \u043d\u0430 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0438 \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c: <iframe src=\"\/games\/tic-tac-toe.html\" width=\"340\" height=\"460\" title=\"\u041a\u0440\u0435\u0441\u0442\u0438\u043a\u0438-\u043d\u043e\u043b\u0438\u043a\u0438\"><\/code><\/td>\n\u0421\u0442\u0438\u043b\u0438 \u0441\u0430\u0439\u0442\u0430 \u043d\u0435 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u0438\u0433\u0440\u0443 \u0438 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442; \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u0435 \u043d\u0430 \u0441\u0432\u043e\u0439<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \u0415\u0441\u043b\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043d\u0443\u0436\u043d\u043e \u0434\u0432\u0435 \u0438\u0433\u0440\u044b, \u0443 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0434\u0440\u0443\u0433\u043e\u0439 id<\/code>, \u0430 \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u0430 — document.getElementById<\/code> \u0441 \u044d\u0442\u0438\u043c id<\/code>.<\/p>\n
    \u041a\u0430\u043a \u0443\u0441\u0442\u0440\u043e\u0435\u043d \u043a\u043e\u0434<\/h2>\n
    \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435: \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 9 \u043a\u043b\u0435\u0442\u043e\u043a<\/h3>\n
    \u0414\u043e\u0441\u043a\u0430 \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 board<\/code> \u0438\u0437 9 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432: null<\/code> — \u043a\u043b\u0435\u0442\u043a\u0430 \u043f\u0443\u0441\u0442\u0430, 'X'<\/code> \u0438\u043b\u0438 'O'<\/code> — \u0437\u0430\u043d\u044f\u0442\u0430. \u0418\u043d\u0434\u0435\u043a\u0441 \u043a\u043b\u0435\u0442\u043a\u0438 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0441\u0442\u0440\u043e\u043a\u0430 * 3 + \u0441\u0442\u043e\u043b\u0431\u0435\u0446<\/code>:<\/p>\n
    0 | 1 | 2\n3 | 4 | 5\n6 | 7 | 8\n<\/code><\/pre>\n
    \u041a\u043d\u043e\u043f\u043a\u0438 \u043a\u043b\u0435\u0442\u043e\u043a \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0432 \u0446\u0438\u043a\u043b\u0435, \u0438 \u043a\u0430\u0436\u0434\u0430\u044f \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0441\u0432\u043e\u0439 \u0438\u043d\u0434\u0435\u043a\u0441 \u0447\u0435\u0440\u0435\u0437 \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u0435: btn.addEventListener('click', () => onCellClick(i))<\/code>. \u041a\u043b\u0435\u0442\u043a\u0438 \u0441\u0434\u0435\u043b\u0430\u043d\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 <button><\/code>, \u0430 \u043d\u0435 <div><\/code>: \u043f\u043e \u043d\u0438\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0439\u0442\u0438 \u043a\u043b\u0430\u0432\u0438\u0448\u0435\u0439 Tab, \u043d\u0430\u0436\u0430\u0442\u044c Enter, \u0430 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 disabled<\/code> \u0441\u0430\u043c \u0437\u0430\u043f\u0440\u0435\u0449\u0430\u0435\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u043a\u043b\u0438\u043a.<\/p>\n
    \u0425\u043e\u0434 \u0438\u0433\u0440\u043e\u043a\u0430: \u0444\u0443\u043d\u043a\u0446\u0438\u044f play<\/h3>\n
    play(i)<\/code> \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0437\u043d\u0430\u043a \u0432 \u043c\u0430\u0441\u0441\u0438\u0432, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0435\u0433\u043e \u0432 \u043a\u043d\u043e\u043f\u043a\u0435 \u0438 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442 \u043a\u043b\u0435\u0442\u043a\u0443. \u0417\u043d\u0430\u043a \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 textContent<\/code>, \u0430 \u043d\u0435 innerHTML<\/code>: \u0442\u0430\u043a \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u043d\u0435 \u043f\u043e\u043f\u0430\u0434\u0435\u0442 \u0447\u0443\u0436\u043e\u0439 HTML, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043f\u043e\u0437\u0436\u0435 \u0432\u044b \u043d\u0430\u0447\u043d\u0435\u0442\u0435 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u043c\u0435\u043d\u0430 \u0438\u0433\u0440\u043e\u043a\u043e\u0432. \u0417\u0430\u0442\u0435\u043c \u0438\u0434\u0443\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 — \u043f\u043e\u0431\u0435\u0434\u0430, \u043d\u0438\u0447\u044c\u044f — \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0442\u043e\u043c \u0441\u043c\u0435\u043d\u0430 \u0445\u043e\u0434\u0430.<\/p>\n
    \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043f\u043e\u0431\u0435\u0434\u044b: 8 \u043b\u0438\u043d\u0438\u0439<\/h3>\n
    \u0412\u044b\u0438\u0433\u0440\u044b\u0448\u043d\u044b\u0445 \u043b\u0438\u043d\u0438\u0439 \u0432 \u043f\u043e\u043b\u0435 3×3 \u0440\u043e\u0432\u043d\u043e \u0432\u043e\u0441\u0435\u043c\u044c: 3 \u0441\u0442\u0440\u043e\u043a\u0438, 3 \u0441\u0442\u043e\u043b\u0431\u0446\u0430 \u0438 2 \u0434\u0438\u0430\u0433\u043e\u043d\u0430\u043b\u0438. \u041e\u043d\u0438 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u044b \u0432 LINES<\/code>, \u0430 getWinner<\/code> \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442, \u0441\u0442\u043e\u044f\u0442 \u043b\u0438 \u0432\u043e \u0432\u0441\u0435\u0445 \u0442\u0440\u0435\u0445 \u043a\u043b\u0435\u0442\u043a\u0430\u0445 \u043b\u0438\u043d\u0438\u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 \u043d\u0435\u043f\u0443\u0441\u0442\u044b\u0435 \u0437\u043d\u0430\u043a\u0438. \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043f\u043e\u0431\u0435\u0434\u0438\u0442\u0435\u043b\u044f \u0438 \u0441\u0430\u043c\u0443 \u043b\u0438\u043d\u0438\u044e — \u043f\u043e \u043d\u0435\u0439 \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043a\u043b\u0435\u0442\u043a\u0438.<\/p>\n
    \u041f\u043e\u0440\u044f\u0434\u043e\u043a \u043f\u0440\u043e\u0432\u0435\u0440\u043e\u043a \u0432\u0430\u0436\u0435\u043d: \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u0431\u0435\u0434\u0430, \u043f\u043e\u0442\u043e\u043c \u043d\u0438\u0447\u044c\u044f. \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439, \u0434\u0435\u0432\u044f\u0442\u044b\u0439 \u0445\u043e\u0434 \u043c\u043e\u0436\u0435\u0442 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043f\u043e\u043b\u0435 \u0438 \u0437\u0430\u043c\u043a\u043d\u0443\u0442\u044c \u0442\u0440\u043e\u0439\u043a\u0443.<\/p>\n
    \/\/ \u041d\u0435\u0432\u0435\u0440\u043d\u044b\u0439 \u043f\u043e\u0440\u044f\u0434\u043e\u043a: \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0438\u0447\u044c\u044f, \u043f\u043e\u0442\u043e\u043c \u043f\u043e\u0431\u0435\u0434\u0430<\/span>\nfunction<\/span> <\/span>resultWrong<\/span>(<\/span>board<\/span>) {<\/span>\n  <\/span>if<\/span> (<\/span>board<\/span>.<\/span>every<\/span>(<\/span>Boolean<\/span>)) <\/span>return<\/span> <\/span>'\u041d\u0438\u0447\u044c\u044f'<\/span>;<\/span>\n  <\/span>const<\/span> <\/span>win<\/span> <\/span>=<\/span> <\/span>getWinner<\/span>(<\/span>board<\/span>);<\/span>\n  <\/span>return<\/span> <\/span>win<\/span> <\/span>?<\/span> <\/span>'\u041f\u043e\u0431\u0435\u0434\u0438\u043b '<\/span> <\/span>+<\/span> <\/span>win<\/span>.<\/span>player<\/span> <\/span>:<\/span> <\/span>'\u0418\u0433\u0440\u0430 \u0438\u0434\u0435\u0442'<\/span>;<\/span>\n}<\/span>\n\/\/ \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439, \u0434\u0435\u0432\u044f\u0442\u044b\u0439 \u0445\u043e\u0434 X \u0432 \u043a\u043b\u0435\u0442\u043a\u0443 8 \u0437\u0430\u043c\u044b\u043a\u0430\u0435\u0442 \u0434\u0438\u0430\u0433\u043e\u043d\u0430\u043b\u044c 0-4-8<\/span>\nconst<\/span> <\/span>board<\/span> <\/span>=<\/span> [<\/span>'X'<\/span>, <\/span>'O'<\/span>, <\/span>'X'<\/span>, <\/span>'O'<\/span>, <\/span>'X'<\/span>, <\/span>'O'<\/span>, <\/span>'O'<\/span>, <\/span>'X'<\/span>, <\/span>'X'<\/span>];<\/span>\nconsole<\/span>.<\/span>log<\/span>(<\/span>resultWrong<\/span>(<\/span>board<\/span>));<\/span><\/code><\/pre>\n
    \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043f\u0440\u043e\u0433\u043e\u043d\u0430 — \u041d\u0438\u0447\u044c\u044f<\/code>, \u0445\u043e\u0442\u044f X \u0432\u044b\u0438\u0433\u0440\u0430\u043b. \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 — \u043a\u0430\u043a \u0432 play<\/code>: \u0441\u043d\u0430\u0447\u0430\u043b\u0430 getWinner<\/code>, \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u043f\u043e\u0431\u0435\u0434\u0438\u0442\u0435\u043b\u044f \u043d\u0435\u0442, \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 board.every(Boolean)<\/code>.<\/p>\n
    \u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u0431\u043e\u0442-\u0441\u043e\u043f\u0435\u0440\u043d\u0438\u043a<\/h3>\n
    botMove<\/code> \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u0445\u043e\u0434 \u043f\u043e \u0447\u0435\u0442\u044b\u0440\u0435\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c \u0432 \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u0430:<\/p>\n
      \n
    1. \u0415\u0441\u043b\u0438 \u0443 \u0431\u043e\u0442\u0430 \u0434\u0432\u0435 \u043a\u043b\u0435\u0442\u043a\u0438 \u0432 \u043b\u0438\u043d\u0438\u0438 \u0438 \u0442\u0440\u0435\u0442\u044c\u044f \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u0430 — \u0432\u044b\u0438\u0433\u0440\u0430\u0442\u044c.<\/li>\n
    2. \u0415\u0441\u043b\u0438 \u0442\u0430\u043a\u0430\u044f \u043b\u0438\u043d\u0438\u044f \u0443 \u0438\u0433\u0440\u043e\u043a\u0430 — \u0437\u0430\u043d\u044f\u0442\u044c \u0442\u0440\u0435\u0442\u044c\u044e \u043a\u043b\u0435\u0442\u043a\u0443 \u0438 \u0437\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/li>\n
    3. \u0417\u0430\u043d\u044f\u0442\u044c \u0446\u0435\u043d\u0442\u0440, \u0435\u0441\u043b\u0438 \u043e\u043d \u0441\u0432\u043e\u0431\u043e\u0434\u0435\u043d.<\/li>\n
    4. \u0418\u043d\u0430\u0447\u0435 — \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0439 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0439 \u0443\u0433\u043e\u043b, \u0430 \u0435\u0441\u043b\u0438 \u0443\u0433\u043b\u043e\u0432 \u043d\u0435\u0442 — \u043b\u044e\u0431\u0430\u044f \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u0430\u044f \u043a\u043b\u0435\u0442\u043a\u0430.<\/li>\n<\/ol>\n
      \u041e\u0431\u0435 \u043f\u0435\u0440\u0432\u044b\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0434\u0435\u043b\u0430\u0435\u0442 \u043e\u0434\u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f findLineMove(board, player)<\/code>: \u043e\u043d\u0430 \u0438\u0449\u0435\u0442 \u043b\u0438\u043d\u0438\u044e, \u0433\u0434\u0435 \u0434\u0432\u0430 \u0437\u043d\u0430\u043a\u0430 player<\/code> \u0438 \u043e\u0434\u043d\u0430 \u043f\u0443\u0441\u0442\u0430\u044f \u043a\u043b\u0435\u0442\u043a\u0430. \u0411\u043e\u0442 \u0445\u043e\u0434\u0438\u0442 \u0447\u0435\u0440\u0435\u0437 setTimeout<\/code> \u0441 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u043e\u0439 300 \u043c\u0441, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u0432\u0435\u0442 \u0431\u044b\u043b \u0437\u0430\u043c\u0435\u0442\u0435\u043d. \u041f\u043e\u043a\u0430 \u0442\u0430\u0439\u043c\u0435\u0440 \u0430\u043a\u0442\u0438\u0432\u0435\u043d, botTimer<\/code> \u043d\u0435 \u0440\u0430\u0432\u0435\u043d null<\/code>, \u0438 onCellClick<\/code> \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u0435\u0442 \u043a\u043b\u0438\u043a\u0438 — \u0438\u043d\u0430\u0447\u0435 \u0438\u0433\u0440\u043e\u043a \u0443\u0441\u043f\u0435\u043b \u0431\u044b \u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0437\u0430 \u0431\u043e\u0442\u0430. reset<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 clearTimeout<\/code>, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u043e\u0437\u0434\u0430\u043b\u044b\u0439 \u0445\u043e\u0434 \u043d\u0435 \u043f\u043e\u043f\u0430\u043b \u0432 \u043d\u043e\u0432\u0443\u044e \u043f\u0430\u0440\u0442\u0438\u044e.<\/p>\n
      \u0413\u0440\u0430\u043d\u0438\u0446\u0430 \u044d\u0442\u043e\u0433\u043e \u0431\u043e\u0442\u0430: X \u0432\u0441\u0435\u0433\u0434\u0430 \u0437\u0430 \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u043e\u043c, O — \u0437\u0430 \u0431\u043e\u0442\u043e\u043c, \u0438 \u0431\u043e\u0442 \u043d\u0435 \u0432\u0438\u0434\u0438\u0442 \u043b\u043e\u0432\u0443\u0448\u0435\u043a \u043d\u0430 \u0434\u0432\u0430 \u0445\u043e\u0434\u0430 \u0432\u043f\u0435\u0440\u0435\u0434.<\/p>\n
      \u041d\u0435\u043f\u043e\u0431\u0435\u0434\u0438\u043c\u044b\u0439 \u0431\u043e\u0442 \u043d\u0430 \u043c\u0438\u043d\u0438\u043c\u0430\u043a\u0441\u0435<\/h2>\n
      \u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u0431\u043e\u0442 \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u0435\u0442 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e\u0439 \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u0438. X \u0441\u0442\u0430\u0432\u0438\u0442 \u0432 \u0443\u0433\u043e\u043b 0, \u0431\u043e\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0446\u0435\u043d\u0442\u0440, X \u0441\u0442\u0430\u0432\u0438\u0442 \u0432 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u043d\u044b\u0439 \u0443\u0433\u043e\u043b 8. \u041f\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u0443 4 \u0431\u043e\u0442 \u0438\u0434\u0435\u0442 \u0432 \u0443\u0433\u043e\u043b 2 \u0438\u043b\u0438 6 — \u0438\u0433\u0440\u043e\u043a \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0434\u0432\u0435 \u0443\u0433\u0440\u043e\u0437\u044b \u0441\u0440\u0430\u0437\u0443 (\u0432\u0438\u043b\u043a\u0443), \u0437\u0430\u043a\u0440\u044b\u0442\u044c \u043e\u0431\u0435 \u043d\u0435\u043b\u044c\u0437\u044f. \u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u043e\u0442\u0432\u0435\u0442 \u0437\u0434\u0435\u0441\u044c — \u0445\u043e\u0434 \u043d\u0430 \u043a\u0440\u0430\u0439, \u0438 \u0435\u0433\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u043b\u043d\u044b\u0439 \u043f\u0435\u0440\u0435\u0431\u043e\u0440.<\/p>\n
      \u041c\u0438\u043d\u0438\u043c\u0430\u043a\u0441<\/strong> \u043f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0435\u0442 \u0432\u0441\u0435 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0435\u043d\u0438\u044f \u043f\u0430\u0440\u0442\u0438\u0438: \u0431\u043e\u0442 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u0445\u043e\u0434 \u0441 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0446\u0435\u043d\u043a\u043e\u0439, \u0437\u0430 \u0441\u043e\u043f\u0435\u0440\u043d\u0438\u043a\u0430 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0445\u043e\u0434 \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0439. \u041f\u043e\u0431\u0435\u0434\u0430 \u0431\u043e\u0442\u0430 \u043e\u0446\u0435\u043d\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a 10 - depth<\/code>, \u043f\u043e\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043a\u0430\u043a depth - 10<\/code>, \u043d\u0438\u0447\u044c\u044f — 0. \u0413\u043b\u0443\u0431\u0438\u043d\u0430 \u043d\u0443\u0436\u043d\u0430, \u0447\u0442\u043e\u0431\u044b \u0438\u0437 \u0434\u0432\u0443\u0445 \u0432\u044b\u0438\u0433\u0440\u044b\u0448\u0435\u0439 \u0431\u043e\u0442 \u0431\u0440\u0430\u043b \u0431\u043e\u043b\u0435\u0435 \u0431\u044b\u0441\u0442\u0440\u044b\u0439. \u0414\u043b\u044f \u043f\u043e\u043b\u044f 3×3 \u043f\u0435\u0440\u0435\u0431\u043e\u0440 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0434\u043e\u043b\u0438 \u0441\u0435\u043a\u0443\u043d\u0434\u044b.<\/p>\n
      \/\/ \u041d\u0435\u043f\u043e\u0431\u0435\u0434\u0438\u043c\u044b\u0439 \u0431\u043e\u0442: \u043f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0435\u0442 \u0432\u0441\u0435 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0435\u043d\u0438\u044f \u043f\u0430\u0440\u0442\u0438\u0438 (\u043c\u0438\u043d\u0438\u043c\u0430\u043a\u0441)<\/span>\nfunction<\/span> <\/span>bestMove<\/span>(<\/span>board<\/span>, <\/span>bot<\/span>, <\/span>human<\/span>) {<\/span>\n  <\/span>function<\/span> <\/span>score<\/span>(<\/span>b<\/span>, <\/span>turn<\/span>, <\/span>depth<\/span>) {<\/span>\n    <\/span>const<\/span> <\/span>w<\/span> <\/span>=<\/span> <\/span>getWinner<\/span>(<\/span>b<\/span>);<\/span>\n    <\/span>if<\/span> (<\/span>w<\/span>) <\/span>return<\/span> <\/span>w<\/span>.<\/span>player<\/span> <\/span>===<\/span> <\/span>bot<\/span> <\/span>?<\/span> <\/span>10<\/span> <\/span>-<\/span> <\/span>depth<\/span> <\/span>:<\/span> <\/span>depth<\/span> <\/span>-<\/span> <\/span>10<\/span>;<\/span>\n    <\/span>if<\/span> (<\/span>b<\/span>.<\/span>every<\/span>(<\/span>Boolean<\/span>)) <\/span>return<\/span> <\/span>0<\/span>;<\/span>\n    <\/span>let<\/span> <\/span>best<\/span> <\/span>=<\/span> <\/span>turn<\/span> <\/span>===<\/span> <\/span>bot<\/span> <\/span>?<\/span> <\/span>-<\/span>Infinity<\/span> <\/span>:<\/span> <\/span>Infinity<\/span>;<\/span>\n    <\/span>for<\/span> (<\/span>let<\/span> <\/span>i<\/span> <\/span>=<\/span> <\/span>0<\/span>; <\/span>i<\/span> <\/span><<\/span> <\/span>9<\/span>; <\/span>i<\/span>++<\/span>) {<\/span>\n      <\/span>if<\/span> (<\/span>b<\/span>[<\/span>i<\/span>] <\/span>!==<\/span> <\/span>null<\/span>) <\/span>continue<\/span>;<\/span>\n      <\/span>b<\/span>[<\/span>i<\/span>] <\/span>=<\/span> <\/span>turn<\/span>;<\/span>\n      <\/span>const<\/span> <\/span>s<\/span> <\/span>=<\/span> <\/span>score<\/span>(<\/span>b<\/span>, <\/span>turn<\/span> <\/span>===<\/span> <\/span>bot<\/span> <\/span>?<\/span> <\/span>human<\/span> <\/span>:<\/span> <\/span>bot<\/span>, <\/span>depth<\/span> <\/span>+<\/span> <\/span>1<\/span>);<\/span>\n      <\/span>b<\/span>[<\/span>i<\/span>] <\/span>=<\/span> <\/span>null<\/span>;<\/span>\n      <\/span>best<\/span> <\/span>=<\/span> <\/span>turn<\/span> <\/span>===<\/span> <\/span>bot<\/span> <\/span>?<\/span> <\/span>Math<\/span>.<\/span>max<\/span>(<\/span>best<\/span>, <\/span>s<\/span>) <\/span>:<\/span> <\/span>Math<\/span>.<\/span>min<\/span>(<\/span>best<\/span>, <\/span>s<\/span>);<\/span>\n    }<\/span>\n    <\/span>return<\/span> <\/span>best<\/span>;<\/span>\n  }<\/span>\n  <\/span>let<\/span> <\/span>move<\/span> <\/span>=<\/span> <\/span>-<\/span>1<\/span>, <\/span>best<\/span> <\/span>=<\/span> <\/span>-<\/span>Infinity<\/span>;<\/span>\n  <\/span>for<\/span> (<\/span>let<\/span> <\/span>i<\/span> <\/span>=<\/span> <\/span>0<\/span>; <\/span>i<\/span> <\/span><<\/span> <\/span>9<\/span>; <\/span>i<\/span>++<\/span>) {<\/span>\n    <\/span>if<\/span> (<\/span>board<\/span>[<\/span>i<\/span>] <\/span>!==<\/span> <\/span>null<\/span>) <\/span>continue<\/span>;<\/span>\n    <\/span>board<\/span>[<\/span>i<\/span>] <\/span>=<\/span> <\/span>bot<\/span>;<\/span>\n    <\/span>const<\/span> <\/span>s<\/span> <\/span>=<\/span> <\/span>score<\/span>(<\/span>board<\/span>, <\/span>human<\/span>, <\/span>1<\/span>);<\/span>\n    <\/span>board<\/span>[<\/span>i<\/span>] <\/span>=<\/span> <\/span>null<\/span>;<\/span>\n    <\/span>if<\/span> (<\/span>s<\/span> <\/span>><\/span> <\/span>best<\/span>) { <\/span>best<\/span> <\/span>=<\/span> <\/span>s<\/span>; <\/span>move<\/span> <\/span>=<\/span> <\/span>i<\/span>; }<\/span>\n  }<\/span>\n  <\/span>return<\/span> <\/span>move<\/span>;<\/span>\n}<\/span><\/code><\/pre>\n
      \u0412\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432 \u0441\u043a\u0440\u0438\u043f\u0442 \u043f\u043e\u0441\u043b\u0435 botMove<\/code> \u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u0435 \u0432 onCellClick<\/code> \u0432\u044b\u0437\u043e\u0432 botMove(board, 'O', 'X')<\/code> \u043d\u0430 bestMove(board, 'O', 'X')<\/code>. \u042f \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043b \u043f\u0435\u0440\u0435\u0431\u043e\u0440\u043e\u043c \u0432\u0441\u0435\u0445 \u043f\u0430\u0440\u0442\u0438\u0439: \u0447\u0435\u043b\u043e\u0432\u0435\u043a \u0437\u0430 X \u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b \u043a\u0430\u0436\u0434\u044b\u0439 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0439 \u0445\u043e\u0434, \u0431\u043e\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u043b bestMove<\/code>. \u0418\u0442\u043e\u0433 — { X: 0, O: 386, draw: 183 }<\/code>: \u043d\u0438 \u043e\u0434\u043d\u043e\u0439 \u043f\u043e\u0431\u0435\u0434\u044b X. \u041e\u0431\u0440\u0430\u0442\u043d\u0430\u044f \u0441\u0442\u043e\u0440\u043e\u043d\u0430 — \u0438\u0433\u0440\u0430\u0442\u044c \u0441 \u0442\u0430\u043a\u0438\u043c \u0431\u043e\u0442\u043e\u043c \u0441\u043a\u0443\u0447\u043d\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u0443\u0434\u043e\u0431\u043d\u043e \u0434\u0430\u0442\u044c \u0432\u044b\u0431\u043e\u0440 \u0443\u0440\u043e\u0432\u043d\u044f.<\/p>\n
      \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043b\u043e\u0433\u0438\u043a\u0438 \u0432 Node.js<\/h2>\n
      \u041b\u043e\u0433\u0438\u043a\u0443 \u0443\u0434\u043e\u0431\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0431\u0435\u0437 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 check.js<\/code>, \u0441\u043a\u043e\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u0432 \u043d\u0435\u0433\u043e LINES<\/code>, getWinner<\/code>, findLineMove<\/code>, botMove<\/code> \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0438 bestMove<\/code>, \u0437\u0430\u0442\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435:<\/p>\n
      const<\/span> <\/span>_<\/span> <\/span>=<\/span> <\/span>null<\/span>;<\/span>\nconsole<\/span>.<\/span>log<\/span>(<\/span>getWinner<\/span>([<\/span>'X'<\/span>, <\/span>'X'<\/span>, <\/span>'X'<\/span>, <\/span>'O'<\/span>, <\/span>'O'<\/span>, <\/span>_<\/span>, <\/span>_<\/span>, <\/span>_<\/span>, <\/span>_<\/span>]));<\/span>\nconsole<\/span>.<\/span>log<\/span>(<\/span>getWinner<\/span>([<\/span>'X'<\/span>, <\/span>'O'<\/span>, <\/span>'X'<\/span>, <\/span>'X'<\/span>, <\/span>'O'<\/span>, <\/span>'O'<\/span>, <\/span>'O'<\/span>, <\/span>'X'<\/span>, <\/span>'X'<\/span>]));<\/span>\nconsole<\/span>.<\/span>log<\/span>(<\/span>botMove<\/span>([<\/span>'O'<\/span>, <\/span>'O'<\/span>, <\/span>_<\/span>, <\/span>'X'<\/span>, <\/span>'X'<\/span>, <\/span>_<\/span>, <\/span>_<\/span>, <\/span>_<\/span>, <\/span>_<\/span>], <\/span>'O'<\/span>, <\/span>'X'<\/span>)); <\/span>\/\/ \u0432\u044b\u0438\u0433\u0440\u0430\u0442\u044c<\/span>\nconsole<\/span>.<\/span>log<\/span>(<\/span>botMove<\/span>([<\/span>'X'<\/span>, <\/span>'X'<\/span>, <\/span>_<\/span>, <\/span>_<\/span>, <\/span>'O'<\/span>, <\/span>_<\/span>, <\/span>_<\/span>, <\/span>_<\/span>, <\/span>_<\/span>], <\/span>'O'<\/span>, <\/span>'X'<\/span>));   <\/span>\/\/ \u0437\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u0442\u044c<\/span>\n\n\/\/ \u041b\u043e\u0432\u0443\u0448\u043a\u0430 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0431\u043e\u0442\u0430: X \u0432 \u0443\u0433\u043b\u0443, O \u0432 \u0446\u0435\u043d\u0442\u0440\u0435, X \u0432 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u043d\u043e\u043c \u0443\u0433\u043b\u0443<\/span>\nconst<\/span> <\/span>trap<\/span> <\/span>=<\/span> [<\/span>'X'<\/span>, <\/span>_<\/span>, <\/span>_<\/span>, <\/span>_<\/span>, <\/span>'O'<\/span>, <\/span>_<\/span>, <\/span>_<\/span>, <\/span>_<\/span>, <\/span>'X'<\/span>];<\/span>\nconsole<\/span>.<\/span>log<\/span>([<\/span>2<\/span>, <\/span>6<\/span>].<\/span>includes<\/span>(<\/span>botMove<\/span>(<\/span>trap<\/span>, <\/span>'O'<\/span>, <\/span>'X'<\/span>)));  <\/span>\/\/ \u0431\u043e\u0442 \u0432\u0441\u0435\u0433\u0434\u0430 \u0438\u0434\u0435\u0442 \u0432 \u0443\u0433\u043e\u043b<\/span>\nconsole<\/span>.<\/span>log<\/span>(<\/span>bestMove<\/span>(<\/span>trap<\/span>, <\/span>'O'<\/span>, <\/span>'X'<\/span>));                  <\/span>\/\/ \u043c\u0438\u043d\u0438\u043c\u0430\u043a\u0441 \u0438\u0434\u0435\u0442 \u043d\u0430 \u043a\u0440\u0430\u0439<\/span><\/code><\/pre>\n
      \u0417\u0430\u043f\u0443\u0441\u043a node check.js<\/code> (Node.js 24.21):<\/p>\n
      { player: 'X', line: [ 0, 1, 2 ] }\nnull\n2\n2\ntrue\n1\n<\/code><\/pre>\n
      \u041f\u0435\u0440\u0432\u0430\u044f \u0434\u043e\u0441\u043a\u0430 — \u043f\u043e\u0431\u0435\u0434\u0430 X \u043f\u043e \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0441\u0442\u0440\u043e\u043a\u0435, \u0432\u0442\u043e\u0440\u0430\u044f — \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0435 \u043f\u043e\u043b\u0435 \u0431\u0435\u0437 \u0442\u0440\u043e\u0439\u043a\u0438. \u0412 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0441 \u0434\u0432\u0443\u043c\u044f O \u0431\u043e\u0442 \u0437\u0430\u043c\u044b\u043a\u0430\u0435\u0442 \u043b\u0438\u043d\u0438\u044e \u043a\u043b\u0435\u0442\u043a\u043e\u0439 2, \u0432 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0441 \u0434\u0432\u0443\u043c\u044f X — \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442 \u0442\u043e\u0439 \u0436\u0435 \u043a\u043b\u0435\u0442\u043a\u043e\u0439. \u041d\u0430 \u043b\u043e\u0432\u0443\u0448\u043a\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0431\u043e\u0442 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u0443\u0433\u043e\u043b: true<\/code> \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u0440\u0438 \u043b\u044e\u0431\u043e\u043c \u0438\u0441\u0445\u043e\u0434\u0435 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0433\u043e \u0432\u044b\u0431\u043e\u0440\u0430, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0443\u0433\u043b\u044b 2 \u0438 6. \u041c\u0438\u043d\u0438\u043c\u0430\u043a\u0441 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u043a\u0440\u0430\u0439 1.<\/p>\n
      \u0415\u0441\u043b\u0438 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c<\/h2>\n\n\n\n\n\n\n\n\n\n
      \u0421\u0438\u043c\u043f\u0442\u043e\u043c<\/th>\n\u041f\u0440\u0438\u0447\u0438\u043d\u0430<\/th>\n\u0427\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c<\/th>\n<\/tr>\n<\/thead>\n
      \u041f\u043e\u043b\u0435 \u043f\u0443\u0441\u0442\u043e\u0435, \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 Chrome Cannot read properties of null (reading 'querySelector')<\/code> (\u0432 Firefox \u0442\u0435\u043a\u0441\u0442 \u0434\u0440\u0443\u0433\u043e\u0439, \u0441 root is null<\/code>)<\/td>\n\u0421\u043a\u0440\u0438\u043f\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043b\u0441\u044f \u0440\u0430\u043d\u044c\u0448\u0435 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0438\u043b\u0438 id<\/code> \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043d\u0435 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 getElementById<\/code><\/td>\n\u041f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c <script><\/code> \u043f\u043e\u0441\u043b\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u0441\u0432\u0435\u0440\u0438\u0442\u044c id<\/code><\/td>\n<\/tr>\n
      \u041f\u043e\u043b\u0435 \u0432\u0438\u0434\u043d\u043e, \u043d\u043e \u0441\u0442\u0438\u043b\u0438 \u0441\u0430\u0439\u0442\u0430 \u0435\u0433\u043e \u043b\u043e\u043c\u0430\u044e\u0442<\/td>\n\u041f\u0440\u0430\u0432\u0438\u043b\u0430 \u0442\u0435\u043c\u044b \u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0442 \u043d\u0430 button<\/code><\/td>\n\u041f\u043e\u0432\u044b\u0441\u0438\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u044c .ttt .ttt-cell<\/code> \u0438\u043b\u0438 \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0438\u0433\u0440\u0443 \u0447\u0435\u0440\u0435\u0437 iframe<\/code><\/td>\n<\/tr>\n
      \u0418\u0433\u0440\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e, \u043d\u043e \u043f\u0440\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u0432 CMS<\/td>\n\u0420\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u0432\u044b\u0440\u0435\u0437\u0430\u043b <script><\/code><\/td>\n\u0412\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c HTML-\u0431\u043b\u043e\u043a\u043e\u043c \u0441 \u043f\u0440\u0430\u0432\u043e\u043c \u043d\u0430 \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0438\u043b\u0438 \u0447\u0435\u0440\u0435\u0437 iframe<\/code><\/td>\n<\/tr>\n
      \u0411\u043e\u0442 \u0441\u0445\u043e\u0434\u0438\u043b \u0432 \u043d\u043e\u0432\u043e\u0439 \u043f\u0430\u0440\u0442\u0438\u0438 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u0441\u0431\u0440\u043e\u0441\u0430<\/td>\n\u041d\u0435 \u043e\u0442\u043c\u0435\u043d\u0435\u043d \u0442\u0430\u0439\u043c\u0435\u0440<\/td>\n\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0447\u0442\u043e reset<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 clearTimeout(botTimer)<\/code><\/td>\n<\/tr>\n
      \u0411\u043e\u0442 \u0445\u043e\u0434\u0438\u0442 \u0434\u0432\u0430\u0436\u0434\u044b \u0438\u043b\u0438 \u0437\u0430 \u0438\u0433\u0440\u043e\u043a\u0430<\/td>\n\u041d\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 botTimer<\/code> \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0435 \u043a\u043b\u0438\u043a\u0430<\/td>\n\u0418\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043b\u0438\u043a\u0438, \u043f\u043e\u043a\u0430 botTimer !== null<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      \u041a\u043e\u043d\u0441\u043e\u043b\u044c \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u043b\u0430\u0432\u0438\u0448\u0435\u0439 F12 (\u0432\u043a\u043b\u0430\u0434\u043a\u0430 Console) — \u043e\u0448\u0438\u0431\u043a\u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u0430 \u0432\u0438\u0434\u043d\u044b \u0442\u0430\u043c.<\/p>\n
      \u0412\u044b\u0432\u043e\u0434\u044b<\/h2>\n