{"id":295126,"date":"2019-11-25T09:00:21","date_gmt":"2019-11-25T09:00:21","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=295126"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=295126","title":{"rendered":"\u041a\u0430\u043a \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0430\u043f\u0435\u0440\u0430 \u043d\u0430 Phaser \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435 HTML5 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430"},"content":{"rendered":"\n<div class=\"post__text post__text-html js-mediator-article\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/476682\/\">\u0414\u043e\u0431\u0440\u044b\u0439 \u0434\u0435\u043d\u044c, \u0443\u0432\u0430\u0436\u0430\u0435\u043c\u044b\u0435 \u043a\u043e\u043b\u043b\u0435\u0433\u0438!<br \/>  \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0410\u043b\u0435\u043a\u0441\u0430\u043d\u0434\u0440, \u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a HTML5 \u0438\u0433\u0440.<\/p>\n<p>  \u0412 \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0439, \u043a\u0443\u0434\u0430 \u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u043b \u0441\u0432\u043e\u0435 \u0440\u0435\u0437\u044e\u043c\u0435, \u043c\u043d\u0435 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u043b\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435. \u042f \u0441\u043e\u0433\u043b\u0430\u0441\u0438\u043b\u0441\u044f \u0438, \u0441\u043f\u0443\u0441\u0442\u044f 1 \u0434\u0435\u043d\u044c, \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u0443\u044e \u043f\u043e \u0422\u0417 HTML5 \u0438\u0433\u0440\u0443.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/4t\/ng\/dn\/4tngdnvlxq3izqrpk2nykww2dvs.png\"><\/p>\n<p>  \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u044f \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0441\u044c \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0438\u0433\u0440, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0435\u0433\u043e \u043a\u043e\u0434\u0430, \u044f \u0440\u0435\u0448\u0438\u043b, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0431\u0443\u0447\u0430\u044e\u0449\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e \u043f\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u043c\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0443. \u0418 \u0440\u0430\u0437 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0435 \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u043e\u0446\u0435\u043d\u043a\u0443 \u0438 \u043f\u0440\u0438\u0432\u0435\u043b\u043e \u043a \u043f\u0440\u0438\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u044e \u043d\u0430 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e \u043c\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0438\u043c\u0435\u0435\u0442 \u043f\u0440\u0430\u0432\u043e \u043d\u0430 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u0435 \u0438, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043a\u043e\u043c\u0443-\u043b\u0438\u0431\u043e \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c.<\/p>\n<p>  \u0414\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u0434\u0430\u0441\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0431 \u043e\u0431\u044a\u0435\u043c\u0435 \u0440\u0430\u0431\u043e\u0442, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e\u043c \u0434\u043b\u044f \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0441\u0440\u0435\u0434\u043d\u0435\u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u0437\u0430\u0434\u0430\u043d\u0438\u044f \u043d\u0430 \u043f\u043e\u0437\u0438\u0446\u0438\u044e HTML5 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430. \u041c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0435\u043d \u0432\u0441\u0435\u043c, \u043a\u0442\u043e \u0445\u043e\u0447\u0435\u0442 \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c Phaser. \u0410 \u0435\u0441\u043b\u0438 \u0432\u044b \u0443\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u0435 \u0441 Phaser \u0438 \u043f\u0438\u0448\u0435\u0442\u0435 \u043d\u0430 JS \u2014 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435, \u043a\u0430\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0430 TypeScript.<\/p>\n<p>  \u0418\u0442\u0430\u043a, \u043f\u043e\u0434 \u043a\u0430\u0442\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u043d\u0430 TypeScript! <br \/>  <a name=\"habracut\"><\/a><\/p>\n<h2>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<p>  \u041f\u0440\u0438\u0432\u0435\u0434\u0435\u043c \u043a\u0440\u0430\u0442\u043a\u0443\u044e \u043f\u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443 \u0437\u0430\u0434\u0430\u0447\u0438.   <\/p>\n<ol>\n<li>\u041c\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u0443\u044e HTML5 \u0438\u0433\u0440\u0443 \u2014 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0441\u0430\u043f\u0435\u0440\u0430.<\/li>\n<li>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c phaser 3, typescript \u0438 webpack.<\/li>\n<li>\u0418\u0433\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0430 \u0434\u043b\u044f \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430 \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/li>\n<\/ol>\n<p>  \u0423\u043a\u0430\u0436\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442.  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0421\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0434\u0435\u043c\u043a\u0443 \u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438<\/b><\/p>\n<div class=\"spoiler_text\"><a href=\"https:\/\/gamedev.land\/games\/minesweeper\/\">\u0418\u0433\u0440\u0430\u0431\u0435\u043b\u044c\u043d\u0430\u044f \u0434\u0435\u043c\u043e-\u0432\u0435\u0440\u0441\u0438\u044f<\/a><br \/>  <a href=\"https:\/\/github.com\/bolotnikov\/minesweeper\">\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u043d\u0430 GitHub<\/a>  <\/div>\n<\/div>\n<p>  \u0418 \u043d\u0430\u043f\u043e\u043c\u043d\u0438\u043c \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0443 \u0441\u0430\u043f\u0435\u0440\u0430, \u0435\u0441\u043b\u0438 \u0432\u0434\u0440\u0443\u0433 \u043a\u0442\u043e \u0437\u0430\u0431\u044b\u043b \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0438\u0433\u0440\u044b. \u041d\u043e \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u043c\u0430\u043b\u043e\u0432\u0435\u0440\u043e\u044f\u0442\u043d\u044b\u0439 \u043a\u0435\u0439\u0441, \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u044b \u043f\u043e\u0434 \u0441\u043f\u043e\u0439\u043b\u0435\u0440\u043e\u043c \ud83d\ude42<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041f\u0440\u0430\u0432\u0438\u043b\u0430 \u0441\u0430\u043f\u0435\u0440\u0430<\/b><\/p>\n<div class=\"spoiler_text\">\u0418\u0433\u0440\u043e\u0432\u043e\u0435 \u043f\u043e\u043b\u0435 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u044f\u0447\u0435\u0435\u043a, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0432 \u0432\u0438\u0434\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043f\u0440\u0438 \u0441\u0442\u0430\u0440\u0442\u0435 \u0438\u0433\u0440\u044b \u0432\u0441\u0435 \u044f\u0447\u0435\u0439\u043a\u0438 \u0437\u0430\u043a\u0440\u044b\u0442\u044b. \u0412 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438\u0437 \u044f\u0447\u0435\u0435\u043a \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u044b \u0431\u043e\u043c\u0431\u044b. <\/p>\n<p>  \u041f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043b\u0435\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u043c\u044b\u0448\u0438 \u043f\u043e \u0437\u0430\u043a\u0440\u044b\u0442\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0435, \u043e\u043d\u0430 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f. \u0415\u0441\u043b\u0438 \u0432 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u043b\u0430\u0441\u044c \u0431\u043e\u043c\u0431\u0430, \u0442\u043e \u0438\u0433\u0440\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c.<\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0432 \u044f\u0447\u0435\u0439\u043a\u0435 \u043d\u0435 \u0431\u044b\u043b\u043e \u0431\u043e\u043c\u0431\u044b, \u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0447\u0438\u0441\u043b\u043e, \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0449\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0431\u043e\u043c\u0431, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0445 \u044f\u0447\u0435\u0439\u043a\u0430\u0445 \u043f\u043e \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044e \u043a \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0439. \u0415\u0441\u043b\u0438 \u0440\u044f\u0434\u043e\u043c \u043d\u0435\u0442 \u043d\u0438 \u043e\u0434\u043d\u043e\u0439 \u0431\u043e\u043c\u0431\u044b, \u0442\u043e \u044f\u0447\u0435\u0439\u043a\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0443\u0441\u0442\u043e\u0439.<\/p>\n<p>  \u041a\u043b\u0438\u043a \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u043c\u044b\u0448\u0438 \u043f\u043e \u0437\u0430\u043a\u0440\u044b\u0442\u043e\u0439 \u043a\u043b\u0435\u0442\u043a\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043d\u0430 \u043d\u0435\u0439 \u0444\u043b\u0430\u0433. \u0417\u0430\u0434\u0430\u0447\u0430 \u0438\u0433\u0440\u043e\u043a\u0430 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0441\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432\u0441\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u0435\u043c\u0443 \u0444\u043b\u0430\u0433\u0438 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u043e\u0442\u043c\u0435\u0447\u0430\u043b\u0438 \u0432\u0441\u0435 \u0437\u0430\u043c\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u044f\u0447\u0435\u0439\u043a\u0438. \u041f\u043e\u0441\u043b\u0435 \u0440\u0430\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0432\u0441\u0435\u0445 \u0444\u043b\u0430\u0433\u043e\u0432 \u0438\u0433\u0440\u043e\u043a \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u0442 \u043b\u0435\u0432\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443 \u043c\u044b\u0448\u0438 \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0445 \u044f\u0447\u0435\u0435\u043a, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0432\u044b\u0438\u0433\u0440\u0430\u043b \u043b\u0438 \u043e\u043d.  <\/div>\n<\/div>\n<p>  \u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a \u0441\u0430\u043c\u043e\u043c\u0443 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0443. \u0412\u0435\u0441\u044c \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0440\u0430\u0437\u0431\u0438\u0442 \u043d\u0430 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0448\u0430\u0433\u0438, \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u0437\u0430 \u043a\u043e\u0440\u043e\u0442\u043a\u043e\u0435 \u0432\u0440\u0435\u043c\u044f. \u0422\u0430\u043a, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044f \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u0446\u0435\u043b\u0438 \u0448\u0430\u0433 \u0437\u0430 \u0448\u0430\u0433\u043e\u043c, \u0432 \u0438\u0442\u043e\u0433\u0435 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u0443\u044e \u0438\u0433\u0440\u0443. \u0412\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435\u0441\u044c \u043e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c, \u0435\u0441\u043b\u0438 \u0440\u0435\u0448\u0438\u0442\u0435 \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u043c\u0443 \u0448\u0430\u0433\u0443.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><a href=\"#section-1\">1. \u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a<\/a><br \/>  <a href=\"#section-1-1\">1.1 \u0428\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/a><br \/>  <a href=\"#section-1-2\">1.2 \u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u0441\u0431\u043e\u0440\u043a\u0438<\/a><br \/>  <a href=\"#section-1-3\">1.3 \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043c\u043e\u0434\u0443\u043b\u0435\u0439<\/a><br \/>  <a href=\"#section-1-4\">1.4 \u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u0430\u0441\u0441\u0435\u0442\u043e\u0432<\/a><br \/>  <a href=\"#section-2\">2. \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0446\u0435\u043d<\/a><br \/>  <a href=\"#section-2-1\">2.1 \u0422\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430<\/a><br \/>  <a href=\"#section-2-2\">2.2 \u0421\u0442\u0430\u0440\u0442\u043e\u0432\u0430\u044f \u0441\u0446\u0435\u043d\u0430<\/a><br \/>  <a href=\"#section-2-3\">2.3 \u0422\u0435\u043a\u0441\u0442\u044b \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u043e\u0439 \u0441\u0446\u0435\u043d\u044b<\/a><br \/>  <a href=\"#section-2-4\">2.4 \u041f\u0435\u0440\u0435\u0445\u043e\u0434 \u043d\u0430 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c<\/a><br \/>  <a href=\"#section-2-5\">2.5 \u0421\u0446\u0435\u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u044f<\/a><br \/>  <a href=\"#section-2-6\">2.6 \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0441\u0446\u0435\u043d \u0432 \u0442\u043e\u0447\u043a\u0435 \u0432\u0445\u043e\u0434\u0430<\/a><br \/>  <a href=\"#section-3\">3. \u0418\u0433\u0440\u043e\u0432\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b<\/a><br \/>  <a href=\"#section-3-1\">3.1 \u0418\u0433\u0440\u043e\u0432\u0430\u044f \u0434\u043e\u0441\u043a\u0430<\/a><br \/>  <a href=\"#section-3-2\">3.2 \u041c\u043e\u0434\u0435\u043b\u044c \u044f\u0447\u0435\u0439\u043a\u0438<\/a><br \/>  <a href=\"#section-3-3\">3.3 \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u044f\u0447\u0435\u0439\u043a\u0438<\/a><br \/>  <a href=\"#section-3-4\">3.4 \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u043f\u0440\u0430\u0439\u0442\u0430 \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f<\/a><br \/>  <a href=\"#section-3-5\">3.5 \u041f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043f\u0440\u0430\u0439\u0442\u0430<\/a><br \/>  <a href=\"#section-3-6\">3.6 \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 FieldView<\/a><br \/>  <a href=\"#section-3-7\">3.7 \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u0435\u0439 \u0434\u043e\u0441\u043a\u0438.<\/a><br \/>  <a href=\"#section-3-8\">3.8 \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0431\u043e\u043c\u0431<\/a><br \/>  <a href=\"#section-3-9\">3.9 \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439<\/a><br \/>  <a href=\"#section-4\">4. \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0432\u0432\u043e\u0434\u0430<\/a><br \/>  <a href=\"#section-4-1\">4.1 \u041e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u043c\u044b\u0448\u0438<\/a><br \/>  <a href=\"#section-4-2\">4.2. \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043a\u043b\u0438\u043a\u0430 \u043b\u0435\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438 \u043c\u044b\u0448\u0438<\/a><br \/>  <a href=\"#section-4-4\">4.4 \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043f\u0440\u0430\u0432\u043e\u0433\u043e \u043a\u043b\u0438\u043a\u0430<\/a><br \/>  <a href=\"#section-4-5\">4.5 \u041e\u0431\u044a\u0435\u043a\u0442 GameSceneView<\/a><br \/>  <a href=\"#section-5\">5. \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/a><br \/>  <a href=\"#section-5-1\">5.1 \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u043a\u0438<\/a><br \/>  <a href=\"#section-5-2\">5.2 \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u0432\u043e\u0440\u043e\u0442\u0430 \u043a\u043b\u0435\u0442\u043a\u0438<\/a>  <\/div>\n<\/div>\n<p>  <a name=\"section-1\"><\/a><\/p>\n<h2><font color=\"#008080\">1. \u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430<\/font><\/h2>\n<p>  <a name=\"section-1-1\"><\/a><\/p>\n<h3><font color=\"#008080\">1.1 \u0428\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/font><\/h3>\n<p>  \u0421\u043a\u0430\u0447\u0430\u0435\u043c <a href=\"https:\/\/github.com\/photonstorm\/phaser3-project-template\">\u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u043e\u0435\u043a\u0442\u0430 phaser<\/a>. \u042d\u0442\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u043e\u0442 \u0430\u0432\u0442\u043e\u0440\u0430 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0438 \u043e\u043d \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u043d\u0430\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0439:   <\/p>\n<div class=\"scrollable-table\">\n<table>\n<tr>\n<td>index.html <\/td>\n<td colspan=\"2\">HTML \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0449\u0430\u044f \u0438\u0433\u0440\u0443<\/td>\n<\/tr>\n<tr>\n<td rowspan=\"2\">webpack\/<\/td>\n<td>base.js<\/td>\n<td>\u043a\u043e\u043d\u0444\u0438\u0433 \u0441\u0431\u043e\u0440\u043a\u0438 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f<\/td>\n<\/tr>\n<tr>\n<td>prod.js<\/td>\n<td>\u043a\u043e\u043d\u0444\u0438\u0433 \u0441\u0431\u043e\u0440\u043a\u0438 \u0434\u043b\u044f \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0430<\/td>\n<\/tr>\n<tr>\n<td rowspan=\"2\">src\/<\/td>\n<td>assets\/<\/td>\n<td>\u0438\u0433\u0440\u043e\u0432\u044b\u0435 \u0430\u0441\u0441\u0435\u0442\u044b (\u0441\u043f\u0440\u0430\u0439\u0442\u044b, \u0437\u0432\u0443\u043a\u0438, \u0448\u0440\u0438\u0444\u0442\u044b)<\/td>\n<\/tr>\n<tr>\n<td>index.js<\/td>\n<td>\u0442\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430<\/td>\n<\/tr>\n<\/table>\n<\/div>\n<p>\u0414\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 <code>index.js<\/code> \u0444\u0430\u0439\u043b \u043d\u0430\u043c \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0443\u0434\u0430\u043b\u0438\u043c \u0435\u0433\u043e. \u0417\u0430\u0442\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e <code>\/src\/scripts\/<\/code> \u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u0432 \u043d\u0435\u0435 \u043f\u0443\u0441\u0442\u043e\u0439 \u0444\u0430\u0439\u043b <code>index.ts<\/code>. \u0412 \u044d\u0442\u0443 \u043f\u0430\u043f\u043a\u0443 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043d\u0430\u0448\u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u044b.<br \/>  \u0422\u0430\u043a\u0436\u0435 \u0441\u0442\u043e\u0438\u0442 \u0438\u043c\u0435\u0442\u044c \u0432\u0432\u0438\u0434\u0443, \u0447\u0442\u043e \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0434\u043b\u044f \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0430, \u0432 \u043a\u043e\u0440\u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0430 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f <code>dist<\/code>, \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043c\u0435\u0449\u0435\u043d \u0440\u0435\u043b\u0438\u0437\u043d\u044b\u0439 \u0431\u0438\u043b\u0434.<\/p>\n<p>  <a name=\"section-1-2\"><\/a><\/p>\n<h3><font color=\"#008080\">1.2 \u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u0441\u0431\u043e\u0440\u043a\u0438<\/font><\/h3>\n<p>  \u0414\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c webpack. \u0422\u0430\u043a \u043a\u0430\u043a \u043d\u0430\u0448 \u0448\u0430\u0431\u043b\u043e\u043d \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 JavaScript, \u0430 \u043c\u044b \u043f\u0438\u0448\u0435\u043c \u043d\u0430 TypeScript, \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0432\u043d\u0435\u0441\u0442\u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u043d\u0444\u0438\u0433 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430.<\/p>\n<p>  \u0412 \u0444\u0430\u0439\u043b <code>webpack\/base.js<\/code> \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043b\u044e\u0447 <code>entry<\/code>, \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0449\u0438\u0439 \u0442\u043e\u0447\u043a\u0443 \u0432\u0445\u043e\u0434\u0430 \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e <code>ts-loader<\/code>, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0443\u044e \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0441\u0431\u043e\u0440\u043a\u0438 TS \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432:  <\/p>\n<pre><code class=\"javascript\">\/\/ webpack\/base.js \/\/... module.exports = {   entry: '.\/src\/scripts\/index.ts',   \/\/ ...   resolve: {     extensions: [ '.ts', '.tsx', '.js' ]   },   module: {     rules: [{             test: \/\\.tsx?$\/,             use: 'ts-loader',             exclude: \/node_modules\/       }, \/\/... <\/code><\/pre>\n<p>  \u041d\u0430\u043c \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0444\u0430\u0439\u043b tsconfig.json. \u0423 \u043c\u0435\u043d\u044f \u043e\u043d \u0438\u043c\u0435\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435:  <\/p>\n<pre><code class=\"javascript\">{     \"compilerOptions\": {       \"module\": \"commonjs\",       \"lib\": [ \"dom\", \"es5\", \"es6\", \"es2015\", \"es2017\", \"es2015.promise\" ],       \"target\": \"es5\",       \"skipLibCheck\": true     },     \"exclude\": [\"node_modules\", \"dist\"] }<\/code><\/pre>\n<p>  <a name=\"section-1-3\"><\/a><\/p>\n<h3><font color=\"#008080\">1.3 \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043c\u043e\u0434\u0443\u043b\u0435\u0439<\/font><\/h3>\n<p>  \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0438\u0437 package.json \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a \u043d\u0438\u043c \u043c\u043e\u0434\u0443\u043b\u0438 typescript \u0438 ts-loader:  <\/p>\n<pre><code class=\"plaintext\">npm i npm i typescript --save-dev npm i ts-loader --save-dev <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0433\u043e\u0442\u043e\u0432 \u043a \u043d\u0430\u0447\u0430\u043b\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0412 \u043d\u0430\u0448\u0435\u043c \u0440\u0430\u0441\u043f\u043e\u0440\u044f\u0436\u0435\u043d\u0438\u0438 \u0435\u0441\u0442\u044c 2 \u043a\u043e\u043c\u0430\u043d\u0434\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0436\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u044b \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 <code>scripts<\/code> \u0432 \u0444\u0430\u0439\u043b\u0435 <code>package.json<\/code>.<\/p>\n<ol>\n<li>\u0421\u043e\u0431\u0440\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0434\u043b\u044f \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0447\u0435\u0440\u0435\u0437 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440<br \/> \n<pre><code class=\"plaintext\">npm start<\/code><\/pre>\n<\/li>\n<li>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0443 \u0434\u043b\u044f \u043f\u0440\u043e\u0434\u0430 \u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0440\u0435\u043b\u0438\u0437\u043d\u044b\u0439 \u0431\u0438\u043b\u0434 \u0432 \u043f\u0430\u043f\u043a\u0443 dist\/<br \/> \n<pre><code class=\"plaintext\">npm run build<\/code><\/pre>\n<\/li>\n<\/ol>\n<p>  <a name=\"section-1-4\"><\/a><\/p>\n<h3><font color=\"#008080\">1.4 \u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u0430\u0441\u0441\u0435\u0442\u043e\u0432<\/font><\/h3>\n<p>  \u0412\u0441\u0435 \u0430\u0441\u0441\u0435\u0442\u044b \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0439 \u0438\u0433\u0440\u044b \u0447\u0435\u0441\u0442\u043d\u043e \u0441\u043a\u0430\u0447\u0430\u043d\u044b \u0441 <a href=\"https:\/\/opengameart.org\/content\/minesweeper-tile-set-lazarus\">OpenGameArt<\/a> (\u0432\u0435\u0440\u0441\u0438\u044f 61&#215;61) \u0438 \u0438\u043c\u0435\u044e\u0442 \u0441\u0430\u043c\u0443\u044e \u0434\u0440\u0443\u0436\u0435\u043b\u044e\u0431\u043d\u0443\u044e \u0438\u0437 \u043b\u0438\u0446\u0435\u043d\u0437\u0438\u0439 \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c <i>Feel free to use<\/i>, \u043e \u0447\u0435\u043c \u0437\u0430\u0431\u043e\u0442\u043b\u0438\u0432\u043e \u043d\u0430\u043c \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441 \u043f\u0430\u043a\u043e\u043c). \u041a\u0441\u0442\u0430\u0442\u0438, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u043a\u043e\u0434 \u0438\u043c\u0435\u0435\u0442 \u0442\u0430\u043a\u0443\u044e-\u0436\u0435 \u043b\u0438\u0446\u0435\u043d\u0437\u0438\u044e!;)<\/p>\n<p>  \u0418\u0437 \u0441\u043a\u0430\u0447\u0430\u043d\u043d\u043e\u0433\u043e \u043d\u0430\u0431\u043e\u0440\u0430 \u044f \u0443\u0434\u0430\u043b\u0438\u043b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0447\u0430\u0441\u043e\u0432, \u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043b \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0443\u0434\u043e\u0431\u043d\u044b\u0435 \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u043c\u0435\u043d\u0430 \u0444\u0440\u0435\u0439\u043c\u043e\u0432. \u0421\u043f\u0438\u0441\u043e\u043a \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0439 \u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0444\u0430\u0439\u043b\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u044b \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0435 \u043d\u0438\u0436\u0435.<br \/>  \u0418\u0437 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0445 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0430\u0442\u043b\u0430\u0441 \u0444\u043e\u0440\u043c\u0430\u0442\u0430 <code>Phaser JSONArray<\/code> \u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0435 <a href=\"https:\/\/www.codeandweb.com\/texturepacker\">TexturePacker<\/a> (\u0444\u0440\u0438\u0448\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0431\u043e\u043b\u0435\u0435 \u0447\u0435\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e, \u0440\u0430\u0431\u043e\u0442\u0443 \u0432\u0435\u0434\u044c \u044f \u0435\u0449\u0435 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b) \u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 <code>spritesheet.png<\/code> \u0438 <code>spritesheet.json<\/code> \u0444\u0430\u0439\u043b\u044b \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 <code>src\/assets\/<\/code><\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ms\/ki\/z9\/mskiz9zmuidbxk8hhcbksfmny4k.png\"><\/p>\n<p>  <a name=\"section-2\"><\/a><\/p>\n<h2><font color=\"#008080\">2. \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0446\u0435\u043d<\/font><\/h2>\n<p>  <a name=\"section-2-1\"><\/a><\/p>\n<h3><font color=\"#008080\">2.1 \u0422\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430<\/font><\/h3>\n<p>  \u041d\u0430\u0447\u043d\u0435\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u043e\u0447\u043a\u0438 \u0432\u0445\u043e\u0434\u0430, \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0439 \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0435 webpack.<\/p>\n<pre><code class=\"javascript\">\/\/ src\/scripts\/index.ts import * as Phaser from \"phaser\";  new Phaser.Game({     type: Phaser.AUTO,     parent: \"minesweeper\",     width: window.innerWidth,     height: window.innerHeight,     backgroundColor: \"#F0FFFF\",     scene: [] }); <\/code><\/pre>\n<p>  \u0422\u0430\u043a \u043a\u0430\u043a \u0438\u0433\u0440\u0430 \u0443 \u043d\u0430\u0441 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0430 \u0434\u043b\u044f \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430 \u0438 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0432\u0435\u0441\u044c \u044d\u043a\u0440\u0430\u043d, \u0441\u043c\u0435\u043b\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432\u0441\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0434\u043b\u044f \u043f\u043e\u043b\u0435\u0439 <code>width<\/code> \u0438 <code>height<\/code>.<br \/>  \u041f\u043e\u043b\u0435 <code>scene<\/code> \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0443\u0441\u0442\u044b\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u043c \u0438 \u043c\u044b \u044d\u0442\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u043c!<\/p>\n<p>  <a name=\"section-2-2\"><\/a><\/p>\n<h3><font color=\"#008080\">2.2 \u0421\u0442\u0430\u0440\u0442\u043e\u0432\u0430\u044f \u0441\u0446\u0435\u043d\u0430<\/font><\/h3>\n<p>  \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043b\u0430\u0441\u0441 \u043f\u0435\u0440\u0432\u043e\u0439 \u0441\u0446\u0435\u043d\u044b \u0432 \u0444\u0430\u0439\u043b\u0435 <code>src\/scripts\/scenes\/StartScene.ts<\/code>:  <\/p>\n<pre><code class=\"javascript\">export class StartScene extends Phaser.Scene {    constructor() {        super('Start');    }      public preload(): void {    }      public create(): void {    } } <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u0432\u0430\u043b\u0438\u0434\u043d\u043e\u0433\u043e \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f <code>Phaser.Scene<\/code> \u043f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0441\u0446\u0435\u043d\u044b \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430.<\/p>\n<p>  \u042d\u0442\u0430 \u0441\u0446\u0435\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0432\u043c\u0435\u0449\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043f\u0440\u0435\u0434\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0438 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430, \u043f\u0440\u0438\u0433\u043b\u0430\u0448\u0430\u044e\u0449\u0435\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0432 \u0438\u0433\u0440\u0443. <br \/>  \u041e\u0431\u044b\u0447\u043d\u043e \u0432 \u043c\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0438\u0433\u0440\u043e\u043a \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u0434\u0432\u0435 \u0441\u0446\u0435\u043d\u044b \u0434\u043e \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u043d\u0430 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u0443\u044e, \u0432 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435:  <\/p>\n<pre><code class=\"plaintext\">Boot =&gt; Preload =&gt; Start <\/code><\/pre>\n<p>\u041d\u043e \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u0433\u0440\u0430 \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0441\u0442\u0430\u044f, \u0430 \u0430\u0441\u0441\u0435\u0442\u043e\u0432 \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043c\u0430\u043b\u043e, \u0447\u0442\u043e \u043d\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0440\u0435\u0437\u043e\u043d\u0430 \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u044c \u043f\u0440\u0435\u0434\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0441\u0446\u0435\u043d\u0443 \u0438 \u0443\u0436 \u0442\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a <code>Boot<\/code>.<\/p>\n<p>  \u0412\u0441\u0435 \u0430\u0441\u0441\u0435\u0442\u044b \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 <code>preload<\/code>. \u0427\u0442\u043e\u0431\u044b \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u043c \u0430\u0442\u043b\u0430\u0441\u043e\u043c \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c 2 \u0448\u0430\u0433\u0430:<\/p>\n<ol>\n<li>\u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0438 <code>png<\/code> \u0438 <code>json<\/code> \u0444\u0430\u0439\u043b\u044b \u0430\u0442\u043b\u0430\u0441\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f <code>require<\/code>:<br \/> \n<pre><code class=\"javascript\">\/\/ StartScene.ts const spritesheetPng = require(\".\/..\/..\/assets\/spritesheet.png\"); const spritesheetJson = require(\".\/..\/..\/assets\/spritesheet.json\"); \/\/ ... <\/code><\/pre>\n<p>  <\/li>\n<li>\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0438\u0445 \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 <code>preload<\/code> \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u043e\u0439 \u0441\u0446\u0435\u043d\u044b:<br \/> \n<pre><code class=\"javascript\">\/\/ StartScene.ts \/\/ ... public preload(): void {     this.load.atlas(\"spritesheet\", spritesheetPng, spritesheetJson); } \/\/ ... <\/code><\/pre>\n<p>  <\/li>\n<\/ol>\n<p>  <a name=\"section-2-3\"><\/a><\/p>\n<h3><font color=\"#008080\">2.3 \u0422\u0435\u043a\u0441\u0442\u044b \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u043e\u0439 \u0441\u0446\u0435\u043d\u044b<\/font><\/h3>\n<p>  \u0412 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u043e\u0439 \u0441\u0446\u0435\u043d\u0435 \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c 2 \u0432\u0435\u0449\u0438:  <\/p>\n<ol>\n<li>\u0441\u043e\u043e\u0431\u0449\u0438\u0442\u044c \u0438\u0433\u0440\u043e\u043a\u0443, \u043a\u0430\u043a \u043d\u0430\u0447\u0430\u0442\u044c \u0438\u0433\u0440\u0443<\/li>\n<li>\u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0438\u0433\u0440\u0443 \u043f\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u0442\u0438\u0432\u0435 \u0438\u0433\u0440\u043e\u043a\u0430<\/li>\n<\/ol>\n<p>  \u0427\u0442\u043e\u0431\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043f\u0435\u0440\u0432\u044b\u0439 \u043f\u0443\u043d\u043a\u0442 \u0441\u043f\u0435\u0440\u0432\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0434\u0432\u0430 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0444\u0430\u0439\u043b\u0430 \u0441\u0446\u0435\u043d\u044b \u0434\u043b\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u043e\u0432 \u0438 \u0438\u0445 \u0441\u0442\u0438\u043b\u0435\u0439:  <\/p>\n<pre><code class=\"javascript\">\/\/ StartScene.js enum Texts {     Title = 'Minesweeper HTML5',     Message = 'Click anywhere to start' }  enum Styles {     Color = '#008080',     Font = 'Arial' } \/\/... <\/code><\/pre>\n<p>  \u0410 \u0437\u0430\u0442\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043e\u0431\u0430 \u0442\u0435\u043a\u0441\u0442\u0430 \u0432 \u0432\u0438\u0434\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0432 \u043c\u0435\u0442\u043e\u0434 <code>create<\/code>. \u041d\u0430\u043f\u043e\u043c\u043d\u044e, \u0447\u0442\u043e \u043c\u0435\u0442\u043e\u0434 <code>create<\/code> \u0441\u0446\u0435\u043d \u0432 <code>Phaser<\/code> \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0432\u0441\u0435\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 <code>preload<\/code> \u0438 \u043d\u0430\u0441 \u044d\u0442\u043e \u0432\u043f\u043e\u043b\u043d\u0435 \u0443\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442.  <\/p>\n<pre><code class=\"javascript\">\/\/ StartScene.js \/\/... public create(): void {     this.add.text(         this.cameras.main.centerX,         this.cameras.main.centerY - 100,         Texts.Title,         {font: `52px ${Styles.Font}`, fill: Styles.Color})     .setOrigin(0.5);      this.add.text(         this.cameras.main.centerX,         this.cameras.main.centerY + 100,         Texts.Message,         {font: `28px ${Styles.Font}`, fill: Styles.Color})     .setOrigin(0.5); } \/\/... <\/code><\/pre>\n<p>  \u0412 \u0434\u0440\u0443\u0433\u043e\u043c \u0431\u043e\u043b\u0435\u0435 \u043a\u0440\u0443\u043f\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0442\u0435\u043a\u0441\u0442\u044b \u0438 \u0441\u0442\u0438\u043b\u0438 \u043b\u0438\u0431\u043e \u0432 json \u0444\u0430\u0439\u043b\u044b \u043b\u043e\u043a\u0430\u043b\u0435\u0439, \u043b\u0438\u0431\u043e \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0438, \u043d\u043e \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f \u0442\u043e, \u0447\u0442\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u0443 \u043d\u0430\u0441 \u0432\u0441\u0435\u0433\u043e 2 \u0441\u0442\u0440\u043e\u043a\u0438, \u044f \u0441\u0447\u0438\u0442\u0430\u044e \u0442\u0430\u043a\u043e\u0439 \u0448\u0430\u0433 \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u044b\u043c \u0438 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u043d\u0435 \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0442\u044c \u0441\u0435\u0431\u0435 \u0436\u0438\u0437\u043d\u044c, \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0448\u0438\u0441\u044c \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f\u043c\u0438 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0444\u0430\u0439\u043b\u0430 \u0441\u0446\u0435\u043d\u044b.<\/p>\n<p>  <a name=\"section-2-4\"><\/a><\/p>\n<h3><font color=\"#008080\">2.4 \u041f\u0435\u0440\u0435\u0445\u043e\u0434 \u043d\u0430 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c<\/font><\/h3>\n<p>  \u0424\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0435, \u0447\u0442\u043e \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0432 \u044d\u0442\u043e\u0439 \u0441\u0446\u0435\u043d\u0435, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0434\u0432\u0438\u043d\u0435\u043c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435 \u2014 \u044d\u0442\u043e \u043e\u0442\u0441\u043b\u0435\u0434\u0438\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u043c\u044b\u0448\u0438 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0438\u0433\u0440\u043e\u043a\u0430 \u0432 \u0438\u0433\u0440\u0443:  <\/p>\n<pre><code class=\"javascript\">\/\/ StartScene.js \/\/... public create(): void {     \/\/...     this.input.once('pointerdown', () =&gt; {         this.scene.start('Game');     }); } \/\/...<\/code><\/pre>\n<p>  <a name=\"section-2-5\"><\/a><\/p>\n<h3><font color=\"#008080\">2.5 \u0421\u0446\u0435\u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u044f<\/font><\/h3>\n<p>  \u0421\u0443\u0434\u044f \u043f\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0443 <code>\"Game\"<\/code>, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u043e\u043c\u0443 \u0432 \u043c\u0435\u0442\u043e\u0434 <code>this.scene.start<\/code> \u0432\u044b \u0443\u0436\u0435 \u0434\u043e\u0433\u0430\u0434\u0430\u043b\u0438\u0441\u044c, \u0447\u0442\u043e \u043f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0432\u0442\u043e\u0440\u0443\u044e \u0441\u0446\u0435\u043d\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0438\u0433\u0440\u043e\u0432\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b <code>src\/scripts\/scenes\/GameScene.ts<\/code>:<\/p>\n<pre><code class=\"javascript\">export class GameScene extends Phaser.Scene {     constructor() {         super('Game');     }      public create(): void {     } } <\/code><\/pre>\n<p>  \u0412 \u044d\u0442\u043e\u0439 \u0441\u0446\u0435\u043d\u0435 \u043c\u0435\u0442\u043e\u0434 <code>preload<\/code> \u043d\u0430\u043c \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f, \u0442.\u043a. \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043c\u044b \u0443\u0436\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0438 \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0446\u0435\u043d\u0435.<\/p>\n<p>  <a name=\"section-2-6\"><\/a><\/p>\n<h3><font color=\"#008080\">2.6 \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0441\u0446\u0435\u043d \u0432 \u0442\u043e\u0447\u043a\u0435 \u0432\u0445\u043e\u0434\u0430<\/font><\/h3>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u044b \u043e\u0431\u0435 \u0441\u0446\u0435\u043d\u044b, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0438\u0445 \u0432 \u043d\u0430\u0448\u0443 \u0442\u043e\u0447\u043a\u0443 \u0432\u0445\u043e\u0434\u0430 <code>src\/scripts\/index.ts<\/code>:  <\/p>\n<pre><code class=\"javascript\">\/\/... import { StartScene } from \".\/scenes\/StartScene\"; import { GameScene } from \".\/scenes\/GameScene\"; \/\/... new Phaser.Game({     \/\/ ...     scene: [StartScene, GameScene] }); <\/code><\/pre>\n<p>  <a name=\"section-3\"><\/a><\/p>\n<h2><font color=\"#008080\">3. \u0418\u0433\u0440\u043e\u0432\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b<\/font><\/h2>\n<p>  \u0418\u0442\u0430\u043a, \u043a\u043b\u0430\u0441\u0441 <code>GameScene<\/code> \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f. \u0410 \u0447\u0442\u043e \u043c\u044b \u043e\u0436\u0438\u0434\u0430\u0435\u043c \u043e\u0442 \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u0441\u0430\u043f\u0435\u0440\u0430? \u0412\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u043c\u044b \u043e\u0436\u0438\u0434\u0430\u0435\u043c \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0438\u0433\u0440\u043e\u0432\u043e\u0435 \u043f\u043e\u043b\u0435 \u0441 \u0437\u0430\u043a\u0440\u044b\u0442\u044b\u043c\u0438 \u043a\u043b\u0435\u0442\u043a\u0430\u043c\u0438. \u041c\u044b \u0437\u043d\u0430\u0435\u043c, \u0447\u0442\u043e \u043f\u043e\u043b\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u0443, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u0438\u043c\u0435\u0435\u0442 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u0441\u0442\u0440\u043e\u043a \u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432, \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0443\u044e\u0442\u043d\u043e \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u0431\u043e\u043c\u0431\u044b. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0435\u0439 \u0438\u0433\u0440\u043e\u0432\u043e\u0435 \u043f\u043e\u043b\u0435.<\/p>\n<p>  <a name=\"section-3-1\"><\/a><\/p>\n<h3><font color=\"#008080\">3.1 \u0418\u0433\u0440\u043e\u0432\u0430\u044f \u0434\u043e\u0441\u043a\u0430<\/font><\/h3>\n<p>  \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b <code>src\/scripts\/models\/Board.ts<\/code>, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u043a\u043b\u0430\u0441\u0441 <code>Board<\/code>:  <\/p>\n<pre><code class=\"javascript\">import { Field } from \".\/Field\";  export class Board extends Phaser.Events.EventEmitter {     private _scene: Phaser.Scene = null;     private _rows: number = 0;     private _cols: number = 0;     private _bombs: number = 0;     private _fields: Field[] = [];      constructor(scene: Phaser.Scene, rows: number, cols: number, bombs: number) {         super();         this._scene = scene;         this._rows = rows;         this._cols = cols;         this._bombs = bombs;         this._fields = [];     }      public get cols(): number {         return this._cols;     }          public get rows(): number {         return this._rows;     } }<\/code><\/pre>\n<p>  \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u043a\u043b\u0430\u0441\u0441 \u043d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a\u043e\u043c Phaser.Events.EventEmitter \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0443 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0438 \u0432\u044b\u0437\u043e\u0432\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c.<\/p>\n<p>  \u0412 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 <code>_fields<\/code> \u0431\u0443\u0434\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u043c\u0430\u0441\u0441\u0438\u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043a\u043b\u0430\u0441\u0441\u0430 <code>Field<\/code>. \u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u044d\u0442\u0443 \u043c\u043e\u0434\u0435\u043b\u044c \u043f\u043e\u0437\u0436\u0435.<\/p>\n<p>  \u0417\u0430\u0432\u043e\u0434\u0438\u043c \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0435 \u0447\u0438\u0441\u043b\u043e\u0432\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>_rows<\/code> \u0438 <code>_cols<\/code> \u0434\u043b\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0441\u0442\u0440\u043e\u043a \u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044f. \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0435 \u0433\u0435\u0442\u0442\u0435\u0440\u044b \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f <code>_rows<\/code> \u0438 <code>_cols<\/code>.<\/p>\n<p>  \u041f\u043e\u043b\u0435 <code>_bombs<\/code> \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u043d\u0430\u043c \u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0435 \u0431\u043e\u043c\u0431, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0443\u0440\u043e\u0432\u043d\u044f. \u0410 \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <code>_scene<\/code> \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0441\u0446\u0435\u043d\u044b <code>GameScene<\/code>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043a\u043b\u0430\u0441\u0441 <code>Board<\/code>.<\/p>\n<p>  \u0421\u0442\u043e\u0438\u0442\u044c \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u0446\u0435\u043d\u044b \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0432 \u043c\u043e\u0434\u0435\u043b\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043b\u0438\u0448\u044c \u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0432\u043e \u0432\u044c\u044e\u0448\u043a\u0438, \u0433\u0434\u0435 \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430\u043c\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e phaser \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u0446\u0435\u043d\u044b \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432 \u0438 \u043f\u043e\u0442\u043e\u043c\u0443 \u043e\u0431\u044f\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430\u0441 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u0441\u0446\u0435\u043d\u0443 \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043f\u0440\u0435\u0444\u0430\u0431\u043e\u0432 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c. \u0410 \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u043c\u044b \u043f\u0440\u0438\u043c\u0435\u043c \u0441\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u0435, \u0447\u0442\u043e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0441\u0446\u0435\u043d\u0443 \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0435\u0435 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0434\u0432\u0438\u0436\u043a\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u0434\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c\u0441\u044f, \u0447\u0442\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0441\u0446\u0435\u043d\u044b \u0432 \u043c\u043e\u0434\u0435\u043b\u044f\u0445 \u0438 \u0432\u044c\u044e\u0448\u043a\u0430\u0445.<\/p>\n<p>  \u0420\u0430\u0437 \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438\u0441\u044c \u0441 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0434\u043e\u0441\u043a\u0438, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0435 \u0432 \u0441\u0446\u0435\u043d\u0435 \u0443\u0440\u043e\u0432\u043d\u044f, \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0432 \u043a\u043b\u0430\u0441\u0441 <code>GameScene<\/code>:<\/p>\n<pre><code class=\"javascript\"> \/\/ GameScene.ts import { Board } from \"..\/models\/Board\";  const Rows = 8; const Cols = 8; const Bombs = 8;  export class GameScene extends Phaser.Scene {     private _board: Board = null;     \/\/...      public create(): void {         this._board = new Board(this, Rows, Cols, Bombs);     } }<\/code><\/pre>\n<p>  \u0412\u044b\u043d\u0435\u0441\u0435\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0434\u043e\u0441\u043a\u0438 \u0432 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0444\u0430\u0439\u043b\u0430 \u0441\u0446\u0435\u043d\u044b \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 <code>Board<\/code> \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 \u044d\u0442\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430.<\/p>\n<p>  <a name=\"section-3-2\"><\/a><\/p>\n<h3><font color=\"#008080\">3.2 \u041c\u043e\u0434\u0435\u043b\u044c \u044f\u0447\u0435\u0439\u043a\u0438<\/font><\/h3>\n<p>  \u0414\u043e\u0441\u043a\u0430 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u044f\u0447\u0435\u0435\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d. \u041a\u0430\u0436\u0434\u0443\u044e \u044f\u0447\u0435\u0439\u043a\u0443 \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u043f\u043e\u0437\u0438\u0446\u0438\u0438, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u043e\u0439 \u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u043c.<br \/>  \u042f\u0447\u0435\u0439\u043a\u0438 \u0442\u0430\u043a\u0436\u0435 \u0432\u044b\u0434\u0435\u043b\u0438\u043c \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b <code>src\/scripts\/models\/Field.ts<\/code> \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u043a\u043b\u0430\u0441\u0441, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u044f\u0447\u0435\u0439\u043a\u0443:  <\/p>\n<pre><code class=\"javascript\">import { Board } from \".\/Board\";  export class Field extends Phaser.Events.EventEmitter {     private _scene: Phaser.Scene = null;     private _board: Board = null;     private _row: number = 0;     private _col: number = 0;      constructor(scene: Phaser.Scene, board: Board, row: number, col: number) {         super();         this._init(scene, board, row, col);     }      public get col(): number {         return this._col;     }      public get row(): number {         return this._row;     }      public get board(): Board {         return this._board;     }      private _init(scene: Phaser.Scene, board: Board, row: number, col: number): void {         this._scene = scene;         this._board = board;         this._row = row;         this._col = col;     } } <\/code><\/pre>\n<p>  \u0423 \u043a\u0430\u0436\u0434\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 \u0441\u0442\u0440\u043e\u043a\u0438 \u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u043d\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f. \u0417\u0430\u0432\u043e\u0434\u0438\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b <code>_board<\/code> \u0438 <code>_scene<\/code> \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0441\u0441\u044b\u043b\u043e\u043a \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0434\u043e\u0441\u043a\u0438 \u0438 \u0441\u0446\u0435\u043d\u044b. \u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0433\u0435\u0442\u0442\u0435\u0440\u044b \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u0435\u0439 <code>_row<\/code>, <code>_col<\/code> \u0438 <code>_board<\/code>.<\/p>\n<p>  <a name=\"section-3-3\"><\/a><\/p>\n<h3><font color=\"#008080\">3.3 \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u044f\u0447\u0435\u0439\u043a\u0438<\/font><\/h3>\n<p>  \u0410\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u0430\u044f \u044f\u0447\u0435\u0439\u043a\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0430 \u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0435\u0435 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u0427\u0442\u043e\u0431\u044b \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u044f\u0447\u0435\u0439\u043a\u0443 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b <code>src\/scripts\/views\/FieldView.ts<\/code> \u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u0432 \u043d\u0435\u0433\u043e \u043a\u043b\u0430\u0441\u0441 \u0432\u044c\u044e\u0448\u043a\u0438:  <\/p>\n<pre><code class=\"javascript\">import { Field } from \"..\/models\/Field\";  export class FieldView extends Phaser.GameObjects.Sprite {     private _model: Field = null;      constructor(scene: Phaser.Scene, model: Field) {         super(scene, 0, 0, 'spritesheet', 'closed');         this._model = model;         this._init();         this._create();     }      private _init(): void {     }      private _create(): void {     } } <\/code><\/pre>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u043d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a\u043e\u043c <code>Phaser.GameObjects.Sprite<\/code>. \u0412 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u0445 phaser \u0434\u0430\u043d\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 \u0441\u0442\u0430\u043b \u043f\u0440\u0435\u0444\u0430\u0431\u043e\u043c \u0441\u043f\u0440\u0430\u0439\u0442\u0430. \u0422\u043e \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0441\u043f\u0440\u0430\u0439\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u043c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c\u0438 \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438.<\/p>\n<p>  \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430. \u0417\u0434\u0435\u0441\u044c \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043c\u044b \u043e\u0431\u044f\u0437\u0430\u043d\u044b \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432:  <\/p>\n<ul>\n<li>\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u0446\u0435\u043d\u044b (\u043e \u0447\u0435\u043c \u044f \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0430\u043b \u0432 \u043f. 3.1: phaser \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043e\u0442 \u043d\u0430\u0441 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u0441\u0446\u0435\u043d\u0443 \u0434\u043b\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432)<\/li>\n<li>\u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b <code>x<\/code> \u0438 <code>y<\/code> \u043d\u0430 \u043a\u0430\u043d\u0432\u0430\u0441\u0435<\/li>\n<li>\u0441\u0442\u0440\u043e\u043a\u043e\u0432\u044b\u0439 \u043a\u043b\u044e\u0447, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0430\u0442\u043b\u0430\u0441, \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0439 \u043d\u0430\u043c\u0438 \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 <code>preload<\/code> \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u043e\u0439 \u0441\u0446\u0435\u043d\u044b<\/li>\n<li>\u0441\u0442\u0440\u043e\u043a\u043e\u0432\u044b\u0439 \u043a\u043b\u044e\u0447 \u0444\u0440\u0435\u0439\u043c\u0430 \u0432 \u044d\u0442\u043e\u043c \u0430\u0442\u043b\u0430\u0441\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043f\u0440\u0430\u0439\u0442\u0430<\/li>\n<\/ul>\n<p>  \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043c\u043e\u0434\u0435\u043b\u044c (\u0442\u043e \u0435\u0441\u0442\u044c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043a\u043b\u0430\u0441\u0441\u0430 <code>Field<\/code>) \u0432 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>_model<\/code>. <\/p>\n<p>  \u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u0432\u0435\u043b\u0438 2 \u043f\u0443\u0441\u0442\u044b\u0445 \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u0435\u0442\u043e\u0434\u0430 <code>_init<\/code> \u0438 <code>_create<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0447\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435.<\/p>\n<p>  <a name=\"section-3-4\"><\/a><\/p>\n<h3><font color=\"#008080\">3.4 \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u043f\u0440\u0430\u0439\u0442\u0430 \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f<\/font><\/h3>\n<p>  \u0418\u0442\u0430\u043a, \u0432\u044c\u044e\u0448\u043a\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0430, \u043d\u043e \u0441\u043f\u0440\u0430\u0439\u0442 \u043e\u043d\u0430 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0435\u0449\u0435 \u043d\u0435 \u0443\u043c\u0435\u0435\u0442. \u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0441\u043f\u0440\u0430\u0439\u0442 \u0441 \u043d\u0443\u0436\u043d\u044b\u043c \u043d\u0430\u043c \u0444\u0440\u0435\u0439\u043c\u043e\u043c \u043d\u0430 \u043a\u0430\u043d\u0432\u0430\u0441 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430\u0448 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 <code>_create<\/code>:  <\/p>\n<pre><code class=\"javascript\">\/\/ FieldView.js \/\/... private _create(): void {     this.scene.add.existing(this); \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u043d\u0430 \u043a\u0430\u043d\u0432\u0430\u0441     this.setOrigin(0.5); \/\/ \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c pivot point \u0432 \u0446\u0435\u043d\u0442\u0440 \u0441\u043f\u0440\u0430\u0439\u0442\u0430 } \/\/... <\/code><\/pre>\n<p>  <a name=\"section-3-5\"><\/a><\/p>\n<h3><font color=\"#008080\">3.5 \u041f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043f\u0440\u0430\u0439\u0442\u0430<\/font><\/h3>\n<p>  \u0412 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0441\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0435 \u0441\u043f\u0440\u0430\u0439\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u044b \u0432 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u0445 (0, 0) \u043a\u0430\u043d\u0432\u0430\u0441\u0430. \u041d\u0430\u043c \u0436\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u0436\u0434\u0443\u044e \u044f\u0447\u0435\u0439\u043a\u0443 \u043f\u043e\u043c\u0435\u0449\u0430\u0442\u044c \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u0435\u0439 \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u043d\u0430 \u0434\u043e\u0441\u043a\u0435. \u0422\u043e \u0435\u0441\u0442\u044c \u0432 \u0442\u043e \u043c\u0435\u0441\u0442\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0435 \u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u0443 \u0434\u0430\u043d\u043d\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 \u043a\u043b\u0430\u0441\u0441\u0430 <code>FieldView<\/code>.<\/p>\n<p>  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043a\u043b\u0430\u0441\u0441 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>_position<\/code>, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0435 \u0437\u0430 \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u044f\u0447\u0435\u0439\u043a\u0438 \u043d\u0430 \u0438\u0433\u0440\u043e\u0432\u043e\u043c \u043f\u043e\u043b\u0435:  <\/p>\n<pre><code class=\"javascript\">\/\/ FieldView.ts \/\/... interface Vec2 {x: number, y: number};  export class FieldView extends Phaser.GameObjects.Sprite {     private _position: Vec2 = {x: 0, y: 0};     \/\/... <\/code><\/pre>\n<p>  \u0422\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0432\u044b\u0440\u043e\u0432\u043d\u044f\u0442\u044c \u0434\u043e\u0441\u043a\u0443, \u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438 \u044f\u0447\u0435\u0439\u043a\u0438 \u0432 \u043d\u0435\u0439, \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0446\u0435\u043d\u0442\u0440\u0430 \u044d\u043a\u0440\u0430\u043d\u0430, \u043d\u0430\u043c \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>_offset<\/code>, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u043e\u0439 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0438 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043b\u0435\u0432\u043e\u0433\u043e \u0438 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u043a\u0440\u0430\u0435\u0432 \u044d\u043a\u0440\u0430\u043d\u0430. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0433\u043e \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u043c \u0433\u0435\u0442\u0442\u0435\u0440\u043e\u043c:  <\/p>\n<pre><code class=\"javascript\">\/\/ FieldView.ts \/\/...     private get _offset(): Vec2 {         return {             x: (this.scene.cameras.main.width - this._model.board.cols * this.width) \/ 2,             y: (this.scene.cameras.main.height - this._model.board.rows * this.height) \/ 2         };     } \/\/... <\/code><\/pre>\n<p>  \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043c\u044b:  <\/p>\n<ol>\n<li>\u041f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043e\u0431\u0449\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u044d\u043a\u0440\u0430\u043d\u0430 \u0432 <code>this._scene.cameras.main.width<\/code>.<\/li>\n<li>\u041f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043e\u0431\u0449\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u0434\u043e\u0441\u043a\u0438 \u0443\u043c\u043d\u043e\u0436\u0438\u0432 \u0447\u0438\u0441\u043b\u043e \u044f\u0447\u0435\u0435\u043a \u043d\u0430 \u0448\u0438\u0440\u0438\u043d\u0443 \u043e\u0434\u043d\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0438: <code>this._board.cols * this.width<\/code>.<\/li>\n<li>\u041e\u0442\u043d\u044f\u0432 \u0448\u0438\u0440\u0438\u043d\u0443 \u0434\u043e\u0441\u043a\u0438 \u0438\u0437 \u0448\u0438\u0440\u0438\u043d\u044b \u044d\u043a\u0440\u0430\u043d\u0430 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043c\u0435\u0441\u0442\u043e \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435, \u043d\u0435 \u0437\u0430\u043d\u044f\u0442\u043e\u0435 \u0434\u043e\u0441\u043a\u043e\u0439.<\/li>\n<li>\u0420\u0430\u0437\u0434\u0435\u043b\u0438\u0432 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u043d\u0430 2 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u0443 \u043e\u0442\u0441\u0442\u0443\u043f\u0430 \u0441\u043b\u0435\u0432\u0430 \u0438 \u0441\u043f\u0440\u0430\u0432\u0430 \u043e\u0442 \u0434\u043e\u0441\u043a\u0438.<\/li>\n<li>\u0421\u043c\u0435\u0449\u0430\u044f \u043a\u0430\u0436\u0434\u0443\u044e \u044f\u0447\u0435\u0439\u043a\u0443 \u043d\u0430 \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u0443 \u044d\u0442\u043e\u0433\u043e \u043e\u0442\u0441\u0442\u0443\u043f\u0430 \u043c\u044b \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u043c \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u0432\u0441\u0435\u0439 \u0434\u043e\u0441\u043a\u0438 \u043f\u043e \u043e\u0441\u0438 <code>x<\/code>.<\/li>\n<\/ol>\n<p>  \u0410\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u0440\u043e\u0434\u0435\u043b\u044b\u0432\u0430\u0435\u043c \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438.<\/p>\n<p>  \u041e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0439 \u043a\u043e\u0434 \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 <code>_init<\/code>:  <\/p>\n<pre><code class=\"javascript\">\/\/ FieldView.ts \/\/ ... private _init(): void {     const offset = this._offset;     this.x = this._position.x = offset.x + this.width * this._model.col + this.width \/ 2;     this.y = this._position.y = offset.y + this.height * this._model.row + this.height \/ 2; } \/\/ ... <\/code><\/pre>\n<p>  \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>this.x<\/code>, <code>this.y<\/code>, <code>this.width<\/code> \u0438 <code>this.height<\/code> \u0437\u0434\u0435\u0441\u044c \u2014 \u044d\u0442\u043e \u0443\u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 <code>Phaser.GameObjects.Sprite<\/code>. \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 <code>this.x<\/code> \u0438 <code>this.y<\/code> \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u043c\u0443 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0441\u043f\u0440\u0430\u0439\u0442\u0430 \u043d\u0430 \u043a\u0430\u043d\u0432\u0430\u0441\u0435.<\/p>\n<p>  <a name=\"section-3-6\"><\/a><\/p>\n<h3><font color=\"#008080\">3.6 \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 FieldView<\/font><\/h3>\n<p>  \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432\u044c\u044e\u0448\u043a\u0443 \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 <code>Field<\/code>:  <\/p>\n<pre><code class=\"javascript\">\/\/ Field.ts \/\/ ... private _view: FieldView = null;  public get view(): FieldView {     return this._view; }  private _init(scene: Phaser.Scene, board: Board, row: number, col: number): void {     \/\/...     this._view = new FieldView(this._scene, this); } \/\/ ... <\/code><\/pre>\n<p>  <a name=\"section-3-7\"><\/a><\/p>\n<h3><font color=\"#008080\">3.7 \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u0435\u0439 \u0434\u043e\u0441\u043a\u0438.<\/font><\/h3>\n<p>  \u0412\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u0432 \u043a\u043b\u0430\u0441\u0441 <code>Board<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e \u0441\u0432\u043e\u0435\u0439 \u0441\u0443\u0442\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0435\u0439 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043a\u043b\u0430\u0441\u0441\u0430 <code>Field<\/code> \u0438 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435\u043c \u044f\u0447\u0435\u0435\u043a.<br \/>  \u0412\u044b\u043d\u0435\u0441\u0435\u043c \u043a\u043e\u0434 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0434\u043e\u0441\u043a\u0438 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 <code>_create<\/code> \u0438 \u0432\u044b\u0437\u043e\u0432\u0435\u043c \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0438\u0437 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430. \u0417\u043d\u0430\u044f \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 <code>_create<\/code> \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u044f\u0447\u0435\u0439\u043a\u0438, \u0432\u044b\u043d\u0435\u0441\u0435\u043c \u043a\u043e\u0434 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044f\u0447\u0435\u0435\u043a \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 <code>_createFields<\/code>.  <\/p>\n<pre><code class=\"javascript\">\/\/ Board.ts constructor(scene: Phaser.Scene, rows: number, cols: number, bombs: number) {     \/\/ ...     this._create(); }  private _create(): void {     this._createFields(); }  private _createFields(): void { } <\/code><\/pre>\n<p>  \u0418\u043c\u0435\u043d\u043d\u043e \u0432 \u044d\u0442\u043e\u043c \u043c\u0435\u0442\u043e\u0434\u0435 \u043c\u044b \u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u0443\u0436\u043d\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u044f\u0447\u0435\u0435\u043a \u0432\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u043c \u0446\u0438\u043a\u043b\u0435:  <\/p>\n<pre><code class=\"javascript\">\/\/ Board.ts \/\/ ... private _createFields(): void {     for (let row = 0; row &lt; this._rows; row++) {         for (let col = 0; col &lt; this._cols; col++) {             this._fields.push(new Field(this._scene, this, row, col));         }     } } \/\/... <\/code><\/pre>\n<p>  \u0421\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0432 \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0443 \u0434\u043b\u044f \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439   <\/p>\n<pre><code class=\"plaintext\">npm start<\/code><\/pre>\n<p>  \u0423\u0434\u043e\u0441\u0442\u043e\u0432\u0435\u0440\u0438\u043c\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0432 \u0446\u0435\u043d\u0442\u0440\u0435 \u044d\u043a\u0440\u0430\u043d\u0430 \u043c\u044b \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e \u0432\u0438\u0434\u0438\u043c 64 \u044f\u0447\u0435\u0439\u043a\u0438 \u0432 8 \u0441\u0442\u0440\u043e\u043a\u0430\u0445.<\/p>\n<p>  <a name=\"section-3-8\"><\/a><\/p>\n<h3><font color=\"#008080\">3.8 \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0431\u043e\u043c\u0431<\/font><\/h3>\n<p>  \u0420\u0430\u043d\u0435\u0435 \u044f \u0441\u043e\u043e\u0431\u0449\u0438\u043b, \u0447\u0442\u043e \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 <code>_create<\/code> \u043a\u043b\u0430\u0441\u0441\u0430 <code>Board<\/code> \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u0435\u0439. \u0410 \u0447\u0442\u043e \u0436\u0435 \u0435\u0449\u0435? \u0417\u0434\u0435\u0441\u044c \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u0436\u0435 \u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0431\u043e\u043c\u0431, \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u043c \u044f\u0447\u0435\u0439\u043a\u0430\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0447\u0438\u0441\u043b\u0430 \u0431\u043e\u043c\u0431-\u0441\u043e\u0441\u0435\u0434\u0435\u0439. \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0441\u0430\u043c\u0438\u0445 \u0431\u043e\u043c\u0431.<\/p>\n<p>  \u041d\u0430\u043c \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c N \u0431\u043e\u043c\u0431 \u043d\u0430 \u0434\u043e\u0441\u043a\u0435 \u0432 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0445 \u044f\u0447\u0435\u0439\u043a\u0430\u0445. \u041e\u043f\u0438\u0448\u0435\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0431\u043e\u043c\u0431 \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u043e\u043c:<\/p>\n<pre><code class=\"plaintext\">\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0447\u0438\u0441\u043b\u043e \u0431\u043e\u043c\u0431 \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043f\u043e\u043a\u0430 \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u043c\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u0431\u043e\u043c\u0431     \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0440\u0430\u043d\u0434\u043e\u043c\u043d\u043e\u0435 \u043f\u043e\u043b\u0435     \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0435 \u043f\u043e\u043b\u0435 \u043f\u0443\u0441\u0442\u043e\u0435         \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432 \u043d\u0435\u0433\u043e \u0431\u043e\u043c\u0431\u0443         \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u0431\u043e\u043c\u0431 <\/code><\/pre>\n<p>  \u0411\u0443\u0434\u0435\u043c \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438 \u0446\u0438\u043a\u043b\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u0443\u044e \u044f\u0447\u0435\u0439\u043a\u0443 \u0438\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>this._fields<\/code> \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0431\u043e\u043c\u0431, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u043e \u0432 \u043f\u043e\u043b\u0435 <code>this._bombs<\/code>,. \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u0430\u044f \u044f\u0447\u0435\u0439\u043a\u0430 \u043f\u0443\u0441\u0442\u0430, \u0442\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0432 \u043d\u0435\u0439 \u0431\u043e\u043c\u0431\u0443 \u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u043c \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u0431\u043e\u043c\u0431, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438.<br \/>  \u0414\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0433\u043e \u0447\u0438\u0441\u043b\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043c\u0435\u0442\u043e\u0434 <code>Phaser.Math.Between<\/code>.  <\/p>\n<pre><code class=\"javascript\">\/\/ Board.ts \/\/... private _createBombs(): void {     let count = this._bombs; \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0447\u0438\u0441\u043b\u043e \u0431\u043e\u043c\u0431 \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438      while (count &gt; 0) { \/\/ \u043f\u043e\u043a\u0430 \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u043c\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u0431\u043e\u043c\u0431         let field = this._fields[Phaser.Math.Between(0, this._fields.length - 1)]; \/\/ \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0440\u0430\u043d\u0434\u043e\u043c\u043d\u043e\u0435 \u043f\u043e\u043b\u0435          if (field.empty) { \/\/ \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0435 \u043f\u043e\u043b\u0435 \u043f\u0443\u0441\u0442\u043e\u0435             field.setBomb(); \/\/ \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432 \u043d\u0435\u0433\u043e \u0431\u043e\u043c\u0431\u0443             --count; \/\/ \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u0431\u043e\u043c\u0431         }     } } <\/code><\/pre>\n<p>  \u041d\u0435 \u0437\u0430\u0431\u0443\u0434\u0435\u043c \u0432 \u0444\u0430\u0439\u043b\u0435 <code>Board.ts<\/code> \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0432\u044b\u0437\u043e\u0432 <code>this._createBombs();<\/code> \u0432 \u043a\u043e\u043d\u0446\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 <code>_create<\/code><\/p>\n<p>  \u041a\u0430\u043a \u0432\u044b \u0443\u0436\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u043b\u0438, \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u043e\u0442\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0441\u044f, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441 <code>Field<\/code>, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0432 \u043d\u0435\u0433\u043e \u0433\u0435\u0442\u0442\u0435\u0440 <code>empty<\/code> \u0438 \u043c\u0435\u0442\u043e\u0434 <code>setBomb<\/code>.<\/p>\n<p>  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043a\u043b\u0430\u0441\u0441 <code>Field<\/code> \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0435 \u043f\u043e\u043b\u0435 <code>_value<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0433\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u044f\u0447\u0435\u0439\u043a\u0438. \u041f\u0440\u0438\u043c\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u044f.  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<tr>\n<td><code>_value<\/code> === 0 <\/td>\n<td>\u044f\u0447\u0435\u0439\u043a\u0430 \u043f\u0443\u0441\u0442\u0430 \u0438 \u0432 \u043d\u0435\u0439 \u043d\u0435\u0442 \u043d\u0438 \u043c\u0438\u043d, \u043d\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439<\/td>\n<\/tr>\n<tr>\n<td><code>_value<\/code> === -1 <\/td>\n<td>\u0432 \u044f\u0447\u0435\u0439\u043a\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043c\u0438\u043d\u0430<\/td>\n<\/tr>\n<tr>\n<td><code>_value<\/code> &gt; 0 <\/td>\n<td>\u0432 \u044f\u0447\u0435\u0439\u043a\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0447\u0438\u0441\u043b\u043e \u043c\u0438\u043d, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0440\u044f\u0434\u043e\u043c \u0441 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u044f\u0447\u0435\u0439\u043a\u043e\u0439<\/td>\n<\/tr>\n<\/table>\n<\/div>\n<p>  \u0421\u043b\u0435\u0434\u0443\u044f \u044d\u0442\u0438\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 <code>Field<\/code> \u043c\u0435\u0442\u043e\u0434\u044b, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0435 \u0441\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c <code>_value<\/code>:  <\/p>\n<pre><code class=\"javascript\">\/\/ Field.ts \/\/ ... private _value: number = 0; \/\/ ... public get value(): number {     return this._value; }  public set value(value) {     this._value = value; }  public get empty(): boolean {     return this._value === 0; }  public get mined(): boolean {     return this._value === -1; }  public get filled(): boolean {     return this._value &gt; 0; }  public setBomb(): void {     this._value = -1; } \/\/ ... <\/code><\/pre>\n<p>  <a name=\"section-3-9\"><\/a><\/p>\n<h3><font color=\"#008080\">3.9 \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439<\/font><\/h3>\n<p>  \u0411\u043e\u043c\u0431\u044b \u0440\u0430\u0441\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0447\u0438\u0441\u043b\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u043e \u0432\u0441\u0435 \u043a\u043b\u0435\u0442\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u043e\u0433\u043e \u0442\u0440\u0435\u0431\u0443\u044e\u0442.<\/p>\n<p>  \u041d\u0430\u043f\u043e\u043c\u043d\u044e, \u0447\u0442\u043e \u043f\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c\u0438 \u0441\u0430\u043f\u0435\u0440\u0430 \u0432 \u043a\u043b\u0435\u0442\u043a\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0441\u0442\u043e\u044f\u0442\u044c \u0442\u043e \u0447\u0438\u0441\u043b\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u0431\u043e\u043c\u0431, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0440\u044f\u0434\u043e\u043c \u0441 \u044d\u0442\u043e\u0439 \u043a\u043b\u0435\u0442\u043a\u043e\u0439. \u041d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0435\u043c\u0443 \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043e\u0434.<\/p>\n<pre><code class=\"plaintext\">\u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u043d\u0430 \u0434\u043e\u0441\u043a\u0435     \u0435\u0441\u043b\u0438 \u0432 \u043f\u043e\u043b\u0435 \u0435\u0441\u0442\u044c \u043c\u0438\u043d\u0430         \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u043e\u0441\u0435\u0434\u043d\u0435\u0439 \u044f\u0447\u0435\u0439\u043a\u0438             \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u043c \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u0447\u0438\u0441\u043b\u0430 \u043c\u0438\u043d \u0440\u044f\u0434\u043e\u043c <\/code><\/pre>\n<p>  \u0412 \u043a\u043b\u0430\u0441\u0441\u0435 <code>Board<\/code> \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u0438 \u0442\u0440\u0430\u043d\u0441\u043b\u0438\u0440\u0443\u0435\u043c \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043e\u0434 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u0434:  <\/p>\n<pre><code class=\"javascript\">\/\/ Board.ts \/\/... private _createValues() {     \/\/ \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u043d\u0430 \u0434\u043e\u0441\u043a\u0435     this._fields.forEach(field =&gt; {         \/\/ \u0435\u0441\u043b\u0438 \u0432 \u043f\u043e\u043b\u0435 \u0435\u0441\u0442\u044c \u043c\u0438\u043d\u0430         if (field.mined) {             \/\/ \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u043e\u0441\u0435\u0434\u043d\u0435\u0439 \u044f\u0447\u0435\u0439\u043a\u0438             field.getClosestFields().forEach(item =&gt; {                 \/\/ \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u043c \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u0447\u0438\u0441\u043b\u0430 \u043c\u0438\u043d \u0440\u044f\u0434\u043e\u043c                 if (item.value &gt;= 0) {                     ++item.value;                 }             });         }     }); } \/\/... <\/code><\/pre>\n<p>  \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a\u043e\u0439 \u0438\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u0443 \u043d\u0430\u0441 \u043d\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d. \u041d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043c\u0435\u0442\u043e\u0434 <code>getClosestFields<\/code> \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0445 \u044f\u0447\u0435\u0435\u043a.<\/p>\n<p>  \u041a\u0430\u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0435 \u044f\u0447\u0435\u0439\u043a\u0438? <br \/>  \u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043b\u044e\u0431\u0443\u044e \u043a\u043b\u0435\u0442\u043a\u0443 \u0434\u043e\u0441\u043a\u0438, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0443\u044e\u0441\u044f \u043d\u0435 \u043d\u0430 \u043a\u0440\u0430\u044e, \u0442\u043e \u0435\u0441\u0442\u044c \u043d\u0435 \u0432 \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 \u0438 \u043d\u0435 \u0432 \u043a\u0440\u0430\u0439\u043d\u0435\u043c \u0441\u0442\u043e\u043b\u0431\u0446\u0435. \u0423 \u0442\u0430\u043a\u0438\u0445 \u043a\u043b\u0435\u0442\u043e\u043a \u0432 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u0441\u043e\u0441\u0435\u0434\u0435\u0439: 1 \u0441\u0432\u0435\u0440\u0445\u0443, 1 \u0441\u043d\u0438\u0437\u0443, 3 \u0441\u043b\u0435\u0432\u0430 \u0438 3 \u0441\u043f\u0440\u0430\u0432\u0430 (\u0432\u043a\u043b\u044e\u0447\u0430\u044f \u044f\u0447\u0435\u0439\u043a\u0438 \u043f\u043e \u0434\u0438\u0430\u0433\u043e\u043d\u0430\u043b\u0438).<br \/>  \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0443 \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u0437 \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0445 \u044f\u0447\u0435\u0435\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 <code>_row<\/code> \u0438 <code>_col<\/code> \u043d\u0435 \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0435, \u0447\u0435\u043c \u043d\u0430 1. \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u0438\u0446\u0443 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 <code>_row<\/code> \u0438 <code>_col<\/code> \u0441 \u0442\u0435\u043a\u0443\u0449\u0438\u043c \u043f\u043e\u043b\u0435\u043c. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0443 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0444\u0430\u0439\u043b\u0430 \u0434\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u0430:  <\/p>\n<pre><code class=\"javascript\">\/\/ Field.ts const Positions = [     {row : 0, col : 1}, \/\/ \u0441\u043f\u0440\u0430\u0432\u0430     {row : 0, col : -1}, \/\/ \u0441\u043b\u0435\u0432\u0430     {row : 1, col : 0}, \/\/ \u0441\u0432\u0435\u0440\u0445\u0443     {row : 1, col : 1}, \/\/ \u0441\u0432\u0435\u0440\u0445\u0443 \u0441\u043f\u0440\u0430\u0432\u0430     {row : 1, col : -1}, \/\/ \u0441\u0432\u0435\u0440\u0445\u0443 \u0441\u043b\u0435\u0432\u0430     {row : -1, col : 0}, \/\/ \u0441\u043d\u0438\u0437\u0443     {row : -1, col : 1}, \/\/ \u0441\u043d\u0438\u0437\u0443 \u0441\u043f\u0440\u0430\u0432\u0430     {row : -1, col : -1} \/\/ \u0441\u043d\u0438\u0437\u0443 \u0441\u043b\u0435\u0432\u0430 ]; \/\/... <\/code><\/pre>\n<p>  \u0418 \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u044e\u0449\u0438\u0439 \u043c\u0435\u0442\u043e\u0434, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u0440\u043e\u0431\u0435\u0436\u0438\u043c\u0441\u044f \u0432 \u0446\u0438\u043a\u043b\u0435 \u043f\u043e \u044d\u0442\u043e\u043c\u0443 \u043c\u0430\u0441\u0441\u0438\u0432\u0443:  <\/p>\n<pre><code class=\"javascript\">\/\/ Field.ts \/\/... public getClosestFields(): Field[] {     let results = [];      \/\/ \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0439 \u0441\u043e\u0441\u0435\u0434\u043d\u0435\u0439 \u043f\u043e\u0437\u0438\u0446\u0438\u0438     Positions.forEach(position =&gt; {         \/\/ \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043a\u043b\u0435\u0442\u043a\u0443 \u0432 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0439 \u043f\u043e\u0437\u0438\u0446\u0438\u0438         let field = this._board.getField(this._row + position.row, this._col + position.col);          \/\/ \u0435\u0441\u043b\u0438 \u0442\u0430\u043a\u0430\u044f \u043a\u043b\u0435\u0442\u043a\u0430 \u0435\u0441\u0442\u044c \u043d\u0430 \u0434\u043e\u0441\u043a\u0435         if (field) {             \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0435\u0435 \u0432 \u043f\u0443\u043b             results.push(field);         }     });      return results; }; \/\/... <\/code><\/pre>\n<p>  \u041d\u0435 \u0437\u0430\u0431\u0443\u0434\u0435\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <code>field<\/code> \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438, \u0442\u0430\u043a \u043a\u0430\u043a \u043d\u0435 \u0432\u0441\u0435 \u043a\u043b\u0435\u0442\u043a\u0438 \u043d\u0430 \u0434\u043e\u0441\u043a\u0435 \u0438\u043c\u0435\u044e\u0442 \u043f\u043e 8 \u0441\u043e\u0441\u0435\u0434\u0435\u0439. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043b\u0435\u0432\u0430\u044f \u0432\u0435\u0440\u0445\u043d\u044f\u044f \u043a\u043b\u0435\u0442\u043a\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0441\u043e\u0441\u0435\u0434\u0435\u0439 \u0441\u043b\u0435\u0432\u0430 \u043e\u0442 \u043d\u0435\u0435 \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435.<\/p>\n<p>  \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 <code>getField<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u0441\u0435 \u043d\u0443\u0436\u043d\u044b\u0435 \u0432\u044b\u0437\u043e\u0432\u044b \u0432 \u043c\u0435\u0442\u043e\u0434 <code>_create<\/code> \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 <code>Board<\/code>  <\/p>\n<pre><code class=\"javascript\">\/\/ Board.ts \/\/... public getField(row: number, col: number): Field {     return this._fields.find(field =&gt; field.row === row &amp;&amp; field.col === col); } \/\/... private _create(): void {     this._createFields();     this._createBombs();     this._createValues();  } \/\/... <\/code><\/pre>\n<p>  <a name=\"section-4\"><\/a><\/p>\n<h2><font color=\"#008080\">4. \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0432\u0432\u043e\u0434\u0430<\/font><\/h2>\n<p>  <a name=\"section-4-1\"><\/a><\/p>\n<h3><font color=\"#008080\">4.1 \u041e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u043c\u044b\u0448\u0438<\/font><\/h3>\n<p>  \u0412 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0434\u043e\u0441\u043a\u0430 \u0443 \u043d\u0430\u0441 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u0430, \u0432 \u043d\u0435\u0439 \u0435\u0441\u0442\u044c \u0431\u043e\u043c\u0431\u044b \u0438 \u0435\u0441\u0442\u044c \u043a\u043b\u0435\u0442\u043a\u0438 \u0441 \u0446\u0438\u0444\u0440\u0430\u043c\u0438, \u043d\u043e \u0432\u0441\u0435 \u043e\u043d\u0438 \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0437\u0430\u043a\u0440\u044b\u0442\u044b \u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0438\u0445 \u043d\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438. \u0411\u0443\u0434\u0435\u043c \u044d\u0442\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0435 \u044f\u0447\u0435\u0435\u043a \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u043b\u0435\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u043c\u044b\u0448\u0438.<\/p>\n<p>  \u0421\u043f\u0435\u0440\u0432\u0430 \u043d\u0430\u043c \u044d\u0442\u043e\u0442 \u0441\u0430\u043c\u044b\u0439 \u043a\u043b\u0438\u043a \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0442\u0441\u043b\u0435\u0434\u0438\u0442\u044c. \u0412 \u043a\u043b\u0430\u0441\u0441\u0435 <code>FieldView<\/code> \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u0441\u0430\u043c\u044b\u0439 \u043a\u043e\u043d\u0435\u0446 \u043c\u0435\u0442\u043e\u0434\u0430 <code>_create<\/code> \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:  <\/p>\n<pre><code class=\"javascript\">\/\/ FielView.ts \/\/... private _create(): void {     \/\/ ...     this.setInteractive(); } \/\/... <\/code><\/pre>\n<p>  \u0412 phaser \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0438\u0437 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u0438\u043c\u0435\u043d <code>Phaser.GameObjects<\/code>. \u0412 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438 \u043c\u044b \u043f\u043e\u0434\u043f\u0438\u0448\u0435\u043c \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043a\u043b\u0438\u043a\u0430 (<code>pointerdown<\/code>) \u0441\u0430\u043c \u043f\u0440\u0435\u0444\u0430\u0431 \u0441\u043f\u0440\u0430\u0439\u0442\u0430, \u0442\u043e \u0435\u0441\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u043a\u043b\u0430\u0441\u0441\u0430 <code>FieldView<\/code>, \u0443\u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043e\u0442 <code>Phaser.GameObjects.Sprite<\/code>.<br \/>  \u041d\u043e \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u044f\u0432\u043d\u043e \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0438\u0442\u044c, \u0447\u0442\u043e \u0441\u043f\u0440\u0430\u0439\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c, \u0442\u043e \u0435\u0441\u0442\u044c \u043f\u043e \u043d\u0435\u043c\u0443 \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0443\u0436\u043d\u043e \u0441\u043b\u0443\u0448\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u043f\u0443\u0442. \u0421\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0437\u043e\u0432\u043e\u043c \u043c\u0435\u0442\u043e\u0434\u0430 <code>setInteractive<\/code> \u0431\u0435\u0437 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0441\u043f\u0440\u0430\u0439\u0442\u0435, \u0447\u0442\u043e \u043c\u044b \u0438 \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u0441\u043f\u0440\u0430\u0439\u0442 \u0443 \u043d\u0430\u0441 \u0441\u0442\u0430\u043b \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c, \u0432\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u0432 \u043a\u043b\u0430\u0441\u0441 <code>Board<\/code> \u0432 \u0442\u043e \u043c\u0435\u0441\u0442\u043e, \u0433\u0434\u0435 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u043c\u043e\u0434\u0435\u043b\u0438 <code>Field<\/code>, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u0432 \u043c\u0435\u0442\u043e\u0434 <code>_createFields<\/code> \u0438 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u043b\u0431\u0435\u043a \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0438\u043d\u043f\u0443\u0442\u0430 \u0434\u043b\u044f \u0432\u044c\u044e\u0448\u043a\u0438:  <\/p>\n<pre><code class=\"javascript\">\/\/ Board.ts \/\/... private _createFields(): void {     for (let row = 0; row &lt; this._rows; row++) {         for (let col = 0; col &lt; this._cols; col++) {             const field = new Field(this._scene, this, row, col)             field.view.on('pointerdown', this._onFieldClick.bind(this, field));             this._fields.push(field);         }     } } \/\/... <\/code><\/pre>\n<p>  \u0420\u0430\u0437 \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438, \u0447\u0442\u043e \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u043d\u0430 \u0441\u043f\u0440\u0430\u0439\u0442 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 <code>_onFieldClick<\/code>, \u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0435\u0433\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c. \u041d\u043e \u0441\u0430\u043c\u0443 \u043b\u043e\u0433\u0438\u043a\u0443 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u043b\u0438\u043a\u0430 \u043c\u044b \u0432\u044b\u043d\u0435\u0441\u0435\u043c \u0438\u0437 \u043a\u043b\u0430\u0441\u0441\u0430 <code>Board<\/code>. \u0415\u0441\u0442\u044c \u043c\u043d\u0435\u043d\u0438\u0435, \u0447\u0442\u043e \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0435\u043b\u044c \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0438\u043d\u043f\u0443\u0442\u0430 \u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0435\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043b\u0443\u0447\u0448\u0435 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0435, \u043f\u043e\u0434\u043e\u0431\u0438\u0435\u043c \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0443 \u043d\u0430\u0441 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0441\u0446\u0435\u043d\u044b <code>GameScene<\/code>. \u0417\u043d\u0430\u0447\u0438\u0442, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0431\u0440\u043e\u0441\u0438\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043a\u043b\u0438\u043a\u0430 \u0434\u0430\u043b\u044c\u0448\u0435, \u0438\u0437 \u043a\u043b\u0430\u0441\u0441\u0430 <code>Board<\/code> \u0432 \u0441\u0430\u043c\u0443 \u0441\u0446\u0435\u043d\u0443. \u0422\u0430\u043a \u0438 \u043f\u043e\u0441\u0442\u0443\u043f\u0438\u043c:  <\/p>\n<pre><code class=\"javascript\">\/\/ Board.ts \/\/... private _onFieldClick(field: Field, pointer: Phaser.Input.Pointer): void {     if (pointer.leftButtonDown()) {         this.emit(`left-click`, field);     } else if (pointer.rightButtonDown()) {         this.emit(`right-click`, field);     } } \/\/... <\/code><\/pre>\n<p>  \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043a\u043b\u0438\u043a\u0430, \u043a\u0430\u043a \u043e\u043d\u043e \u0431\u044b\u043b\u043e, \u043d\u043e \u0435\u0449\u0435 \u0438 \u0443\u0442\u043e\u0447\u043d\u044f\u0435\u043c, \u043a\u0430\u043a\u043e\u0439 \u0438\u043c\u0435\u043d\u043d\u043e \u043a\u043b\u0438\u043a \u044d\u0442\u043e \u0431\u044b\u043b. \u042d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c, \u043a\u043e\u0433\u0434\u0430 \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 \u0441\u0446\u0435\u043d\u044b \u043c\u044b \u043f\u043e \u0440\u0430\u0437\u043d\u043e\u043c\u0443 \u0431\u0443\u0434\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043a\u043b\u0438\u043a\u0430, \u043a\u0430\u043a \u0435\u0441\u0442\u044c, \u043d\u043e \u043c\u044b \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u043c \u043a\u043e\u0434 \u0441\u0446\u0435\u043d\u044b, \u043e\u0441\u0442\u0430\u0432\u0438\u0432 \u0447\u0430\u0441\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0438, \u043a\u0430\u0441\u0430\u044e\u0449\u0435\u0439\u0441\u044f \u0441\u0430\u043c\u043e\u0433\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 <code>Field<\/code>.<br \/>  \u041d\u0443 \u0430 \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u0432 \u043a\u043b\u0430\u0441\u0441 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0441\u0446\u0435\u043d\u044b <code>GameScene<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043a\u043e\u043d\u0435\u0446 \u043c\u0435\u0442\u043e\u0434\u0430 <code>_create<\/code> \u043a\u043e\u0434, \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u044e\u0449\u0438\u0439 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043a\u043b\u0438\u043a\u0430 \u043f\u043e \u044f\u0447\u0435\u0439\u043a\u0430\u043c:  <\/p>\n<pre><code class=\"javascript\">\/\/ Board.ts \/\/... import { Field } from \"..\/models\/Field\"; \/\/... public create(): void {     this._board = new Board(this, Rows, Cols, Bombs);     this._board.on('left-click', this._onFieldClickLeft, this);     this._board.on('right-click', this._onFieldClickRight, this); }  private _onFieldClickLeft(field: Field): void { }  private _onFieldClickRight(field: Field): void { } \/\/... <\/code><\/pre>\n<p>  <a name=\"section-4-2\"><\/a><\/p>\n<h3><font color=\"#008080\">4.2. \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043a\u043b\u0438\u043a\u0430 \u043b\u0435\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438 \u043c\u044b\u0448\u0438<\/font><\/h3>\n<p>  \u041f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043a\u043b\u0438\u043a\u0430 \u043c\u044b\u0448\u0438. \u0418 \u043d\u0430\u0447\u043d\u0435\u043c \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u044f \u044f\u0447\u0435\u0435\u043a. \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u044f\u0447\u0435\u0439\u043a\u0438 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043b\u0435\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438. \u0418 \u043f\u0440\u0435\u0436\u0434\u0435, \u0447\u0435\u043c \u043c\u044b \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043e\u0437\u0432\u0443\u0447\u0438\u043c \u0443\u0441\u043b\u043e\u0432\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c:  <\/p>\n<ol>\n<li>\u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043f\u043e \u0437\u0430\u043a\u0440\u044b\u0442\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0435 \u0435\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0442\u043a\u0440\u044b\u0442\u044c<\/li>\n<li>\u0435\u0441\u043b\u0438 \u0432 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0435 \u043c\u0438\u043d\u0430 \u2014 \u0438\u0433\u0440\u0430 \u043f\u0440\u043e\u0438\u0433\u0440\u0430\u043d\u0430<\/li>\n<li>\u0435\u0441\u043b\u0438 \u0432 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0435 \u043d\u0435\u0442 \u043d\u0438 \u043c\u0438\u043d\u044b, \u043d\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0437\u043d\u0430\u0447\u0438\u0442 \u043c\u0438\u043d \u043d\u0435\u0442 \u0438 \u0432 \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0445 \u044f\u0447\u0435\u0439\u043a\u0430\u0445, \u0432 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0432\u0441\u0435 \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0435 \u044f\u0447\u0435\u0439\u043a\u0438 \u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0442\u044c \u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u0432 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0435 \u043d\u0435 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/li>\n<li>\u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043f\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043b\u0438 \u0440\u0430\u0441\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u0432\u0441\u0435 \u0444\u043b\u0430\u0433\u0438 \u0438 \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u0442\u0430\u043a, \u0442\u043e\u0433\u0434\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0435\u043c \u0438\u0433\u0440\u0443 \u043f\u043e\u0431\u0435\u0434\u043e\u0439<\/li>\n<\/ol>\n<p>  \u0418 \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u043b\u044f \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0442\u0440\u0435\u0431\u0443\u0435\u043c\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u043f\u0435\u0440\u0435\u0432\u0435\u0434\u0435\u043c \u043e\u0437\u0432\u0443\u0447\u0435\u043d\u043d\u0443\u044e \u0432\u044b\u0448\u0435 \u043b\u043e\u0433\u0438\u043a\u0443 \u0432 \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043e\u0434:  <\/p>\n<pre><code class=\"plaintext\">\u0435\u0441\u043b\u0438 \u044f\u0447\u0435\u0439\u043a\u0430 \u0437\u0430\u043a\u0440\u044b\u0442\u0430        \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0435\u0435        \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u0437\u0430\u043c\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0430            \u0438\u0433\u0440\u0430 \u043f\u0440\u043e\u0438\u0433\u0440\u0430\u043d\u0430         \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u043f\u0443\u0441\u0442\u0430             \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0441\u043e\u0441\u0435\u0434\u0435\u0439 \u0435\u0441\u043b\u0438 \u044f\u0447\u0435\u0439\u043a\u0430 \u043e\u0442\u043a\u0440\u044b\u0442\u0430     \u0435\u0441\u043b\u0438 \u0432\u0441\u044f \u0434\u043e\u0441\u043a\u0430 \u043f\u043e\u043c\u0435\u0447\u0435\u043d\u0430 \u0444\u043b\u0430\u0433\u0430\u043c\u0438 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e         \u0438\u0433\u0440\u0430 \u0432\u044b\u0438\u0433\u0440\u0430\u043d\u0430 <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043c\u0435\u0442\u043e\u0434 <code>_onFieldClickLeft<\/code>:  <\/p>\n<pre><code class=\"javascript\">\/\/ GameScene.ts \/\/... private _onFieldClickLeft(field: Field): void {     if (field.closed) { \/\/ \u0435\u0441\u043b\u0438 \u044f\u0447\u0435\u0439\u043a\u0430 \u0437\u0430\u043a\u0440\u044b\u0442\u0430         field.open(); \/\/ \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0435\u0435          if (field.mined) { \/\/ \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u0437\u0430\u043c\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0430             field.exploded = true;             this._onGameOver(false); \/\/ \u0438\u0433\u0440\u0430 \u043f\u0440\u043e\u0438\u0433\u0440\u0430\u043d\u0430         } else if (field.empty) { \/\/ \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u043f\u0443\u0441\u0442\u0430             this._board.openClosestFields(field); \/\/ \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0441\u043e\u0441\u0435\u0434\u0435\u0439         }     } else if (field.opened) { \/\/ \u0435\u0441\u043b\u0438 \u044f\u0447\u0435\u0439\u043a\u0430 \u043e\u0442\u043a\u0440\u044b\u0442\u0430         if (this._board.completed) { \/\/ \u0438 \u0432\u0441\u044f \u0434\u043e\u0441\u043a\u0430 \u043f\u043e\u043c\u0435\u0447\u0435\u043d\u0430 \u0444\u043b\u0430\u0433\u0430\u043c\u0438 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e             this._onGameOver(true); \/\/ \u0438\u0433\u0440\u0430 \u0432\u044b\u0438\u0433\u0440\u0430\u043d\u0430         }     } } \/\/... <\/code><\/pre>\n<p>  \u0410 \u0434\u0430\u043b\u044c\u0448\u0435, \u043a\u0430\u043a \u0432\u0441\u0435\u0433\u0434\u0430, \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u043a\u043b\u0430\u0441\u0441\u044b <code>Field<\/code> \u0438 <code>Board<\/code>, \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0432 \u0432 \u043d\u0438\u0445 \u0442\u0435 \u043c\u0435\u0442\u043e\u0434\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0435.<\/p>\n<p>  \u0423\u043a\u0430\u0436\u0435\u043c 3 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u044f\u0447\u0435\u0439\u043a\u0438 \u0432 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0438 <code>States<\/code>, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u043e\u043b\u0435 <code>_state<\/code> \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043f\u043e \u0433\u0435\u0442\u0442\u0435\u0440\u0443 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f:  <\/p>\n<pre><code class=\"javascript\">\/\/ Field.ts enum States {    Closed = 'closed',    Opened = 'opened',    Marked = 'flag' }; export class Field extends Phaser.Events.EventEmitter {     private _state: string = States.Closed;     \/\/...     public get marked(): boolean {         return this._state === States.Marked;     }      public get closed(): boolean {         return this._state === States.Closed;     }      public get opened(): boolean {         return this._state === States.Opened;     }  \/\/...  <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u0437\u0430\u043a\u0440\u044b\u0442\u0430 \u044f\u0447\u0435\u0439\u043a\u0430 \u0438\u043b\u0438 \u043d\u0435\u0442, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043c\u0435\u0442\u043e\u0434 <code>open<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435:  <\/p>\n<pre><code class=\"javascript\">\/\/ Field.ts \/\/... public open(): void {     this._setState(States.Opened); }  private _setState(state: string): void {     if (this._state !== state) {         this._state = state;         this.emit('change');     } } \/\/...  <\/code><\/pre>\n<p>  \u041a\u0430\u0436\u0434\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043c\u043e\u0434\u0435\u043b\u0438 \u0434\u043e\u043b\u0436\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435, \u0441\u043e\u043e\u0431\u0449\u0430\u044e\u0449\u0435\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0432\u0435\u0434\u0435\u043c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 <code>_setState<\/code>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0438 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u0432\u0441\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u043e \u0432\u0441\u0435\u0445 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0445 \u043c\u0435\u0442\u043e\u0434\u0430\u0445 \u043c\u043e\u0434\u0435\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/p>\n<p>  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0431\u0443\u043b\u0435\u0432 \u0444\u043b\u0430\u0433 <code>_exploded<\/code> \u0434\u043b\u044f \u044f\u0432\u043d\u043e\u0433\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 Field, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b \u0432\u0437\u043e\u0440\u0432\u0430\u043d:  <\/p>\n<pre><code class=\"javascript\">\/\/ Field.ts private _exploded: boolean = false; \/\/... public set exploded(exploded: boolean) {     this._exploded = exploded;     this.emit('change'); } public get exploded(): boolean {     return this._exploded; } \/\/...  <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0442\u043a\u0440\u043e\u0435\u043c \u043a\u043b\u0430\u0441\u0441 <code>Board<\/code> \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0432 \u043d\u0435\u043c \u043c\u0435\u0442\u043e\u0434 <code>openClosestFields<\/code>. \u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u044b\u043c \u0438 \u0435\u0433\u043e \u0437\u0430\u0434\u0430\u0447\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043f\u0443\u0441\u0442\u044b\u0435 \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0435 \u043f\u043e\u043b\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u043d\u044f\u0442\u043e\u0439 \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0435 \u044f\u0447\u0435\u0439\u043a\u0438. \u0410\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c:  <\/p>\n<pre><code class=\"plaintext\">\u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0441\u043e\u0441\u0435\u0434\u0435\u0439:     \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u043e\u0441\u0435\u0434\u043d\u0435\u0439 \u044f\u0447\u0435\u0439\u043a\u0438         \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u0437\u0430\u043a\u0440\u044b\u0442\u0430             \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u044f\u0447\u0435\u0439\u043a\u0443             \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u043f\u0443\u0441\u0442\u0430                 \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0441\u043e\u0441\u0435\u0434\u0435\u0439 \u044d\u0442\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0438 <\/code><\/pre>\n<p>  \u0418 \u043d\u0430 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u0443 \u043d\u0430\u0441 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u0434\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u044d\u0442\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430:  <\/p>\n<pre><code class=\"javascript\">\/\/ Board.ts \/\/... public openClosestFields(field: Field): void {     field.getClosestFields().forEach(item =&gt; {\/\/ \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u043e\u0441\u0435\u0434\u043d\u0435\u0439 \u044f\u0447\u0435\u0439\u043a\u0438         if (item.closed) {\/\/ \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u0437\u0430\u043a\u0440\u044b\u0442\u0430             item.open();\/\/ \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u044f\u0447\u0435\u0439\u043a\u0443              if (item.empty) {\/\/ \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u043f\u0443\u0441\u0442\u0430                 this.openClosestFields(item);\/\/ \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0441\u043e\u0441\u0435\u0434\u0435\u0439 \u044d\u0442\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0438             }         }     }); } \/\/... <\/code><\/pre>\n<p>  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0433\u0435\u0442\u0442\u0435\u0440 <code>completed<\/code> \u0432 \u043a\u043b\u0430\u0441\u0441 <code>Board<\/code> \u0434\u043b\u044f \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0444\u043b\u0430\u0433\u043e\u0432 \u043d\u0430 \u0434\u043e\u0441\u043a\u0435. \u041a\u0430\u043a \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0447\u0442\u043e \u0434\u043e\u0441\u043a\u0430 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0440\u0430\u0437\u043c\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0430? \u0427\u0438\u0441\u043b\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u043d\u044b\u0445 \u043f\u043e\u043b\u0435\u0439 \u0434\u043e\u043b\u0436\u043d\u043e \u0440\u0430\u0432\u043d\u044f\u0442\u044c\u0441\u044f \u043e\u0431\u0449\u0435\u043c\u0443 \u0447\u0438\u0441\u043b\u043e \u0431\u043e\u043c\u0431 \u043d\u0430 \u0434\u043e\u0441\u043a\u0435.  <\/p>\n<pre><code class=\"javascript\">\/\/ Board.ts \/\/... public get completed(): boolean {     return this._fields.filter(field =&gt; field.completed).length === this._bombs; } \/\/... <\/code><\/pre>\n<p>  \u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0444\u0438\u043b\u044c\u0442\u0440\u0443\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 <code>_fields<\/code> \u043f\u043e \u0433\u0435\u0442\u0442\u0435\u0440\u0443 <code>completed<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u0442\u044c \u0432\u0430\u043b\u0438\u0434\u043d\u043e\u0441\u0442\u044c \u043e\u0442\u043c\u0435\u0442\u043a\u0438 \u043f\u043e\u043b\u044f. \u0415\u0441\u043b\u0438 \u0434\u043b\u0438\u043d\u0430 \u043e\u0442\u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 (\u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043f\u0430\u0434\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044f, \u0437\u0430 \u0447\u0442\u043e \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0433\u0435\u0442\u0442\u0435\u0440 <code>completed<\/code> \u0443\u0436\u0435 \u0443 \u043a\u043b\u0430\u0441\u0441\u0430 <code>Field<\/code>) \u0440\u0430\u0432\u043d\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e \u043f\u043e\u043b\u044f <code>_bombs<\/code> (\u0442\u043e \u0435\u0441\u0442\u044c \u0447\u0438\u0441\u043b\u0443 \u0431\u043e\u043c\u0431 \u043d\u0430 \u0434\u043e\u0441\u043a\u0435), \u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c <code>true<\/code>, \u0438\u043d\u0430\u0447\u0435 \u0433\u043e\u0432\u043e\u0440\u044f, \u0441\u0447\u0438\u0442\u0430\u0435\u043c \u0438\u0433\u0440\u0443 \u0432\u044b\u0438\u0433\u0440\u0430\u043d\u043d\u043e\u0439.<br \/>  \u041d\u0430\u043c \u0442\u0430\u043a\u0436\u0435 \u043d\u0435 \u043f\u043e\u043c\u0435\u0448\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0434\u043d\u0438\u043c \u0432\u044b\u0437\u043e\u0432\u043e\u043c \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0432\u0441\u044e \u0434\u043e\u0441\u043a\u0443, \u0447\u0442\u043e \u043d\u0430\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u043e\u0438\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0438 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0438 \u0443\u0440\u043e\u0432\u043d\u044f. \u042d\u0442\u0443 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043a\u043b\u0430\u0441\u0441 <code>Board<\/code>:  <\/p>\n<pre><code class=\"javascript\">\/\/ Board.ts \/\/... public open(): void {     this._fields.forEach(field =&gt; field.open()); } \/\/... <\/code><\/pre>\n<p>  \u041e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0433\u0435\u0442\u0442\u0435\u0440 <code>completed<\/code> \u0432 \u0441\u0430\u043c \u043a\u043b\u0430\u0441\u0441 <code>Field<\/code>. \u0412 \u043a\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u043e\u043b\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u0447\u0438\u0442\u0430\u0442\u044c\u0441\u044f \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0440\u0430\u0437\u043c\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c? \u0415\u0441\u043b\u0438 \u043e\u043d\u043e \u0438 \u0437\u0430\u043c\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043e, \u0438 \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u043e \u0444\u043b\u0430\u0433\u043e\u043c. \u041e\u0431\u0430 \u043d\u0443\u0436\u043d\u044b\u0445 \u0433\u0435\u0442\u0442\u0435\u0440\u0430 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u043c\u0435\u0442\u043e\u0434:  <\/p>\n<pre><code class=\"javascript\">\/\/ Field.ts \/\/... public get completed(): boolean {     return this.marked &amp;&amp; this.mined; } \/\/... <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043b\u0435\u0432\u043e\u0433\u043e \u043a\u043b\u0438\u043a\u0430 \u043c\u044b\u0448\u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043c\u0435\u0442\u043e\u0434 <code>_onGameOver<\/code>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u043c \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0434\u043e\u0441\u043a\u0438 \u0438 \u043f\u043e\u043a\u0430\u0436\u0435\u043c \u0438\u0433\u0440\u043e\u043a\u0443 \u0432\u0441\u044e \u0434\u043e\u0441\u043a\u0443. \u041f\u043e\u0437\u0436\u0435 \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043d\u0435\u0433\u043e \u043a\u043e\u0434 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043e \u0441\u0442\u0430\u0442\u0443\u0441\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0443\u0440\u043e\u0432\u043d\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 <code>status<\/code>.  <\/p>\n<pre><code class=\"javascript\">\/\/ GameScene.ts \/\/... private _onGameOver(status: boolean) {     this._board.off('left-click', this._onFieldClickLeft, this);     this._board.off('right-click', this._onFieldClickRight, this);     this._board.open(); } \/\/... <\/code><\/pre>\n<p>  <a name=\"section-4-3\"><\/a><\/p>\n<h3><font color=\"#008080\">4.3 \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044f<\/font><\/h3>\n<p>  \u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043d\u0430\u0447\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043a\u043b\u0438\u043a \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u043d\u0430\u0443\u0447\u0438\u043c\u0441\u044f \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0435 \u044f\u0447\u0435\u0439\u043a\u0438. <br \/>  \u0420\u0430\u043d\u0435\u0435 \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 <code>Field<\/code> \u043c\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u043c\u0435\u0442\u043e\u0434 <code>_setState<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 <code>change<\/code> \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043c\u043e\u0434\u0435\u043b\u0438. \u0412\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u044d\u0442\u0438\u043c \u0438 \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 <code>FieldView<\/code> \u043e\u0442\u0441\u043b\u0435\u0434\u0438\u043c \u0434\u0430\u043d\u043d\u043e\u0435 \u044d\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435:  <\/p>\n<pre><code class=\"javascript\">\/\/ FieldView.ts \/\/... private _init(): void {     \/\/...     this._model.on('change', this._onStateChange, this); } private _onStateChange(): void {     this._render(); } private _render(): void {     this.setFrame(this._frameName); } \/\/... <\/code><\/pre>\n<p>  \u041c\u044b \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 <code>_onStateChange<\/code> \u043a\u043e\u043b\u0431\u0435\u043a\u043e\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043c\u043e\u0434\u0435\u043b\u0438. \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c, \u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e \u0431\u044b\u043b\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0430 \u043c\u043e\u0434\u0435\u043b\u044c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c, \u043d\u0443\u0436\u043d\u043e \u043b\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c <code>_render<\/code>.<\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u043f\u0440\u0430\u0439\u0442 \u044f\u0447\u0435\u0439\u043a\u0438 \u0432 \u043d\u043e\u0432\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0435\u0433\u043e \u0444\u0440\u0435\u0439\u043c. \u0422\u0430\u043a \u043a\u0430\u043a \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0441\u0441\u0435\u0442\u043e\u0432 \u043c\u044b \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0438 \u0430\u0442\u043b\u0430\u0441, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 <code>setFrame<\/code> \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0444\u0440\u0435\u0439\u043c \u043d\u0430 \u043d\u043e\u0432\u044b\u0439.<\/p>\n<p>  \u0414\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0444\u0440\u0435\u0439\u043c\u0430 \u0432 \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u043e\u043a\u0443 \u043c\u044b \u0445\u0438\u0442\u0440\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0433\u0435\u0442\u0442\u0435\u0440 <code>_frameName<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c. \u0421\u043f\u0435\u0440\u0432\u0430 \u043e\u043f\u0438\u0448\u0435\u043c \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043a\u0430\u043a\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0444\u0440\u0435\u0439\u043c \u044f\u0447\u0435\u0439\u043a\u0438.  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<tr>\n<td>\u0424\u0440\u0435\u0439\u043c<\/td>\n<td>\u0423\u0441\u043b\u043e\u0432\u0438\u0435<\/td>\n<\/tr>\n<tr>\n<td><code>closed<\/code><\/td>\n<td>\u041f\u043e\u043b\u0435 \u0437\u0430\u043a\u0440\u044b\u0442\u043e  <\/td>\n<\/tr>\n<tr>\n<td><code>flag<\/code><\/td>\n<td>\u041f\u043e\u043b\u0435 \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u043e \u0444\u043b\u0430\u0433\u043e\u043c  <\/td>\n<\/tr>\n<tr>\n<td><code>empty<\/code><\/td>\n<td>\u041f\u043e\u043b\u0435 \u043e\u0442\u043a\u0440\u044b\u0442\u043e, \u043d\u0435 \u0437\u0430\u043c\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0438 \u043d\u0435 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c  <\/td>\n<\/tr>\n<tr>\n<td><code>exploded<\/code>  <\/td>\n<td>\u043f\u043e\u043b\u0435 \u043e\u0442\u043a\u0440\u044b\u0442\u043e, \u0437\u0430\u043c\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0438 \u0432\u0437\u043e\u0440\u0432\u0430\u043d\u043e  <\/td>\n<\/tr>\n<tr>\n<td><code>mined<\/code>  <\/td>\n<td>\u043f\u043e\u043b\u0435 \u043e\u0442\u043a\u0440\u044b\u0442\u043e, \u0437\u0430\u043c\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043e, \u043d\u043e \u043d\u0435 \u0432\u0437\u043e\u0440\u0432\u0430\u043d\u043e  <\/td>\n<\/tr>\n<tr>\n<td><code>1...9<\/code>  <\/td>\n<td>\u043f\u043e\u043b\u0435 \u043e\u0442\u043a\u0440\u044b\u0442\u043e \u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043e\u0442 1 \u0434\u043e 9, \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0449\u0435\u0435 \u0447\u0438\u0441\u043b\u043e \u0431\u043e\u043c\u0431 \u0440\u044f\u0434\u043e\u043c \u0441 \u0434\u0430\u043d\u043d\u044b\u043c \u043f\u043e\u043b\u0435\u043c  <\/td>\n<\/tr>\n<\/table>\n<\/div>\n<p>  \u041c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0438 \u0443\u0436\u0435 \u0438\u043c\u0435\u0435\u043c \u0432\u0441\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u043c\u043e\u0434\u0435\u043b\u0438, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u044d\u0442\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c. \u0417\u0430\u0432\u0435\u0434\u0435\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043a\u043e\u043d\u0444\u0438\u0433 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0444\u0430\u0439\u043b\u0430:  <\/p>\n<pre><code class=\"javascript\">\/\/ FieldView.ts const States = {     'closed': field =&gt; field.closed,     'flag': field =&gt; field.marked,     'empty': field =&gt; field.opened &amp;&amp; !field.mined &amp;&amp; !field.filled,     'exploded': field =&gt; field.opened &amp;&amp; field.mined &amp;&amp; field.exploded,     'mined': field =&gt; field.opened &amp;&amp; field.mined &amp;&amp; !field.exploded } \/\/... <\/code><\/pre>\n<p>  \u041a\u043b\u044e\u0447\u0430\u043c\u0438 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u0435 \u0431\u0443\u0434\u0443\u0442 \u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0444\u0440\u0435\u0439\u043c\u043e\u0432, \u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u044d\u0442\u0438\u0445 \u043a\u043b\u044e\u0447\u0435\u0439 \u2014 \u043a\u043e\u043b\u0431\u0435\u043a\u0438, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0438\u0435 \u0431\u0443\u043b\u0435\u0432\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442. \u041d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043d\u0444\u0438\u0433\u0430 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0430 (\u0442\u043e \u0435\u0441\u0442\u044c \u043a\u043b\u044e\u0447\u0430 \u0438\u0437 \u043a\u043e\u043d\u0444\u0438\u0433\u0430):  <\/p>\n<pre><code class=\"javascript\">\/\/ FieldView.ts \/\/... private get _frameName(): string {     for (let key in States) {         if (States[key](this._model)) {             return key;         }     }      return this._model.value.toString(); } <\/code><\/pre>\n<p>  \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u043f\u0435\u0440\u0435\u0431\u043e\u0440\u043e\u043c \u0432 \u0446\u0438\u043a\u043b\u0435 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043c \u0432\u0441\u0435 \u043a\u043b\u044e\u0447\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043a\u043e\u043d\u0444\u0438\u0433\u0430 \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043b\u0431\u0435\u043a \u043f\u043e \u043e\u0447\u0435\u0440\u0435\u0434\u0438. \u0422\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0435\u0440\u0432\u043e\u0439 \u0432\u0435\u0440\u043d\u0435\u0442 \u043d\u0430\u043c <code>true<\/code>, \u0443\u043a\u0430\u0436\u0435\u0442, \u0447\u0442\u043e \u043a\u043b\u044e\u0447 <code>key<\/code> \u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438 \u0438 \u0435\u0441\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0444\u0440\u0435\u0439\u043c \u0434\u043b\u044f \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043c\u043e\u0434\u0435\u043b\u0438.<br \/>  \u0415\u0441\u043b\u0438 \u043d\u0438 \u043e\u0434\u0438\u043d \u043a\u043b\u044e\u0447 \u043d\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442, \u0442\u043e \u0437\u0430 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u043c \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0435 \u043f\u043e\u043b\u0435 \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c <code>_value<\/code>, \u0442\u0430\u043a \u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0435 <code>States<\/code> \u043c\u044b \u043d\u0435 \u0437\u0430\u0434\u0430\u043b\u0438.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u0435\u0432\u044b\u0439 \u043a\u043b\u0438\u043a \u043f\u043e \u043f\u043e\u043b\u044f\u043c \u0434\u043e\u0441\u043a\u0438 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u043a\u0430\u043a \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u044f\u0447\u0435\u0439\u043a\u0438 \u0438 \u0447\u0442\u043e \u0432 \u043d\u0438\u0445 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u044f.<\/p>\n<p>  <a name=\"section-4-4\"><\/a><\/p>\n<h3><font color=\"#008080\">4.4 \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043f\u0440\u0430\u0432\u043e\u0433\u043e \u043a\u043b\u0438\u043a\u0430<\/font><\/h3>\n<p>  \u041a\u0430\u043a \u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043b\u0435\u0432\u043e\u0433\u043e \u043a\u043b\u0438\u043a\u0430, \u0441\u043f\u0435\u0440\u0432\u0430 \u0447\u0435\u0442\u043a\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b. \u041f\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044e \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438 \u043c\u044b\u0448\u0438 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u043c\u0435\u0447\u0430\u0442\u044c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u0443\u044e \u044f\u0447\u0435\u0439\u043a\u0443 \u0444\u043b\u0430\u0436\u043a\u043e\u043c. \u041d\u043e \u0437\u0434\u0435\u0441\u044c \u0435\u0441\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u044f.  <\/p>\n<ol>\n<li>\u041f\u043e\u043c\u0435\u0442\u0438\u0442\u044c \u0444\u043b\u0430\u0433\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u043a\u0440\u044b\u0442\u043e\u0435 \u043f\u043e\u043b\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0435 \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u043e \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442<\/li>\n<li>\u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u0435 \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u043e, \u0442\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u043a\u043b\u0438\u043a \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043d\u0438\u043c\u0430\u0442\u044c \u0441 \u043f\u043e\u043b\u044f \u0444\u043b\u0430\u0433<\/li>\n<li>\u041f\u0440\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435\/\u0441\u043d\u044f\u0442\u0438\u0438 \u0444\u043b\u0430\u0433\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0447\u0438\u0441\u043b\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u0444\u043b\u0430\u0433\u043e\u0432 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0442\u0435\u043a\u0441\u0442 \u0441 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c<\/li>\n<\/ol>\n<p>  \u041f\u0435\u0440\u0435\u0432\u043e\u0434\u044f \u044d\u0442\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u0432 \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043e\u0434 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0440\u043e\u0447\u043a\u0438 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432:  <\/p>\n<pre><code class=\"plaintext\">\u0435\u0441\u043b\u0438 \u044f\u0447\u0435\u0439\u043a\u0430 \u0437\u0430\u043a\u0440\u044b\u0442\u0430 \u0438 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0435 \u0444\u043b\u0430\u0433\u0438       \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0444\u043b\u0430\u0433 \u0432 \u044f\u0447\u0435\u0439\u043a\u0443 \u0435\u0441\u043b\u0438 \u044f\u0447\u0435\u0439\u043a\u0430 \u0437\u0430\u043a\u0440\u044b\u0442\u0430 \u0438 \u0444\u043b\u0430\u0433 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c     \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u0444\u043b\u0430\u0433 \u0438\u0437 \u044f\u0447\u0435\u0439\u043a\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0447\u0438\u0441\u043b\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u0444\u043b\u0430\u0433\u043e\u0432 \u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0438\u0445 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u044d\u0442\u043e\u0442 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0432 \u0432\u044b\u0437\u043e\u0432\u044b \u043d\u0443\u0436\u043d\u044b\u0445 \u043d\u0430\u043c \u043c\u0435\u0442\u043e\u0434\u043e\u0432, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u0435\u0449\u0435 \u043d\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u044b:  <\/p>\n<pre><code class=\"javascript\">\/\/ GameScene.ts private _flags: number = 0; \/\/... private _onFieldClickRight(field: Field): void {     if (field.closed &amp;&amp; this._flags &gt; 0) { \/\/ \u0435\u0441\u043b\u0438 \u044f\u0447\u0435\u0439\u043a\u0430 \u0437\u0430\u043a\u0440\u044b\u0442\u0430 \u0438 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0435 \u0444\u043b\u0430\u0433\u0438         field.addFlag(); \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0444\u043b\u0430\u0433 \u0432 \u044f\u0447\u0435\u0439\u043a\u0443     } else if (field.marked) { \/\/ \u0435\u0441\u043b\u0438 \u0444\u043b\u0430\u0433 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c         field.removeFlag(); \/\/ \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u0444\u043b\u0430\u0433     }      this._flags = Bombs - this._board.countMarked; } \/\/... public create(): void {     this._flags = Bombs;     \/\/... } \/\/... <\/code><\/pre>\n<p>  \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u0437\u0430\u0432\u0435\u043b\u0438 \u043d\u043e\u0432\u043e\u0435 \u043f\u043e\u043b\u0435 <code>_flags<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0430 \u0441\u0442\u0430\u0440\u0442\u0435 \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u0440\u0430\u0432\u043d\u043e \u0447\u0438\u0441\u043b\u0443 \u0431\u043e\u043c\u0431 \u043d\u0430 \u0434\u043e\u0441\u043a\u0435, \u0442\u0430\u043a \u043a\u0430\u043a \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0438\u0433\u0440\u044b \u0435\u0449\u0435 \u043d\u0438 \u043e\u0434\u0438\u043d \u0444\u043b\u0430\u0433 \u043d\u0435 \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u0435\u043d. \u042d\u0442\u043e \u043f\u043e\u043b\u0435 \u0432\u044b\u043d\u0443\u0436\u0434\u0435\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u043f\u0440\u0430\u0432\u043e\u043c \u043a\u043b\u0438\u043a\u0435, \u0442\u0430\u043a \u043a\u0430\u043a \u0432 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0444\u043b\u0430\u0433 \u043b\u0438\u0431\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f, \u043b\u0438\u0431\u043e \u0443\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0441 \u0434\u043e\u0441\u043a\u0438. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043a\u043b\u0430\u0441\u0441 <code>Board<\/code> \u0433\u0435\u0442\u0442\u0435\u0440 <code>countMarked<\/code>:  <\/p>\n<pre><code class=\"javascript\">\/\/ Board.ts \/\/... public get countMarked(): number {     return this._fields.filter(field =&gt; field.marked).length; } \/\/... <\/code><\/pre>\n<p>  \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0438 \u0441\u043d\u044f\u0442\u0438\u0435 \u0444\u043b\u0430\u0433\u0430 \u2014 \u044d\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043c\u043e\u0434\u0435\u043b\u0438 <code>Field<\/code>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c \u043a\u043b\u0430\u0441\u0441\u0435 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043c\u0435\u0442\u043e\u0434\u0443 <code>open<\/code>:  <\/p>\n<pre><code class=\"javascript\">\/\/ Field.ts \/\/... public addFlag(): void {     this._setState(States.Marked); }  public removeFlag(): void {     this._setState(States.Closed); } \/\/... <\/code><\/pre>\n<p>  \u041d\u0430\u043f\u043e\u043c\u043d\u044e, \u0447\u0442\u043e <code>_setState<\/code> \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 <code>change<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u043e \u0432\u044e\u044c\u0448\u043a\u0435 \u0438, \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0441\u043f\u0440\u0430\u0439\u0442 \u0438 \u0432 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043c\u043e\u0434\u0435\u043b\u0438. <br \/>  \u041f\u0440\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u0432\u044b \u043d\u0435\u043f\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0442\u0435, \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438 \u043c\u044b\u0448\u0438 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u043e\u0435 \u043c\u0435\u043d\u044e. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043e\u0434, \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u044e\u0449\u0438\u0439 \u044d\u0442\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435, \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0441\u0446\u0435\u043d\u044b:  <\/p>\n<pre><code class=\"javascript\">\/\/ GameScene.ts \/\/... constructor() {     super('Game');     \/\/ \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u043e\u0435 \u043c\u0435\u043d\u044e \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439     document.querySelector(\"canvas\").oncontextmenu = e =&gt; e.preventDefault(); } \/\/... <\/code><\/pre>\n<p>  <a name=\"section-4-5\"><\/a><\/p>\n<h3><font color=\"#008080\">4.5 \u041e\u0431\u044a\u0435\u043a\u0442 GameSceneView<\/font><\/h3>\n<p>  \u0414\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 UI \u043d\u0430 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0441\u0446\u0435\u043d\u0435 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043b\u0430\u0441\u0441 <code>GameSceneView<\/code> \u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u0435\u0433\u043e \u0432 <code>src\/scripts\/views\/GameSceneView.ts<\/code>.<\/p>\n<p>  \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u043f\u043e\u0441\u0442\u0443\u043f\u0438\u043c \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u043c \u043e\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 <code>FieldView<\/code> \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0438 \u043d\u0435 \u0441\u0442\u0430\u043d\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043a\u043b\u0430\u0441\u0441 \u043f\u0440\u0435\u0444\u0430\u0431\u043e\u043c \u0438 \u043d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a\u043e\u043c <code>GameObjects<\/code>. <br \/>  \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0446\u0435\u043d\u044b \u043d\u0430\u043c \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0432\u044b\u0432\u043e\u0434 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432:  <\/p>\n<ul>\n<li>\u0442\u0435\u043a\u0441\u0442 \u0432 \u0447\u0438\u0441\u043b\u043e\u043c \u0444\u043b\u0430\u0433\u043e\u0432<\/li>\n<li>\u043a\u043d\u043e\u043f\u043a\u0430 \u0432\u044b\u0445\u043e\u0434\u0430<\/li>\n<li>\u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0441\u043e \u0441\u0442\u0430\u0442\u0443\u0441\u043e\u043c \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0438\u0433\u0440\u044b (\u043f\u043e\u0431\u0435\u0434\u0430\/\u043f\u043e\u0440\u0430\u0436\u0435\u043d\u0438\u0435)<\/li>\n<\/ul>\n<p>  \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 UI \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c \u043f\u043e\u043b\u0435\u043c \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 <code>GameSceneView<\/code>.<br \/>  \u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043c \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0443.  <\/p>\n<pre><code class=\"javascript\">enum Styles {     Color = '#008080',     Font = 'Arial' }  enum Texts {     Flags = 'FLAGS: ',     Exit = 'EXIT',     Success = 'YOU WIN!',     Failure = 'YOU LOOSE' };  export class GameSceneView {     private _scene: Phaser.Scene = null;     private _style: {font: string, fill: string};      constructor(scene: Phaser.Scene) {         this._scene = scene;         this._style = {font: `28px ${Styles.Font}`, fill: Styles.Color};         this._create();     }      private _create(): void {     }      public render() {     } } <\/code><\/pre>\n<p>  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0442\u0435\u043a\u0441\u0442 \u0441 \u0447\u0438\u0441\u043b\u043e\u043c \u0444\u043b\u0430\u0433\u043e\u0432.  <\/p>\n<pre><code class=\"javascript\">\/\/ GameSceneView.ts \/\/... private _txtFlags: Phaser.GameObjects.Text = null; \/\/... private _createTxtFlags(): void {     this._txtFlags = this._scene.add.text(         50,         50,         Texts.Flags,         this._style     ).setOrigin(0, 1); } \/\/... <\/code><\/pre>\n<p>  \u0414\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442 \u043d\u0443\u0436\u043d\u044b\u0439 \u043d\u0430\u043c \u0442\u0435\u043a\u0441\u0442 \u0432 \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u0441 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u043c 50px \u043e\u0442 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0438 \u043b\u0435\u0432\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442 \u0435\u043c\u0443 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0439 \u0441\u0442\u0438\u043b\u044c. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043c\u0435\u0442\u043e\u0434 <code>setOrigin<\/code> \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b pivot point \u0442\u0435\u043a\u0441\u0442\u0430 \u0432 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b (0, 1). \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0442\u0435\u043a\u0441\u0442 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u0432\u043e\u0435\u0439 \u043b\u0435\u0432\u043e\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0442\u0430\u0442\u0443\u0441\u043d\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435.  <\/p>\n<pre><code class=\"javascript\">\/\/ GameSceneView.ts \/\/... private _txtStatus: Phaser.GameObjects.Text = null; \/\/... private _createTxtStatus(): void {     this._txtStatus = this._scene.add.text(         this._scene.cameras.main.centerX,         50,         Texts.Success,         this._style     ).setOrigin(0.5, 1);      this._txtStatus.visible = false; } \/\/... <\/code><\/pre>\n<p>  \u041f\u043e\u043c\u0435\u0449\u0430\u0435\u043c \u0442\u0435\u043a\u0441\u0442 \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u0432 \u0446\u0435\u043d\u0442\u0440 \u044d\u043a\u0440\u0430\u043d\u0430 \u0438 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u043c \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u044b \u0441\u0442\u0440\u043e\u043a\u0438 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0432\u044b\u0437\u043e\u0432\u0430 <code>setOrigin<\/code> \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c 0.5 \u0434\u043b\u044f \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b x. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u0430\u043d\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u043d\u0443\u0436\u043d\u043e \u0441\u043a\u0440\u044b\u0442\u044c, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043c\u044b \u0435\u0433\u043e \u0431\u0443\u0434\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e \u0444\u0430\u043a\u0442\u0443 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0438\u0433\u0440\u044b.<\/p>\n<p>  \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u0432\u044b\u0445\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e \u0441\u0432\u043e\u0435\u0439 \u0441\u0443\u0442\u0438 \u0442\u0430\u043a\u0436\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c.  <\/p>\n<pre><code class=\"javascript\">\/\/ GameSceneView.ts \/\/... private _btnExit: Phaser.GameObjects.Text = null; \/\/... private _createBtnExit(): void {     this._btnExit = this._scene.add.text(         this._scene.cameras.main.width - 50,         50,         Texts.Exit,         this._style     ).setOrigin(1);      this._btnExit.setInteractive();     this._btnExit.once('pointerdown', () =&gt; {         this._scene.scene.start('Start');     }); } \/\/... <\/code><\/pre>\n<p>  \u041f\u043e\u043c\u0435\u0449\u0430\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u0432 \u043f\u0440\u0430\u0432\u044b\u0439 \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u0443\u0433\u043e\u043b \u044d\u043a\u0440\u0430\u043d\u0430 \u0438 \u0441\u043d\u043e\u0432\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <code>setOrigin<\/code>, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0440\u043e\u0432\u043d\u044f\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u043d\u0430 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0435\u0433\u043e \u043f\u0440\u0430\u0432\u043e\u0433\u043e \u043a\u0440\u0430\u044f. \u0414\u0435\u043b\u0430\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043e\u043b\u0431\u0435\u043a \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043a\u043b\u0438\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0433\u0440\u043e\u043a\u0430 \u043d\u0430 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u0443\u044e \u0441\u0446\u0435\u043d\u0443. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0434\u0430\u0435\u043c \u0438\u0433\u0440\u043e\u043a\u0443 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u0439\u0442\u0438 \u0441 \u0443\u0440\u043e\u0432\u043d\u044f \u0432 \u043b\u044e\u0431\u043e\u0439 \u043c\u043e\u043c\u0435\u043d\u0442.<\/p>\n<p>  \u041e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 <code>render<\/code> \u0434\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 UI \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u044b\u0437\u043e\u0432\u044b \u0432\u0441\u0435\u0445 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0432 <code>_create<\/code>.  <\/p>\n<pre><code class=\"javascript\">\/\/ GameSceneView.ts \/\/... private _create(): void {     this._createTxtFlags();     this._createTxtStatus();     this._createBtnExit(); } public render(data: {flags?: number, status?: boolean}) {     if (typeof data.flags !== 'undefined') {         this._txtFlags.text = Texts.Flags + data.flags.toString();     }      if (typeof data.status !== 'undefined') {         this._txtStatus.text = data.status ? Texts.Success : Texts.Failure;         this._txtStatus.visible = true;     } } \/\/... <\/code><\/pre>\n<p>  \u0412 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c UI, \u0432\u044b\u0432\u043e\u0434\u044f \u043d\u0443\u0436\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f. <br \/>  \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0441\u0446\u0435\u043d\u044b \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 GameScene \u0438 \u043f\u0440\u043e\u043f\u0438\u0448\u0435\u043c \u0432\u044b\u0437\u043e\u0432 \u043c\u0435\u0442\u043e\u0434\u0430 _render \u0432\u043e \u0432\u0435\u0437\u0434\u0435, \u0433\u0434\u0435 \u044d\u0442\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043f\u043e \u0441\u043c\u044b\u0441\u043b\u0443:  <\/p>\n<pre><code class=\"javascript\">\/\/ GameScene.ts \/\/... import { GameSceneView } from \"..\/views\/GameSceneView\"; \/\/... export class GameScene extends Phaser.Scene {     private _view: GameSceneView = null;     \/\/...     private _onGameOver(status: boolean) {         \/\/...         this._view.render({status});     }     \/\/...     private _onFieldClickRight(field: Field): void {         \/\/...         this._flags = Bombs - this._board.countMarked;         this._view.render({flags: this._flags});     }     \/\/...     public create(): void {         \/\/...         this._view = new GameSceneView(this);         this._view.render({flags: this._flags});     } \/\/... } <\/code><\/pre>\n<p>  <a name=\"section-5\"><\/a><\/p>\n<h2><font color=\"#008080\">5. \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/font><\/h2>\n<p>  \u041a\u0430\u043a\u043e\u0439 \u0436\u0435 \u0444\u0430\u043d \u043e\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u0433\u0440\u044b, \u0434\u0430\u0436\u0435 \u0442\u0430\u043a\u043e\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043a\u0430\u043a \u043d\u0430\u0448\u0430, \u0435\u0441\u043b\u0438 \u0432 \u043d\u0435\u0439 \u043d\u0435\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439?! \u0422\u0435\u043c \u0431\u043e\u043b\u0435\u0435, \u0440\u0430\u0437 \u0443\u0436 \u043c\u044b \u043d\u0430\u0447\u0430\u043b\u0438 \u0438\u0437\u0443\u0447\u0430\u0442\u044c phaser, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u043c\u0441\u044f \u0441 \u0441\u0430\u043c\u044b\u043c\u0438 \u0431\u0430\u0437\u043e\u0432\u044b\u043c\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0438 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0442\u0432\u0438\u043d\u043e\u0432. \u0422\u0432\u0438\u043d\u044b \u0437\u0434\u0435\u0441\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u044b \u0432 \u0441\u0430\u043c\u043e\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435 \u0438 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f.<\/p>\n<p>  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u0438\u0433\u0440\u0443 2 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438: \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0434\u043e\u0441\u043a\u0438 \u044f\u0447\u0435\u0439\u043a\u0430\u043c\u0438 \u043d\u0430 \u0441\u0442\u0430\u0440\u0442\u0435 \u0438 \u043f\u0435\u0440\u0435\u0432\u043e\u0440\u043e\u0442 \u044f\u0447\u0435\u0439\u043a\u0438 \u043f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0438. \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u043f\u0435\u0440\u0432\u043e\u0439 \u0438\u0437 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0445.<\/p>\n<p>  <a name=\"section-5-1\"><\/a><\/p>\n<h3><font color=\"#008080\">5.1 \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u043a\u0438<\/font><\/h3>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/7r\/uu\/1v\/7ruu1vtppaw26sp-fapxbahgm9q.gif\"><br \/>  \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u044f\u0447\u0435\u0439\u043a\u0438 \u0434\u043e\u0441\u043a\u0438 \u043f\u0440\u0438\u043b\u0435\u0442\u0430\u043b\u0438 \u043d\u0430 \u0441\u0432\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0438\u0437 \u043b\u0435\u0432\u043e\u0433\u043e \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u043a\u0440\u0430\u044f \u044d\u043a\u0440\u0430\u043d\u0430. \u041f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432\u0441\u0435 \u044f\u0447\u0435\u0439\u043a\u0438 \u0437\u0430 \u043b\u0435\u0432\u044b\u0439 \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u0443\u0433\u043e\u043b \u044d\u043a\u0440\u0430\u043d\u0430 \u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0434\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0435\u0439 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442.<\/p>\n<p>  \u0412 \u043a\u043b\u0430\u0441\u0441\u0435 <code>FiledView<\/code> \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043a\u043e\u043d\u0435\u0446 \u043c\u0435\u0442\u043e\u0434\u044b <code>_create<\/code> \u0432\u044b\u0437\u043e\u0432 <code>_animateShow<\/code>:  <\/p>\n<pre><code class=\"javascript\">\/\/ FieldView.ts \/\/... private _create(): void {     \/\/...     this._animateShow(); } \/\/... <\/code><\/pre>\n<p>  B \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043d\u0443\u0436\u043d\u044b\u0439 \u043d\u0430\u043c \u043d\u043e\u0432\u044b\u0439 \u043c\u0435\u0442\u043e\u0434. \u0412 \u043d\u0435\u043c, \u043a\u0430\u043a \u043c\u044b \u0438 \u0434\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438\u0441\u044c \u0432\u044b\u0448\u0435, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c 2 \u0432\u0435\u0449\u0438:  <\/p>\n<ol>\n<li>\u0441\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u044f\u0447\u0435\u0439\u043a\u0443 \u0437\u0430 \u043b\u0435\u0432\u044b\u0439 \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u0443\u0433\u043e\u043b \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0435\u0435 \u043d\u0435 \u0431\u044b\u043b\u043e \u0432\u0438\u0434\u043d\u043e \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435<\/li>\n<li>\u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0442\u0432\u0438\u043d \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0434\u043e \u043d\u0443\u0436\u043d\u044b\u0445 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0441 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u043e\u0439<\/li>\n<\/ol>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ FieldView.ts \/\/... private _animateShow(): Promise&lt;void&gt; {     this.x = -this.width;     this.y = -this.height;     const delay = this._model.row * 50 + this._model.col * 10;     return this._moveTo(this._position, delay); } \/\/... <\/code><\/pre>\n<p>  \u0422\u0430\u043a \u043a\u0430\u043a \u043b\u0435\u0432\u044b\u0439 \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u0443\u0433\u043e\u043b \u043a\u0430\u043d\u0432\u0430\u0441\u0430 \u0438\u043c\u0435\u0435\u0442 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b (0, 0), \u0442\u043e \u0435\u0441\u043b\u0438 \u043c\u044b \u0437\u0430\u0434\u0430\u0434\u0438\u043c \u044f\u0447\u0435\u0439\u043a\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b, \u0440\u0430\u0432\u043d\u044b\u0435 \u0435\u0435 \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c \u0448\u0438\u0440\u0438\u043d\u044b \u0438 \u0432\u044b\u0441\u043e\u0442\u044b, \u044d\u0442\u043e \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442 \u044f\u0447\u0435\u0439\u043a\u0443 \u0437\u0430 \u043b\u0435\u0432\u044b\u0439 \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u0443\u0433\u043e\u043b \u0438 \u0441\u043a\u0440\u043e\u0435\u0442 \u0441 \u044d\u043a\u0440\u0430\u043d\u0430. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043b\u0438 \u043d\u0430\u0448\u0443 \u043f\u0435\u0440\u0432\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443.<\/p>\n<p>  \u0412\u0442\u043e\u0440\u0443\u044e \u0446\u0435\u043b\u044c \u0432\u044b \u0434\u043e\u0441\u0442\u0438\u0433\u043d\u0435\u043c \u0432\u044b\u0437\u043e\u0432\u043e\u043c \u043c\u0435\u0442\u043e\u0434\u0430 <code>_moveTo<\/code>.  <\/p>\n<pre><code class=\"javascript\">\/\/ FieldView.ts \/\/... private _moveTo(position: Vec2, delay: number): Promise&lt;void&gt; {     return new Promise(resolve =&gt; {         this.scene.tweens.add({             targets: this,             x: position.x,             y: position.y,             duration: 600,             ease: 'Elastic',             easeParams: [1, 1],             delay,             onComplete: () =&gt; {                 resolve();             }         });     }); } \/\/... <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0441\u0446\u0435\u043d\u044b <code>tweens<\/code>. \u0412 \u0435\u0433\u043e \u043c\u0435\u0442\u043e\u0434 <code>add<\/code> \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438:<\/p>\n<ul>\n<li>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>targets<\/code> \u0437\u0434\u0435\u0441\u044c \u0434\u043e\u043b\u0436\u043d\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0442\u0435 \u0438\u0433\u0440\u043e\u0432\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b, \u043a \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u0441\u0441\u044b\u043b\u043a\u0430 <code>this<\/code> \u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043e\u0431\u044a\u0435\u043a\u0442, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0435\u0444\u0430\u0431\u043e\u043c \u0441\u043f\u0440\u0430\u0439\u0442\u0430.<\/li>\n<li>\u0412\u0442\u043e\u0440\u044b\u043c \u0438 \u0442\u0440\u0435\u0442\u044c\u0438\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0442\u043e\u0447\u043a\u0438 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.<\/li>\n<li>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>duration<\/code> \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u2014 600\u043c\u0441.<\/li>\n<li>\u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b <code>ease<\/code> \u0438 <code>easeParams<\/code> \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e\u0442 easing \u0444\u0443\u043d\u043a\u0446\u0438\u044e.<\/li>\n<li>\u0412 \u043f\u043e\u043b\u0435 delay \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0432\u0437\u044f\u0442\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0438 \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u0435\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u043d\u0430 \u0434\u043e\u0441\u043a\u0435. \u042d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u044f\u0447\u0435\u0439\u043a\u0438 \u043d\u0435 \u0432\u044b\u043b\u0435\u0442\u0430\u043b\u0438 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u043a\u0430\u0436\u0434\u0430\u044f \u044f\u0447\u0435\u0439\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0441 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439.<\/li>\n<li>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>onComplete<\/code> \u043c\u044b \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u043c \u043a\u043e\u043b\u0431\u0435\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d \u043f\u043e \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0442\u0432\u0438\u043d\u0430.<\/li>\n<\/ul>\n<p>  \u0420\u0430\u0437\u0443\u043c\u043d\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0442\u0432\u0438\u043d \u0432 \u043f\u0440\u043e\u043c\u0438\u0441, \u0447\u0442\u043e\u0431\u044b \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u043e \u0441\u043e\u0441\u0442\u044b\u043a\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u043a\u043e\u043b\u0431\u0435\u043a \u043c\u044b \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u0432\u044b\u0437\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>resolve<\/code>, \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0449\u0438\u0439 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<p>  <a name=\"section-5-2\"><\/a><\/p>\n<h3><font color=\"#008080\">5.2 \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u0432\u043e\u0440\u043e\u0442\u0430 \u043a\u043b\u0435\u0442\u043a\u0438<\/font><\/h3>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/uc\/d-\/yw\/ucd-yw-nq6a4veixb-npp0mdyqy.gif\"><br \/>  \u0411\u0443\u0434\u0435\u0442 \u0437\u0434\u043e\u0440\u043e\u0432\u043e, \u0435\u0441\u043b\u0438 \u043f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0438 \u044f\u0447\u0435\u0439\u043a\u0438 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u043b\u0441\u044f \u044d\u0444\u0444\u0435\u043a\u0442 \u0435\u0435 \u0440\u0430\u0437\u0432\u043e\u0440\u043e\u0442\u0430 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u043e\u0439. \u041a\u0430\u043a \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f?<\/p>\n<p>  \u041e\u0442\u043a\u0440\u044b\u0442\u0438\u0435 \u044f\u0447\u0435\u0439\u043a\u0438 \u0432 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043c\u0435\u043d\u043e\u0439 \u0444\u0440\u0435\u0439\u043c\u0430 \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 <code>_render<\/code> \u0432\u043e \u0432\u044c\u044e\u0448\u043a\u0435. \u0415\u0441\u043b\u0438 \u043c\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u043e\u0434\u0435\u043b\u0438 \u0432 \u044d\u0442\u043e\u043c \u043c\u0435\u0442\u043e\u0434\u0435, \u043c\u044b \u043f\u043e\u0439\u043c\u0435\u043c, \u0431\u044b\u043b\u0430 \u043b\u0438 \u044f\u0447\u0435\u0439\u043a\u0430 \u043e\u0442\u043a\u0440\u044b\u0442\u0430. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u043a\u043b\u0435\u0442\u043a\u0430 \u0431\u044b\u043b\u0430 \u043e\u0442\u043a\u0440\u044b\u0442\u0430, \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0432\u043c\u0435\u0441\u0442\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0430 \u0440\u0430\u0437\u0432\u043e\u0440\u043e\u0442\u0430.  <\/p>\n<pre><code class=\"javascript\">\/\/ FieldView.ts \/\/... private _onStateChange(): void {     if (this._model.opened) {         this._animateFlip();     } else {         this._render();     } } \/\/... <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 \u0441\u043f\u0440\u0430\u0439\u0442\u0430 \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>scale<\/code>. \u0415\u0441\u043b\u0438 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441 \u0442\u0435\u0447\u0435\u043d\u0438\u0435\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u043a\u0435\u0439\u043b\u0438\u0442\u044c \u0441\u043f\u0440\u0430\u0439\u0442 \u043f\u043e \u043e\u0441\u0438 <code>x<\/code> \u0434\u043e \u043d\u0443\u043b\u044f, \u0432 \u043a\u043e\u043d\u0446\u0435 \u043a\u043e\u043d\u0446\u043e\u0432 \u043e\u043d \u0441\u043e\u0436\u043c\u0435\u0442\u0441\u044f, \u0441\u043e\u0435\u0434\u0438\u043d\u0438\u0432 \u043b\u0435\u0432\u0443\u044e \u0438 \u043f\u0440\u0430\u0432\u0443\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u044b. \u0418 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442, \u0435\u0441\u043b\u0438 \u0441\u043a\u0435\u0439\u043b\u0438\u0442\u044c \u0441\u043f\u0440\u0430\u0439\u0442 \u043f\u043e \u043e\u0441\u0438 <code>x<\/code> \u043e\u0442 \u043d\u0443\u043b\u044f \u0434\u043e \u0435\u0433\u043e \u043f\u043e\u043b\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u044b, \u043c\u044b \u0435\u0433\u043e \u0440\u0430\u0441\u0442\u044f\u043d\u0435\u043c \u0434\u043e \u0435\u0433\u043e \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430. \u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u044d\u0442\u0443 \u043b\u043e\u0433\u0438\u043a\u0443 \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 <code>_animateFlip<\/code>.  <\/p>\n<pre><code class=\"javascript\">\/\/ FieldView.ts \/\/... private _animateFlip(): void {     this._scaleXTo(0).then(() =&gt; {         this._render();         this._scaleXTo(1);     }) } \/\/... <\/code><\/pre>\n<p>  \u041f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0441 \u043c\u0435\u0442\u043e\u0434\u043e\u043c <code>_moveTo<\/code> \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c <code>_scaleTo<\/code>:  <\/p>\n<pre><code class=\"javascript\">\/\/ FieldView.ts \/\/... private _scaleXTo(scaleX: number): Promise&lt;void&gt; {     return new Promise(resolve =&gt; {         this.scene.tweens.add({             targets: this,             scaleX,             ease: 'Elastic.easeInOut',             easeParams: [1, 1],             duration: 150,             onComplete: () =&gt; {                 resolve()             }         });     }); } \/\/... <\/code><\/pre>\n<p>  \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043c\u0435\u0442\u043e\u0434\u0435 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u043c\u044b \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u043a\u0435\u0439\u043b\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0441\u043f\u0440\u0430\u0439\u0442\u0430 \u0432 \u043e\u0431\u0435 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0435\u0433\u043e \u0432\u0442\u043e\u0440\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0412\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u043d\u0430\u043c \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u043f\u043e \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043f\u043e\u0441\u043b\u0435 \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u0431\u0443\u0434\u0435\u043c \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043d\u0430\u0448\u0443 \u0438\u0433\u0440\u0443 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e\u0439, \u0430 \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u043c!:)<br \/>  \u0418\u0441\u043a\u0440\u0435\u043d\u043d\u0435 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044e \u0432\u0441\u0435\u0445 \u0437\u0430 \u0442\u043e, \u0447\u0442\u043e \u0434\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c \u0432\u043c\u0435\u0441\u0442\u0435 \u0441\u043e \u043c\u043d\u043e\u0439 \u0434\u043e \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430!<\/p>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>  \u041a\u043e\u043b\u043b\u0435\u0433\u0438, \u044f \u0431\u0443\u0434\u0443 \u043e\u0447\u0435\u043d\u044c \u0440\u0430\u0434, \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b, \u0438\u0437\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u0438 \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0435 \u0438\u043b\u0438 \u0438\u043d\u044b\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u0432 \u0441\u0432\u043e\u0438\u0445 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445. \u0412\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043a\u043e \u043c\u043d\u0435 \u0441 \u043b\u044e\u0431\u044b\u043c \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u043c \u043a\u0430\u043a \u043f\u043e \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435, \u0442\u0430\u043a \u0438 \u043f\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u043d\u0430 phaser \u0438\u043b\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0432 \u0433\u0435\u0439\u043c\u0434\u0435\u0432\u0435 \u0432 \u0446\u0435\u043b\u043e\u043c. \u042f \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e \u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0438 \u0431\u0443\u0434\u0443 \u0440\u0430\u0434 \u043f\u0440\u0438\u043e\u0431\u0440\u0435\u0441\u0442\u0438 \u043d\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u0430 \u0438 \u043e\u0431\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043e\u043f\u044b\u0442\u043e\u043c!<\/p>\n<p>  \u0410 \u0443 \u043c\u0435\u043d\u044f \u043a \u0432\u0430\u043c \u0435\u0441\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441 \u0443\u0436\u0435 \u0441\u0435\u0439\u0447\u0430\u0441. \u0422\u0430\u043a \u043a\u0430\u043a \u044f \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435\u043c \u0432\u0438\u0434\u0435\u043e \u0443\u0440\u043e\u043a\u043e\u0432 \u043f\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0438\u0433\u0440, \u0443 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043d\u0430\u043a\u043e\u043f\u0438\u043b\u0441\u044f \u0434\u0435\u0441\u044f\u0442\u043e\u043a \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0438\u0433\u0440. \u041a\u0430\u0436\u0434\u0430\u044f \u0438\u0433\u0440\u0430 \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043f\u043e \u0441\u0432\u043e\u0435\u043c\u0443. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u0438\u0433\u0440\u0435 \u043c\u044b \u043a\u043e\u0441\u043d\u0443\u043b\u0438\u0441\u044c \u0442\u0435\u043c\u044b \u0442\u0432\u0438\u043d\u043e\u0432, \u043d\u043e \u0435\u0449\u0435 \u0435\u0441\u0442\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0444\u0438\u0437\u0438\u043a\u0430, tilemap, spine \u0438 \u0434\u0440.<br \/>  \u0412 \u0441\u0432\u044f\u0437\u0438 \u0441 \u044d\u0442\u0438\u043c \u0432\u043e\u043f\u0440\u043e\u0441, \u043f\u0440\u0438\u0448\u043b\u0430\u0441\u044c \u043b\u0438 \u0434\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u0432\u0430\u043c \u043f\u043e \u0434\u0443\u0448\u0435 \u0438, \u0435\u0441\u043b\u0438 \u0434\u0430, \u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043b\u0438 \u0432\u0430\u043c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u0438 \u0434\u0430\u043b\u044c\u0448\u0435 \u0447\u0438\u0442\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u0438, \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u044d\u0442\u043e\u0439, \u043d\u043e \u043f\u0440\u043e \u0434\u0440\u0443\u0433\u0438\u0435 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0438\u0433\u0440\u044b? \u0415\u0441\u043b\u0438 \u043e\u0442\u0432\u0435\u0442 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439, \u044f \u0441 \u0440\u0430\u0434\u043e\u0441\u0442\u044c\u044e \u043f\u0435\u0440\u0435\u0432\u0435\u0434\u0443 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b \u0441\u0432\u043e\u0438\u0445 \u0432\u0438\u0434\u0435\u043e \u0443\u0440\u043e\u043a\u043e\u0432 \u0432 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0443 \u0441 \u0442\u0435\u0447\u0435\u043d\u0438\u0435\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c \u0438 \u043d\u043e\u0432\u044b\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430, \u043d\u043e \u0443\u0436\u0435 \u043f\u043e \u0434\u0440\u0443\u0433\u0438\u043c \u0438\u0433\u0440\u0430\u043c. \u041f\u0440\u0438\u0432\u043e\u0436\u0443 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043e\u043f\u0440\u043e\u0441.<\/p>\n<p>  \u0412\u0441\u0435\u0445 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435! \u0411\u0443\u0434\u0443 \u0440\u0430\u0434 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438 \u0438 \u0434\u043e \u0432\u0441\u0442\u0440\u0435\u0447\u0438!<\/p><\/div>\n<p>               <script class=\"js-mediator-script\">!function(e){function t(t,n){if(!(n in e)){for(var r,a=e.document,i=a.scripts,o=i.length;o--;)if(-1!==i[o].src.indexOf(t)){r=i[o];break}if(!r){r=a.createElement(\"script\"),r.type=\"text\/javascript\",r.async=!0,r.defer=!0,r.src=t,r.charset=\"UTF-8\";var d=function(){var e=a.getElementsByTagName(\"script\")[0];e.parentNode.insertBefore(r,e)};\"[object Opera]\"==e.opera?a.addEventListener?a.addEventListener(\"DOMContentLoaded\",d,!1):e.attachEvent(\"onload\",d):d() } } }t(\"\/\/mediator.mail.ru\/script\/2820404\/\",\"_mediator\")}(window);<\/script>      <br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/476682\/\"> https:\/\/habr.com\/ru\/post\/476682\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html js-mediator-article\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/476682\/\">\u0414\u043e\u0431\u0440\u044b\u0439 \u0434\u0435\u043d\u044c, \u0443\u0432\u0430\u0436\u0430\u0435\u043c\u044b\u0435 \u043a\u043e\u043b\u043b\u0435\u0433\u0438!<br \/>  \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0410\u043b\u0435\u043a\u0441\u0430\u043d\u0434\u0440, \u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a HTML5 \u0438\u0433\u0440.<\/p>\n<p>  \u0412 \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0439, \u043a\u0443\u0434\u0430 \u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u043b \u0441\u0432\u043e\u0435 \u0440\u0435\u0437\u044e\u043c\u0435, \u043c\u043d\u0435 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u043b\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435. \u042f \u0441\u043e\u0433\u043b\u0430\u0441\u0438\u043b\u0441\u044f \u0438, \u0441\u043f\u0443\u0441\u0442\u044f 1 \u0434\u0435\u043d\u044c, \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u0443\u044e \u043f\u043e \u0422\u0417 HTML5 \u0438\u0433\u0440\u0443.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/4t\/ng\/dn\/4tngdnvlxq3izqrpk2nykww2dvs.png\"><\/p>\n<p>  \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u044f \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0441\u044c \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0438\u0433\u0440, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0435\u0433\u043e \u043a\u043e\u0434\u0430, \u044f \u0440\u0435\u0448\u0438\u043b, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0431\u0443\u0447\u0430\u044e\u0449\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e \u043f\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u043c\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0443. \u0418 \u0440\u0430\u0437 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0435 \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u043e\u0446\u0435\u043d\u043a\u0443 \u0438 \u043f\u0440\u0438\u0432\u0435\u043b\u043e \u043a \u043f\u0440\u0438\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u044e \u043d\u0430 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e \u043c\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0438\u043c\u0435\u0435\u0442 \u043f\u0440\u0430\u0432\u043e \u043d\u0430 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u0435 \u0438, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043a\u043e\u043c\u0443-\u043b\u0438\u0431\u043e \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c.<\/p>\n<p>  \u0414\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u0434\u0430\u0441\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0431 \u043e\u0431\u044a\u0435\u043c\u0435 \u0440\u0430\u0431\u043e\u0442, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e\u043c \u0434\u043b\u044f \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0441\u0440\u0435\u0434\u043d\u0435\u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u0437\u0430\u0434\u0430\u043d\u0438\u044f \u043d\u0430 \u043f\u043e\u0437\u0438\u0446\u0438\u044e HTML5 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430. \u041c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0435\u043d \u0432\u0441\u0435\u043c, \u043a\u0442\u043e \u0445\u043e\u0447\u0435\u0442 \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c Phaser. \u0410 \u0435\u0441\u043b\u0438 \u0432\u044b \u0443\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u0435 \u0441 Phaser \u0438 \u043f\u0438\u0448\u0435\u0442\u0435 \u043d\u0430 JS \u2014 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435, \u043a\u0430\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0430 TypeScript.<\/p>\n<p>  \u0418\u0442\u0430\u043a, \u043f\u043e\u0434 \u043a\u0430\u0442\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u043d\u0430 TypeScript!   <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-295126","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/295126","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=295126"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/295126\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=295126"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=295126"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=295126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}