{"id":348713,"date":"2023-06-13T15:01:49","date_gmt":"2023-06-13T15:01:49","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=348713"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=348713","title":{"rendered":"<span>\u0423\u0447\u0438\u043c PixiJS \u043d\u0430 \u0438\u0433\u0440\u0430\u0445<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u043e\u043f\u0438\u0441\u0430\u043b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 13-\u0442\u0438 \u0438\u0433\u0440 \u043d\u0430 <code>PixiJS<\/code>. \u041e\u043a\u043e\u043b\u043e 70% \u0442\u0435\u043a\u0441\u0442\u0430 &#8212; \u044d\u0442\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0438 \u0438\u0433\u0440, \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 &#8212; \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0430 <code>PixiJS<\/code>. \u041f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u043c\u043d\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430, \u0442.\u043a. \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0432\u0435\u0442\u044b \u0434\u043b\u044f <code>PixiJS<\/code> \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0435\u0435 \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c \u0438\u0437 \u0438\u0433\u0440.<\/p>\n<p>\u0421\u0430\u043c\u0430\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0438\u0433\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u0430\u043c\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0438 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439.<\/p>\n<h2>\u041d\u0430 \u0447\u0451\u043c \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c?<\/h2>\n<p>\u0415\u0441\u043b\u0438 \u043c\u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0447\u0442\u043e-\u0442\u043e \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0432 <code>HTMLCanvasElement<\/code> \u0443 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u043f\u0446\u0438\u0439:<\/p>\n<ol>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0438\u043b\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a.<\/p>\n<\/li>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e <code>2d<\/code> \u0438\u043b\u0438 <code>webgl<\/code> \u0432 \u0432\u0438\u0434\u0435 API \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 <code>CanvasRenderingContext2D<\/code>, <code>WebGLRenderingContext<\/code>.<\/p>\n<\/li>\n<\/ol>\n<p>\u0420\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u044f \u0445\u043e\u0447\u0443 \u0434\u0432\u0443\u0445\u043c\u0435\u0440\u043d\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f (\u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b) &#8212; \u0434\u0432\u0443\u0445\u043c\u0435\u0440\u043d\u044b\u0435 \u0438\u0433\u0440\u044b.<\/p>\n<p>\u0412\u043a\u0440\u0430\u0442\u0446\u0435 \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a:<\/p>\n<ul>\n<li>\n<p><code>2d<\/code> \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 &#8212; \u0440\u0438\u0441\u0443\u0435\u0442 \u0432\u0441\u0451 \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u044b\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u043e\u043c <code>CPU<\/code>.<\/p>\n<\/li>\n<li>\n<p><code>webgl<\/code> \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 &#8212; \u0440\u0438\u0441\u0443\u0435\u0442 \u0432\u0441\u0451 \u043d\u0430 \u0432\u0438\u0434\u0435\u043e\u043a\u0430\u0440\u0442\u0435 <code>GPU<\/code>, \u0430 \u0442\u043e\u0447\u043d\u0435\u0435 \u043c\u043d\u043e\u0433\u043e \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u043e\u0432 \u043d\u0430 \u0432\u0438\u0434\u0435\u043e\u043a\u0430\u0440\u0442\u0435 \u0440\u0430\u0441\u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u0438\u0432\u0430\u044e\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0434\u0432\u0443\u0445\u043c\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0443\u043c\u0435\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 <code>2d<\/code> \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442. \u041e\u0434\u043d\u0430\u043a\u043e \u043d\u0438\u0447\u0442\u043e \u043d\u0435 \u043c\u0435\u0448\u0430\u0435\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0434\u0432\u0443\u0445\u043c\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0438 \u043d\u0430 <code>webgl<\/code>. \u0414\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0432\u0438\u0434\u0435\u043e\u043a\u0430\u0440\u0442\u044b \u043d\u0430 \u043f\u043e\u043b\u043d\u0443\u044e \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435 \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>webgl<\/code>.<\/p>\n<p>\u041d\u0443\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u0432\u0435\u0449\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 <code>webgl<\/code>, \u0430 \u0435\u0441\u0442\u044c \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442 \u0432 <code>2d<\/code>. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <a href=\"https:\/\/pixijs.download\/release\/docs\/PIXI.html#BLEND_MODES\" rel=\"noopener noreferrer nofollow\">BLEND_MODES<\/a>, \u0442\u0430\u043a\u0430\u044f \u0432\u0435\u0449\u044c \u0434\u043b\u044f &#171;\u0441\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u044f&#187; \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043d\u0430 <code>webgl<\/code> \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d, \u0437\u0430\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f <code>2d<\/code> \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0442\u0443\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/CanvasRenderingContext2D\/globalCompositeOperation\" rel=\"noopener noreferrer nofollow\">\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439<\/a>.<\/p>\n<p>\u042f \u0445\u043e\u0447\u0443 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0434\u0432\u0443\u0445\u043c\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043d\u0430 <code>webgl<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443.<\/p>\n<h2>\u041f\u043e\u0447\u0435\u043c\u0443 PixiJS ?<\/h2>\n<p>\u0411\u044b\u0441\u0442\u0440\u043e \u043f\u0440\u043e\u0431\u0435\u0436\u0430\u0432\u0448\u0438\u0441\u044c \u043f\u043e \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u043c\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u0443:<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<th>\n<p>\u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435<\/p>\n<\/th>\n<th>\n<p>\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442<\/p>\n<\/th>\n<th>\n<p>\u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0432\u0451\u0437\u0434 \u043d\u0430 github<\/p>\n<\/th>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><a href=\"https:\/\/github.com\/mrdoob\/three.js\/\" rel=\"noopener noreferrer nofollow\">ThreeJS<\/a><\/p>\n<\/td>\n<td>\n<p align=\"left\">webgl<\/p>\n<\/td>\n<td>\n<p align=\"left\">92k<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><a href=\"https:\/\/github.com\/pixijs\/pixijs\" rel=\"noopener noreferrer nofollow\">PixiJS<\/a><\/p>\n<\/td>\n<td>\n<p align=\"left\">2d, webgl<\/p>\n<\/td>\n<td>\n<p align=\"left\">40k<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><a href=\"https:\/\/github.com\/photonstorm\/phaser\" rel=\"noopener noreferrer nofollow\">PhaserJS<\/a><\/p>\n<\/td>\n<td>\n<p align=\"left\">2d, webgl<\/p>\n<\/td>\n<td>\n<p align=\"left\">34.5k<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><a href=\"https:\/\/github.com\/fabricjs\/fabric.js\" rel=\"noopener noreferrer nofollow\">FabricJS<\/a><\/p>\n<\/td>\n<td>\n<p align=\"left\">2d<\/p>\n<\/td>\n<td>\n<p align=\"left\">24.9k<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><a href=\"https:\/\/github.com\/BabylonJS\/Babylon.js\" rel=\"noopener noreferrer nofollow\">BabylonJS<\/a><\/p>\n<\/td>\n<td>\n<p align=\"left\">webgl<\/p>\n<\/td>\n<td>\n<p align=\"left\">20.7k<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><a href=\"https:\/\/github.com\/playcanvas\/engine\" rel=\"noopener noreferrer nofollow\">PlayCanvas<\/a><\/p>\n<\/td>\n<td>\n<p align=\"left\">webgl<\/p>\n<\/td>\n<td>\n<p align=\"left\">8.4k<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0415\u0441\u043b\u0438 \u0431\u044b \u044f \u0445\u043e\u0442\u0435\u043b \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0433\u0440\u0430\u043c\u0438 \u043d\u0430 <code>JavaScript<\/code>, \u0442\u043e <code>PlayCanvas<\/code>, <code>PhaserJS<\/code> \u0438\u043b\u0438 <code>BabylonJS<\/code> \u0441\u043e\u0437\u0434\u0430\u043d\u044b \u0438\u043c\u0435\u043d\u043d\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e. \u041c\u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0438\u0441\u0430\u0442\u044c \u043c\u0435\u043d\u044c\u0448\u0435 \u043a\u043e\u0434\u0430, \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043b\u043e\u043c\u0430\u0442\u044c \u0433\u043e\u043b\u043e\u0432\u0443 \u0433\u0434\u0435 \u0432\u0437\u044f\u0442\u044c \u0434\u0432\u0438\u0436\u043e\u043a \u0434\u043b\u044f \u0444\u0438\u0437\u0438\u043a\u0438 \u0438 \u0442.\u0434.<\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u0431\u043e\u043b\u0435\u0435 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0435 <code>PixiJS<\/code> \/ <code>FabricJS<\/code> \/ <code>ThreeJS<\/code> \u0441\u043e\u0437\u0434\u0430\u043d\u044b \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0438\u0433\u0440. \u042f \u0440\u0435\u0448\u0438\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u043d\u0430 <code>JS<\/code> \u0432\u043d\u0430\u0447\u0430\u043b\u0435. \u0414\u043b\u044f \u0438\u043d\u0434\u0438-\u0438\u0433\u0440 \u043c\u043d\u0435 \u0445\u0432\u0430\u0442\u0438\u0442, \u0430 \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u044b\u0445 <code>AAA<\/code> \u0438\u0433\u0440 \u043c\u043d\u0435 \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u044f\u0437\u044b\u043a &#8212; \u0438 \u0443\u0447\u0438\u0442\u044c <code>JS<\/code> \u0438\u0433\u0440\u043e\u0432\u044b\u0435 \u0434\u0432\u0438\u0436\u043a\u0438 \u0431\u0435\u0437 \u043e\u0441\u043e\u0431\u043e\u0439 \u043d\u0430\u0434\u043e\u0431\u043d\u043e\u0441\u0442\u0438. \u0418\u0437 \u043c\u0438\u043d\u0443\u0441\u043e\u0432, \u043f\u0438\u0441\u0430\u0442\u044c \u0438\u0433\u0440\u044b \u043d\u0430 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0445 \u0431\u043e\u043b\u0435\u0435 \u0437\u0430\u0442\u0440\u0430\u0442\u043d\u043e \u043f\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n<p>\u0423\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u0433\u043e\u0434\u044f\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0432, \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0434\u0432\u0443\u0445\u043c\u0435\u0440\u043d\u043e\u0433\u043e \u0438 \u0442\u0440\u0451\u0445\u043c\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435. \u0410 \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u0441\u0442\u0440\u043e\u0447\u043a\u043e\u0439 \u0432 \u0440\u0435\u0437\u044e\u043c\u0435.<\/p>\n<p>\u0414\u043b\u044f \u0431\u043e\u043b\u0435\u0435-\u043c\u0435\u043d\u0435\u0435 \u0434\u043e\u043b\u0433\u043e\u0438\u0433\u0440\u0430\u044e\u0449\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0432\u0437\u044f\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0435 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u043e\u0435. <code>FabricJS<\/code> &#8212; \u0443\u043c\u0435\u0435\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0434\u043b\u044f <code>NodeJS<\/code>, \u043d\u043e \u043d\u0435 \u0443\u043c\u0435\u0435\u0442 \u0432 <code>webgl<\/code> \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u0430 \u0434\u043b\u044f \u0438\u0433\u0440 \u043d\u0443\u0436\u043d\u043e \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0431\u044b\u0441\u0442\u0440\u043e \u0438 \u043c\u043d\u043e\u0433\u043e. <code>ThreeJS<\/code> &#8212; \u0431\u043e\u043b\u044c\u0448\u0435 \u0434\u043b\u044f \u0442\u0440\u0451\u0445\u043c\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430.<\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u044f \u0432\u0437\u044f\u043b <code>PixiJS<\/code> \u043a\u0430\u043a \u0441\u0430\u043c\u0443\u044e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0443\u044e, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u0443\u044e \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0434\u0432\u0443\u0445\u043c\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043d\u0430 <code>webgl<\/code>.<\/p>\n<p><code>PixiJS<\/code> \u0434\u0430\u0436\u0435 \u0443\u043c\u0435\u0435\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0432 <code>2d<\/code> \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435, \u043d\u043e \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/www.npmjs.com\/package\/pixi.js-legacy\" rel=\"noopener noreferrer nofollow\">pixi.js-legacy<\/a> &#8212; \u044f \u0442\u0430\u043a\u043e\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0443.<\/p>\n<h2>PixiJS \u0432\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<p>\u0412 <code>2016<\/code> \u0433\u043e\u0434\u0443 \u0441\u0430\u043c\u044b\u0439 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0432 \u043c\u0438\u0440\u0435 <code>Chrome<\/code> \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u0451\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c <a href=\"https:\/\/blog.google\/products\/chrome\/flash-and-chrome\/\" rel=\"noopener noreferrer nofollow\">Adobe Flash Player<\/a>. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u0430\u043c\u0435\u043d\u044b \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u043b\u043e\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>HTML5<\/code> \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e:<\/p>\n<ul>\n<li>\n<p><code>2d<\/code> \u0438 <code>webgl<\/code> \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u044b \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/Web_Audio_API\" rel=\"noopener noreferrer nofollow\">Web Audio API<\/a> \u0438 <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/HTMLMediaElement\" rel=\"noopener noreferrer nofollow\">HTMLMediaElement<\/a> \u0434\u043b\u044f \u0437\u0432\u0443\u043a\u0430 \u0438 \u0432\u0438\u0434\u0435\u043e.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/WebSocket\" rel=\"noopener noreferrer nofollow\">WebSocket<\/a> \u0438 <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/WebRTC_API\" rel=\"noopener noreferrer nofollow\">WebRTC API<\/a> \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043a\u043e\u043c\u043c\u0443\u043d\u0438\u043a\u0430\u0446\u0438\u0438 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u0443\u043c\u0430\u044e \u0441\u0432\u043e\u0435\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u0432\u044b\u0445\u043e\u0434 <code>PixiJS<\/code> \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447 &#8212; \u043f\u043e\u043c\u043e\u0433\u043b\u0438 <code>Flash<\/code> \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430 <code>HTML5<\/code>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u0431\u0443\u0441\u043b\u043e\u0432\u0438\u043b\u0438 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442\/\u043a\u043b\u0430\u0441\u0441 \u0432 PixiJS &#8212; \u044d\u0442\u043e <a href=\"https:\/\/pixijs.io\/guides\/basics\/display-object.html\" rel=\"noopener noreferrer nofollow\">DisplayObject<\/a>. \u041d\u043e \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044f \u0435\u0433\u043e \u043d\u0435 \u0431\u0443\u0434\u0443.<\/p>\n<p>\u042f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442\u044b\/\u043a\u043b\u0430\u0441\u0441\u044b \u0443\u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043e\u0442 <code>DisplayObject<\/code>:<\/p>\n<ul>\n<li>\n<p>\u0441\u043f\u0440\u0430\u0439\u0442 <a href=\"https:\/\/pixijs.io\/guides\/basics\/sprites.html\" rel=\"noopener noreferrer nofollow\">Sprite<\/a> \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 (\u0442\u0435\u043a\u0441\u0442\u0443\u0440);<\/p>\n<\/li>\n<li>\n<p>\u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u0440\u0430\u0439\u0442 <a href=\"https:\/\/pixijs.download\/release\/docs\/PIXI.AnimatedSprite.html\" rel=\"noopener noreferrer nofollow\">AnimatedSprite<\/a>, \u0442.\u0435. \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u0435\u043d\u044f\u0435\u0442 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0441\u043f\u0440\u0430\u0439\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430 \u0438\u043b\u0438 \u0432\u0440\u0443\u0447\u043d\u0443\u044e;<\/p>\n<\/li>\n<li>\n<p>\u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0433\u0440\u0430\u0444\u0438\u043a\u0443 <a href=\"https:\/\/pixijs.io\/guides\/basics\/graphics.html\" rel=\"noopener noreferrer nofollow\">Graphics<\/a>, \u0442.\u0435. \u043b\u0438\u043d\u0438\u0438, \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438, \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u044b, \u043c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438, \u0434\u0443\u0433\u0438, \u0430\u0440\u043a\u0438, \u043a\u0440\u0443\u0433\u0438 \u0438 \u0442.\u0434.;<\/p>\n<\/li>\n<li>\n<p>\u0442\u0435\u043a\u0441\u0442 <a href=\"https:\/\/pixijs.io\/guides\/basics\/text.html\" rel=\"noopener noreferrer nofollow\">Text<\/a>;<\/p>\n<\/li>\n<li>\n<p>\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 <a href=\"https:\/\/pixijs.io\/guides\/basics\/containers.html\" rel=\"noopener noreferrer nofollow\">Container<\/a>, \u043a\u0443\u0434\u0430 \u0432\u0441\u0451 \u0432\u044b\u0448\u0435\u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d\u043d\u043e\u0435 \u0431\u0443\u0434\u0443 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u0438 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c (\u043f\u0435\u0440\u0435\u0434\u0432\u0438\u0433\u0430\u0442\u044c, \u043f\u043e\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c, \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043f\u043e\u0434\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c\/\u0437\u0430\u0442\u0435\u043d\u044f\u0442\u044c, \u0441\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0438\u043b\u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c).<\/p>\n<\/li>\n<\/ul>\n<p><code>Container<\/code> \u0445\u0440\u0430\u043d\u0438\u0442 \u0434\u0435\u0440\u0435\u0432\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432-\u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0435\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f <code>parent<\/code>, \u0435\u0433\u043e \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432 <code>children<\/code>. \u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u0442\u043e\u043c\u043a\u0430 <code>addChild()<\/code>, \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u043f\u043e\u0442\u043e\u043c\u043a\u0430 <code>removeChild()<\/code> \u0438\u043b\u0438 \u0441\u0430\u043c\u043e\u0443\u0434\u0430\u043b\u0438\u0442\u044c\u0441\u044f <code>removeFromParent()<\/code>.<\/p>\n<p><code>Sprite<\/code>, <code>AnimatedSprite<\/code>, <code>Graphics<\/code> \u0438 <code>Text<\/code> \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442\u0441\u044f \u043e\u0442 <code>Container<\/code>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u043d\u0438\u0445 \u0442\u043e\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0438 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u0438.<\/p>\n<p>\u0421 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u043e\u0439 \u043d\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432, \u043a\u0430\u0436\u0434\u044b\u0439 \u043f\u043e\u0442\u043e\u043c\u043e\u043a \u043c\u043e\u0436\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u043e\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0441\u043b\u0438 \u0432\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u0443\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u043a\u0443\u0434\u0430-\u0442\u043e \u0435\u0449\u0451, \u0442\u043e \u043e\u043d \u0441\u0430\u043c\u043e\u0443\u0434\u0430\u043b\u0438\u0442\u044c\u0441\u044f \u0438\u0437 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f.<\/p>\n<p>\u0412\u0441\u0451 \u044d\u0442\u043e \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442 <a href=\"https:\/\/learn.javascript.ru\/dom-nodes\" rel=\"noopener noreferrer nofollow\">DOM-\u0434\u0435\u0440\u0435\u0432\u043e<\/a>, \u043d\u0435 \u0442\u0430\u043a \u043b\u0438? \u0410 \u0432\u0435\u0437\u0434\u0435 \u0433\u0434\u0435 \u0435\u0441\u0442\u044c \u0434\u0435\u0440\u0435\u0432\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435\u0440 \u0445\u043e\u0447\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c&#8230; \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, <a href=\"https:\/\/github.com\/facebook\/react\/\" rel=\"noopener noreferrer nofollow\">React<\/a>! \u0422\u0430\u043a\u043e\u0435 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u0432 \u0432\u0438\u0434\u0435 <a href=\"https:\/\/github.com\/pixijs\/pixi-react\" rel=\"noopener noreferrer nofollow\">Pixi React<\/a> &#8212; \u043d\u043e \u044f \u0442\u0430\u043a\u043e\u0435 \u043d\u0435 \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>\u0412\u043a\u0440\u0430\u0442\u0446\u0435 \u043c\u043e\u044f \u0438\u0433\u0440\u0430 \u043d\u0430 <code>PixiJS<\/code> \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e:<\/p>\n<ul>\n<li>\n<p>\u0421\u0446\u0435\u043d\u0430. \u0422.\u043a. \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u0434\u043b\u044f \u0441\u0446\u0435\u043d\u044b \u0432 <code>PixiJS<\/code> \u043d\u0435\u0442, \u0442\u043e \u0441\u0446\u0435\u043d\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u043a\u0443\u0434\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b. \u0415\u0441\u0442\u044c \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f <a href=\"https:\/\/pixijs.download\/release\/docs\/PIXI.Application.html#stage\" rel=\"noopener noreferrer nofollow\">Stage<\/a>.<\/p>\n<details class=\"spoiler\">\n<summary>IScene<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">import { Container, type DisplayObject } from 'pixi.js'  interface IScene extends DisplayObject {   handleUpdate: (deltaMS: number) => void   handleResize: (options: { viewWidth: number, viewHeight: number }) => void }  class DefaultScene extends Container implements IScene {   handleUpdate (): void {}   handleResize (): void {} } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<\/li>\n<li>\n<p>\u041c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0446\u0435\u043d. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u0446\u0435\u043d\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432. \u0421\u0446\u0435\u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u043c\u0435\u043d\u044e. \u0421\u0446\u0435\u043d\u0430 \u0441\u0430\u043c\u043e\u0439 \u0438\u0433\u0440\u044b. \u0414\u043b\u044f \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0446\u0435\u043d\u0430\u043c\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e <code>SceneManager<\/code>.<\/p>\n<details class=\"spoiler\">\n<summary>SceneManager<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">abstract class SceneManager {     private static currentScene: IScene = new DefaultScene()     public static async initialize (): Promise&lt;void> {}     public static async changeScene (newScene: IScene): Promise&lt;void> {       this.currentScene = newScene     } } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u043a\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e <code>Assets<\/code> \u043c\u043e\u0434\u0443\u043b\u044c (\u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a). \u041a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0435\u0437 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0438 \u043f\u0430\u0440\u0441\u0438\u0442 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 <code>.jpg<\/code>, <code>.png<\/code>, <code>.json<\/code>, <code>.tiff<\/code>\/<code>.woff2<\/code>. \u0412 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u043a\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u043e\u0431\u044b\u0447\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u0441\u0446\u0435\u043d\u0443 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. \u0412 \u0441\u0446\u0435\u043d\u0435 \u0440\u0438\u0441\u0443\u044e \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0432 \u0432\u0438\u0434\u0435 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0448\u0438\u0440\u0438\u043d\u0435. \u0412\u0441\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0438\u0442\u044c \u0432 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442\u0435 \u0438 \u043f\u043e\u0442\u043e\u043c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a \u043f\u0435\u0440\u0435\u0434\u0430\u0432 \u0435\u043c\u0443 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442.<\/p>\n<details class=\"spoiler\">\n<summary>\u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442\u0430 \u0432 \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">import { Container, Assets, type ResolverManifest } from 'pixi.js'  const manifest: ResolverManifest = {   bundles: [     {       name: 'bundle-1',       assets: {         spritesheet: '.\/spritesheet.json',         background: '.\/background.png',         font: '.\/font.woff2'       }     }   ] }  class LoaderScene extends Container implements IScene {   async initializeLoader (): Promise&lt;void> {     await Assets.init({ manifest })     await Assets.loadBundle(manifest.bundles.map(bundle => bundle.name), this.downloadProgress)   }    private readonly downloadProgress = (progressRatio: number): void => {} } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<\/li>\n<li>\n<p>\u0414\u0432\u0438\u0436\u043e\u043a \u0438\u043b\u0438 \u044f\u0434\u0440\u043e \u0438\u0433\u0440\u044b <code>World<\/code>\/<code>Game<\/code> &#8212; \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0443 \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u0430, \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 <a href=\"https:\/\/pixijs.download\/release\/docs\/PIXI.Application.html\" rel=\"noopener noreferrer nofollow\">Application<\/a> \u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0443\u0436\u0435 \u0433\u043e\u0442\u043e\u0432\u044b\u0439, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0432 \u0441\u0446\u0435\u043d\u0443, \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430 <a href=\"https:\/\/pixijs.download\/release\/docs\/PIXI.Ticker.html\" rel=\"noopener noreferrer nofollow\">Ticker<\/a>, \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f <code>resize<\/code>, <code>pointer...<\/code>, <code>key...<\/code>.<\/p>\n<details class=\"spoiler\">\n<summary>World\/Game<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">import { type Application } from 'pixi.js'  class World {   public app: Application&lt;HTMLCanvasElement>   constructor ({ app }: { app: Application&lt;HTMLCanvasElement> }) {     this.app = app     this.app.ticker.add(this.handleAppTick)     this.container.on('pointertap', this.handleClick)   }    handleAppTick = (): void => {}   handleClick = (): void => {} } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<\/li>\n<li>\n<p>\u041b\u044e\u0431\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u0438\u0433\u0440\u0435 \u043c\u043e\u0436\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u0451 \u0442\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u0447\u0442\u043e \u0438 \u044f\u0434\u0440\u043e \u0438\u0433\u0440\u044b, \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0431\u043e\u043b\u044c\u0448\u0435\u043c \u0438\u043b\u0438 \u043c\u0435\u043d\u044c\u0448\u0435\u043c \u043e\u0431\u044a\u0451\u043c\u0435. \u0417\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 <code>Application<\/code>.<\/p>\n<details class=\"spoiler\">\n<summary>\u043f\u0440\u0438\u043c\u0435\u0440 StartModal \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">import { Container, Graphics, Text, Texture } from 'pixi.js'  class StartModal extends Container {   public background!: Graphics   public text!: Text   public icon!: Sprite   constructor (texture: Texture) {     super()     this.setup(texture)     this.draw()   }    setup (texture: Texture): void {     this.background = new Graphics()     this.addChild(this.background)      this.text = new Text('\u041f\u0440\u0438\u0432\u0435\u0442 Habr!')     this.addChild(this.text)      this.icon = new Sprite(texture)     this.addChild(this.icon)   }    draw (): void {     this.background.beginFill(0xff00ff)     this.background.drawRoundedRect(0, 0, 500, 500, 5)     this.background.endFill()   } } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<\/li>\n<\/ul>\n<h2>\u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/h2>\n<p>\u0414\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u0433\u0440 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u0437 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430. \u0420\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c \u043a\u043e\u0434 \u043d\u0430 \u0444\u0430\u0439\u043b\u044b \u0438 \u043c\u043e\u0434\u0443\u043b\u0438. \u041f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438  \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>import<\/code> \u0438 <code>export<\/code>. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u043a\u043e\u0434\u0430 \u0438 \u0430\u0432\u0442\u043e\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435. \u0421\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0432\u0441\u0435 \u0444\u0430\u0439\u043b\u044b \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u043e\u043c (<code>bundler<\/code>). \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e (<code>TypeScript<\/code>). \u0412 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c (<code>compile<\/code>) \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u0444\u0430\u0439\u043b \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c (<code>hot-reload<\/code>) \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u043a\u043e\u0433\u0434\u0430 \u044f \u043f\u043e\u043c\u0435\u043d\u044f\u043b \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434.<\/p>\n<p><a href=\"https:\/\/github.com\/microsoft\/TypeScript\" rel=\"noopener noreferrer nofollow\">TypeScript<\/a> (<code>91.4k<\/code> \u0437\u0432\u0451\u0437\u0434) \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0432\u0441\u0435\u043c\u0435\u0441\u0442\u043d\u043e \u0434\u043b\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<p><a href=\"https:\/\/github.com\/webpack\/webpack\" rel=\"noopener noreferrer nofollow\">Webpack<\/a> (<code>61.3k<\/code> \u0437\u0432\u0451\u0437\u0434) \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0434\u043b\u044f \u0440\u0435\u0436\u0438\u043c\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 <a href=\"https:\/\/github.com\/webpack\/webpack-dev-server\" rel=\"noopener noreferrer nofollow\">Webpack Dev Server<\/a> (<code>7.6k<\/code> \u0437\u0432\u0451\u0437\u0434). <a href=\"https:\/\/github.com\/jantimon\/html-webpack-plugin\" rel=\"noopener noreferrer nofollow\">HTML Webpack Plugin <\/a> (<code>10.5k<\/code> \u0437\u0432\u0451\u0437\u0434) \u0434\u043b\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u0432\u0445\u043e\u0434\u0430 (\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u0431\u043e\u0440\u043a\u0438).<\/p>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u043e\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u0438 \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c\u0441\u044f <a href=\"https:\/\/github.com\/eslint\/eslint\" rel=\"noopener noreferrer nofollow\">ESLint<\/a> (<code>22.7k<\/code> \u0437\u0432\u0451\u0437\u0434) \u0441\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c \u043a\u043e\u043d\u0444\u0438\u0433\u043e\u043c \u0434\u043b\u044f \u0442\u0430\u0439\u043f\u0441\u043a\u0440\u0438\u043f\u0442\u0430 <a href=\"https:\/\/github.com\/standard\/eslint-config-standard-with-typescript\" rel=\"noopener noreferrer nofollow\">eslint-config-standard-with-typescript <\/a>. \u0424\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c <code>Visual Studio Code<\/code> \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044f <code>ESLint<\/code>.<\/p>\n<p>\u0414\u043b\u044f \u043b\u043e\u0433\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u043e\u0437\u044c\u043c\u0443 <a href=\"https:\/\/github.com\/debug-js\/debug\" rel=\"noopener noreferrer nofollow\">Debug<\/a> \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 (<code>10.7k<\/code> \u0437\u0432\u0451\u0437\u0434).<\/p>\n<p><code>PixiJS<\/code> \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0435\u0437 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0438 \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u0432 &#8212; \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430. \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e <code>HTML<\/code> \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0432\u043e\u0436\u0443 \u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c\u0443, \u043b\u044e\u0431\u044b\u0435 \u044d\u043a\u0440\u0430\u043d\u044b\/\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u0432 \u0438\u0433\u0440\u0435 \u0434\u0435\u043b\u0430\u044e \u043d\u0430 <code>PixiJS<\/code>. \u0412\u0441\u0435 \u0438\u0433\u0440\u044b \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 <code>Mobile\u200c \u200cFirst\u200c<\/code> \u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e. \u0412\u0441\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432 \u0432 \u043f\u0430\u043f\u043a\u0435 <code>src-texture<\/code>. \u0412\u0441\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u043a\u0430\u0440\u0442\u044b \u0443\u0440\u043e\u0432\u043d\u0435\u0439 \u0432 \u043f\u0430\u043f\u043a\u0435 <code>src-tiled<\/code>.<\/p>\n<p>\u0418\u0442\u0430\u043a, <a href=\"https:\/\/pixijs.io\/guides\/index.html\" rel=\"noopener noreferrer nofollow\">\u0432\u043e\u043e\u0440\u0443\u0436\u0438\u0432\u0448\u0438\u0441\u044c<\/a> <a href=\"https:\/\/github.com\/kittykatattack\/learningPixi\" rel=\"noopener noreferrer nofollow\">\u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438<\/a> <a href=\"https:\/\/www.pixijselementals.com\/\" rel=\"noopener noreferrer nofollow\">\u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430\u043c\u0438<\/a> \u043f\u043e <code>PixiJS<\/code> \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u044e \u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435.<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435: \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u0445\u043e\u0434\u044f \u0438\u0437 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430, \u043e\u0434\u043d\u0430\u043a\u043e \u044f \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0432\u0441\u0451 \u043a\u0430\u043a \u0435\u0441\u0442\u044c. \u041f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e-\u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435.<\/p>\n<h2>\u0418\u0433\u0440\u0430 01: \u0424\u0435\u0440\u043c\u0430<\/h2>\n<h3>\u0424\u0435\u0440\u043c\u0430: \u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435<\/h3>\n<p>\u0424\u0435\u0440\u043c\u0430 &#8212; \u0438\u0433\u0440\u0430 \u0433\u0434\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0440\u0430\u0449\u0438\u0432\u0430\u0442\u044c \u043a\u043e\u0440\u043c \u0434\u043b\u044f \u043f\u0442\u0438\u0446 \u0438 \u0436\u0438\u0432\u043e\u0442\u043d\u044b\u0445, \u0430 \u0441 \u0436\u0438\u0432\u043e\u0442\u043d\u044b\u0445 \u0438 \u043f\u0442\u0438\u0446 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0432\u0441\u044f\u043a\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0438 \u043f\u0440\u043e\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u0445. \u0418 \u0442\u0430\u043a \u043f\u043e \u043a\u0440\u0443\u0433\u0443.<\/p>\n<p>\u0412\u043e\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0444\u0435\u0440\u043c\u044b:<\/p>\n<ul>\n<li>\n<p>\u043f\u043e\u043b\u0435 \u0444\u0435\u0440\u043c\u044b <code>8x8<\/code> \u043a\u043b\u0435\u0442\u043e\u043a;<\/p>\n<\/li>\n<li>\n<p>\u043d\u0430 \u043a\u043b\u0435\u0442\u043a\u0435 \u043c\u043e\u0433\u0443\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438: \u043f\u0448\u0435\u043d\u0438\u0446\u0430, \u043a\u0443\u0440\u0438\u0446\u0430, \u043a\u043e\u0440\u043e\u0432\u0430, \u043b\u0438\u0431\u043e \u043a\u043b\u0435\u0442\u043a\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0443\u0441\u0442\u043e\u0439.<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435:<\/p>\n<ul>\n<li>\n<p>\u043f\u0448\u0435\u043d\u0438\u0446\u0430 \u0432\u044b\u0440\u0430\u0441\u0442\u0430\u0435\u0442 \u0437\u0430 <code>10<\/code> \u0441\u0435\u043a, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0443\u0440\u043e\u0436\u0430\u0439, \u0437\u0430\u0442\u0435\u043c \u0440\u043e\u0441\u0442 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0437\u0430\u043d\u043e\u0432\u043e;<\/p>\n<\/li>\n<li>\n<p>\u043f\u0448\u0435\u043d\u0438\u0446\u0435\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043a\u043e\u0440\u043c\u0438\u0442\u044c \u043a\u0443\u0440\u0438\u0446\u0443 \u0438 \u043a\u043e\u0440\u043e\u0432\u0443;<\/p>\n<\/li>\n<li>\n<p>\u0435\u0441\u043b\u0438 \u0435\u0434\u044b \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e, \u0442\u043e \u043a\u0443\u0440\u0438\u0446\u0430 \u043d\u0435\u0441\u0451\u0442 \u044f\u0439\u0446\u0430, \u0430 \u043a\u043e\u0440\u043e\u0432\u0430 \u0434\u0430\u0451\u0442 \u043c\u043e\u043b\u043e\u043a\u043e;<\/p>\n<\/li>\n<li>\n<p>\u044f\u0439\u0446\u0430 \u0438 \u043c\u043e\u043b\u043e\u043a\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0434\u0430\u0442\u044c, \u043f\u043e\u043b\u0443\u0447\u0438\u0432 \u043f\u0440\u0438\u0431\u044b\u043b\u044c.<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u043d\u044b\u0439 \u043f\u043e\u0438\u0441\u043a \u043f\u043e \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0443 \u043d\u0435 \u0434\u0430\u043b \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430. \u0424\u0435\u0440\u043c\u044b \u043d\u0435 \u0442\u0430\u043a \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b \u0434\u043b\u044f open-source \u0438\u0433\u0440 \u043d\u0430 <code>JS<\/code>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0435\u043b\u0430\u044e \u0432\u0441\u0451 \u0441 \u043d\u0443\u043b\u044f.<\/p>\n<h3>\u0424\u0435\u0440\u043c\u0430: \u041f\u043e\u0438\u0441\u043a \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/h3>\n<p>\u041a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u0435 \u043e\u0447\u0435\u043d\u044c \u043c\u0430\u043b\u043e. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u044d\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f \u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 <a href=\"https:\/\/github.com\/openai\/shap-e\" rel=\"noopener noreferrer nofollow\">\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u043d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u044c<\/a>.<\/p>\n<p>\u0423\u0434\u0430\u043b\u043e\u0441\u044c \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0438\u043a\u043e\u043d\u043a\u0438: <a href=\"https:\/\/thenounproject.com\/icon\/corn-1838227\/\" rel=\"noopener noreferrer nofollow\">\u0437\u0435\u0440\u043d\u043e (\u043a\u0443\u043a\u0443\u0440\u0443\u0437\u0430)<\/a>, <a href=\"https:\/\/thenounproject.com\/icon\/egg-153392\/\" rel=\"noopener noreferrer nofollow\">\u044f\u0439\u0446\u043e<\/a>, <a href=\"https:\/\/thenounproject.com\/icon\/money-1524558\/\" rel=\"noopener noreferrer nofollow\">\u0434\u0435\u043d\u044c\u0433\u0438 (\u043c\u0435\u0448\u043e\u043a \u0441 \u0434\u0435\u043d\u044c\u0433\u0430\u043c\u0438)<\/a> \u0438 <a href=\"https:\/\/thenounproject.com\/icon\/cow-milk-3263282\/\" rel=\"noopener noreferrer nofollow\">\u043c\u043e\u043b\u043e\u043a\u043e<\/a>.<\/p>\n<p><a href=\"https:\/\/butterymilk.itch.io\/tiny-wonder-farm-asset-pack\" rel=\"noopener noreferrer nofollow\">\u0421\u043f\u0440\u0430\u0439\u0442 (\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435) \u0442\u0440\u0430\u0432\u044b<\/a> \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0439 \u043a\u043b\u0435\u0442\u043a\u0435 \u0444\u0435\u0440\u043c\u044b \u0431\u0443\u0434\u0435\u0442 \u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439.<\/p>\n<p>\u0421 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438 \u0441\u043f\u0440\u0430\u0439\u0442\u0430\u043c\u0438 (\u043c\u0430\u0441\u0441\u0438\u0432\u043e\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439) \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u043d\u043e \u044f \u0442\u043e\u0436\u0435 \u043d\u0430\u0448\u0451\u043b <a href=\"https:\/\/opengameart.org\/sites\/default\/files\/chicken_eat.png\" rel=\"noopener noreferrer nofollow\">\u043a\u0443\u0440\u0438\u0446\u0443<\/a>, <a href=\"https:\/\/opengameart.org\/sites\/default\/files\/cow_eat.png\" rel=\"noopener noreferrer nofollow\">\u043a\u043e\u0440\u043e\u0432\u0443<\/a> \u0438 <a href=\"https:\/\/danaida.itch.io\/free-growing-plants-pack-32x32\" rel=\"noopener noreferrer nofollow\">\u0437\u0435\u0440\u043d\u043e<\/a>.<\/p>\n<p>\u0412\u0441\u0435 \u0441\u043f\u0440\u0430\u0439\u0442\u044b \u043e\u0431\u044b\u0447\u043d\u043e \u0441\u043a\u043b\u0435\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u043e\u0434\u0438\u043d \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u0444\u0430\u0439\u043b. \u0412 \u044d\u0442\u043e\u043c \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0441\u043c\u044b\u0441\u043b\u0430:<\/p>\n<ol>\n<li>\n<p>\u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u0430\u0438\u0432\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u043e\u0432 \u0441\u0440\u0430\u0437\u0443 \u0447\u0435\u0440\u0435\u0437 HTTP 1.1 &#8212; \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043c\u043d\u043e\u0433\u043e \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0439, \u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0435\u0441\u0442\u044c <a href=\"https:\/\/stackoverflow.com\/questions\/985431\/max-parallel-http-connections-in-a-browser\" rel=\"noopener noreferrer nofollow\">\u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u043d\u0430 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0445 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0439<\/a>.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0442\u0435\u043a\u0441\u0442\u0443\u0440 \u0432 \u043f\u0430\u043c\u044f\u0442\u044c \u0432\u0438\u0434\u0435\u043e\u043a\u0430\u0440\u0442\u044b <a href=\"https:\/\/gamedev.stackexchange.com\/questions\/7069\/2d-graphics-why-use-spritesheets\" rel=\"noopener noreferrer nofollow\">\u043b\u0443\u0447\u0448\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0432\u0441\u0451 \u043e\u0434\u043d\u0438\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c\/\u0442\u0435\u043a\u0441\u0442\u0443\u0440\u043e\u0439<\/a>.<\/p>\n<\/li>\n<\/ol>\n<p>\u0417\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a \u0432 <code>PixiJS<\/code> \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0439 \u0430\u0442\u043b\u0430\u0441 (<code>Spritesheet<\/code>) \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 <code>.json<\/code>. <code>PixiJS<\/code> \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0444\u0430\u0439\u043b\u0430 \u043f\u043e\u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0430\u0442\u043b\u0430\u0441\u0430, \u043f\u0443\u0442\u044c \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043d \u0432 \u043f\u043e\u043b\u0435 <code>image<\/code>. \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043e\u0431\u043b\u044e\u0434\u0430\u0442\u044c <a href=\"https:\/\/pixijs.io\/guides\/basics\/sprite-sheets.html\" rel=\"noopener noreferrer nofollow\">\u0441\u0445\u0435\u043c\u0443 \u0432\u043d\u0443\u0442\u0440\u0438 json \u0444\u0430\u0439\u043b\u0430<\/a>:<\/p>\n<details class=\"spoiler\">\n<summary>JSON \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u043e\u0433\u043e \u0430\u0442\u043b\u0430\u0441\u0430<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"json\">{   \"frames\": {     \"frame-name-00.png\": {       \"frame\": { \"x\": 0, \"y\": 0, \"w\": 100, \"h\": 50 },       \"rotated\": false,       \"trimmed\": false,       \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 100, \"h\": 50 },       \"sourceSize\": { \"w\": 100, \"h\": 50 },       \"pivot\": { \"x\": 0, \"y\": 0 }     }   },   \"animations\": {     \"animation-name-00\": [       \"frame-name-00.png\",       \"frame-name-01.png\",       \"frame-name-02.png\"     ],   },   \"meta\": {     \"app\": \"...\",     \"version\": \"...\",     \"image\": \"spritesheet.png\",     \"format\": \"RGBA8888\",     \"size\": {       \"w\": 200,       \"h\": 200     },     \"scale\": 1   } } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0412\u0440\u0443\u0447\u043d\u0443\u044e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c <code>.json<\/code> \u0444\u0430\u0439\u043b \u0432\u044b\u0448\u0435\u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d\u043d\u043e\u0439 \u0441\u0445\u0435\u043c\u044b \u044f \u043d\u0435 \u0431\u0443\u0434\u0443, \u0430 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043e\u0439. \u041d\u0430 \u0441\u0430\u0439\u0442\u0435 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"http:\/\/renderhjs.net\/shoebox\/\" rel=\"noopener noreferrer nofollow\">ShoeBox<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/www.codeandweb.com\/texturepacker\" rel=\"noopener noreferrer nofollow\">TexturePacker<\/a>. \u0422.\u043a. \u044f \u0440\u0430\u0431\u043e\u0442\u0430\u044e \u0432 <code>Linux<\/code>, \u0442\u043e \u043c\u043d\u0435 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e <code>TexturePacker<\/code>. \u041e\u0434\u043d\u0430\u043a\u043e \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b &#171;\u043f\u043e\u0440\u0442\u0438\u0442&#187; \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u0444\u0430\u0439\u043b, \u0435\u0441\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0435 \u043c\u043d\u0435 \u043e\u043f\u0446\u0438\u0438, \u0437\u0430\u043c\u0435\u043d\u044f\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0435\u0433\u043e \u0447\u0430\u0441\u0442\u044c \u043a\u0440\u0430\u0441\u043d\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c (\u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043f\u044b\u0442\u0430\u044f\u0441\u044c \u0441\u0442\u0438\u043c\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u043e\u043a\u0443\u043f\u0430\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0443):<\/p>\n<details class=\"spoiler\">\n<summary>Texture Packer &#8212; \u044d\u043a\u0441\u043f\u043e\u0440\u0442<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/28d\/2a3\/5ec\/28d2a35ec59e8dfcfcb6ab6cbc6f9332.png\" alt=\"Texture Packer - \u044d\u043a\u0441\u043f\u043e\u0440\u0442\" width=\"635\" height=\"529\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/28d\/2a3\/5ec\/28d2a35ec59e8dfcfcb6ab6cbc6f9332.png\"\/><\/p>\n<div><figcaption>Texture Packer &#8212; \u044d\u043a\u0441\u043f\u043e\u0440\u0442<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0422.\u0435. \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0443 \u0432 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u043d\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u0445\u043e\u0442\u044f \u043c\u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b: \u0441\u043e\u0431\u0440\u0430\u0442\u044c <code>.json<\/code>, \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043f\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0439 <code>.png<\/code>, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043e\u0442\u0441\u0442\u0443\u043f (<code>padding<\/code>) 1 \u043f\u0438\u043a\u0441\u0435\u043b\u044c \u043a \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0444\u0440\u0435\u0439\u043c\u0443 (\u043a\u0430\u0434\u0440\u0443).<\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u043d\u0430\u0448\u0435\u043b \u0434\u0440\u0443\u0433\u0443\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0443 <a href=\"https:\/\/github.com\/odrick\/free-tex-packer\" rel=\"noopener noreferrer nofollow\">Free texture packer<\/a>, \u0442\u043e\u0436\u0435 \u043f\u043e\u0434 <code>Linux<\/code> \u0438 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u0443\u044e.<br \/>\u0411\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0435 <code>.json<\/code> \u0438 <code>.png<\/code> \u0444\u0430\u0439\u043b\u044b \u0434\u043b\u044f <code>PixiJS<\/code>.<\/p>\n<p>\u0418\u0437 \u043c\u0438\u043d\u0443\u0441\u043e\u0432: \u043d\u0435 \u0443\u043c\u0435\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c\u0438 &#8212; \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u0444\u0440\u0435\u0439\u043c\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0447\u0430\u0441\u0442\u0432\u0443\u044e\u0442 \u0432 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 (\u0441\u043c\u043e\u0442\u0440\u0438 \u043f\u043e\u043b\u0435 <code>animations<\/code>).<\/p>\n<p>\u0410 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 \u043d\u0435 \u0443\u043c\u0435\u0435\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 <a href=\"https:\/\/github.com\/odrick\/free-tex-packer\/issues\/72\" rel=\"noopener noreferrer nofollow\">\u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435 \u0444\u0430\u0439\u043b\u043e\u0432<\/a>, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u043c \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0435, \u0442\u0430\u043a \u0447\u0442\u043e \u0438\u043c\u0435\u0439\u0442\u0435 \u044d\u0442\u043e \u0432\u0432\u0438\u0434\u0443, \u043a\u043e\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442\u0435 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u043c\u043e\u0439 \u0444\u0430\u0439\u043b \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0444\u0430\u0439\u043b \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u0438 \u043f\u043e\u0434\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043f\u0443\u0442\u0438 \u0432\u0440\u0443\u0447\u043d\u0443\u044e.<\/p>\n<p>\u0412\u0441\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0444\u0440\u0435\u0439\u043c\u044b \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0440\u0435\u0437\u0430\u0442\u044c \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u043e\u043f\u0446\u0438\u044f:<\/p>\n<details class=\"spoiler\">\n<summary>Free Texture Packer &#8212; \u043e\u043f\u0446\u0438\u044f \u043f\u043e\u0440\u0435\u0437\u0430\u0442\u044c \u043d\u0430 \u0444\u0440\u0435\u0439\u043c\u044b<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/aae\/a44\/74a\/aaea4474a765c9093ab5ca7f9599352f.png\" alt=\"Free Texture Packer - \u043e\u043f\u0446\u0438\u044f \u043f\u043e\u0440\u0435\u0437\u0430\u0442\u044c \u043d\u0430 \u0444\u0440\u0435\u0439\u043c\u044b\" width=\"309\" height=\"187\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/aae\/a44\/74a\/aaea4474a765c9093ab5ca7f9599352f.png\"\/><\/p>\n<div><figcaption>Free Texture Packer &#8212; \u043e\u043f\u0446\u0438\u044f \u043f\u043e\u0440\u0435\u0437\u0430\u0442\u044c \u043d\u0430 \u0444\u0440\u0435\u0439\u043c\u044b<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0417\u0430\u0442\u0435\u043c \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u043d\u0443\u0436\u043d\u044b\u0439 \u043d\u0430\u043c \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0440\u0435\u0439\u043c\u0430 \u0438 \u0440\u0435\u0436\u0435\u043c:<\/p>\n<details class=\"spoiler\">\n<summary>Free Texture Packer &#8212; \u043d\u0430\u0440\u0435\u0437\u043a\u0430<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/4c8\/637\/de0\/4c8637de0b191f867520754e84e89648.png\" alt=\"Free Texture Packer - \u043d\u0430\u0440\u0435\u0437\u043a\u0430\" width=\"660\" height=\"490\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/4c8\/637\/de0\/4c8637de0b191f867520754e84e89648.png\"\/><\/p>\n<div><figcaption>Free Texture Packer &#8212; \u043d\u0430\u0440\u0435\u0437\u043a\u0430<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432\u0441\u0435 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u043f\u0440\u043e\u0435\u043a\u0442, \u0438 \u043f\u043e\u0434\u0433\u043e\u0442\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0435 \u0444\u0430\u0439\u043b\u044b:<\/p>\n<details class=\"spoiler\">\n<summary>Free Texture Packer &#8212; \u043f\u0440\u043e\u0435\u043a\u0442<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/dfb\/3f8\/879\/dfb3f88791b692c31fa4a9d8755302bf.png\" alt=\"Free Texture Packer - \u043f\u0440\u043e\u0435\u043a\u0442\" width=\"1297\" height=\"716\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/dfb\/3f8\/879\/dfb3f88791b692c31fa4a9d8755302bf.png\"\/><\/p>\n<div><figcaption>Free Texture Packer &#8212; \u043f\u0440\u043e\u0435\u043a\u0442<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u041a \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0444\u0440\u0435\u0439\u043c\u0443 \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c 1 \u043f\u0438\u043a\u0441\u0435\u043b\u044c \u043e\u0442\u0441\u0442\u0443\u043f\u0430, <a href=\"https:\/\/webglfundamentals.org\/webgl\/lessons\/webgl-qna-how-to-prevent-texture-bleeding-with-a-texture-atlas.html\" rel=\"noopener noreferrer nofollow\">\u0438\u0437-\u0437\u0430 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0438 \u0440\u0430\u0431\u043e\u0442\u044b GPU<\/a>.<\/p>\n<p>\u0412\u0441\u0435 \u0444\u0430\u0439\u043b\u044b \u0434\u043b\u044f <code>Free Texture Packer<\/code> \u044f \u0431\u0443\u0434\u0443 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u043f\u0430\u043f\u043a\u0435 <code>src-texture<\/code>.<\/p>\n<h3>\u0424\u0435\u0440\u043c\u0430: \u041c\u0430\u043a\u0435\u0442<\/h3>\n<p>\u0412 \u0441\u0430\u043c\u043e\u043c \u043d\u0430\u0447\u0430\u043b\u0435 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u044e \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043a\u043b\u0430\u0441\u0441\u0430 <code>Application<\/code>, \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-farm-game\/blob\/5724de2e074c7df3ccfcf74173f75754ce0e8a29\/src\/app.ts\" rel=\"noopener noreferrer nofollow\">\u0434\u0432\u0438\u0436\u043e\u043a \u0438\u0433\u0440\u044b <\/a><code>World<\/code>:<\/p>\n<details class=\"spoiler\">\n<summary>Application<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">import { Application } from 'pixi.js'  async function run (): Promise&lt;void> {   const gameLoader = new GameLoader()   await gameLoader.loadAll()   const app = new Application({     width: window.innerWidth,     height: window.innerHeight,     backgroundColor: 0xe6e7ea,     resizeTo: window   })   const world = new World({ app, gameLoader })   world.setupLayout() }  run().catch(console.error) <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u044e \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u043c\u0430\u043a\u0435\u0442.<\/p>\n<details class=\"spoiler\">\n<summary>\u041c\u0430\u043a\u0435\u0442 \u0444\u0435\u0440\u043c\u044b<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/afe\/7fd\/627\/afe7fd627fcc3e4cd8437e613bc8e71f.png\" alt=\"\u041c\u0430\u043a\u0435\u0442 \u0444\u0435\u0440\u043c\u044b\" width=\"698\" height=\"360\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/afe\/7fd\/627\/afe7fd627fcc3e4cd8437e613bc8e71f.png\"\/><\/p>\n<div><figcaption>\u041c\u0430\u043a\u0435\u0442 \u0444\u0435\u0440\u043c\u044b<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0421\u0432\u0435\u0440\u0445\u0443 \u0431\u0443\u0434\u0435\u0442 \u043f\u0430\u043d\u0435\u043b\u044c \u0441\u0442\u0430\u0442\u0443\u0441\u0430 <code>StatusBar<\/code>. \u0413\u0434\u0435 \u0431\u0443\u0434\u0443 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0434\u0435\u043d\u0435\u0433, \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u043e\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0443\u0440\u043e\u0436\u0430\u044f \u0438 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432: \u0437\u0435\u0440\u043d\u0430, \u044f\u0438\u0446, \u043c\u043e\u043b\u043e\u043a\u0430. \u0418\u043a\u043e\u043d\u043a\u0430 \u0440\u0435\u0441\u0443\u0440\u0441\u0430 \u0438 \u0440\u044f\u0434\u043e\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e.<\/p>\n<p>\u041f\u043e\u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0433\u0440\u043e\u0432\u043e\u0435 \u043f\u043e\u043b\u0435 <code>FarmGrid<\/code> &#8212; <code>8\u04458<\/code> \u044f\u0447\u0435\u0435\u043a.<\/p>\n<p>\u0412\u043d\u0438\u0437\u0443 \u0431\u0443\u0434\u0435\u0442 \u043f\u0430\u043d\u0435\u043b\u044c \u043f\u043e\u043a\u0443\u043f\u043a\u0438 <code>ShopBar<\/code>: \u0434\u043b\u044f \u043f\u043e\u043a\u0443\u043f\u043a\u0438 \u0437\u0435\u0440\u043d\u0430, \u043a\u0443\u0440\u0438\u0446\u044b \u0438\u043b\u0438 \u043a\u043e\u0440\u043e\u0432\u044b.<\/p>\n<p>\u0414\u043b\u044f \u0443\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0440\u0435\u0448\u0438\u043b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u0443\u044e \u044f\u0447\u0435\u0439\u043a\u0443, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u0443\u044e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-farm-game\/blob\/5724de2e074c7df3ccfcf74173f75754ce0e8a29\/src\/models\/Tile.ts\" rel=\"noopener noreferrer nofollow\">\u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0436\u0438\u043c\u0430\u0442\u044c<\/a> &#8212; \u043a\u0430\u043a \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443.<\/p>\n<details class=\"spoiler\">\n<summary>\u0423\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u0430\u044f \u044f\u0447\u0435\u0439\u043a\u0430<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">import { Container, Graphics } from 'pixi.js'  class Tile extends Container {    public graphics!: Graphics   constructor () {     super()     this.graphics = new Graphics()     this.addChild(this.graphics)      this.eventMode = 'static'     this.cursor = 'pointer'     this.on('mouseover', this.handleMouseOver)     this.on('mouseout', this.handleMouseOut)     this.on('pointertap', this.handleClick)   }    handleClick = (): void => {}   handleMouseOver = (): void => {}   handleMouseOut = (): void => {} } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c <code>eventMode = 'static'<\/code>.<\/p>\n<details class=\"spoiler\">\n<summary>PixiJS \u0441\u043e\u0432\u0435\u0442 01: \u0421\u043e\u0431\u044b\u0442\u0438\u044f \u043c\u044b\u0448\u0438 \u0438 \u0441\u0435\u043d\u0441\u043e\u0440\u043d\u044b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f  <\/summary>\n<div class=\"spoiler__content\">\n<p>\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>pointer...<\/code> \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0432\u043c\u0435\u0441\u0442\u043e <code>mouse...<\/code> \u0438\u043b\u0438 <code>touch...<\/code>. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c \u043e\u0434\u043d\u043e \u043e\u0442 \u0434\u0440\u0443\u0433\u043e\u0433\u043e, \u0442\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>pointerType<\/code>:<\/p>\n<pre><code class=\"typescript\">import { type FederatedPointerEvent } from 'pixi.js'  this.on('pointerdown', (e: FederatedPointerEvent) => {   if (e.pointerType === 'mouse') {         \/\/ e.pointerId   } else if (e.pointerType === 'touch') {     \/\/ e.pointerId   } }) <\/code><\/pre>\n<p>\u0414\u043b\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043c\u044b\u0448\u0438, <code>pointerId<\/code> \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435. \u0414\u043b\u044f \u0441\u0435\u043d\u0441\u043e\u0440\u043d\u044b\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 <code>pointerId<\/code> \u0431\u0443\u0434\u0435\u0442 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f (\u043e\u0431\u044b\u0447\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435\u043c \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u043f\u0430\u043b\u0435\u0446)<\/p>\n<\/div>\n<\/details>\n<p>\u0412 \u044f\u0447\u0435\u0439\u043a\u0443 \u044f \u043f\u0435\u0440\u0435\u0434\u0430\u044e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044f <code>onClick<\/code>, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e.<\/p>\n<details class=\"spoiler\">\n<summary>PixiJS \u0441\u043e\u0432\u0435\u0442 02: \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f  <\/summary>\n<div class=\"spoiler__content\">\n<p>\u0412 <code>PixiJS<\/code> \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0439.<br \/> \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c \u043f\u043e\u0442\u043e\u043c\u043e\u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435, \u0447\u0442\u043e \u043d\u0430 \u043d\u0435\u0433\u043e \u043d\u0430\u0436\u0430\u043b\u0438 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u0432\u044b\u0448\u0435 \u0443\u0436\u0435 \u0441\u0432\u043e\u0451 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435:<\/p>\n<pre><code class=\"typescript\">this.on('pointertap', () => {   this.emit('custom-click', this) }) <\/code><\/pre>\n<p>\u0422\u043e\u0433\u0434\u0430 \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435:<\/p>\n<pre><code class=\"typescript\">this.someChild.on('custom-click', () => {}) <\/code><\/pre>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 <a href=\"https:\/\/github.com\/pixijs\/pixijs\/issues\/8957\" rel=\"noopener noreferrer nofollow\">\u0434\u043b\u044f TypeScript \u043d\u0435\u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0442\u0438\u043f\u043e\u0432<\/a>, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u044d\u0442\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u044f\u0442.<\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0443 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440:<\/p>\n<pre><code class=\"typescript\">class Child extends Container {   public onClick!: () => void   constructor(onClick) {     this.onClick = onClick      this.on('pointertap', () => {       this.onClick()     }   } } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043c\u044b\u0448\u043a\u043e\u0439 \u0432 <code>handleMouseOver<\/code>, \u044f \u0440\u0438\u0441\u0443\u044e \u043a\u0432\u0430\u0434\u0440\u0430\u0442 \u043e\u0434\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 (\u0438\u043c\u0438\u0442\u0430\u0446\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f <code>hover<\/code>), \u043f\u0440\u0438 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 (<code>isSelected = true<\/code>) &#8212; \u0434\u0440\u0443\u0433\u043e\u0433\u043e (\u0438\u043c\u0438\u0442\u0430\u0446\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f <code>active<\/code>).<\/p>\n<details class=\"spoiler\">\n<summary>PixiJS \u0441\u043e\u0432\u0435\u0442 03: \u041e\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u043d\u0438\u0435 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0438 \u0442\u0435\u043a\u0441\u0442\u0443\u0440  <\/summary>\n<div class=\"spoiler__content\">\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0446\u0432\u0435\u0442 <code>Graphics<\/code> \u0438\u043b\u0438 <code>Sprite<\/code> &#8212; \u0442\u043e \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u043d\u0438\u0435 (<a href=\"https:\/\/pixijs.download\/release\/docs\/PIXI.AnimatedSprite.html#tint\" rel=\"noopener noreferrer nofollow\">Tinting<\/a> \u0438\u043b\u0438 <code>tint<\/code> \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e).<\/p>\n<p>\u041d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u044e \u0433\u0440\u0430\u0444\u0438\u043a\u0443 \u0437\u0430\u043d\u043e\u0432\u043e \u0438\u043b\u0438 \u043f\u043e\u0434\u0433\u043e\u0442\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432.<\/p>\n<p>\u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u0432\u0441\u0451 \u0447\u0442\u043e \u0432\u044b \u043d\u0430\u0440\u0438\u0441\u0443\u0435\u0442\u0435 \u0431\u0435\u043b\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c <code>0xffffff<\/code> \u0438\u043b\u0438 \u0441\u043f\u0440\u0430\u0439\u0442 \u0441 \u0431\u0435\u043b\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u043e\u043a\u0440\u0430\u0448\u0435\u043d \u0432 \u0446\u0432\u0435\u0442 <code>tint<\/code>:<\/p>\n<pre><code class=\"typescript\">this.ting = 0xaaaaaa \/\/ \u0432\u0441\u0451 \u0431\u0435\u043b\u043e\u0435 \u043e\u043a\u0440\u0430\u0441\u0438\u0442\u0441\u044f \u0432 \u0441\u0435\u0440\u044b\u0439 <\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u0435\u0445\u043d\u0438\u043a\u0430 \u0443\u043c\u043d\u043e\u0436\u0435\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u0435\u043b\u044b\u0439 \u0443\u043c\u043d\u043e\u0436\u0438\u0442\u044c \u043d\u0430 <code>tint<\/code> \u0446\u0432\u0435\u0442 \u0431\u0443\u0434\u0435\u0442 \u0434\u0430\u0432\u0430\u0442\u044c <code>tint<\/code>.<\/p>\n<\/div>\n<\/details>\n<p><a href=\"https:\/\/github.com\/volodalexey\/simple-html5-farm-game\/blob\/5724de2e074c7df3ccfcf74173f75754ce0e8a29\/src\/World.ts#L50\" rel=\"noopener noreferrer nofollow\">\u0413\u043b\u0430\u0432\u043d\u044b\u0439 \u043c\u0430\u043a\u0435\u0442<\/a> \u0441\u043e\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u0438\u0437 \u0442\u0440\u0451\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432:<\/p>\n<details class=\"spoiler\">\n<summary>\u0424\u0435\u0440\u043c\u0430 &#8212; \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u043c\u0430\u043a\u0435\u0442<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">import { type Application } from 'pixi.js' import { ShopBar } from '.\/ShopBar' import { FarmGrid } from '.\/FarmGrid' import { ShopTile } from '.\/ShopTile'  class World {   public app: Application&lt;HTMLCanvasElement>   public statusBar!: StatusBar   public farmGrid!: FarmGrid   public shopBar!: ShopBar    setupLayout (): void {     this.statusBar = new StatusBar({})     this.app.stage.addChild(this.statusBar)     this.farmGrid = new FarmGrid({})     this.app.stage.addChild(this.farmGrid)     this.shopBar = new ShopBar({})     this.app.stage.addChild(this.shopBar)   } } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<h3>\u0424\u0435\u0440\u043c\u0430: \u041f\u0430\u043d\u0435\u043b\u044c \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u0438 \u043c\u0430\u0433\u0430\u0437\u0438\u043d\u0430<\/h3>\n<p>\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u0434\u043b\u044f \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0434\u0435\u043d\u0435\u0433, \u043a\u043e\u0440\u043c\u0430 (\u043a\u0443\u043a\u0443\u0440\u0443\u0437\u044b), \u044f\u0438\u0446 \u0438 \u043c\u043e\u043b\u043e\u043a\u0430 \u0445\u0440\u0430\u043d\u0438\u0442 \u043a\u0430\u0436\u0434\u0430\u044f \u044f\u0447\u0435\u0439\u043a\u0430 (<code>Tile<\/code>) \u043d\u0430 \u043f\u0430\u043d\u0435\u043b\u0438 \u0441\u0442\u0430\u0442\u0443\u0441\u0430 (\u043b\u0443\u0447\u0448\u0435 \u0431\u044b\u043b\u043e-\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 \u044f\u0434\u0440\u0435 \u0438\u0433\u0440\u044b).<\/p>\n<p>\u042f\u0447\u0435\u0439\u043a\u0430 \u043a\u0443\u043a\u0443\u0440\u0443\u0437\u044b &#8212; \u0445\u0440\u0430\u043d\u0438\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u0443\u043a\u0443\u0440\u0443\u0437\u044b \u0438 \u0442.\u0434. <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-farm-game\/blob\/5724de2e074c7df3ccfcf74173f75754ce0e8a29\/src\/StatusBarTile.ts#L7\" rel=\"noopener noreferrer nofollow\">\u0412 \u043a\u0430\u0436\u0434\u0443\u044e \u044f\u0447\u0435\u0439\u043a\u0443 \u043f\u0435\u0440\u0435\u0434\u0430\u044e \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443 \u0438\u043a\u043e\u043d\u043a\u0438<\/a>.<\/p>\n<details class=\"spoiler\">\n<summary>Status Bar Tile<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">import { type Texture, Sprite } from 'pixi.js' import { type ITileOptions, Tile } from '.\/models\/Tile'  interface IStatusBarTileOptions extends ITileOptions {   iconTextureResource: Texture }  class StatusBarTile extends Tile {   private _value = 0    setup ({     iconTextureResource   }: IStatusBarTileOptions): void {     const texture = new Sprite(iconTextureResource)     this.addChild(texture)   } } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0412\u043d\u0443\u0442\u0440\u0438 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443 \u0438\u043a\u043e\u043d\u043a\u0438 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u044e \u0432 <code>Sprite<\/code>, \u0430 \u0434\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e <code>BitmapText<\/code>. \u0422\u0435\u043a\u0441\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e <code>value<\/code>.<\/p>\n<details class=\"spoiler\">\n<summary>PixiJS \u0441\u043e\u0432\u0435\u0442 04: \u0427\u0451\u0442\u043a\u043e\u0441\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u0430  <\/summary>\n<div class=\"spoiler__content\">\n<p>\u0427\u0442\u043e\u0431\u044b \u0442\u0435\u043a\u0441\u0442 \u0431\u044b\u043b \u0447\u0451\u0442\u043a\u0438\u0439 \u0438 \u0445\u043e\u0440\u043e\u0448\u043e \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0435\u043c\u0443 \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f <code>fontSize<\/code>, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <code>40<\/code> \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439. \u0414\u0430\u0436\u0435 \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u043a\u0430\u043a <code>16<\/code> \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432 \u0432\u044b\u0441\u043e\u0442\u0443.<\/p>\n<pre><code class=\"typescript\">import { Text } from 'pixi.js'  const text = new Text('\u041f\u0440\u0438\u0432\u0435\u0442 Habr!', {   fontSize: 40, })  text.height = 16 <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041f\u0430\u043d\u0435\u043b\u044c \u043c\u0430\u0433\u0430\u0437\u0438\u043d\u0430 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-farm-game\/blob\/5724de2e074c7df3ccfcf74173f75754ce0e8a29\/src\/ShopTile.ts\" rel=\"noopener noreferrer nofollow\">\u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0442\u043e\u0436\u0435 \u0438\u0437 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0445 \u044f\u0447\u0435\u0435\u043a<\/a>. \u041a\u0430\u0436\u0434\u0430\u044f \u044f\u0447\u0435\u0439\u043a\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u043a\u0443\u043f\u0438\u0442\u044c, \u0438\u043a\u043e\u043d\u043a\u0443 \u0434\u0435\u043d\u0435\u0433 \u0438 \u0442\u0435\u043a\u0441\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u043f\u043e\u043a\u0443\u043f\u043a\u0438.<\/p>\n<details class=\"spoiler\">\n<summary>Shop Tile<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">import { BitmapText, Sprite, type Texture } from 'pixi.js'  enum ShopTileType {   corn,   chicken,   cow }  interface IShopTileOptions extends ITileOptions {   type: ShopTileType   cost: number   moneyTextureResource: Texture   itemTextureResource: Texture }  class ShopTile extends Tile {   setup ({     itemTextureResource,     moneyTextureResource,     iconOptions: { width, height, marginLeft, marginTop }   }: IShopTileOptions): void {     const texture = new Sprite(itemTextureResource)     this.addChild(texture)     const textIcon = new Sprite(moneyTextureResource)     this.addChild(textIcon)     const text = new BitmapText(String(cost), {       fontName: 'comic 30',       fontSize: 16     })     this.addChild(text)   } } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043f\u0440\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043c\u043e\u0438\u0445 \u043f\u0430\u043d\u0435\u043b\u0435\u0439, \u043f\u0435\u0440\u0435\u0434\u0430\u044e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0435 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b \u0438 \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u043a\u0430\u0436\u0434\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0438.<\/p>\n<details class=\"spoiler\">\n<summary>PixiJS \u0441\u043e\u0432\u0435\u0442 05: \u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0442\u0435\u043a\u0441\u0442\u0430  <\/summary>\n<div class=\"spoiler__content\">\n<p>\u0422.\u043a. \u0442\u0435\u043a\u0441\u0442 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u043d\u0430 GPU \u043d\u0435 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u0442\u043e \u043e\u043d \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>2d<\/code> \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430, \u0430 \u0443\u0436\u0435 \u043f\u043e\u0442\u043e\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f \u0432 \u0432\u0438\u0434\u0435 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b \u043d\u0430 GPU. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u044b\u0441\u0442\u0440\u043e \u043c\u0435\u043d\u044f\u044e\u0449\u0438\u0439\u0441\u044f \u0442\u0435\u043a\u0441\u0442 \u043b\u0443\u0447\u0448\u0435 &#171;\u043f\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c&#187;. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/pixijs.download\/release\/docs\/PIXI.BitmapText.html\" rel=\"noopener noreferrer nofollow\">BitmapText<\/a>.<br \/>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0433\u043e\u0432\u043e\u0440\u0438\u043c PixiJS \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u0430\u043c\u044f\u0442\u044c \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442, \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0438 \u0446\u0432\u0435\u0442\u0430:<\/p>\n<pre><code class=\"typescript\">import { BitmapFont } from 'pixi.js'  BitmapFont.from('comic 40', {   fill: 0x141414,   fontFamily: 'Comic Sans MS',   fontSize: 40 }) <\/code><\/pre>\n<p>\u041f\u043e\u0442\u043e\u043c \u0443\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0448\u0440\u0438\u0444\u0442 \u0438 \u0431\u044b\u0441\u0442\u0440\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u0435\u0433\u043e:<\/p>\n<pre><code class=\"typescript\">import { BitmapText } from 'pixi.js'  const bitmapText = new BitmapText(String(_value), {   fontName: 'comic 40',   fontSize: 16 })  function change() {   bitmapText.text = Date.now()   setTimeout(change) } change() <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<h3>\u0424\u0435\u0440\u043c\u0430: \u041f\u043e\u043b\u0435<\/h3>\n<p>\u041a\u0430\u0436\u0434\u0430\u044f <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-farm-game\/blob\/5724de2e074c7df3ccfcf74173f75754ce0e8a29\/src\/FarmGridTile.ts#L28\" rel=\"noopener noreferrer nofollow\">\u044f\u0447\u0435\u0439\u043a\u0430 \u043f\u043e\u043b\u044f<\/a> \u043c\u043e\u0436\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439:<\/p>\n<ul>\n<li>\n<p>\u043f\u0443\u0441\u0442\u043e\u0435 &#8212; \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0442\u0440\u0430\u0432\u0430;<\/p>\n<\/li>\n<li>\n<p>\u043a\u0443\u043a\u0443\u0440\u0443\u0437\u0430, \u043a\u043e\u0440\u043e\u0432\u0430 \u0438\u043b\u0438 \u043a\u0443\u0440\u0438\u0446\u0430 \u043a\u0443\u043f\u043b\u0435\u043d\u044b;<\/p>\n<\/li>\n<li>\n<p>\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0441\u0430\u0434\u0438\u0442\u044c \u0438\u043b\u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043d\u0430 \u044d\u0442\u0443 \u044f\u0447\u0435\u0439\u043a\u0443 \u043a\u0443\u043a\u0443\u0440\u0443\u0437\u0443, \u043a\u043e\u0440\u043e\u0432\u0443 \u0438\u043b\u0438 \u043a\u0443\u0440\u0438\u0446\u0443;<\/p>\n<\/li>\n<li>\n<p>\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u043a\u043e\u0440\u043c\u0438\u0442\u044c \u043a\u0443\u0440\u0438\u0446\u0443 \u0438\u043b\u0438 \u043a\u043e\u0440\u043e\u0432\u0443.<\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0440\u0430\u0432\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f, \u0430 \u0432\u043e\u0442 \u043f\u043e\u0432\u0435\u0440\u0445 \u0442\u0440\u0430\u0432\u044b \u0443\u0436\u0435 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u043f\u0440\u0430\u0439\u0442\u044b \u0438\u0441\u0445\u043e\u0434\u044f \u0438\u0437 \u043b\u043e\u0433\u0438\u043a\u0438.<\/p>\n<details class=\"spoiler\">\n<summary>FarmGridTile<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e09\/043\/dc4\/e09043dc47e72910b5cc1cd99389fb72.png\" alt=\"\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0442\u0438\u043f\u044b \u043f\u043e\u043b\u044f \u0444\u0435\u0440\u043c\u044b\" width=\"293\" height=\"35\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e09\/043\/dc4\/e09043dc47e72910b5cc1cd99389fb72.png\"\/><\/p>\n<div><figcaption>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0442\u0438\u043f\u044b \u043f\u043e\u043b\u044f \u0444\u0435\u0440\u043c\u044b<\/figcaption><\/div>\n<\/figure>\n<pre><code class=\"typescript\">enum FarmType {   grass,   possibleCorn,   possibleChicken,   possibleCow,   corn,   chicken,   cow,   possibleFeedChicken,   possibleFeedCow }  class FarmGridTile extends Tile {   public type!: FarmType   public cornBuildableSprite!: Sprite    setType (type: FarmType): void {     switch (type) {       case FarmType.possibleCorn:         this.hideAllSprites()         this.cornBuildableSprite.visible = true         break         \/\/ ...     }     this.type = type   } } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>PixiJS \u0441\u043e\u0432\u0435\u0442 06: \u0417\u0430\u043c\u0435\u043d\u0430 \u0442\u0435\u043a\u0441\u0442\u0443\u0440  <\/summary>\n<div class=\"spoiler__content\">\n<p>\u0415\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u0443\u044e \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443, \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 <code>Sprite<\/code>, \u043c\u043e\u0436\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>texture<\/code> \u043d\u0430 \u0445\u043e\u0434\u0443<\/p>\n<pre><code class=\"typescript\">import { Sprite } from 'pixi.js'  const sprite = new Sprite()  sprite.texture = someTexture setTimeout(() => {     sprite.texture = someTexture2 }, 1000) <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<h3>\u0424\u0435\u0440\u043c\u0430: \u041f\u043e\u043a\u0443\u043f\u043a\u0430\/\u043f\u0440\u043e\u0434\u0430\u0436\u0430<\/h3>\n<p>\u0421\u043e\u0437\u0434\u0430\u044e \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438\u0433\u0440\u044b, \u043a\u0430\u043a \u0442\u043e \u043f\u043e\u043a\u0443\u043f\u043a\u0430, \u043f\u0440\u043e\u0441\u0442\u0430\u0438\u0432\u0430\u043d\u0438\u0435 \u0438 \u043a\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435:<\/p>\n<details class=\"spoiler\">\n<summary>UI State<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">enum UIState {   idle,   toBuildCorn,   toBuildChicken,   toBuildCow,   toFeedCorn, } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041d\u0430\u0436\u0430\u0442\u0438\u0435 \u043d\u0430 \u044f\u0447\u0435\u0439\u043a\u0435 \u044f\u0438\u0446 \u0438\u043b\u0438 \u043c\u043e\u043b\u043e\u043a\u0430 \u0432\u0432\u0435\u0440\u0445\u0443 &#8212; \u043f\u0440\u043e\u0434\u0430\u0451\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0440\u0435\u0441\u0443\u0440\u0441.<\/p>\n<p>\u041d\u0430\u0436\u0430\u0442\u0438\u0435 \u043d\u0430 \u044f\u0447\u0435\u0439\u043a\u0435 \u043a\u0443\u043a\u0443\u0440\u0443\u0437\u044b &#8212; \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u0442 \u0440\u0435\u0436\u0438\u043c \u0438\u0433\u0440\u044b \u0432 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-farm-game\/blob\/5724de2e074c7df3ccfcf74173f75754ce0e8a29\/src\/World.ts#L204\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u043a\u043e\u0440\u043c\u0438\u0442\u044c \u043a\u0443\u0440\u0438\u0446\u0443 \u0438\u043b\u0438 \u043a\u043e\u0440\u043e\u0432\u0443<\/a>. \u041f\u0440\u043e\u0445\u043e\u0436\u0443\u0441\u044c \u043f\u043e \u0432\u0441\u0435\u043c \u044f\u0447\u0435\u0439\u043a\u0430\u043c \u0441 \u043a\u043e\u0440\u043e\u0432\u043e\u0439 \u0438\u043b\u0438 \u043a\u0443\u0440\u0438\u0446\u0435\u0439 \u043d\u0430 \u043f\u043e\u043b\u0435 \u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-farm-game\/blob\/5724de2e074c7df3ccfcf74173f75754ce0e8a29\/src\/models\/StrokeRect.ts#L23\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a<\/a>. \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u044f\u0447\u0435\u0439\u043a\u0443 \u0441 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u043c, \u0442\u043e \u044f \u043e\u0442\u043d\u0438\u043c\u0430\u044e \u043e\u0434\u043d\u0443 \u0435\u0434\u0438\u043d\u0438\u0446\u0443 \u043a\u0443\u043a\u0443\u0440\u0443\u0437\u044b \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e \u0435\u0434\u044b \u0434\u043b\u044f \u043a\u0443\u0440\u0438\u0446\u044b \u0438\u043b\u0438 \u043a\u043e\u0440\u043e\u0432\u044b.<\/p>\n<details class=\"spoiler\">\n<summary>\u0424\u0435\u0440\u043c\u0430 &#8212; \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438\u0433\u0440\u044b &#8212; \u043f\u043e\u043a\u043e\u0440\u043c\u0438\u0442\u044c<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/515\/494\/a1c\/515494a1cfd5248fd4557ecb1ad5ad70.png\" alt=\"\u0424\u0435\u0440\u043c\u0430 - \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438\u0433\u0440\u044b - \u043f\u043e\u043a\u043e\u0440\u043c\u0438\u0442\u044c\" width=\"287\" height=\"245\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/515\/494\/a1c\/515494a1cfd5248fd4557ecb1ad5ad70.png\"\/><\/p>\n<div><figcaption>\u0424\u0435\u0440\u043c\u0430 &#8212; \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438\u0433\u0440\u044b &#8212; \u043f\u043e\u043a\u043e\u0440\u043c\u0438\u0442\u044c<\/figcaption><\/div>\n<\/figure>\n<pre><code class=\"typescript\">handleStatusBarClick = (tile: StatusBarTile): void => {   if (tile.isSelected &amp;&amp; tile.type === StatusBarTile.TYPES.corns) {     if (tile.value >= 1) {       this.setUIState(UIState.toFeedCorn)     } else {       this.statusBar.deselectAll()     }   } } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041d\u0430\u0436\u0430\u0442\u0438\u0435 \u043d\u0430 <code>ShopTile<\/code> \u044f\u0447\u0435\u0439\u043a\u0435 &#8212; \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u0442 \u0440\u0435\u0436\u0438\u043c \u0438\u0433\u0440\u044b \u0432 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043a\u0443\u043f\u0438\u0442\u044c \u043a\u0443\u043a\u0443\u0440\u0443\u0437\u0443, \u043a\u0443\u0440\u0438\u0446\u0443 \u0438\u043b\u0438 \u043a\u043e\u0440\u043e\u0432\u0443. \u041f\u0440\u043e\u0445\u043e\u0436\u0443\u0441\u044c \u043f\u043e \u0432\u0441\u0435\u043c \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u043c \u043f\u043b\u0438\u0442\u043a\u0430\u043c \u043d\u0430 \u043f\u043e\u043b\u0435 \u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-farm-game\/blob\/5724de2e074c7df3ccfcf74173f75754ce0e8a29\/src\/World.ts#L225\" rel=\"noopener noreferrer nofollow\">\u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c \u0432 \u0440\u043e\u0437\u043e\u0432\u043e\u043c \u0446\u0432\u0435\u0442\u0435<\/a>.<\/p>\n<details class=\"spoiler\">\n<summary>\u0424\u0435\u0440\u043c\u0430 &#8212; \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438\u0433\u0440\u044b &#8212; \u043a\u0443\u043f\u0438\u0442\u044c<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">handleShopBarClick = (tile: ShopTile): void => {   this.statusBar.deselectAll()   if (tile.isSelected) {     if (tile.cost > 0 &amp;&amp; this.statusBar.money >= tile.cost) {       switch (tile.type) {         case ShopTile.TYPES.corn:           this.setUIState(UIState.toBuildCorn)           break         \/\/...       }     } else {       this.shopBar.deselectAll()     }   } else {     this.setUIState(UIState.idle)   } } <\/code><\/pre>\n<p>\u041a\u0443\u043f\u0438\u0442\u044c \u043a\u0443\u043a\u0443\u0440\u0443\u0437\u0443: <\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/79b\/2e9\/1d9\/79b2e91d976bab0a10256218d5ea482d.png\" alt=\"\u0424\u0435\u0440\u043c\u0430 - \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438\u0433\u0440\u044b - \u043a\u0443\u043f\u0438\u0442\u044c \u043a\u0443\u043a\u0443\u0440\u0443\u0437\u0443\" width=\"189\" height=\"189\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/79b\/2e9\/1d9\/79b2e91d976bab0a10256218d5ea482d.png\"\/><\/p>\n<div><figcaption>\u0424\u0435\u0440\u043c\u0430 &#8212; \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438\u0433\u0440\u044b &#8212; \u043a\u0443\u043f\u0438\u0442\u044c \u043a\u0443\u043a\u0443\u0440\u0443\u0437\u0443<\/figcaption><\/div>\n<\/figure>\n<p>\u041a\u0443\u043f\u0438\u0442\u044c \u043a\u0443\u0440\u0438\u0446\u0443: <\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/786\/76d\/b90\/78676db909c5e21fa83849156f0fdb64.png\" alt=\"\u0424\u0435\u0440\u043c\u0430 - \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438\u0433\u0440\u044b - \u043a\u0443\u043f\u0438\u0442\u044c \u043a\u0443\u0440\u0438\u0446\u0443\" width=\"167\" height=\"234\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/786\/76d\/b90\/78676db909c5e21fa83849156f0fdb64.png\"\/><\/p>\n<div><figcaption>\u0424\u0435\u0440\u043c\u0430 &#8212; \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438\u0433\u0440\u044b &#8212; \u043a\u0443\u043f\u0438\u0442\u044c \u043a\u0443\u0440\u0438\u0446\u0443<\/figcaption><\/div>\n<\/figure>\n<p>\u041a\u0443\u043f\u0438\u0442\u044c \u043a\u043e\u0440\u043e\u0432\u0443: <\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f6a\/a8e\/faf\/f6aa8efaf44782bc88977158ca64c861.png\" alt=\"\u0424\u0435\u0440\u043c\u0430 - \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438\u0433\u0440\u044b - \u043a\u0443\u043f\u0438\u0442\u044c \u043a\u043e\u0440\u043e\u0432\u0443\" width=\"217\" height=\"244\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f6a\/a8e\/faf\/f6aa8efaf44782bc88977158ca64c861.png\"\/><\/p>\n<div><figcaption>\u0424\u0435\u0440\u043c\u0430 &#8212; \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438\u0433\u0440\u044b &#8212; \u043a\u0443\u043f\u0438\u0442\u044c \u043a\u043e\u0440\u043e\u0432\u0443<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u043d\u0435\u0437\u0430\u043d\u044f\u0442\u0443\u044e \u043f\u043b\u0438\u0442\u043a\u0443, \u0442\u043e\u0433\u0434\u0430 \u0441\u043f\u0438\u0441\u044b\u0432\u0430\u044e \u0434\u0435\u043d\u044c\u0433\u0438 \u0438 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-farm-game\/blob\/5724de2e074c7df3ccfcf74173f75754ce0e8a29\/src\/World.ts#L137\" rel=\"noopener noreferrer nofollow\">\u0440\u0430\u0437\u043c\u0435\u0449\u0430\u044e \u043a\u0443\u043f\u043b\u0435\u043d\u043d\u0443\u044e \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c \u043d\u0430 \u043a\u043b\u0435\u0442\u043a\u0435<\/a>. \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0434\u043b\u044f <code>AnimatedSprite<\/code> <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-farm-game\/blob\/5724de2e074c7df3ccfcf74173f75754ce0e8a29\/src\/FarmGridTile.ts#L165\" rel=\"noopener noreferrer nofollow\">\u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u0442\u044c\u0441\u044f<\/a>, \u0443 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0441\u0432\u043e\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0441\u0447\u0435\u0442\u0447\u0438\u043a. \u041e\u0434\u043d\u0430\u043a\u043e \u043c\u043e\u0436\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u043a\u0430\u0434\u0440\u044b \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438 \u043f\u043e \u0441\u0432\u043e\u0435\u043c\u0443 \u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u0438\u044e, \u0442\u043e\u0433\u0434\u0430 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e <code>play()<\/code>\/<code>gotoAndPlay(0)<\/code>.<\/p>\n<h3>\u0424\u0435\u0440\u043c\u0430: \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u0438 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u044b<\/h3>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e &#171;\u043e\u0436\u0438\u0432\u0438\u0442\u044c&#187; \u0438\u0433\u0440\u0443. <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-farm-game\/blob\/5724de2e074c7df3ccfcf74173f75754ce0e8a29\/src\/World.ts#L36\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0441\u044c \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430<\/a> \u0438 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u044f\u044e \u044d\u0442\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0434\u0430\u043b\u044c\u0448\u0435 \u043d\u0430 \u043f\u043e\u043b\u0435 \u0444\u0435\u0440\u043c\u044b. \u0410 \u0442\u0430 \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0447\u0430\u0441\u0442\u044c \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u0430 (\u043a\u0443\u043a\u0443\u0440\u0443\u0437\u0430, \u044f\u0439\u0446\u043e \u0438\u043b\u0438 \u043c\u043e\u043b\u043e\u043a\u043e) \u0438, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043a\u0443\u0440\u0438\u0446\u0430 \u0438\u043b\u0438 \u043a\u043e\u0440\u043e\u0432\u0430 &#8212; \u0442\u043e, \u043e\u0442\u043d\u0438\u043c\u0430\u044e \u0447\u0430\u0441\u0442\u044c \u0435\u0434\u044b.<br \/>\u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u043a\u043b\u0435\u0442\u043a\u0438 \u0441 \u043a\u0443\u0440\u0438\u0446\u0435\u0439 \u0438\u043b\u0438 \u043a\u043e\u0440\u043e\u0432\u043e\u0439 \u0441\u043e\u0437\u0434\u0430\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u0430 (\u0438 \u0434\u043b\u044f \u043a\u0443\u043a\u0443\u0440\u0443\u0437\u044b) <code>_generated<\/code> \u0438 \u0434\u043b\u044f \u043e\u0441\u0442\u0430\u0432\u0448\u0435\u0439\u0441\u044f \u0435\u0434\u044b <code>_food<\/code>.<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u043e\u0434\u043f\u0438\u0441\u043a\u0430 \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">this.app.ticker.add(this.handleAppTick)  handleAppTick = (): void => {   this.farmGrid.handleWorldTick(this.app.ticker.deltaMS) } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0414\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0430\u0441\u043e\u0432 \u0435\u0434\u044b \u0438 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u044b.<\/p>\n<details class=\"spoiler\">\n<summary>\u0418\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u044b \u0435\u0434\u044b \u0438 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u0430<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/4c4\/0c1\/48e\/4c40c148ec2f1d2bf40fa619993017a9.png\" alt=\"\u0418\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u044b \u0435\u0434\u044b \u0438 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u0430\" width=\"75\" height=\"78\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/4c4\/0c1\/48e\/4c40c148ec2f1d2bf40fa619993017a9.png\"\/><\/p>\n<div><figcaption>\u0418\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u044b \u0435\u0434\u044b \u0438 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u0430<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0420\u0438\u0441\u0443\u044e \u0438\u0445 \u043a\u0430\u043a <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-farm-game\/blob\/5724de2e074c7df3ccfcf74173f75754ce0e8a29\/src\/models\/ProgressBar.ts#L83\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438 <\/a><code>Graphics<\/code>. \u0418 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u044e \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0442\u0438\u043a, \u0445\u043e\u0442\u044f \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0443 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0432 \u043e\u0442 \u043d\u0430\u0447\u0430\u043b\u0430 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442.<\/p>\n<p>\u0414\u043b\u044f \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0432\u044b\u0431\u0438\u0440\u0430\u044e \u043e\u0434\u0438\u043d \u0446\u0432\u0435\u0442: \u0431\u0435\u043b\u044b\u0439 \u0434\u043b\u044f \u044f\u0438\u0446 \u0438\u043b\u0438 \u0441\u0438\u043d\u0438\u0439 \u0434\u043b\u044f \u043c\u043e\u043b\u043e\u043a\u0430. \u0410 \u0432\u043e\u0442 \u0434\u043b\u044f \u0435\u0434\u044b, <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-farm-game\/blob\/5724de2e074c7df3ccfcf74173f75754ce0e8a29\/src\/models\/ProgressBar.ts#L77\" rel=\"noopener noreferrer nofollow\">\u0441\u0434\u0435\u043b\u0430\u043b \u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u044f\u0446\u0438\u044e \u0446\u0432\u0435\u0442\u0430<\/a>, \u0447\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0435\u0434\u044b &#8212; \u0442\u0435\u043c \u0437\u0435\u043b\u0435\u043d\u0435\u0435 \u0446\u0432\u0435\u0442 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u0430, \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442 &#8212; \u0442\u0435\u043c \u043a\u0440\u0430\u0441\u043d\u0435\u0435.<\/p>\n<details class=\"spoiler\">\n<summary>PixiJS \u0441\u043e\u0432\u0435\u0442 07: \u041f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/summary>\n<div class=\"spoiler__content\">\n<p>\u041a\u043e\u0433\u0434\u0430 \u0440\u0438\u0441\u0443\u0435\u0442\u0435 <code>Graphics<\/code> \u0438 \u0432\u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0438 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0435\u0441\u044c \u0435\u0451 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c &#8212; \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043e\u0442 \u043d\u0430\u0447\u0430\u043b\u0430 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 (0, 0). \u0422\u0430\u043a \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0448\u0438\u0440\u0438\u043d\u044b <code>width<\/code> \u0431\u0443\u0434\u0435\u0442 <a href=\"https:\/\/pixijs.io\/guides\/basics\/sprites.html\" rel=\"noopener noreferrer nofollow\">\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e<\/a>.<\/p>\n<pre><code class=\"typescript\">  this.drawRect(0, 0, initWidth, initHeight)   this.endFill() <\/code><\/pre>\n<p>\u0412 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0448\u0438\u0440\u0438\u043d\u044b \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u0442 \u043a \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0433\u0440\u0430\u0444\u0438\u043a\u0438, \u043d\u043e \u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u0430 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u043e\u0442 \u043d\u0430\u0447\u0430\u043b\u0430 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442.<br \/> \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0448\u0438\u0440\u0438\u043d\u044b \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u0440\u0438\u0441\u043e\u0432\u0430\u043b\u0438 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0438\u0437 \u043d\u0430\u0447\u0430\u043b\u0430 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442.<\/p>\n<\/div>\n<\/details>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0440\u0435\u0441\u0443\u0440\u0441 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d, \u0442\u043e \u0434\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0433 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0440\u0435\u0441\u0443\u0440\u0441. \u041d\u0430\u0436\u0430\u0442\u0438\u0435 \u043d\u0430 \u044f\u0447\u0435\u0439\u043a\u0435 \u043f\u043e\u043b\u044f \u0441\u043e \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u043c \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0435\u0433\u043e, \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u0438\u0433\u0440\u0430 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f.<\/p>\n<h3>\u0424\u0435\u0440\u043c\u0430: \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/h3>\n<p>\u041f\u0440\u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043b\u044e\u0431\u043e\u0439 \u0438\u0433\u0440\u044b \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430:<\/p>\n<ol>\n<li>\n<p>\u041f\u043e\u0434\u043e\u0433\u043d\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0438\u0433\u0440\u044b \u043f\u043e\u0434 \u043e\u043a\u043d\u043e (<code>viewport<\/code>\/<code>window<\/code> \u0438\u043b\u0438 <code>camera<\/code>) &#8212; <a href=\"https:\/\/www.pixijselementals.com\/#letterbox-scale\" rel=\"noopener noreferrer nofollow\">Letterbox scale<\/a>. \u041e\u0441\u0442\u0430\u0432\u0448\u0435\u0435\u0441\u044f \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u043e\u043f\u043e\u043b\u0430\u043c &#8212; \u0442.\u0435. \u043e\u0442\u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u0440\u0435\u0437\u0430\u0442\u044c \u0438\u0433\u0440\u0443, \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0438\u0442 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u043e\u043a\u043d\u0430 &#8212; <a href=\"https:\/\/www.pixijselementals.com\/#responsive-scale\" rel=\"noopener noreferrer nofollow\">Responsive Scale<\/a>.<\/p>\n<\/li>\n<\/ol>\n<p>\u0415\u0441\u0442\u044c \u0435\u0449\u0451 \u044d\u043a\u0437\u043e\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0430\u0441\u0442\u044f\u043d\u0443\u0442\u044c\/\u0441\u0443\u0437\u0438\u0442\u044c \u043f\u043e \u0432\u044b\u0441\u043e\u0442\u0435 \u0438 \u0448\u0438\u0440\u0438\u043d\u0435, \u043d\u0430\u0440\u0443\u0448\u0430\u044f \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u0441\u0442\u043e\u0440\u043e\u043d &#8212; \u0442\u0430\u043a\u043e\u0435 \u044f \u043d\u0435 \u0431\u0443\u0434\u0443 \u0434\u0435\u043b\u0430\u0442\u044c.<\/p>\n<p>\u0414\u043b\u044f \u0444\u0435\u0440\u043c\u044b \u044f <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-farm-game\/blob\/5724de2e074c7df3ccfcf74173f75754ce0e8a29\/src\/World.ts#L105\" rel=\"noopener noreferrer nofollow\">\u0432\u044b\u0431\u0440\u0430\u043b 1-\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442<\/a>. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 \u0432\u0441\u0435\u0439 \u0438\u0433\u0440\u044b \u0438 \u0432\u043f\u0438\u0441\u044b\u0432\u0430\u044e \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043e\u043a\u043d\u0430.<\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0441\u044c \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043e\u043a\u043d\u0430 <code>window.addEventListener('resize', this.resizeDeBounce)<\/code>, \u043e\u0434\u043d\u0430\u043a\u043e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-farm-game\/blob\/5724de2e074c7df3ccfcf74173f75754ce0e8a29\/src\/World.ts#L89\" rel=\"noopener noreferrer nofollow\">\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432\u044b\u0437\u044b\u0432\u0430\u044e \u043d\u0435 \u0441\u0440\u0430\u0437\u0443<\/a>, \u0430 \u0441 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u043e\u0439, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e\u0435 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0442\u044f\u043d\u0435\u0442 \u0437\u0430 \u043a\u0440\u0430\u0439 \u043e\u043a\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u043f\u043e\u0441\u043b\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434.<\/p>\n<h2>\u0418\u0433\u0440\u0430 02: \u041f\u043e\u043a\u0435\u043c\u043e\u043d<\/h2>\n<h3>\u041f\u043e\u043a\u0435\u043c\u043e\u043d: \u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435<\/h3>\n<p>\u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436 (\u0447\u0435\u043b\u043e\u0432\u0435\u043a), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0445\u043e\u0434\u0438\u0442 \u043f\u043e \u043a\u0430\u0440\u0442\u0435. \u0412 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0445 \u043c\u0435\u0441\u0442\u0430\u0445 \u043d\u0430 \u043b\u0443\u0436\u0430\u0439\u043a\u0430\u0445 \u043e\u043d \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u0435\u0442 \u0432\u0440\u0430\u0433\u043e\u0432 &#8212; \u043f\u043e\u043a\u0435\u043c\u043e\u043d\u043e\u0432. \u041e\u0434\u043d\u0430\u043a\u043e \u043e\u043d \u0441\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0441 \u043d\u0438\u043c\u0438 \u043d\u0435 \u0441\u0430\u043c, \u0430 \u0441\u0432\u043e\u0438\u043c \u043f\u043e\u043a\u0435\u043c\u043e\u043d\u043e\u043c \u043f\u0440\u043e\u0442\u0438\u0432 \u0432\u0440\u0430\u0436\u0435\u0441\u043a\u043e\u0433\u043e. \u0412\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u044d\u043a\u0440\u0430\u043d \u0431\u0438\u0442\u0432\u044b, \u0433\u0434\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0438\u0433\u0440\u0430\u0435\u0442 \u0437\u0430 \u043f\u043e\u043a\u0435\u043c\u043e\u043d\u0430. \u041f\u0440\u0438 \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u0438 \u0431\u0438\u0442\u0432\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043a\u0430\u0440\u0442\u0443 \u0438\u0433\u0440\u0430\u044f \u0437\u0430 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430.<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=yP5DKzriqXA\" rel=\"noopener noreferrer nofollow\">\u0412 \u044d\u0442\u043e\u043c \u0432\u0438\u0434\u0435\u043e<\/a> \u043f\u043e\u043b\u043d\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u0433\u0440\u044b. \u0414\u0430\u043b\u044c\u0448\u0435 \u0431\u0443\u0434\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u0438\u0433\u0440 \u0441 \u044d\u0442\u043e\u0433\u043e \u043a\u0430\u043d\u0430\u043b\u0430.<\/p>\n<h3>\u041f\u043e\u043a\u0435\u043c\u043e\u043d: \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043a\u0430\u0440\u0442<\/h3>\n<p>\u0412 \u0432\u0438\u0434\u0435\u043e \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u043b\u0441\u044f \u0441 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043e\u0439 <a href=\"https:\/\/www.mapeditor.org\/download.html\" rel=\"noopener noreferrer nofollow\">Tiled Map Editor<\/a> \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0442\u043e\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u043e\u0434 <code>Linux<\/code>. \u0412 \u043d\u0435\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0438 \u0443\u0434\u043e\u0431\u043d\u043e \u043f\u043e \u0441\u043b\u043e\u044f\u043c \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c 2-\u0445 \u043c\u0435\u0440\u043d\u0443\u044e \u0442\u0430\u0439\u043b\u043e\u0432\u0443\u044e \u043a\u0430\u0440\u0442\u0443. \u041d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u043f\u0440\u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0435 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442 <code>.json<\/code> \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0443\u0434\u043e\u0431\u043d\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u0441\u043b\u043e\u0451\u0432 \u043d\u0430 \u043a\u0430\u0440\u0442\u0435 \u0432 \u0432\u0438\u0434\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u0430:<\/p>\n<details class=\"spoiler\">\n<summary>JSON &#8212; \u0442\u0430\u0439\u043b\u043e\u0432\u043e\u0439 \u043a\u0430\u0440\u0442\u044b<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"json\">{   \"layers\": {     \"data\": [0, 1, 0, 1],     \"name\": \"Layer name\",     \"type\": \"tilelayer\"   } } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0410 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0435 \u0432 <code>.png<\/code> \u0444\u043e\u0440\u043c\u0430\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0433\u043e\u0442\u043e\u0432\u0443\u044e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u043a\u0430\u0440\u0442\u0443. \u0422\u043e\u043b\u044c\u043a\u043e \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0432\u044b\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u044b\u0435 \u0441\u043b\u043e\u0438.<\/p>\n<details class=\"spoiler\">\n<summary>Tiled Map Editor \u043d\u0430 Linux<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/34c\/409\/33b\/34c40933b8c528d5f53252f19cd8c349.png\" alt=\"Tiled Map Editor \u043d\u0430 Linux\" width=\"1651\" height=\"866\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/34c\/409\/33b\/34c40933b8c528d5f53252f19cd8c349.png\"\/><\/p>\n<div><figcaption>Tiled Map Editor \u043d\u0430 Linux<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0412 \u0432\u0438\u0434\u0435\u043e \u0430\u0432\u0442\u043e\u0440 \u0443\u0436\u0435 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043b \u043a\u0430\u0440\u0442\u0443, \u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0435\u0451 \u043f\u043e\u0434\u043f\u0440\u0430\u0432\u0438\u043b \u0438\u0437-\u0437\u0430 \u043d\u0435\u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0445 \u0441\u0441\u044b\u043b\u043e\u043a, \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u0440\u0430\u0437\u0443 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e. \u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0434\u043b\u044f <code>Tiled Map Editor<\/code> \u044f \u0431\u0443\u0434\u0443 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432 \u043f\u0430\u043f\u043a\u0435 <code>src-tiled<\/code>.<\/p>\n<p>\u0410\u0432\u0442\u043e\u0440 \u0441\u043a\u043e\u0440\u0435\u0435-\u0432\u0441\u0435\u0433\u043e \u0432\u0432\u0438\u0434\u0443 \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u0434\u0430\u043d\u043d\u044b\u0445 <a href=\"https:\/\/github.com\/chriscourses\/pokemon-style-game\/blob\/main\/data\/collisions.js#LL1C7-L1C17\" rel=\"noopener noreferrer nofollow\">collisions<\/a> \u0441\u043b\u043e\u044f \u0438\u0437 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u043e\u0433\u043e <code>.json<\/code> \u0444\u0430\u0439\u043b\u0430. \u042f \u0436\u0435 \u043f\u043e\u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0432 <code>.json<\/code> \u0444\u0430\u0439\u043b <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pokemon-game\/blob\/48456ba0b4db518770c8215207b803ec2a2b2cda\/src\/GameLoader.ts#L27\" rel=\"noopener noreferrer nofollow\">\u043d\u0430\u043f\u0438\u0441\u0430\u043b \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0442\u0438\u043f\u043e\u0432<\/a> \u0438 \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u044f \u043f\u0440\u044f\u043c\u0438\u043a\u043e\u043c \u0438\u0437 <code>.json<\/code> <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pokemon-game\/blob\/48456ba0b4db518770c8215207b803ec2a2b2cda\/src\/World.ts#L83\" rel=\"noopener noreferrer nofollow\">\u0444\u0430\u0439\u043b\u0430<\/a>.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0432 \u0438\u0433\u0440\u0435 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u044e <code>.json<\/code> \u0438 <code>.png<\/code> <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pokemon-game\/blob\/48456ba0b4db518770c8215207b803ec2a2b2cda\/src\/GameLoader.ts#L54\" rel=\"noopener noreferrer nofollow\">\u0444\u0430\u0439\u043b\u044b \u0434\u043b\u044f \u043a\u0430\u0440\u0442\u044b<\/a> (\u0443\u0440\u043e\u0432\u043d\u044f). \u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u044f\u043c\u0438\u043a\u043e\u043c \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u044e \u0432 <code>Sprite<\/code>.<\/p>\n<p>\u041f\u0440\u043e\u0445\u043e\u0436\u0443\u0441\u044c <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pokemon-game\/blob\/48456ba0b4db518770c8215207b803ec2a2b2cda\/src\/MapScreen.ts#L55\" rel=\"noopener noreferrer nofollow\">\u043f\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441\u043b\u043e\u044f \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e<\/a> \u043b\u0438\u0431\u043e \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438 \u0434\u043b\u044f \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043f\u043e \u043a\u0430\u0440\u0442\u0435, \u043b\u0438\u0431\u043e \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438 \u0434\u043b\u044f \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 \u044d\u043a\u0440\u0430\u043d\u0430 \u0431\u0438\u0442\u0432\u044b:<\/p>\n<details class=\"spoiler\">\n<summary>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u043b\u043e\u0451\u0432 \u043a\u0430\u0440\u0442\u044b<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">setupLayers ({ collisionsLayer, battleZonesLayer }: IMapScreenOptions): void {     const { tilesPerRow } = this     for (let i = 0; i &lt; collisionsLayer.data.length; i += tilesPerRow) {       const row = collisionsLayer.data.slice(i, tilesPerRow + i)       row.forEach((symbol, j) => {         if (symbol === 1025) {           const boundary = new Boundary({})           this.addChild(boundary)         }       })     }      for (let i = 0; i &lt; battleZonesLayer.data.length; i += tilesPerRow) {       const row = battleZonesLayer.data.slice(i, tilesPerRow + i)       row.forEach((symbol, j) => {         if (symbol === 1025) {           const boundary = new Boundary({})           this.addChild(boundary)         }       })     }   } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 <code>Debug<\/code> \u044f \u043c\u043e\u0433\u0443 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0440\u0435\u0436\u0438\u043c \u043e\u0442\u043b\u0430\u0434\u043a\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0432 <code>localStorage<\/code> \u044f \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e \u043a\u043b\u044e\u0447 <code>debug<\/code> (\u0441 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0439 \u0431\u0443\u043a\u0432\u044b), \u0430 \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u044e \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <code>poke-boundary<\/code>:<\/p>\n<details class=\"spoiler\">\n<summary>\u041e\u0442\u043b\u0430\u0434\u043a\u0430 \u043d\u0435\u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0443\u0447\u0430\u0441\u0442\u043a\u043e\u0432<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a92\/056\/5cb\/a920565cb92883ea18a9312ddf336733.png\" alt=\"\u041e\u0442\u043b\u0430\u0434\u043a\u0430 \u043d\u0435\u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0443\u0447\u0430\u0441\u0442\u043a\u043e\u0432\" width=\"1400\" height=\"719\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a92\/056\/5cb\/a920565cb92883ea18a9312ddf336733.png\"\/><\/p>\n<div><figcaption>\u041e\u0442\u043b\u0430\u0434\u043a\u0430 \u043d\u0435\u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0443\u0447\u0430\u0441\u0442\u043a\u043e\u0432<\/figcaption><\/div>\n<\/figure>\n<pre><code class=\"typescript\">import debug from 'debug'  const logBoundary = debug('poke-boundary')  class Boundary {   draw() {     if (logBoundary.enabled) {       this.visible = true       this.alpha = 0.3     } else {       this.visible = false     }   } } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0412 \u043a\u043e\u0434\u0435 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pokemon-game\/blob\/48456ba0b4db518770c8215207b803ec2a2b2cda\/src\/Boundary.ts#L21\" rel=\"noopener noreferrer nofollow\">\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e<\/a>, \u0435\u0441\u043b\u0438 \u0432\u043a\u043b\u044e\u0447\u0435\u043d \u0440\u0435\u0436\u0438\u043c \u043e\u0442\u043b\u0430\u0434\u043a\u0438, \u0442\u043e \u0440\u0438\u0441\u0443\u044e \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0435 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438, \u0435\u0441\u043b\u0438 \u043d\u0435\u0442, \u0442\u043e \u043e\u043d\u0438 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u043d\u0435\u0432\u0438\u0434\u0438\u043c\u044b\u043c\u0438 \u0438 \u0443\u0447\u0430\u0441\u0442\u0432\u0443\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0435 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0439.<\/p>\n<h3>\u041f\u043e\u043a\u0435\u043c\u043e\u043d: \u0441\u0446\u0435\u043d\u044b \u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/h3>\n<p>\u0412 \u0438\u0433\u0440\u0435 \u044f \u0440\u0438\u0441\u0443\u044e \u0434\u0432\u0435 \u0441\u0446\u0435\u043d\u044b:<\/p>\n<ul>\n<li>\n<p>\u041e\u0434\u043d\u0430 \u0441\u0446\u0435\u043d\u0430 <code>MapScreen<\/code> \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u0438\u0433\u0440\u043e\u043a \u0445\u043e\u0434\u0438\u0442 \u043f\u043e \u043a\u0430\u0440\u0442\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0412\u0442\u043e\u0440\u0430\u044f \u0441\u0446\u0435\u043d\u0430 <code>BattleScreen<\/code> \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u0438\u0433\u0440\u043e\u043a \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0431\u0438\u0442\u0432\u044b. \u0422\u0430\u043a\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u044e \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0438\u0440\u0443\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u0441\u0446\u0435\u043d\u0443:<\/p>\n<\/li>\n<\/ul>\n<details class=\"spoiler\">\n<summary>\u0424\u0435\u0440\u043c\u0430 &#8212; \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043b\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0441\u0446\u0435\u043d\u044b<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">enum WorldScreen {   map,   battle, }  class World {   public activeScreen!: WorldScreen } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0423 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0446\u0435\u043d\u044b \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pokemon-game\/blob\/48456ba0b4db518770c8215207b803ec2a2b2cda\/src\/classes.ts#L10\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c<\/a> \u043c\u0435\u0442\u043e\u0434\u044b \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 <code>activate<\/code> \u0438 \u0434\u0435\u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 <code>deactivate<\/code>.<\/p>\n<p>\u041c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pokemon-game\/blob\/48456ba0b4db518770c8215207b803ec2a2b2cda\/src\/World.ts#L135\" rel=\"noopener noreferrer nofollow\">\u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u043d\u043e\u0435<\/a>. \u0414\u043b\u044f \u0441\u0446\u0435\u043d\u044b \u043a\u0430\u0440\u0442\u044b, \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0432\u0435\u0441\u044c \u044d\u043a\u0440\u0430\u043d &#8212; \u0447\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u044d\u043a\u0440\u0430\u043d, \u0442\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043d\u0430 \u043a\u0430\u0440\u0442\u0435 <code>Responsive Scale<\/code> + \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u0443\u044e \u043a\u0430\u043c\u0435\u0440\u0443 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430. \u0414\u043b\u044f \u0441\u0446\u0435\u043d\u044b \u0431\u0438\u0442\u0432\u044b \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442 \u043f\u044b\u0442\u0430\u044e\u0441\u044c \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0432\u0441\u044e \u0441\u0446\u0435\u043d\u0443 <code>Letterbox scale<\/code>.<\/p>\n<details class=\"spoiler\">\n<summary>PixiJS \u0441\u043e\u0432\u0435\u0442 08: \u041e\u0442\u043b\u0430\u0434\u043a\u0430  <\/summary>\n<div class=\"spoiler__content\">\n<p>\u0412 <code>PixiJS<\/code> \u043d\u0435\u0442 \u0440\u0435\u0436\u0438\u043c\u0430 \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438, \u0435\u0433\u043e \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0432\u0440\u0443\u0447\u043d\u0443\u044e (\u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/pixijs-devtools\/aamddddknhcagpehecnhphigffljadon\" rel=\"noopener noreferrer nofollow\">\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435<\/a>). \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043b\u0438 \u0432\u0441\u0435 <code>Graphics<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0432\u0441\u0435 <code>Sprites<\/code> \u0438 <code>AnimatedSprites<\/code> \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u043f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0439 <code>Graphics<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430:<\/p>\n<pre><code class=\"typescript\">import { Container, Sprite, type Texture } from 'pixi.js'  class Some extends Container {   constructor(texture: Texture) {     super()     const gr = new Graphics()     gr.beginFill(0xff00ff)     gr.drawRoundedRect(0, 0, 500, 500, 5)     gr.endFill()     this.addChild(gr)      const spr = new Sprite(texture)     this.addChild(spr)          if (debug) {       const dgr = new Graphics()       dgr.beginFill(0xffffff)       dgr.drawRect(0, 0, this.width, this.height)       dgr.endFill()       dgr.alpha = 0.5       this.addChild(dgr)     }   } } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434 \u043c\u0435\u0436\u0434\u0443 \u0441\u0446\u0435\u043d\u0430\u043c\u0438 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043f\u043b\u0430\u0432\u043d\u044b\u0439, \u043a\u0430\u043a \u0432 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0438\u0434\u0435\u043e. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/github.com\/greensock\/GSAP\" rel=\"noopener noreferrer nofollow\">GreenSock Animation Platform<\/a>, \u043e\u0434\u043d\u0430\u043a\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u043f\u043e\u043d\u0438\u043c\u0430\u044e, \u0447\u0442\u043e \u0434\u043b\u044f \u0442\u0430\u043a\u0438\u0445 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0442\u044f\u043d\u0443\u0442\u044c \u0446\u0435\u043b\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443.<\/p>\n<p>\u0414\u043b\u044f \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432 \u043c\u0435\u0436\u0434\u0443 \u0441\u0446\u0435\u043d\u0430\u043c\u0438 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pokemon-game\/blob\/48456ba0b4db518770c8215207b803ec2a2b2cda\/src\/SplashScreen.ts#L29\" rel=\"noopener noreferrer nofollow\">\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0447\u0451\u0440\u043d\u044b\u0439 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a<\/a> <code>SplashScreen<\/code>. \u0418 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u044d\u0442\u043e\u0442 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439 <code>alpha<\/code> <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pokemon-game\/blob\/48456ba0b4db518770c8215207b803ec2a2b2cda\/src\/World.ts#L156\" rel=\"noopener noreferrer nofollow\">\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430<\/a>.<\/p>\n<h3>\u041f\u043e\u043a\u0435\u043c\u043e\u043d: \u0441\u0446\u0435\u043d\u0430 \u043a\u0430\u0440\u0442\u044b &#8212; \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436 \u0438\u0433\u0440\u043e\u043a\u0430<\/h3>\n<p>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u0430: \u043d\u0430\u0440\u0435\u0437\u0430\u0442\u044c \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0440\u0435\u0439\u043c\u044b \u0438 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0432\u0441\u0451 \u0432 \u043e\u0434\u0438\u043d \u0430\u0442\u043b\u0430\u0441.<\/p>\n<p>\u0414\u043b\u044f \u043f\u043e\u043a\u0430\u0437\u0430 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u0440\u0430\u0437\u0443 \u0432\u0441\u0435 <code>AnimatedSprite<\/code> \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f. \u0412 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0443\u0436\u043d\u044b\u0439 \u0441\u043f\u0440\u0430\u0439\u0442, \u0430 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pokemon-game\/blob\/48456ba0b4db518770c8215207b803ec2a2b2cda\/src\/Player.ts#L55\" rel=\"noopener noreferrer nofollow\">\u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u043a\u0440\u044b\u0432\u0430\u044e<\/a>. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0443 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430 \u0435\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f <code>direction<\/code>:<\/p>\n<details class=\"spoiler\">\n<summary>\u041d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">enum PlayerDirection {   up,   down,   left,   right }  class Player extends Container {   private _direction!: PlayerDirection } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0415\u0441\u043b\u0438 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436 \u0438\u0434\u0451\u0442, \u0442\u043e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pokemon-game\/blob\/48456ba0b4db518770c8215207b803ec2a2b2cda\/src\/Player.ts#L147\" rel=\"noopener noreferrer nofollow\">\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f<\/a>, \u0430 \u0435\u0441\u043b\u0438 \u0441\u0442\u043e\u0438\u0442 &#8212; \u0442\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043d\u0430 \u043f\u0430\u0443\u0437\u0435.<\/p>\n<p>\u0414\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u043e\u0439 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0441\u044c \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f <code>keyup<\/code> \u0438 <code>keydown<\/code>. \u0418\u0437 \u0441\u043e\u0431\u044b\u0442\u0438\u044f <code>event<\/code> \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>code<\/code> \u0432\u043c\u0435\u0441\u0442\u043e <code>key<\/code> &#8212; \u0442\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0434\u0430\u0436\u0435 \u043d\u0430 \u0440\u0443\u0441\u0441\u043a\u043e\u0439 \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u043a\u0435 (\u0430 \u0432\u043e\u0442 <code>keyCode<\/code> &#8212; \u0443\u0441\u0442\u0430\u0440\u0435\u043b\u043e). \u041d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0442\u0438\u043a \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430 \u043f\u0440\u0438\u0431\u0430\u0432\u043b\u044f\u044e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0443, \u0435\u0441\u043b\u0438 \u043d\u0430\u0436\u0430\u0442\u044b \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438. \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u0436\u0438\u043c\u0430\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043b\u0430\u0432\u0438\u0448, \u0438 \u043f\u043e\u0442\u043e\u043c \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043e\u0442\u0436\u0438\u043c\u0430\u0435\u0442, \u0442\u043e \u044f <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pokemon-game\/blob\/48456ba0b4db518770c8215207b803ec2a2b2cda\/src\/Player.ts#L194\" rel=\"noopener noreferrer nofollow\">\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e \u043a\u0430\u043a\u0438\u0435 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u043d\u0430\u0436\u0430\u0442\u044b\u043c\u0438<\/a>, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u043b \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u043d\u0430\u0436\u0430\u0442\u044b\u043c \u043a\u043b\u0430\u0432\u0438\u0448\u0430\u043c.<\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>pointer<\/code> \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u044f \u0434\u0435\u043b\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043e\u043a\u043d\u0430 \u043d\u0430 \u0441\u0435\u043a\u0442\u043e\u0440\u0430, \u0438 \u043f\u0440\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0438 <code>pointerdown<\/code> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c.<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u043e\u043a\u0435\u043c\u043e\u043d &#8212; \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/cbe\/7bb\/1d5\/cbe7bb1d500b269f4c0965e93b0976aa.png\" alt=\"\u041f\u043e\u043a\u0435\u043c\u043e\u043d - \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f\" width=\"493\" height=\"507\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/cbe\/7bb\/1d5\/cbe7bb1d500b269f4c0965e93b0976aa.png\"\/><\/p>\n<div><figcaption>\u041f\u043e\u043a\u0435\u043c\u043e\u043d &#8212; \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u044c\/\u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430, \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0434\u0435\u043b\u0430\u044e. \u0415\u0441\u043b\u0438 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pokemon-game\/blob\/48456ba0b4db518770c8215207b803ec2a2b2cda\/src\/MoveInterface.ts#L175\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u043d\u0430 \u043b\u0438\u043d\u0438\u0438 &#171;\u043a\u0440\u0435\u0441\u0442\u0430&#187;<\/a> &#8212; \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436 \u0438\u0434\u0451\u0442 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438. \u0414\u043b\u044f \u0434\u0438\u0430\u0433\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0432 \u043e\u0431\u043e\u0438\u0445 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438. \u0422\u0443\u0442 \u043f\u043e \u0445\u043e\u0440\u043e\u0448\u0435\u043c\u0443 \u0434\u043b\u044f \u0434\u0438\u0430\u0433\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u043d\u0443\u0436\u043d\u043e \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0435\u043a\u0442\u043e\u0440, \u0430 \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043f\u043e \u0434\u0438\u0430\u0433\u043e\u043d\u0430\u043b\u0438 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436 \u0438\u0434\u0451\u0442 \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0447\u0435\u043c \u043f\u043e &#171;\u043a\u0440\u0435\u0441\u0442\u0443&#187;.<\/p>\n<p>\u041d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0442\u0438\u043a \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430 \u044f \u0434\u0432\u0438\u0433\u0430\u044e \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pokemon-game\/blob\/48456ba0b4db518770c8215207b803ec2a2b2cda\/src\/MapScreen.ts#L143\" rel=\"noopener noreferrer nofollow\">\u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0445 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f<\/a>. \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u044e \u0442\u0430\u043a\u0436\u0435 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u0441 \u0431\u043b\u043e\u043a\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u044e\u0442 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435. \u041f\u0440\u0438 \u0434\u0438\u0430\u0433\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u044f \u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u0443\u0434\u0430 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f, <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pokemon-game\/blob\/48456ba0b4db518770c8215207b803ec2a2b2cda\/src\/MapScreen.ts#L226\" rel=\"noopener noreferrer nofollow\">\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u043f\u0435\u0440\u043f\u0435\u043d\u0434\u0438\u043a\u0443\u043b\u044f\u0440\u043d\u043e\u0435 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435<\/a>, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432\u0434\u043e\u043b\u044c \u0441\u0442\u0435\u043d\u044b.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e \u0437\u0430\u0448\u0435\u043b <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pokemon-game\/blob\/48456ba0b4db518770c8215207b803ec2a2b2cda\/src\/MapScreen.ts#L200\" rel=\"noopener noreferrer nofollow\">\u043b\u0438 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436 \u043d\u0430 \u043f\u043e\u043b\u044f\u043d\u043a\u0443<\/a> \u0434\u043b\u044f \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 \u0441\u0446\u0435\u043d\u044b \u0431\u0438\u0442\u0432\u044b.<\/p>\n<h3>\u041f\u043e\u043a\u0435\u043c\u043e\u043d: \u0437\u0432\u0443\u043a<\/h3>\n<p>\u0414\u043b\u044f \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0437\u0432\u0443\u043a\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e <a href=\"https:\/\/github.com\/goldfire\/howler.js\" rel=\"noopener noreferrer nofollow\">HowlerJS<\/a> \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 (<code>21.7k<\/code> \u0437\u0432\u0451\u0437\u0434) \u043a\u0430\u043a \u0438 \u0432 \u0432\u0438\u0434\u0435\u043e. \u041f\u043e\u0434\u0433\u0440\u0443\u0437\u043a\u043e\u0439 \u0430\u0443\u0434\u0438\u043e \u0444\u0430\u0439\u043b\u043e\u0432 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pokemon-game\/blob\/48456ba0b4db518770c8215207b803ec2a2b2cda\/src\/audio.ts#L10\" rel=\"noopener noreferrer nofollow\">\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0441\u0430\u043c\u0430<\/a>, \u0442.\u043a. \u0437\u0432\u0443\u043a \u043d\u0435 \u043a\u0440\u0438\u0442\u0438\u0447\u0435\u043d, \u0442\u043e \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0443\u0436\u0435 \u043f\u043e\u0441\u043b\u0435 \u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u0433\u0440\u044b. \u041d\u0443\u0436\u043d\u043e \u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0442 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0437\u0432\u0443\u043a\u0430, \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u043b \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439.<\/p>\n<h3>\u041f\u043e\u043a\u0435\u043c\u043e\u043d: \u0441\u0446\u0435\u043d\u0430 \u0431\u0438\u0442\u0432\u044b<\/h3>\n<p>\u041f\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c \u0438\u0433\u0440\u044b, \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436, \u0433\u0443\u043b\u044f\u044f \u043f\u043e \u043f\u043e\u043b\u044f\u043d\u043a\u0435, <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pokemon-game\/blob\/48456ba0b4db518770c8215207b803ec2a2b2cda\/src\/MapScreen.ts#L217\" rel=\"noopener noreferrer nofollow\">\u043c\u043e\u0436\u0435\u0442<\/a> \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0431\u0438\u0442\u0432\u0443 \u043c\u0435\u0436\u0434\u0443 \u043f\u043e\u043a\u0435\u043c\u043e\u043d\u0430\u043c\u0438.<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u043e\u043a\u0435\u043c\u043e\u043d &#8212; \u0441\u0446\u0435\u043d\u0430 \u0431\u0438\u0442\u0432\u044b<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d45\/ecc\/574\/d45ecc57426eac459459255c4e001cfa.png\" alt=\"\u041f\u043e\u043a\u0435\u043c\u043e\u043d - \u0441\u0446\u0435\u043d\u0430 \u0431\u0438\u0442\u0432\u044b\" width=\"825\" height=\"466\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d45\/ecc\/574\/d45ecc57426eac459459255c4e001cfa.png\"\/><\/p>\n<div><figcaption>\u041f\u043e\u043a\u0435\u043c\u043e\u043d &#8212; \u0441\u0446\u0435\u043d\u0430 \u0431\u0438\u0442\u0432\u044b<\/figcaption><\/div>\n<\/figure>\n<p>\u0412 \u0431\u0438\u0442\u0432\u0435 \u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u043e\u0440\u0443\u0436\u0438\u044f (1, 2), \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u0437\u0434\u043e\u0440\u043e\u0432\u044c\u044f \u0435\u0433\u043e \u043f\u043e\u043a\u0435\u043c\u043e\u043d\u0430 \u0438 \u0432\u0440\u0430\u0433\u0430. \u0410 \u0442\u0430\u043a\u0436\u0435 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0434\u0438\u0430\u043b\u043e\u0433, \u0441 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435\u043c \u043a\u0442\u043e, \u043a\u043e\u043c\u0443, \u043d\u0430\u043d\u0451\u0441 \u043f\u043e\u0432\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435 \u0438 \u043a\u0442\u043e \u043f\u0440\u043e\u0438\u0433\u0440\u0430\u043b.<\/p>\n<\/div>\n<\/details>\n<p>\u0412 \u0432\u0438\u0434\u0435\u043e \u0430\u0432\u0442\u043e\u0440 \u0434\u0435\u043b\u0430\u0435\u0442 \u0441\u0446\u0435\u043d\u0443 \u0431\u0438\u0442\u0432\u044b \u043d\u0430 HTML + <code>2d<\/code> \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442. \u042f \u0436\u0435 \u043d\u0430\u0440\u0438\u0441\u0443\u044e \u0441\u0446\u0435\u043d\u0443 \u0431\u0438\u0442\u0432\u044b \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0430 <code>PixiJS<\/code>. \u0420\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0447\u0435\u043c \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c <code>HTML<\/code>+<code>CSS<\/code>. \u0420\u0438\u0441\u0443\u044e \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438, \u0433\u0434\u0435 \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0441\u043f\u0440\u0430\u0439\u0442\u044b, \u0438 \u0433\u0434\u0435 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438 \u0432\u043a\u043b\u044e\u0447\u0430\u044e \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0441\u044c \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f <code>pointer...<\/code>. \u0412 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043c\u043e\u0433\u0443 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pokemon-game\/blob\/48456ba0b4db518770c8215207b803ec2a2b2cda\/src\/AttacksBox.ts#L61\" rel=\"noopener noreferrer nofollow\">\u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435<\/a> \u043a\u043d\u043e\u043f\u043a\u0438 <code>hover<\/code>.<\/p>\n<p>\u0414\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u043e\u0441\u043a\u0438 \u0436\u0438\u0437\u043d\u0435\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e <code>GSAP<\/code> \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043a\u0430\u043a \u0432 \u0432\u0438\u0434\u0435\u043e. \u0428\u0440\u0438\u0444\u0442 \u044f \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u044e \u0432 \u0441\u0430\u043c\u043e\u043c <code>CSS<\/code> <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pokemon-game\/blob\/48456ba0b4db518770c8215207b803ec2a2b2cda\/src\/styles.css#L6\" rel=\"noopener noreferrer nofollow\">\u0444\u0430\u0439\u043b\u0435<\/a>. \u041d\u0443\u0436\u043d\u043e \u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0448\u0440\u0438\u0444\u0442 \u043d\u0435 \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u0438\u043b\u0441\u044f, \u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0448\u0440\u0438\u0444\u0442 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e &#8212; \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0442\u0430\u043a\u043e\u0439 \u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d \u0438 \u0432 <code>webgl<\/code>. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0448\u0440\u0438\u0444\u0442 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u0438\u0442\u044c, \u0430 \u0437\u0430\u0442\u0435\u043c <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pokemon-game\/blob\/48456ba0b4db518770c8215207b803ec2a2b2cda\/src\/index.html#L12\" rel=\"noopener noreferrer nofollow\">\u0435\u0449\u0435 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 DOM<\/a>, \u0442.\u0435. \u043a\u0430\u043a \u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pokemon-game\/blob\/48456ba0b4db518770c8215207b803ec2a2b2cda\/src\/AttacksBox.ts#L49\" rel=\"noopener noreferrer nofollow\">\u043f\u0435\u0440\u0435\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c<\/a> \u0432 <code>2d<\/code>\/<code>webgl<\/code>.<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043a\u0435\u043c\u043e\u043d \u0441\u0442\u0440\u0435\u043b\u044f\u0435\u0442 \u043e\u0433\u043d\u0435\u043d\u043d\u044b\u043c \u0448\u0430\u0440\u043e\u043c, <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pokemon-game\/blob\/48456ba0b4db518770c8215207b803ec2a2b2cda\/src\/Monster.ts#L70\" rel=\"noopener noreferrer nofollow\">\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e \u043d\u0430 \u0441\u0446\u0435\u043d\u0443 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u0440\u0430\u0439\u0442<\/a> \u0438 \u043f\u043e\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u044e \u0435\u0433\u043e \u043f\u043e \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u043a \u0432\u0440\u0430\u0433\u0443.<\/p>\n<h2>\u0418\u0433\u0440\u0430 03: \u0421\u0442\u0440\u0435\u043b\u044f\u043b\u043a\u0438<\/h2>\n<h3>\u0421\u0442\u0440\u0435\u043b\u044f\u043b\u043a\u0438: \u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435<\/h3>\n<p>\u0412\u0430\u0448 \u043a\u0440\u0443\u0433 (\u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436) \u0432 \u0446\u0435\u043d\u0442\u0440\u0435 \u044d\u043a\u0440\u0430\u043d\u0430. \u041d\u0430 \u043d\u0435\u0433\u043e \u043d\u0430\u043f\u0430\u0434\u0430\u044e\u0442 \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u0440\u0443\u0433\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u044d\u043a\u0440\u0430\u043d\u0430 \u0438 \u0434\u0432\u0438\u0433\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430. \u041f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043b\u044e\u0431\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u044d\u043a\u0440\u0430\u043d\u0430, \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0438\u0432\u0430\u0435\u0442 \u0442\u0443\u0434\u0430 \u0441\u043d\u0430\u0440\u044f\u0434, \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u0443\u0431\u0438\u0432\u0430\u044f \u0432\u0440\u0430\u0433\u0430. \u0412 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0432\u0440\u0430\u0433\u043e\u0432 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437.<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=eI9idPTT0c4\" rel=\"noopener noreferrer nofollow\">\u041e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u0438\u0434\u0435\u043e<\/a>.<\/p>\n<h3>\u0421\u0442\u0440\u0435\u043b\u044f\u043b\u043a\u0438: \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430<\/h3>\n<p>\u0417\u0434\u0435\u0441\u044c \u0443\u0436\u0435 \u044f <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-shooting-game\/blob\/5a3b7017c379af4fd5510e1b099e7ad75535ec95\/src\/index.html#L12\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u0431\u0430\u0432\u0438\u043b<\/a> \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-shooting-game\/blob\/5a3b7017c379af4fd5510e1b099e7ad75535ec95\/src\/styles.css#L14\" rel=\"noopener noreferrer nofollow\">CSS<\/a>. \u041f\u043e\u043a\u0430 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f <code>PixiJS<\/code> \u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043c\u043d\u043e\u0433\u043e\u0442\u043e\u0447\u0438\u0435.<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0440\u0435\u043b\u044f\u043b\u043a\u0438 &#8212; \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/66d\/50b\/7af\/66d50b7afc9bd3a8e9215dc1d5413789.png\" alt=\"\u0421\u0442\u0440\u0435\u043b\u044f\u043b\u043a\u0438 - \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430\" width=\"126\" height=\"50\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/66d\/50b\/7af\/66d50b7afc9bd3a8e9215dc1d5413789.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0435\u043b\u044f\u043b\u043a\u0438 &#8212; \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0432\u0441\u0435\u0433\u043e \u043a\u043e\u0434\u0430 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u044e \u0432 <code>try<\/code>\/<code>catch<\/code>, \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 &#8212; \u0438\u0433\u0440\u0430 \u043d\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f, \u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-shooting-game\/blob\/5a3b7017c379af4fd5510e1b099e7ad75535ec95\/src\/app.ts#L25\" rel=\"noopener noreferrer nofollow\">\u044f \u0432\u044b\u0432\u043e\u0436\u0443<\/a> \u043f\u0440\u044f\u043c\u0438\u043a\u043e\u043c \u0432 <code>div<\/code>.<\/p>\n<p>\u042d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 <code>Application<\/code> \u044f \u0441\u043e\u0437\u0434\u0430\u044e \u0432\u043d\u0443\u0442\u0440\u0438 <code>SceneManager<\/code> \u043a\u0430\u043a <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-shooting-game\/blob\/5a3b7017c379af4fd5510e1b099e7ad75535ec95\/src\/SceneManager.ts#L36\" rel=\"noopener noreferrer nofollow\">\u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e<\/a> <code>app<\/code>:<\/p>\n<details class=\"spoiler\">\n<summary>Scene Manager<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">abstract class SceneManager {   private static app: Application&lt;HTMLCanvasElement>   public static async initialize (): Promise&lt;void> {     const app = new Application&lt;HTMLCanvasElement>({       autoDensity: true,       resolution: window.devicePixelRatio ?? 1,       width: SceneManager.width,       height: SceneManager.height,       resizeTo: window     })      SceneManager.app = app   } } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<h3>\u0421\u0442\u0440\u0435\u043b\u044f\u043b\u043a\u0438: \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b \u0447\u0430\u0441\u0442\u0438\u0446<\/h3>\n<p>\u0414\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0445\u0441\u044f \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>ParticleContainer<\/code> \u0432\u043c\u0435\u0441\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 <code>Container<\/code>.<br \/> \u0417\u0434\u0435\u0441\u044c \u0435\u0441\u0442\u044c \u0440\u044f\u0434 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439.<\/p>\n<ol>\n<li>\n<p>\u041d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0437\u0430\u0440\u0430\u043d\u0435\u0435, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u0430\u043c\u044f\u0442\u044c.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0442\u043e\u043c\u043a\u0430\u043c\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u0440\u0430\u0439\u0442\u044b <code>Sprite<\/code> \u0443 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u0430\u044f \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0430 <code>Texture<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 \u0432\u043d\u0443\u0442\u0440\u0438 <code>Sprite<\/code>.<\/p>\n<\/li>\n<\/ol>\n<p>\u0418\u0437 \u043c\u0438\u043d\u0443\u0441\u043e\u0432, \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u043e \u0438\u0442\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e \u043f\u043e\u0442\u043e\u043c\u043a\u0430\u043c \u0432 <code>TypeScript<\/code> <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-shooting-game\/blob\/5a3b7017c379af4fd5510e1b099e7ad75535ec95\/src\/ShootingScene.ts#L115\" rel=\"noopener noreferrer nofollow\">\u0438\u0437-\u0437\u0430 \u044f\u0432\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0442\u0438\u043f\u043e\u0432<\/a>, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c <a href=\"https:\/\/github.com\/pixijs\/pixijs\/issues\/9348\" rel=\"noopener noreferrer nofollow\">\u044d\u0442\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u044f\u0442<\/a>.<\/p>\n<p>\u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0434\u043b\u044f \u0432\u0440\u0430\u0433\u043e\u0432 \u044f \u0434\u0435\u043b\u0430\u044e \u043e\u0434\u0438\u043d \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0447\u0430\u0441\u0442\u0438\u0446 <code>enemiesContainer<\/code>, \u0434\u043b\u044f \u0441\u043d\u0430\u0440\u044f\u0434\u043e\u0432 &#8212; \u0432\u0442\u043e\u0440\u043e\u0439 <code>projectilesContainer<\/code> \u0438 \u0434\u043b\u044f <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-shooting-game\/blob\/5a3b7017c379af4fd5510e1b099e7ad75535ec95\/src\/ShootingScene.ts#L50\" rel=\"noopener noreferrer nofollow\">\u0432\u0437\u0440\u044b\u0432\u043e\u0432 &#8212; \u0442\u0440\u0435\u0442\u0438\u0439<\/a> <code>particlesContainer<\/code>.<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0440\u0435\u043b\u044f\u043b\u043a\u0438 &#8212; \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b \u0447\u0430\u0441\u0442\u0438\u0446<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">this.enemiesContainer = new ParticleContainer(2000, { scale: true, position: true, tint: true }) this.addChild(this.enemiesContainer)  this.projectilesContainer = new ParticleContainer(2000, { scale: true, position: true, tint: true }) this.addChild(this.projectilesContainer)  this.particlesContainer = new ParticleContainer(2000, { scale: true, position: true, tint: true }) this.addChild(this.particlesContainer) <\/code><\/pre>\n<p><code>scale: true, position: true, tint: true }<\/code> &#8212; \u042d\u0442\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442, \u0447\u0442\u043e \u044f \u0431\u0443\u0434\u0443 \u043e\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c <code>tint<\/code>, \u043f\u0435\u0440\u0435\u0434\u0432\u0438\u0433\u0430\u0442\u044c <code>position<\/code> \u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c <code>scale<\/code> \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u0442\u043e\u043c\u043a\u0430 \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u043e.<\/p>\n<p>\u041f\u043e\u0440\u044f\u0434\u043e\u043a \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432 \u0442\u0430\u043a\u043e\u0439, \u0447\u0442\u043e\u0431\u044b \u0432\u0437\u0440\u044b\u0432\u044b \u0440\u0438\u0441\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u043f\u043e\u0432\u0435\u0440\u0445 \u0441\u043d\u0430\u0440\u044f\u0434\u043e\u0432 \u0438 \u0432\u0440\u0430\u0433\u043e\u0432. \u0410 \u0441\u043d\u0430\u0440\u044f\u0434\u044b \u043f\u043e\u0432\u0435\u0440\u0445 \u0432\u0440\u0430\u0433\u043e\u0432.<\/p>\n<\/div>\n<\/details>\n<h3>\u0421\u0442\u0440\u0435\u043b\u044f\u043b\u043a\u0438: \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0443\u0440<\/h3>\n<p><code>PixiJS<\/code> \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b <code>Texture<\/code> \u0438\u0437 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 <code>Graphics<\/code>.<\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c <code>renderer.generateTexture<\/code> \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0433\u0440\u0430\u0444\u0438\u043a\u0443 &#8212; \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443:<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0443\u0440 \u0438\u0437 \u0433\u0440\u0430\u0444\u0438\u043a\u0438<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">import { Sprite, Graphics, type Application, type Texture } from 'pixi.js' interface IParticleOptions {   app: Application   radius: number   vx: number   vy: number   fillColor: number }  class Particle extends Sprite {   static textureCache: Texture   setup (options: IParticleOptions): void {     let texture = Particle.textureCache     if (texture == null) {       const circle = new Graphics()       circle.beginFill(0xffffff)       circle.drawCircle(0, 0, this.radius)       circle.endFill()       circle.cacheAsBitmap = true       texture = options.app.renderer.generateTexture(circle)       Particle.textureCache = texture     }     this.texture = texture     this.scale.set(options.radius * 2 \/ texture.width, options.radius * 2 \/ texture.height)     this.tint = options.fillColor   } } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0413\u0440\u0430\u0444\u0438\u043a\u0443 (\u043a\u0440\u0443\u0433) <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-shooting-game\/blob\/5a3b7017c379af4fd5510e1b099e7ad75535ec95\/src\/Particle.ts#L32\" rel=\"noopener noreferrer nofollow\">\u044f \u0440\u0438\u0441\u0443\u044e<\/a> \u0431\u0435\u043b\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c <code>0xffffff<\/code> \u0438 \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u0440\u0430\u0434\u0438\u0443\u0441\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0442\u043e\u043c \u043f\u0440\u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0438 \u043d\u0435 \u0431\u044b\u043b\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043e\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u0432 \u043b\u044e\u0431\u043e\u0439 \u0446\u0432\u0435\u0442 (<code>tint<\/code>). \u0421\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443 \u044f \u043b\u043e\u0436\u0443 \u0432 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043a\u043b\u0430\u0441\u0441\u0430 <code>textureCache<\/code> \u0438 \u0437\u0430\u0442\u0435\u043c \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0435\u0451 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043f\u0440\u0430\u0439\u0442\u0430 \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435 \u0447\u0430\u0441\u0442\u0438\u0446.<\/p>\n<p>\u0414\u043b\u044f \u0432\u0440\u0430\u0433\u043e\u0432 \u044f \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-shooting-game\/blob\/5a3b7017c379af4fd5510e1b099e7ad75535ec95\/src\/Enemy.ts#L73\" rel=\"noopener noreferrer nofollow\">\u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0439 \u0446\u0432\u0435\u0442 \u0438 \u0440\u0430\u0434\u0438\u0443\u0441<\/a> \u043f\u0440\u0438 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0438. \u0420\u0430\u0434\u0438\u0443\u0441 \u0432\u0440\u0430\u0433\u0430 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0442\u043e, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u043f\u043e \u043d\u0435\u043c\u0443 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043f\u0430\u0441\u0442\u044c, \u0442.\u043a. \u0441\u043d\u0430\u0440\u044f\u0434 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-shooting-game\/blob\/5a3b7017c379af4fd5510e1b099e7ad75535ec95\/src\/ShootingScene.ts#L182\" rel=\"noopener noreferrer nofollow\">\u0432\u044b\u0447\u0438\u0442\u0430\u0435\u0442<\/a> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0436\u0438\u0437\u043d\u0435\u0439 (\u0440\u0430\u0434\u0438\u0443\u0441\u0430) \u0438\u0437 \u0432\u0440\u0430\u0433\u0430.<\/p>\n<h3>\u0421\u0442\u0440\u0435\u043b\u044f\u043b\u043a\u0438: \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\u043c\u0438<\/h3>\n<p>\u041f\u0440\u0438 \u043a\u0430\u0441\u0430\u043d\u0438\u0438 <code>pointertap<\/code> \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-shooting-game\/blob\/5a3b7017c379af4fd5510e1b099e7ad75535ec95\/src\/ShootingScene.ts#L250\" rel=\"noopener noreferrer nofollow\">\u044f \u0441\u043e\u0437\u0434\u0430\u044e<\/a> \u0441\u043d\u0430\u0440\u044f\u0434 <code>Projectile<\/code>, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441\u043d\u0430\u0440\u044f\u0434\u043e\u0432 \u0438 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u044e \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u0441\u043d\u0430\u0440\u044f\u0434\u0430 \u0432 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043e\u0442 \u0446\u0435\u043d\u0442\u0440\u0430.<\/p>\n<p>\u0421\u0447\u0435\u0442\u0447\u0438\u043a \u0432 \u0438\u0433\u0440\u0435 \u043e\u0442\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0444\u0440\u0435\u0439\u043c\u043e\u0432 <code>elapsedFrames<\/code>, \u0447\u0442\u043e\u0431\u044b \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-shooting-game\/blob\/5a3b7017c379af4fd5510e1b099e7ad75535ec95\/src\/ShootingScene.ts#L271\" rel=\"noopener noreferrer nofollow\">\u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0445 \u0432\u0440\u0430\u0433\u043e\u0432<\/a> <code>Enemy<\/code> \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u044d\u043a\u0440\u0430\u043d\u0430.<\/p>\n<p>\u041f\u0440\u0438 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0438 \u0441\u043d\u0430\u0440\u044f\u0434\u0430 \u0441 \u0432\u0440\u0430\u0433\u043e\u043c \u044f <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-shooting-game\/blob\/5a3b7017c379af4fd5510e1b099e7ad75535ec95\/src\/ShootingScene.ts#L171\" rel=\"noopener noreferrer nofollow\">\u0441\u043e\u0437\u0434\u0430\u044e \u044d\u0444\u0444\u0435\u043a\u0442 \u0432\u0437\u0440\u044b\u0432\u0430<\/a> \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0438\u0446. \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0438\u0446 \u0432\u0437\u0440\u044b\u0432\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0440\u0430\u0434\u0438\u0443\u0441\u0430 \u0432\u0440\u0430\u0433\u0430.<\/p>\n<p>\u0414\u043b\u044f \u0432\u0441\u0435\u0445 \u0442\u0440\u0451\u0445 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u043f\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u044f \u0443\u0434\u0430\u043b\u044f\u044e \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432. \u0414\u043b\u044f \u0441\u043d\u0430\u0440\u044f\u0434\u043e\u0432 &#8212; \u044d\u0442\u043e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-shooting-game\/blob\/5a3b7017c379af4fd5510e1b099e7ad75535ec95\/src\/ShootingScene.ts#L158\" rel=\"noopener noreferrer nofollow\">\u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0435<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-shooting-game\/blob\/5a3b7017c379af4fd5510e1b099e7ad75535ec95\/src\/ShootingScene.ts#L136\" rel=\"noopener noreferrer nofollow\">\u0432\u044b\u0445\u043e\u0434 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u044d\u043a\u0440\u0430\u043d\u0430<\/a>. \u0414\u043b\u044f \u0432\u0440\u0430\u0433\u043e\u0432 &#8212; <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-shooting-game\/blob\/5a3b7017c379af4fd5510e1b099e7ad75535ec95\/src\/ShootingScene.ts#L128\" rel=\"noopener noreferrer nofollow\">\u0432\u044b\u0445\u043e\u0434 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u044d\u043a\u0440\u0430\u043d\u0430<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-shooting-game\/blob\/5a3b7017c379af4fd5510e1b099e7ad75535ec95\/src\/ShootingScene.ts#L184\" rel=\"noopener noreferrer nofollow\">\u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0435 \u0441\u043e \u0441\u043d\u0430\u0440\u044f\u0434\u043e\u043c<\/a>. \u0414\u043b\u044f \u0447\u0430\u0441\u0442\u0438\u0446 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-shooting-game\/blob\/5a3b7017c379af4fd5510e1b099e7ad75535ec95\/src\/ShootingScene.ts#L117\" rel=\"noopener noreferrer nofollow\">\u044d\u0442\u043e \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441 \u043a\u0430\u0436\u0434\u044b\u043c \u0442\u0438\u043a\u043e\u043c, \u0438\u043b\u0438 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-shooting-game\/blob\/5a3b7017c379af4fd5510e1b099e7ad75535ec95\/src\/ShootingScene.ts#L120\" rel=\"noopener noreferrer nofollow\">\u0432\u044b\u0445\u043e\u0434 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u044d\u043a\u0440\u0430\u043d\u0430<\/a>.<\/p>\n<details class=\"spoiler\">\n<summary>PixiJS \u0441\u043e\u0432\u0435\u0442 09: \u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0412 <code>PixiJS<\/code> \u043d\u0435\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u043e\u0447\u0438\u0441\u0442\u043a\u0438 \u0432\u0441\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.<br \/> \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043f\u0440\u043e\u0439\u0442\u0438\u0441\u044c \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u043f\u043e \u0432\u0441\u0435\u043c \u043f\u043e\u0442\u043e\u043c\u043a\u0430\u043c \u0438 \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u043a\u0430\u0436\u0434\u043e\u0433\u043e:<\/p>\n<pre><code class=\"typescript\">while (this.container.children[0] != null) {   this.container.removeChild(this.container.children[0]) } <\/code><\/pre>\n<p>\u0418\u043b\u0438 \u043e\u0431\u0445\u043e\u0434 \u0441 \u0441\u0430\u043c\u043e\u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435\u043c:<\/p>\n<pre><code class=\"typescript\">while (this.container.children[0] != null) {   this.container.children[0].removeFromParent() } <\/code><\/pre>\n<p>\u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u044f \u0441 \u043d\u0430\u0447\u0430\u043b\u0430:<\/p>\n<pre><code class=\"typescript\">for (let i = 0; i &lt; this.container.children.length; i++) {   const child = this.container.children[i]   if (isReadyForDelete(child)) {     child.removeFromParent()     i--   } } <\/code><\/pre>\n<p>\u0418\u0442\u0435\u0440\u0430\u0446\u0438\u044f \u0441 \u043a\u043e\u043d\u0446\u0430 (\u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0442\u044c \u0438\u043d\u0434\u0435\u043a\u0441 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438):<\/p>\n<pre><code class=\"typescript\">for (let i = this.container.children.length - 1; i >= 0; i--) {   const child = this.container.children[i]   if (isReadyForDelete(child)) {     child.removeFromParent()   } } <\/code><\/pre>\n<p>\u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432 \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441\u043e 2-\u0433\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0430 \u0438 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u044f 5-\u043c:<\/p>\n<pre><code class=\"typescript\">this.container.removeChildren(2, 5) <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<h3>\u0421\u0442\u0440\u0435\u043b\u044f\u043b\u043a\u0438: \u0441\u043b\u0435\u0434 \u043e\u0442 \u0441\u043d\u0430\u0440\u044f\u0434\u0430<\/h3>\n<p>\u0412 <code>2d<\/code> \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u043a\u0430\u0434\u0440, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044f \u043a \u043d\u0435\u043c\u0443 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c, \u043a\u0430\u043a <a href=\"https:\/\/github.com\/chriscourses\/HTML5-Canvas-and-JavaScript-Games-for-Beginners\/blob\/main\/main.js#L371\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0430\u0432\u0442\u043e\u0440 \u0432\u0438\u0434\u0435\u043e<\/a>. \u0412 <code>webgl<\/code> \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u043d\u043e \u0435\u0441\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b.<\/p>\n<p>\u0414\u043b\u044f <code>PixiJS<\/code> \u044f \u043d\u0430\u0448\u0435\u043b <a href=\"https:\/\/pixijs.io\/examples\/#\/demos-advanced\/mouse-trail.js\" rel=\"noopener noreferrer nofollow\">SimpleRope<\/a> \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043f\u043e\u0437\u0434\u043d\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0435\u043b\u0430\u043b \u043f\u043e \u0441\u0432\u043e\u0435\u043c\u0443.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043f\u0440\u0438\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c\u0441\u044f \u0431\u043b\u0438\u0436\u0435, \u0442\u043e \u0441\u043b\u0435\u0434 \u043e\u0442 \u0441\u043d\u0430\u0440\u044f\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u043a\u0440\u0443\u0433\u0430\u043c\u0438. \u042d\u0442\u0438 \u043a\u0440\u0443\u0433\u0438 \u0434\u043e\u043b\u0436\u043d\u044b &#171;\u0437\u0430\u043f\u0430\u0437\u0434\u044b\u0432\u0430\u0442\u044c&#187; \u0432 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0438 \u043e\u0442 \u0441\u0430\u043c\u043e\u0433\u043e \u0441\u043d\u0430\u0440\u044f\u0434\u0430, \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043c\u0435\u043d\u044c\u0448\u0435 \u0441\u0430\u043c\u043e\u0433\u043e \u0441\u043d\u0430\u0440\u044f\u0434\u0430, \u0438\u043b\u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0442\u044c\u0441\u044f \u0432 \u0440\u0430\u0434\u0438\u0443\u0441\u0435, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u0435\u0435 \u0447\u0435\u043c \u0441\u0430\u043c \u0441\u043d\u0430\u0440\u044f\u0434.<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0440\u0435\u043b\u044f\u043b\u043a\u0438 &#8212; \u0441\u043b\u0435\u0434 \u043e\u0442 \u0441\u043d\u0430\u0440\u044f\u0434\u0430<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/cc1\/6d1\/2c1\/cc16d12c1301ff50189d7116fb17f18a.png\" alt=\"\u0421\u0442\u0440\u0435\u043b\u044f\u043b\u043a\u0438 - \u0441\u043b\u0435\u0434 \u043e\u0442 \u0441\u043d\u0430\u0440\u044f\u0434\u0430\" width=\"450\" height=\"245\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/cc1\/6d1\/2c1\/cc16d12c1301ff50189d7116fb17f18a.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0435\u043b\u044f\u043b\u043a\u0438 &#8212; \u0441\u043b\u0435\u0434 \u043e\u0442 \u0441\u043d\u0430\u0440\u044f\u0434\u0430<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u044f \u0441\u043e\u0437\u0434\u0430\u044e \u0441\u043d\u0430\u0440\u044f\u0434, \u044f <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-shooting-game\/blob\/5a3b7017c379af4fd5510e1b099e7ad75535ec95\/src\/Projectile.ts#L73\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u044e<\/a> \u0441\u043b\u0435\u0434 \u0438\u0437 \u043a\u0440\u0443\u0433\u043e\u0432 \u043c\u0435\u043d\u044c\u0448\u0435\u0433\u043e \u0440\u0430\u0434\u0438\u0443\u0441\u0430 \u0438 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438. \u0422\u0430\u043a \u0447\u0442\u043e \u0441\u0430\u043c\u044b\u0439 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u043a\u0440\u0443\u0433 \u0432 \u0445\u0432\u043e\u0441\u0442\u0435 (\u0441\u043b\u0435\u0434\u0435) \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0441\u0430\u043c\u044b\u0439 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u0440\u0430\u0434\u0438\u0443\u0441 \u0438 \u0441\u0430\u043c\u0443\u044e \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0441\u0442\u0430\u0432\u0430\u0442\u044c \u043d\u0430 \u0441\u0430\u043c\u043e\u0435 \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0442 \u0441\u043d\u0430\u0440\u044f\u0434\u0430. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u044f \u0437\u0430\u0434\u0430\u044e \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u043a\u0440\u0443\u0433\u0443 \u043e\u0442\u0441\u0442\u0430\u0432\u0430\u043d\u0438\u0435 <code>dt<\/code> \u0438 \u0435\u0441\u043b\u0438 \u0440\u0430\u0441\u0441\u0442\u043e\u043d\u0438\u0435 \u0434\u043e \u0441\u043d\u0430\u0440\u044f\u0434\u0430 \u043f\u0440\u0435\u0432\u044b\u0448\u0430\u0435\u0442 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0435, \u0442\u043e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-shooting-game\/blob\/5a3b7017c379af4fd5510e1b099e7ad75535ec95\/src\/Projectile.ts#L142\" rel=\"noopener noreferrer nofollow\">\u044f \u0434\u0432\u0438\u0433\u0430\u044e \u043a\u0440\u0443\u0433<\/a> \u0443\u0436\u0435 \u043d\u0430 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u043c \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0438:<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0440\u0435\u043b\u044f\u043b\u043a\u0438 &#8212; \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0430\u0432\u0430\u043d\u0438\u044f \u043e\u0442 \u0441\u043d\u0430\u0440\u044f\u0434\u0430<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">if (dx > this.minDelta) {   this.x += this.vx > 0 ? dx * dt : -dx * dt } else {   this.x = this.mainX }  if (dy > this.minDelta) {   this.y += this.vy > 0 ? dy * dt : -dy * dt } else {   this.y = this.mainY } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0423\u0434\u0430\u043b\u044f\u044e \u0441\u043b\u0435\u0434 \u0438\u0437 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0447\u0430\u0441\u0442\u0438\u0446 \u043a\u043e\u0433\u0434\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b \u0447\u0442\u043e \u044d\u0442\u043e \u0447\u0430\u0441\u0442\u0438\u0446\u0430 \u0441\u043b\u0435\u0434\u0430 <code>isProjectile === false<\/code> \u0438 \u0435\u0441\u043b\u0438 \u0433\u043b\u0430\u0432\u043d\u044b\u0439 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-shooting-game\/blob\/5a3b7017c379af4fd5510e1b099e7ad75535ec95\/src\/ShootingScene.ts#L201\" rel=\"noopener noreferrer nofollow\">\u0441\u043d\u0430\u0440\u044f\u0434 \u0431\u0443\u0434\u0435\u0442 \u0443\u0434\u0430\u043b\u0451\u043d \u0442\u043e\u0436\u0435<\/a>:<\/p>\n<details class=\"spoiler\">\n<summary>\u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0441\u043b\u0435\u0434\u0430 \u043e\u0442 \u0441\u043d\u0430\u0440\u044f\u0434\u0430<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">if (removedProjectileIds.length > 0) {   let startIdx = -1   let endIdx = -1   this.projectilesContainer.children.forEach((child, idx) => {     const projectileTrail: ProjectileTrail = child as ProjectileTrail     if (!projectileTrail.isProjectile &amp;&amp; removedProjectileIds.includes(projectileTrail.mainId)) {       if (startIdx === -1) {         startIdx = idx       }       endIdx = idx     }   })   if (startIdx > -1 &amp;&amp; endIdx > -1) {     this.projectilesContainer.removeChildren(startIdx, endIdx)   } } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<h3>\u0421\u0442\u0440\u0435\u043b\u044f\u043b\u043a\u0438: \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>\u041c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u0433\u0440\u044b \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 <code>Responsive Scale<\/code> &#8212; \u0442\u0435\u043c \u0443 \u043a\u043e\u0433\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u044d\u043a\u0440\u0430\u043d &#8212; \u043b\u0435\u0433\u0447\u0435 \u0438\u0433\u0440\u0430\u0442\u044c, \u0442.\u043a. \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u0438\u043a\u043e\u0432 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0449\u0438\u0445\u0441\u044f \u0438\u0437-\u0437\u0430 \u044d\u043a\u0440\u0430\u043d\u0430. \u0410 \u0432\u043e\u0442 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u0434\u0438\u0430\u043b\u043e\u0433\u043e\u0432\u043e\u0435 \u043e\u043a\u043d\u043e <code>StartModal<\/code> \u044f <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-shooting-game\/blob\/5a3b7017c379af4fd5510e1b099e7ad75535ec95\/src\/ShootingScene.ts#L85\" rel=\"noopener noreferrer nofollow\">\u0446\u0435\u043d\u0442\u0440\u0438\u0440\u0443\u044e \u043f\u043e\u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435<\/a> \u0431\u0435\u0437 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0421\u0430\u043c \u0436\u0435 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0439 \u0434\u0438\u0430\u043b\u043e\u0433 \u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043a\u043e\u0433\u0434\u0430 \u0438\u0433\u0440\u0430 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0430\u0441\u044c, \u0432 \u043e\u043a\u043d\u0435 \u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043d\u0430\u0431\u0440\u0430\u043d\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0447\u043a\u043e\u0432, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043a\u043d\u043e\u043f\u043a\u0443 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0438\u0433\u0440\u044b.<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0440\u0435\u043b\u044f\u043b\u043a\u0438 &#8212; \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/9a6\/74e\/f9f\/9a674ef9f8ca517d4e49c774c4723027.png\" alt=\"\u0421\u0442\u0440\u0435\u043b\u044f\u043b\u043a\u0438 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e\" width=\"411\" height=\"307\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9a6\/74e\/f9f\/9a674ef9f8ca517d4e49c774c4723027.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0435\u043b\u044f\u043b\u043a\u0438 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<h2>\u0418\u0433\u0440\u0430 04: \u041c\u0430\u0440\u0438\u043e<\/h2>\n<h3>\u041c\u0430\u0440\u0438\u043e: \u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435<\/h3>\n<p>\u041f\u0435\u0440\u0441\u043e\u043d\u0430\u0436 \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u043d\u0430 \u043a\u043e\u0441\u043c\u043e\u043d\u0430\u0432\u0442\u0430, \u0431\u0435\u0433\u0430\u0435\u0442 \u043f\u043e \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u043c. \u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u044b\u0433\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u044f\u043c\u044b \u0438 \u0437\u0430\u043f\u0440\u044b\u0433\u0438\u0432\u0430\u0442\u044c \u043d\u0430 \u0432\u044b\u0448\u0435\u0441\u0442\u043e\u044f\u0449\u0438\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b. \u041f\u0435\u0440\u0441\u043e\u043d\u0430\u0436 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0439\u0442\u0438 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u0443\u0440\u043e\u0432\u043d\u044f \u0432\u043b\u0435\u0432\u043e \u0438\u043b\u0438 \u0432\u043f\u0440\u0430\u0432\u043e. \u041f\u0435\u0440\u0441\u043e\u043d\u0430\u0436 \u0432\u0440\u044f\u0442-\u043b\u0438 \u0432\u044b\u0439\u0434\u0435\u0442 \u0437\u0430 \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u043a\u0440\u0430\u0439 \u0443\u0440\u043e\u0432\u043d\u044f \u0438\u0437-\u0437\u0430 \u0433\u0440\u0430\u0432\u0438\u0442\u0430\u0446\u0438\u0438. \u0415\u0441\u043b\u0438 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436 \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u043d\u0438\u0436\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u0443\u0440\u043e\u0432\u043d\u044f &#8212; \u0438\u0433\u0440\u0430 \u043f\u0440\u043e\u0438\u0433\u0440\u0430\u043d\u0430.<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=4q2vvZn5aoo\" rel=\"noopener noreferrer nofollow\">\u041e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u0438\u0434\u0435\u043e<\/a>.<\/p>\n<h3>\u041c\u0430\u0440\u0438\u043e: \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430<\/h3>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0438\u0433\u0440\u0435 \u044f \u0441\u0434\u0435\u043b\u0430\u043b \u0434\u0432\u0443\u0445\u044d\u0442\u0430\u043f\u043d\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443:<\/p>\n<ol>\n<li>\n<p>\u041a\u043e\u0433\u0434\u0430 <code>PixiJS<\/code> \u0435\u0449\u0435 \u043d\u0435 \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u0438\u043b\u0430\u0441\u044c &#8212; \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e <code>CSS<\/code> \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043c\u043d\u043e\u0433\u043e\u0442\u043e\u0447\u0438\u0439 &#8212; \u043a\u0430\u043a \u0432 \u0438\u0433\u0440\u0435 <code>\u0421\u0442\u0440\u0435\u043b\u044f\u043b\u043a\u0438<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0433\u0434\u0430 <code>PixiJS<\/code> \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u0438\u043b\u0430\u0441\u044c \u0438 \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c &#8212; \u0442\u043e\u0433\u0434\u0430 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-mario-game\/blob\/e74f6c05c961e6597bb2277451f6a21d25590757\/src\/LoaderScene.ts#L55\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438<\/a> \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0432 <code>LoaderScene<\/code> &#8212; \u044d\u0442\u0430 \u0441\u0446\u0435\u043d\u0430 \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-mario-game\/blob\/e74f6c05c961e6597bb2277451f6a21d25590757\/src\/LoaderScene.ts#L71\" rel=\"noopener noreferrer nofollow\">\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442<\/a>.<\/p>\n<\/li>\n<\/ol>\n<details class=\"spoiler\">\n<summary>\u041c\u0430\u0440\u0438\u043e &#8212; \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/18d\/704\/760\/18d70476076c21d94de68a739c22cd6e.png\" alt=\"\u041c\u0430\u0440\u0438\u043e - \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430\" width=\"397\" height=\"139\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/18d\/704\/760\/18d70476076c21d94de68a739c22cd6e.png\"\/><\/p>\n<div><figcaption>\u041c\u0430\u0440\u0438\u043e &#8212; \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-mario-game\/blob\/e74f6c05c961e6597bb2277451f6a21d25590757\/src\/app.ts#L19\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044e<\/a> <code>SidescrollScene<\/code> \u0438 \u0443\u0431\u0438\u0440\u0430\u044e <code>LoaderScene<\/code>.<\/p>\n<h3>\u041c\u0430\u0440\u0438\u043e: \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/h3>\n<p>\u041f\u0435\u0440\u0441\u043e\u043d\u0430\u0436 \u043a\u0430\u043a \u0438 \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u0438\u0433\u0440\u0430\u0445 \u043c\u043e\u0436\u0435\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f, \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u043e\u0439, \u043c\u044b\u0448\u044c\u044e \u0438\u043b\u0438 \u0441\u0435\u043d\u0441\u043e\u0440\u043d\u044b\u043c \u044d\u043a\u0440\u0430\u043d\u043e\u043c.<\/p>\n<p>\u0414\u043b\u044f \u043c\u044b\u0448\u043a\u0438 \u0438 \u0441\u0435\u043d\u0441\u043e\u0440\u043d\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430, \u0435\u0441\u0442\u044c \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0434\u043b\u044f \u043d\u0430\u0436\u0430\u0442\u0438\u044f. \u0422\u0430\u043a \u0432\u0441\u0451 \u0447\u0442\u043e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-mario-game\/blob\/e74f6c05c961e6597bb2277451f6a21d25590757\/src\/Player.ts#L159\" rel=\"noopener noreferrer nofollow\">\u0432\u044b\u0448\u0435 \u0433\u043e\u043b\u043e\u0432\u044b<\/a> &#8212; \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u043f\u0440\u044b\u0436\u043e\u043a + \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u043e\u0442 \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u044b \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430. \u0410 \u0435\u0441\u043b\u0438 \u043d\u0438\u0436\u0435 \u0433\u043e\u043b\u043e\u0432\u044b, \u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435.<\/p>\n<details class=\"spoiler\">\n<summary>\u041c\u0430\u0440\u0438\u043e &#8212; \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d58\/c6a\/2af\/d58c6a2af020ef0a598aac65c48e06b4.png\" alt=\"\u041c\u0430\u0440\u0438\u043e - \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\" width=\"451\" height=\"501\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d58\/c6a\/2af\/d58c6a2af020ef0a598aac65c48e06b4.png\"\/><\/p>\n<div><figcaption>\u041c\u0430\u0440\u0438\u043e &#8212; \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0421\u0430\u043c \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436 \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u043f\u0440\u0430\u0439\u0442\u044b \u0434\u043b\u044f \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u0432\u043b\u0435\u0432\u043e \u0438\u043b\u0438 \u0432\u043f\u0440\u0430\u0432\u043e, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-mario-game\/blob\/e74f6c05c961e6597bb2277451f6a21d25590757\/src\/Player.ts#L174\" rel=\"noopener noreferrer nofollow\">\u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/a>.<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436 \u0441\u0442\u043e\u0438\u0442 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-mario-game\/blob\/e74f6c05c961e6597bb2277451f6a21d25590757\/src\/Player.ts#L189\" rel=\"noopener noreferrer nofollow\">\u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043f\u0440\u043e\u0441\u0442\u0430\u0438\u0432\u0430\u043d\u0438\u044f<\/a> (\u0441\u0442\u043e\u044f\u043d\u0438\u044f) &#8212; \u044d\u0442\u0443 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u044f \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u044e \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <code>idleAnimation<\/code>. \u042d\u0442\u043e \u0434\u0435\u043b\u0430\u044e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-mario-game\/blob\/e74f6c05c961e6597bb2277451f6a21d25590757\/src\/Player.ts#L206\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u0441\u043b\u0435 \u0431\u0435\u0433\u0430<\/a> \u0432 \u044d\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0442.\u043a. \u0441\u0442\u043e\u044f\u0442\u044c \u0432\u043b\u0435\u0432\u043e \u0438 \u0441\u0442\u043e\u044f\u0442\u044c \u0432\u043f\u0440\u0430\u0432\u043e &#8212; \u0440\u0430\u0437\u043d\u044b\u0435 \u0432\u0435\u0449\u0438.<\/p>\n<h3>\u041c\u0430\u0440\u0438\u043e: \u0443\u0440\u043e\u0432\u0435\u043d\u044c\/\u043a\u0430\u0440\u0442\u0430<\/h3>\n<p>\u0421\u0430\u043c\u0430 \u043a\u0430\u0440\u0442\u0430 \u0438\u043b\u0438 \u0443\u0440\u043e\u0432\u0435\u043d\u044c (\u0432\u0441\u0435\u0433\u043e \u043e\u0434\u0438\u043d) \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-mario-game\/blob\/e74f6c05c961e6597bb2277451f6a21d25590757\/src\/SidescrollScene.ts#L49\" rel=\"noopener noreferrer nofollow\">\u0434\u0432\u0443\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0444\u043e\u043d\u0430<\/a>. \u041e\u0431\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043a\u043b\u0430\u0434\u0443 \u0432 <code>background<\/code> \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e.<\/p>\n<p>\u0412 \u0438\u0433\u0440\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b \u043d\u0435\u043a\u043e\u0435 \u043f\u043e\u0434\u043e\u0431\u0438\u0435 \u043a\u0430\u043c\u0435\u0440\u044b, \u0442.\u043a. \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u0447\u0435\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435. \u0412 \u0438\u0433\u0440\u0435 \u041f\u043e\u043a\u0435\u043c\u043e\u043d \u044f \u0441\u0434\u0435\u043b\u0430\u043b \u043f\u0440\u043e\u0441\u0442\u043e \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0435, \u0438 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0443\u0440\u043e\u0432\u043d\u044f &#8212; \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0438 \u0431\u0443\u0434\u0435\u0442. \u0412 \u044d\u0442\u043e\u0439 \u0438\u0433\u0440\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0435\u0449\u0435 \u043e\u0434\u043d\u043e \u0443\u0441\u043b\u043e\u0432\u0438\u0435 &#8212; \u043a\u0430\u043a \u0438 \u0432 \u0432\u0438\u0434\u0435\u043e &#8212; \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436 \u043c\u043e\u0436\u0435\u0442 \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0445 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 \u043f\u043e \u0443\u0440\u043e\u0432\u043d\u044e, \u043e\u0434\u043d\u0430\u043a\u043e \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f \u043d\u0435 \u0431\u0443\u0434\u0435\u0442.<\/p>\n<details class=\"spoiler\">\n<summary>\u041c\u0430\u0440\u0438\u043e &#8212; \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0443\u0440\u043e\u0432\u043d\u044f<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1c1\/c41\/fea\/1c1c41fea578abf5bbc270a870967e24.png\" alt=\"\u041c\u0430\u0440\u0438\u043e - \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0443\u0440\u043e\u0432\u043d\u044f\" width=\"482\" height=\"617\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1c1\/c41\/fea\/1c1c41fea578abf5bbc270a870967e24.png\"\/><\/p>\n<div><figcaption>\u041c\u0430\u0440\u0438\u043e &#8212; \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0443\u0440\u043e\u0432\u043d\u044f<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0420\u0430\u0437\u043c\u0435\u0440\u044b \u043a\u0430\u043c\u0435\u0440\u044b \u0432 \u0438\u0433\u0440\u0435 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0442 \u0441 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438 \u044d\u043a\u0440\u0430\u043d\u0430 \u043a\u0430\u043a \u0438 \u0432 \u0438\u0433\u0440\u0435 \u041f\u043e\u043a\u0435\u043c\u043e\u043d.<br \/> \u0414\u043b\u044f \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0443\u0440\u043e\u0432\u043d\u044f <code>world<\/code> \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043a\u0430\u043c\u0435\u0440\u044b\/\u044d\u043a\u0440\u0430\u043d\u0430 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>pivot<\/code> &#8212; \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0442\u043e\u0447\u043a\u0443 \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 (\u043d\u0430\u0447\u0430\u043b\u043e \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442). \u041f\u043e\u0437\u0436\u0435 \u044f \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u0438 \u043e\u0431\u044b\u0447\u043d\u044b\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c <code>position<\/code> (\u0438\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e <code>x<\/code>\/<code>y<\/code>), \u043e\u0434\u043d\u0430\u043a\u043e \u043d\u0430 \u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 <a href=\"https:\/\/stackoverflow.com\/a\/72178628\/5431545\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u0438\u0441\u043a \u0434\u0430\u043b<\/a> \u0442\u0430\u043a\u043e\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0438\u0433\u0440\u043e\u043a <code>Player<\/code> \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0443\u0440\u043e\u0432\u043d\u044e \u0432\u043b\u0435\u0432\u043e-\u0432\u043f\u0440\u0430\u0432\u043e \u044f <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-mario-game\/blob\/e74f6c05c961e6597bb2277451f6a21d25590757\/src\/SidescrollScene.ts#L167\" rel=\"noopener noreferrer nofollow\">\u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u044e \u043f\u043e\u0437\u0438\u0446\u0438\u044e<\/a> (<code>position<\/code>) <code>world<\/code> \u0442\u043e\u0436\u0435, \u0435\u0441\u043b\u0438 \u0438\u0433\u0440\u043e\u043a \u0432\u044b\u0448\u0435\u043b \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u044b \u043d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435 \u0432\u044b\u0448\u0435. \u041f\u0435\u0440\u0441\u043e\u043d\u0430\u0436 \u0438\u0433\u0440\u043e\u043a\u0430 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-mario-game\/blob\/e74f6c05c961e6597bb2277451f6a21d25590757\/src\/SidescrollScene.ts#L66\" rel=\"noopener noreferrer nofollow\">\u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b<\/a> \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 <code>world<\/code>. \u041a\u043e\u0433\u0434\u0430 \u044f \u0434\u0432\u0438\u0433\u0430\u044e \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430, \u0442\u043e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-mario-game\/blob\/e74f6c05c961e6597bb2277451f6a21d25590757\/src\/SidescrollScene.ts#L139\" rel=\"noopener noreferrer nofollow\">\u044f \u0438\u0437\u043c\u0435\u043d\u044f\u044e<\/a> \u0435\u0433\u043e \u043f\u043e\u0437\u0438\u0446\u0438\u044e <code>position<\/code> \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043a\u0430\u0440\u0442\u044b <code>world<\/code>.<\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043f\u0440\u0438 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0438 <code>world<\/code> \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u043c\u043d\u0435 \u043d\u0443\u0436\u043d\u043e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-mario-game\/blob\/e74f6c05c961e6597bb2277451f6a21d25590757\/src\/SidescrollScene.ts#L175\" rel=\"noopener noreferrer nofollow\">\u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u0430\u0442\u044c<\/a> \u043f\u043e\u0437\u0438\u0446\u0438\u044e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c \u043a\u0430\u043a \u0441\u043c\u0435\u0449\u0430\u0442\u044c <code>background<\/code>, \u0442.\u043a. \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>pivot<\/code> \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432 \u0442\u043e\u0436\u0435.<\/p>\n<p>\u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0444\u043e\u043d\u0430 <code>background<\/code> \u0432 \u0434\u0432\u0430 \u0440\u0430\u0437\u0430 \u043c\u0435\u043d\u044c\u0448\u0435 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430 &#8212; \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f <a href=\"https:\/\/www.w3schools.com\/howto\/howto_css_parallax.asp\" rel=\"noopener noreferrer nofollow\">Parallax Scrolling<\/a> \u044d\u0444\u0444\u0435\u043a\u0442.<\/p>\n<p>\u0418\u0442\u043e\u0433\u043e: \u0441\u043c\u0435\u0449\u0430\u044e \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430 <code>player.x<\/code>, \u0441\u043c\u0435\u0449\u0430\u044e \u0441\u0430\u043c\u0443 \u043a\u0430\u0440\u0442\u0443 <code>world.pivot.x<\/code> &#8212; \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u0438 \u0441\u043c\u0435\u0449\u0430\u044e \u0444\u043e\u043d <code>background.pivot.x<\/code>.<\/p>\n<h3>\u041c\u0430\u0440\u0438\u043e: \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b<\/h3>\n<p>\u041f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043f\u0440\u044b\u0433\u0430\u0435\u0442 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-mario-game\/blob\/e74f6c05c961e6597bb2277451f6a21d25590757\/src\/Platforms.ts#L16\" rel=\"noopener noreferrer nofollow\">\u0431\u044b\u0432\u0430\u044e\u0442 \u0434\u0432\u0443\u0445 \u0442\u0438\u043f\u043e\u0432<\/a>. \u0420\u0430\u0437\u043c\u0435\u0440 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c \u043f\u043e\u043b\u0443\u0447\u0430\u044e \u043f\u0440\u044f\u043c\u0438\u043a\u043e\u043c \u0438\u0437 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b\/\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u041c\u0435\u0441\u0442\u0430 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-mario-game\/blob\/e74f6c05c961e6597bb2277451f6a21d25590757\/src\/Platforms.ts#L26\" rel=\"noopener noreferrer nofollow\">\u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u043f\u0440\u044f\u043c \u0432 \u043a\u043e\u0434\u0435<\/a>, \u0432 \u044d\u0442\u043e\u0439 \u0438\u0433\u0440\u0435 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u0442\u0430\u0439\u043b\u043e\u0432\u044b\u0445 \u043a\u0430\u0440\u0442 \u043a\u0430\u043a \u0432 \u0438\u0433\u0440\u0435 \u041f\u043e\u043a\u0435\u043c\u043e\u043d.<\/p>\n<p>\u0412\u0441\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-mario-game\/blob\/e74f6c05c961e6597bb2277451f6a21d25590757\/src\/SidescrollScene.ts#L63\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e<\/a> \u0432 <code>world<\/code> \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0441\u043c\u0435\u0449\u0430\u044f <code>world<\/code> \u044f \u043d\u0435 \u043c\u0435\u043d\u044f\u044e \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u0433\u0440\u043e\u043a\u0430 \u043a \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u043c.<\/p>\n<p>\u041d\u0430 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-mario-game\/blob\/e74f6c05c961e6597bb2277451f6a21d25590757\/src\/SidescrollScene.ts#L163\" rel=\"noopener noreferrer nofollow\">\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u0438\u043b\u0430 \u0442\u044f\u0436\u0435\u0441\u0442\u0438<\/a> \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u043e\u043d \u0432 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u043c \u043f\u0430\u0434\u0435\u043d\u0438\u0438. \u0410 \u0432\u043e\u0442 \u043a\u043e\u0433\u0434\u0430 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436 \u0441\u0442\u043e\u0438\u0442 \u043d\u0430 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435 &#8212; \u043d\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442.<br \/> \u0414\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u043e\u0438\u0442 \u0438\u043b\u0438 \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0441\u0438 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u043d\u0435\u043c\u043d\u043e\u0433\u043e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-mario-game\/blob\/e74f6c05c961e6597bb2277451f6a21d25590757\/src\/SidescrollScene.ts#L151\" rel=\"noopener noreferrer nofollow\">\u0438\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438<\/a>. \u0411\u0435\u0440\u0443 \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430, \u043e\u043d\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0432\u044b\u0448\u0435 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u043a\u0440\u0430\u044f \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b, \u0432\u0434\u043e\u0431\u0430\u0432\u043e\u043a \u043a \u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0437\u0438\u0446\u0438\u044f \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430 \u043f\u043b\u044e\u0441 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0437\u0430\u0445\u043e\u0434\u0438\u0442\u044c \u0437\u0430 \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u043a\u0440\u0430\u044f \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b &#8212; \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u0440\u0435\u0441\u043e\u043d\u0430\u0436 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435. \u042d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0437\u0430\u043f\u0440\u044b\u0433\u043d\u0443\u0442\u044c \u043d\u0430 \u0432\u044b\u0448\u0435\u0441\u0442\u043e\u044f\u0449\u0443\u044e \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443 \u043d\u0430\u0445\u043e\u0434\u044f\u0441\u044c \u043f\u043e\u0434 \u043d\u0435\u0439.<\/p>\n<details class=\"spoiler\">\n<summary>\u041c\u0430\u0440\u0438\u043e &#8212; \u043f\u0440\u044b\u0436\u043e\u043a \u043d\u0430 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/3f3\/054\/7bb\/3f30547bbd62266ae1706d95208ce86e.png\" alt=\"\u041c\u0430\u0440\u0438\u043e - \u043f\u0440\u044b\u0436\u043e\u043a \u043d\u0430 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443\" width=\"434\" height=\"571\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/3f3\/054\/7bb\/3f30547bbd62266ae1706d95208ce86e.png\"\/><\/p>\n<div><figcaption>\u041c\u0430\u0440\u0438\u043e &#8212; \u043f\u0440\u044b\u0436\u043e\u043a \u043d\u0430 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<h2>\u0418\u0433\u0440\u0430 05: \u0414\u0440\u0430\u043a\u0438<\/h2>\n<h3>\u0414\u0440\u0430\u043a\u0438: \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435<\/h3>\n<p>\u0415\u0441\u0442\u044c \u0434\u0432\u0430 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430, \u043e\u0434\u043d\u0438\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0433\u0440\u043e\u043a <code>\u21161<\/code>, \u0434\u0440\u0443\u0433\u0438\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0433\u0440\u043e\u043a <code>\u21162<\/code>. \u041f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0438 \u043c\u043e\u0433\u0443\u0442 \u043f\u0435\u0440\u0435\u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u0443\u0440\u043e\u0432\u043d\u044e, \u043d\u0430\u043d\u043e\u0441\u0438\u0442\u044c \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0443 \u0443\u0434\u0430\u0440\u044b. \u0412\u044b\u0438\u0433\u0440\u044b\u0432\u0430\u0435\u0442 \u0442\u043e\u0442 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u0437\u0434\u043e\u0440\u043e\u0432\u044c\u044f (\u0436\u0438\u0437\u043d\u0438). \u041d\u0430 \u0432\u0441\u0451 \u043f\u0440\u043e \u0432\u0441\u0451 \u0443 \u0438\u0433\u0440\u043e\u043a\u043e\u0432 \u0435\u0441\u0442\u044c <code>90<\/code> \u0441\u0435\u043a\u0443\u043d\u0434.<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=vyqbNFMDRGQ\" rel=\"noopener noreferrer nofollow\">\u041e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u0438\u0434\u0435\u043e<\/a>.<\/p>\n<p>\u042f \u0441\u0434\u0435\u043b\u0430\u043b \u0442\u0430\u043a, \u0447\u0442\u043e \u043b\u0435\u0432\u044b\u0439 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436 \u043d\u0430\u043d\u043e\u0441\u0438\u0442 \u0443\u0434\u0430\u0440\u044b \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0435\u0435, \u043d\u043e \u0441\u0438\u043b\u044c\u043d\u0435\u0435. \u0410 \u043f\u0440\u0430\u0432\u044b\u0439 \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u043d\u043e \u0441\u043b\u0430\u0431\u0435\u0435. \u0412\u044b\u0441\u043e\u0442\u0430 \u043f\u0440\u044b\u0436\u043a\u0430 \u0438 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0442\u0430\u043a\u0436\u0435 \u0440\u0430\u0437\u043d\u044b\u0435.<\/p>\n<h3>\u0414\u0440\u0430\u043a\u0438: \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u043a\u0430 \u0448\u0440\u0438\u0444\u0442\u043e\u0432<\/h3>\n<p>\u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0438 \u043e\u0442 \u0438\u0433\u0440\u044b \u041f\u043e\u043a\u0435\u043c\u043e\u043d, \u0433\u0434\u0435 \u044f \u0441\u0430\u043c \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u043b \u0448\u0440\u0438\u0444\u0442 \u0447\u0435\u0440\u0435\u0437 <code>CSS<\/code> \u0442\u0443\u0442 \u044f \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0448\u0440\u0438\u0444\u0442 \u0447\u0435\u0440\u0435\u0437 \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a <code>PixiJS<\/code>. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-fighting-game\/blob\/9af3753748e8252b19396e143da0076004115661\/src\/LoaderScene.ts#L12\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043b \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443 \u0448\u0440\u0438\u0444\u0442\u0430<\/a> \u0432 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442\u0435:<\/p>\n<details class=\"spoiler\">\n<summary>\u041c\u0430\u043d\u0438\u0444\u0435\u0441\u0442 &#8212; \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443 \u0448\u0440\u0438\u0444\u0442\u0430<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">export const manifest: ResolverManifest = {   bundles: [     {       name: 'bundle-1',       assets: {         spritesheet: 'assets\/spritesheets\/spritesheet.json',         background: 'assets\/images\/background.png',         font: 'assets\/fonts\/Press_Start_2P.woff2'       }     }   ] } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e <a href=\"https:\/\/github.com\/pixijs\/pixijs\/issues\/9286\" rel=\"noopener noreferrer nofollow\">\u044f \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b \u0431\u0430\u0433 \u0432 Firefox<\/a>, \u0438\u0437-\u0437\u0430 \u043d\u0435\u043a\u0430\u043d\u043e\u043d\u0438\u0447\u043d\u043e\u0433\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0448\u0440\u0438\u0444\u0442\u0430 <code>Press Start 2p<\/code>, \u0442.\u043a. \u0446\u0438\u0444\u0440\u0430 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u043f\u043e\u0441\u043b\u0435 \u043f\u0440\u043e\u0431\u0435\u043b\u0430. \u041f\u0440\u0438\u0448\u043b\u043e\u0441\u044c <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-fighting-game\/blob\/04615b8f265d4cfda317781c50587ea2b790e575\/src\/LoaderScene.ts#L12\" rel=\"noopener noreferrer nofollow\">\u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442<\/a> \u0438 \u0442\u043e, \u043a\u0430\u043a \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0448\u0440\u0438\u0444\u0442 \u0438 \u0432\u0441\u0451 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e.<\/p>\n<p>\u0422.\u0435. \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a <code>PixiJS<\/code> \u0434\u043b\u044f \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0432\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c <code>DOM<\/code> \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u0442\u0430\u043a\u0438\u043c \u0448\u0440\u0438\u0444\u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0448\u0440\u0438\u0444\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0432 <code>2d<\/code> \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 &#8212; \u0432\u0441\u0435 \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0441\u0430\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a. <a href=\"https:\/\/github.com\/pixijs\/pixijs\/blob\/356abaaad852b248f0aa3f6873f5d7d2a56e3a50\/packages\/text-html\/src\/HTMLTextStyle.ts#L254\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0443\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f<\/a> <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/FontFace\" rel=\"noopener noreferrer nofollow\">FontFace API<\/a> \u0434\u043b\u044f \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u043a\u0438 \u0448\u0440\u0438\u0444\u0442\u043e\u0432.<\/p>\n<h3>\u0414\u0440\u0430\u043a\u0438: \u0441\u043f\u0440\u0430\u0439\u0442\u044b \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0435\u0439 \u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0446\u0435\u043d\u044b<\/h3>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436 \u044d\u0442\u043e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-fighting-game\/blob\/04615b8f265d4cfda317781c50587ea2b790e575\/src\/Fighter.ts#L50\" rel=\"noopener noreferrer nofollow\">\u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043a\u043b\u0430\u0441\u0441\u0430<\/a> <code>Fighter<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442\u0441\u044f \u043e\u0442 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 <code>Container<\/code>.<\/p>\n<p>\u0412\u043d\u0443\u0442\u0440\u0438 \u043a\u043b\u0430\u0441\u0441\u0430 <code>Fighter<\/code> <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-fighting-game\/blob\/04615b8f265d4cfda317781c50587ea2b790e575\/src\/Fighter.ts#L40\" rel=\"noopener noreferrer nofollow\">\u0435\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435<\/a> \u0432\u0441\u0435\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 (\u0430 \u043f\u043e \u0441\u0443\u0442\u0438 \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439):<\/p>\n<details class=\"spoiler\">\n<summary>\u0414\u0440\u0430\u043a\u0438 &#8212; \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0431\u043e\u0439\u0446\u0430<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">enum FighterAnimation {   idle = 'idle',   run = 'run',   jump = 'jump',   fall = 'fall',   attack = 'attack',   death = 'death',   takeHit = 'takeHit', } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c\u0438 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e, \u043a\u0430\u043a \u0438 \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u0438\u0433\u0440\u0430\u0445.<\/p>\n<p>\u041f\u043e\u0432\u0442\u043e\u0440\u0438\u0432 \u043e\u043f\u044b\u0442 \u0430\u0432\u0442\u043e\u0440\u0430 \u0432\u0438\u0434\u0435\u043e, \u044f \u0442\u043e\u0436\u0435 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-fighting-game\/blob\/04615b8f265d4cfda317781c50587ea2b790e575\/src\/Fighter.ts#L63\" rel=\"noopener noreferrer nofollow\">\u0441\u0434\u0435\u043b\u0430\u043b \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430<\/a> \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0435\u0439 \u0432 <code>2.5<\/code>. \u042d\u0442\u043e \u0432 \u0440\u0430\u0437\u044b \u0443\u0441\u043b\u043e\u0436\u043d\u0438\u043b\u043e \u0440\u0430\u0441\u0447\u0435\u0442 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0435\u0439 &#8212; \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-fighting-game\/blob\/04615b8f265d4cfda317781c50587ea2b790e575\/src\/Fighter.ts#L315\" rel=\"noopener noreferrer nofollow\">\u043f\u0438\u0441\u0430\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438<\/a> \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0441\u0446\u0435\u043d\u044b.<\/p>\n<p>\u0412\u0434\u043e\u0431\u0430\u0432\u043e\u043a \u0444\u0440\u0435\u0439\u043c\u044b \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0435\u0439 \u0438\u0437\u043c\u0435\u0440\u044f\u044e\u0442\u0441\u044f \u0432 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-fighting-game\/blob\/04615b8f265d4cfda317781c50587ea2b790e575\/src\/assets\/spritesheets\/spritesheet.json#L186\" rel=\"noopener noreferrer nofollow\">200 \u043d\u0430 200<\/a> \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436 (\u0444\u0440\u0435\u0439\u043c) \u043d\u0435 \u0441\u043c\u0435\u0449\u0430\u043b\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d \u0430\u0442\u0430\u043a\u0443\u0435\u0442. \u041e\u0442\u0441\u044e\u0434\u0430 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0432 \u0443\u0447\u0451\u0442\u0435 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0434\u043b\u044f \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0439 \u0441 \u0437\u0435\u043c\u043b\u0451\u0439. \u042d\u0442\u043e\u0442 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u043c\u0435\u043d\u044c\u0448\u0435 \u0447\u0435\u043c \u0432\u0435\u0441\u044c \u0441\u043f\u0440\u0430\u0439\u0442.<\/p>\n<details class=\"spoiler\">\n<summary>\u0414\u0440\u0430\u043a\u0438 &#8212; \u0433\u0430\u0431\u0430\u0440\u0438\u0442\u044b \u0441\u043f\u0440\u0430\u0439\u0442\u0430 \u0438 \u0433\u0430\u0431\u0430\u0440\u0438\u0442\u044b \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u0434\u043b\u044f \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0439<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/155\/24b\/757\/15524b75753df5437ff76a0ebc934154.png\" alt=\"\u0414\u0440\u0430\u043a\u0438 - \u0433\u0430\u0431\u0430\u0440\u0438\u0442\u044b \u0441\u043f\u0440\u0430\u0439\u0442\u0430 \u0438 \u0433\u0430\u0431\u0430\u0440\u0438\u0442\u044b \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u0434\u043b\u044f \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0439\" width=\"549\" height=\"467\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/155\/24b\/757\/15524b75753df5437ff76a0ebc934154.png\"\/><\/p>\n<div><figcaption>\u0414\u0440\u0430\u043a\u0438 &#8212; \u0433\u0430\u0431\u0430\u0440\u0438\u0442\u044b \u0441\u043f\u0440\u0430\u0439\u0442\u0430 \u0438 \u0433\u0430\u0431\u0430\u0440\u0438\u0442\u044b \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u0434\u043b\u044f \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0439<\/figcaption><\/div>\n<\/figure>\n<ol>\n<li>\n<p>\u041f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0432\u0441\u0435\u0433\u043e \u0441\u043f\u0440\u0430\u0439\u0442\u0430<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0443\u0447\u0430\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0432 \u0440\u0430\u0441\u0447\u0435\u0442\u0435 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0439<\/p>\n<\/li>\n<\/ol>\n<\/div>\n<\/details>\n<p>\u0414\u043b\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0446\u0435\u043d\u044b \u044f \u0432\u044b\u0431\u0440\u0430\u043b <code>Letterbox scale<\/code> \u043c\u0435\u0442\u043e\u0434. \u0422.\u0435. \u043c\u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u0441\u044e \u0441\u0446\u0435\u043d\u0443 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u044c \u044d\u043a\u0440\u0430\u043d\u0430. \u0427\u0442\u043e\u0431\u044b \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u044c <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-fighting-game\/blob\/04615b8f265d4cfda317781c50587ea2b790e575\/src\/FightingScene.ts#L165\" rel=\"noopener noreferrer nofollow\">\u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 \u0441\u0446\u0435\u043d\u044b \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e<\/a> <code>width<\/code> \u0438 <code>height<\/code> \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b \u0444\u043e\u043d\u0430. \u0418 \u0434\u0430\u043b\u0435\u0435 \u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 \u043d\u0430\u0448\u0435\u0439 \u0441\u0446\u0435\u043d\u0435 \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c \u0438 \u0432\u0441\u0451 \u0433\u043e\u0442\u043e\u0432\u043e&#8230;<\/p>\n<details class=\"spoiler\">\n<summary>PixiJS \u0441\u043e\u0432\u0435\u0442 10: \u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b &#8212; \u0448\u0438\u0440\u0438\u043d\u0430 \u0438 \u0432\u044b\u0441\u043e\u0442\u0430<\/summary>\n<div class=\"spoiler__content\">\n<p>\u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b \u0432 <code>PixiJS<\/code> \u043b\u0435\u0433\u0447\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u0430\u043a \u0433\u0440\u0443\u043f\u043f\u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432. \u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043a\u0430\u043a \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442.<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0432\u044b\u0441\u043e\u0442\u0443 <code>container.height<\/code> \u0438\u043b\u0438 \u0448\u0438\u0440\u0438\u043d\u0443 <code>container.width<\/code> \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 <code>getter<\/code>. \u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043e \u0432\u0441\u0435\u043c \u0441\u0432\u043e\u0438\u043c \u043f\u043e\u0442\u043e\u043c\u043a\u0430\u043c \u0438 \u0430\u043a\u043a\u0443\u043c\u0443\u043b\u0438\u0440\u0443\u0435\u0442 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0434\u043b\u0438\u043d\u0443 \u0438 \u0448\u0438\u0440\u0438\u043d\u0443. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043b\u0435\u0432\u044b\u0439 \u043a\u0440\u0430\u0439 \u0441\u0430\u043c\u043e\u0433\u043e \u043b\u0435\u0432\u043e\u0433\u043e \u043f\u043e\u0442\u043e\u043c\u043a\u0430 \u0438 \u043f\u0440\u0430\u0432\u044b\u0439 \u043a\u0440\u0430\u0439 \u0441\u0430\u043c\u043e\u0433\u043e \u043f\u0440\u0430\u0432\u043e\u0433\u043e \u043f\u043e\u0442\u043e\u043c\u043a\u0430 \u0438 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.<\/p>\n<p>\u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0435 \u0448\u0438\u0440\u0438\u043d\u0443 \u0438\u043b\u0438 \u0432\u044b\u0441\u043e\u0442\u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u0432\u0441\u0435 \u043f\u043e\u0442\u043e\u043c\u043a\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0438 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u043f\u043e\u0442\u043e\u043c\u043a\u0430\u043c\u0438 \u0442\u043e\u0436\u0435.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0436\u0435 \u0432\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438 \u0448\u0438\u0440\u0438\u043d\u044b \u0438 \u0432\u044b\u0441\u043e\u0442\u044b, \u0442\u043e \u0432\u0430\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u0440\u0435\u0437\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043c\u0430\u0441\u043a\u0438 <code>Mask<\/code>.<br \/> \u0421\u043e\u0437\u0434\u0430\u0451\u043c (\u0440\u0438\u0441\u0443\u0435\u043c) \u043c\u0430\u0441\u043a\u0443 \u043a\u0430\u043a \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u044b <code>grMask = Graphics<\/code>. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043c\u0430\u0441\u043a\u0443 \u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u0440\u0435\u0437\u0430\u0442\u044c, \u0432 \u043e\u0434\u043d\u043e\u0433\u043e \u0438 \u0442\u043e\u0433\u043e-\u0436\u0435 \u0436\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f. \u0418 \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>.mask = grMask<\/code> \u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u0440\u0435\u0437\u0430\u0442\u044c.<\/p>\n<pre><code class=\"typescript\">import { Container, Graphics } from 'pixi.js'  const grMask = new Graphics() grMask.beginFill(0xffffff) grMask.drawRect(0, 0, 200, 200) grMask.endFill()  const containerToCut = new Container() containerToCut.mask = grMask  this.addChild(grMask) this.addChild(containerToCut) <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041d\u043e \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\u043c\u0438 \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u043d\u0435 \u0442\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u0430.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u044f \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c \u043a\u0430\u043a \u0436\u0435 \u0432\u0441\u0451 \u0442\u0430\u043a\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440.<br \/> \u041a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u0432 \u043c\u043e\u0451\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0443\u0433\u043b\u0430\u0445 \u0443\u0440\u043e\u0432\u043d\u044f, \u0442\u0430\u043a, \u0447\u0442\u043e \u0438\u0445 \u0441\u043f\u0440\u0430\u0439\u0442\u044b \u0432\u044b\u0445\u043e\u0434\u044f\u0442 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u0443\u0440\u043e\u0432\u043d\u044f &#8212; \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0448\u0438\u0440\u0438\u043d\u044b \u0438 \u0432\u044b\u0441\u043e\u0442\u044b \u0434\u043b\u044f \u0432\u0441\u0435\u0439 \u0441\u0446\u0435\u043d\u044b \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u0432\u0441\u044e \u0448\u0438\u0440\u0438\u043d\u0443, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0432\u044b\u0448\u0435\u0434\u0448\u0438\u0435 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u0441\u043f\u0440\u0430\u0439\u0442\u044b.<\/p>\n<details class=\"spoiler\">\n<summary>\u0414\u0440\u0430\u043a\u0438 &#8212; \u0441\u043f\u0440\u0430\u0439\u0442\u044b \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ba5\/404\/b71\/ba5404b71a41c10210ed3fb1420dc2af.png\" alt=\"\u0414\u0440\u0430\u043a\u0438 - \u0441\u043f\u0440\u0430\u0439\u0442\u044b \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\" width=\"879\" height=\"569\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ba5\/404\/b71\/ba5404b71a41c10210ed3fb1420dc2af.png\"\/><\/p>\n<div><figcaption>\u0414\u0440\u0430\u043a\u0438 &#8212; \u0441\u043f\u0440\u0430\u0439\u0442\u044b \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u041d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u043f\u0440\u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0448\u0438\u0440\u0438\u043d\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u0430\u044f \u0438\u0437 \u0441\u0443\u043c\u043c\u044b \u0448\u0438\u0440\u0438\u043d \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u0442\u043e\u043c\u043a\u0430<\/p>\n<\/div>\n<\/details>\n<p>\u041f\u043e\u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u044f \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0438\u0437 \u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u0441\u043f\u0440\u0430\u0439\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u0445\u043e\u0434\u044f\u0442 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c <code>visible<\/code>. \u0410 \u043f\u043e\u0441\u043b\u0435 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-fighting-game\/blob\/04615b8f265d4cfda317781c50587ea2b790e575\/src\/FightingScene.ts#L187\" rel=\"noopener noreferrer nofollow\">\u0432\u044b\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u044b<\/a> &#8212; \u043e\u043f\u044f\u0442\u044c \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c. \u0412\u0441\u0451 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e, \u0442\u0430\u043a \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u0442. \u041a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u044b \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0443 \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432 \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0434\u0430\u0436\u0435, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u043d\u0435\u0432\u0438\u0434\u0438\u043c\u044b, \u0430 \u0432\u043e\u0442 \u0432 \u0440\u0430\u0441\u0447\u0451\u0442\u0435 \u043e\u0431\u0448\u0435\u0439 \u0448\u0438\u0440\u0438\u043d\u044b \u043d\u0435 \u0443\u0447\u0430\u0441\u0442\u0432\u0443\u044e\u0442 &#8212; \u0442\u043e \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e!<\/p>\n<details class=\"spoiler\">\n<summary>\u0414\u0440\u0430\u043a\u0438 &#8212; \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">  this.player1.visible = false   this.player2.visible = false   this.x = x   this.width = occupiedWidth   this.y = y   this.height = occupiedHeight   this.player1.visible = true   this.player2.visible = true <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<h3>\u0414\u0440\u0430\u043a\u0438: \u043c\u043e\u043c\u0435\u043d\u0442 \u0443\u0434\u0430\u0440\u0430<\/h3>\n<p>\u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0430\u043c\u043e\u0433\u043e \u0443\u0434\u0430\u0440\u0430 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-fighting-game\/blob\/04615b8f265d4cfda317781c50587ea2b790e575\/src\/Fighter.ts#L354\" rel=\"noopener noreferrer nofollow\">\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043a\u0430\u0434\u0440\u0430<\/a> \u0430\u0442\u0430\u043a\u0443\u044e\u0449\u0435\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0414\u043b\u044f \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0438\u0433\u0440\u043e\u043a\u0430 \u044d\u0442\u043e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-fighting-game\/blob\/04615b8f265d4cfda317781c50587ea2b790e575\/src\/FightingScene.ts#L90\" rel=\"noopener noreferrer nofollow\">5-\u0439 \u043a\u0430\u0434\u0440<\/a>, \u0434\u043b\u044f \u0432\u0442\u043e\u0440\u043e\u0433\u043e &#8212; <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-fighting-game\/blob\/04615b8f265d4cfda317781c50587ea2b790e575\/src\/FightingScene.ts#L120\" rel=\"noopener noreferrer nofollow\">3-\u0439<\/a>. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0434\u0432\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>attackHitAvailable<\/code> &#8212; \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u0430\u0442\u0430\u043a\u0430 \u043d\u0430\u0447\u0430\u043b\u0430\u0441\u044c, <code>attackHitProcessed<\/code> &#8212; \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0430\u0442\u0430\u043a\u0443, \u0438\u043d\u0430\u0447\u0435 \u0443\u0440\u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0430\u043d\u0435\u0441\u0451\u043d \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0440\u0430\u0437 (\u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438) &#8212; \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u0433\u0434\u0430 1 \u0444\u0440\u0435\u0439\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f \u0437\u0430 4-\u0440\u0435 \u0444\u0440\u0435\u0439\u043c\u0430 \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430.<\/p>\n<p>\u0425\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0442\u0430\u043a\u0436\u0435 \u0432\u043d\u0435\u0441\u0442\u0438 \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u0435 \u0432 \u0441\u0438\u043b\u0443 \u0443\u0434\u0430\u0440\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-fighting-game\/blob\/04615b8f265d4cfda317781c50587ea2b790e575\/src\/FightingScene.ts#L219\" rel=\"noopener noreferrer nofollow\">\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e<\/a> \u043f\u043b\u043e\u0449\u0430\u0434\u044c \u043f\u0435\u0440\u0435\u0441\u0435\u0447\u0435\u043d\u0438\u044f, \u0442.\u0435. \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043f\u043b\u043e\u0449\u0430\u0434\u0438 \u043e\u0440\u0443\u0436\u0438\u044f <code>AttackBounds<\/code> \u043a \u043f\u043b\u043e\u0449\u0430\u0434\u0438 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430 <code>hitBox<\/code>:<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043f\u043b\u043e\u0449\u0430\u0434\u0438<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">const attackBounds = this.player1.toAttackBounds() const playerBounds = this.player2.toBounds() const intersectionSquare = Collision.checkCollision(attackBounds, playerBounds) if (intersectionSquare >= 0.05) {   \/\/ take damage } <\/code><\/pre>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/bf3\/d1a\/c67\/bf3d1ac67c47afc98450022eb5035eeb.png\" alt=\"\u0414\u0440\u0430\u043a\u0438 - \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043f\u043b\u043e\u0449\u0430\u0434\u0438\" width=\"442\" height=\"346\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/bf3\/d1a\/c67\/bf3d1ac67c47afc98450022eb5035eeb.png\"\/><\/p>\n<div><figcaption>\u0414\u0440\u0430\u043a\u0438 &#8212; \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043f\u043b\u043e\u0449\u0430\u0434\u0438<\/figcaption><\/div>\n<\/figure>\n<ol>\n<li>\n<p>\u041f\u043b\u043e\u0449\u0430\u0434\u044c \u043e\u0440\u0443\u0436\u0438\u044f<\/p>\n<\/li>\n<li>\n<p>\u041f\u043b\u043e\u0449\u0430\u0434\u044c \u0430\u0442\u0430\u043a\u0443\u0435\u043c\u043e\u0433\u043e \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430<\/p>\n<\/li>\n<\/ol>\n<\/div>\n<\/details>\n<h2>\u0418\u0433\u0440\u0430 06: \u0413\u0430\u043b\u0430\u043a\u0442\u0438\u043a\u0430<\/h2>\n<h3>\u0413\u0430\u043b\u0430\u043a\u0442\u0438\u043a\u0430: \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435<\/h3>\n<p>\u0418\u0433\u0440\u043e\u043a \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u043e\u0441\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u043a\u043e\u0440\u0430\u0431\u043b\u0451\u043c, \u0438 \u0441\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u0440\u0438\u0448\u0435\u043b\u044c\u0446\u0430\u043c\u0438. \u041a\u043e\u0440\u0430\u0431\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u0432\u043b\u0435\u0432\u043e-\u0432\u043f\u0440\u0430\u0432\u043e \u0434\u043e \u043f\u0440\u0435\u0434\u0435\u043b\u043e\u0432 \u043a\u0430\u0440\u0442\u044b \u0438 \u0441\u0442\u0440\u0435\u043b\u044f\u0442\u044c. \u041f\u0440\u0438\u0448\u0435\u043b\u044c\u0446\u044b \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0433\u0440\u0443\u043f\u043f\u0430\u043c\u0438, \u0433\u0440\u0443\u043f\u043f\u0430 \u0434\u0432\u0438\u0436\u0435\u0442\u0441\u044f \u043a \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u044d\u043a\u0440\u0430\u043d\u0430, \u0434\u043e\u0439\u0434\u044f \u0434\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0433\u0440\u0443\u043f\u043f\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0432\u043d\u0438\u0437 \u043d\u0430 \u043e\u0434\u0438\u043d \u0440\u044f\u0434 \u0438 \u0443\u0441\u043a\u043e\u0440\u044f\u0435\u0442\u0441\u044f. \u0418\u043d\u043e\u0433\u0434\u0430 \u043a\u0442\u043e-\u0442\u043e \u0438\u0437 \u0433\u0440\u0443\u043f\u043f\u044b \u043f\u0440\u0438\u0448\u0435\u043b\u044c\u0446\u0435\u0432 \u0441\u0442\u0440\u0435\u043b\u044f\u0435\u0442 \u0432 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043a\u043e\u0440\u0430\u0431\u043b\u044f.<\/p>\n<p>\u041c\u043d\u0435 \u044d\u0442\u0430 \u0438\u0433\u0440\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u0430 \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c <code>Galaxian<\/code> (\u0413\u0430\u043b\u0430\u043a\u0442\u0438\u043a\u0430) &#8212; \u043e\u0434\u043d\u0430\u043a\u043e \u043f\u0440\u0430\u0440\u043e\u0434\u0438\u0442\u0435\u043b\u0435\u043c \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u0431\u044b\u043b\u0430 \u0438\u0433\u0440\u0430 <code>Space Invaders<\/code>.<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=MCVU0w73uKI\" rel=\"noopener noreferrer nofollow\">\u041e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u0438\u0434\u0435\u043e<\/a>.<\/p>\n<h3>\u0413\u0430\u043b\u0430\u043a\u0442\u0438\u043a\u0430: \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b \u0447\u0430\u0441\u0442\u0438\u0446<\/h3>\n<p>\u0417\u0434\u0435\u0441\u044c \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b \u0447\u0430\u0441\u0442\u0438\u0446 <code>ParticleContainer<\/code> \u0434\u043b\u044f \u0432\u0441\u0435\u0445:<\/p>\n<ul>\n<li>\n<p>\u0434\u043b\u044f \u0437\u0432\u0451\u0437\u0434 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-galaxian-game\/blob\/fda19706ec30dd384568bcdb41dcc3341ac55590\/src\/Stars.ts#L61\" rel=\"noopener noreferrer nofollow\">\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e<\/a> \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u043f\u0440\u0438\u043a\u0438\u043d\u0443\u0432 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0447\u0430\u0441\u0442\u0438\u0446 (\u0437\u0432\u0451\u0437\u0434) \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u043d\u0435 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u0438 \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u0437\u0432\u0451\u0437\u0434\u043d\u043e\u0435 \u043d\u0435\u0431\u043e. \u041a\u0430\u0436\u0434\u0430\u044f \u0437\u0432\u0435\u0437\u0434\u0430 <code>Star<\/code> &#8212; \u044d\u0442\u043e \u0441\u043f\u0440\u0430\u0439\u0442. \u0412\u0441\u0435 \u0437\u0432\u0451\u0437\u0434\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043e\u0434\u043d\u0443 \u0438 \u0442\u0443 \u0436\u0435 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443, \u044d\u0442\u0443 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-galaxian-game\/blob\/fda19706ec30dd384568bcdb41dcc3341ac55590\/src\/Stars.ts#L25\" rel=\"noopener noreferrer nofollow\">\u044f \u0440\u0438\u0441\u0443\u044e<\/a> \u043a\u0430\u043a <code>Graphics<\/code> \u0432 \u0432\u0438\u0434\u0435 \u043c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u0437\u0432\u0435\u0437\u0434\u0443. \u0418 \u0434\u0430\u043b\u0435\u0435 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0437\u0432\u0435\u0437\u0434\u044b <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-galaxian-game\/blob\/fda19706ec30dd384568bcdb41dcc3341ac55590\/src\/Stars.ts#L69\" rel=\"noopener noreferrer nofollow\">\u0435\u0441\u0442\u044c \u0441\u0432\u043e\u044f \u043f\u043e\u0437\u0438\u0446\u0438\u044f \u0438 \u0446\u0432\u0435\u0442<\/a>. \u0412\u0435\u0441\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043f\u0440\u043e\u0441\u0442\u043e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-galaxian-game\/blob\/fda19706ec30dd384568bcdb41dcc3341ac55590\/src\/Stars.ts#L81\" rel=\"noopener noreferrer nofollow\">\u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0441\u0432\u043e\u044e \u043f\u043e\u0437\u0438\u0446\u0438\u044e<\/a> \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0442\u0438\u043a \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430 &#8212; \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 <code>Parallax Scrolling<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u0434\u043b\u044f \u043f\u0440\u0438\u0448\u0435\u043b\u044c\u0446\u0435\u0432 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-galaxian-game\/blob\/fda19706ec30dd384568bcdb41dcc3341ac55590\/src\/ShootingScene.ts#L70\" rel=\"noopener noreferrer nofollow\">\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043c\u043e\u0436\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c<\/a> \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0437\u0438\u0446\u0438\u044e. \u0422\u0435\u043a\u0441\u0442\u0443\u0440\u0430 \u0443 \u0432\u0441\u0435\u0445 \u043f\u0440\u0438\u0448\u0435\u043b\u044c\u0446\u0435\u0432 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u0430\u044f \u0438 \u043d\u0435 \u043f\u043e\u0434\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442\u0441\u044f.<\/p>\n<\/li>\n<li>\n<p>\u0434\u043b\u044f <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-galaxian-game\/blob\/fda19706ec30dd384568bcdb41dcc3341ac55590\/src\/ShootingScene.ts#L73\" rel=\"noopener noreferrer nofollow\">\u0441\u043d\u0430\u0440\u044f\u0434\u043e\u0432<\/a> \u0438 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-galaxian-game\/blob\/fda19706ec30dd384568bcdb41dcc3341ac55590\/src\/ShootingScene.ts#L76\" rel=\"noopener noreferrer nofollow\">\u0447\u0430\u0441\u0442\u0438\u0446 (\u043e\u0442 \u0432\u0437\u0440\u044b\u0432\u043e\u0432)<\/a> \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u043c\u0435\u043d\u044f\u0442\u044c \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u0438 \u0446\u0432\u0435\u0442.<\/p>\n<\/li>\n<\/ul>\n<p>\u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u0438 \u0432\u044b\u0445\u043e\u0434\u0435 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-galaxian-game\/blob\/fda19706ec30dd384568bcdb41dcc3341ac55590\/src\/ShootingScene.ts#L177\" rel=\"noopener noreferrer nofollow\">\u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u044d\u043a\u0440\u0430\u043d\u0430\/\u043a\u0430\u043c\u0435\u0440\u044b<\/a> <code>isOutOfViewport<\/code> \u0438\u043b\u0438 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-galaxian-game\/blob\/fda19706ec30dd384568bcdb41dcc3341ac55590\/src\/ShootingScene.ts#L205\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u0438 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0438<\/a> \u0441 \u043a\u043e\u0440\u0430\u0431\u043b\u0451\u043c\/\u043f\u0440\u0438\u0448\u0435\u043b\u044c\u0446\u0435\u043c.<\/p>\n<p>\u0427\u0430\u0441\u0442\u0438\u0446\u044b \u0432\u0437\u0440\u044b\u0432\u043e\u0432 \u0442\u0430\u043a\u0436\u0435 \u0443\u0434\u0430\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u0438 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-galaxian-game\/blob\/fda19706ec30dd384568bcdb41dcc3341ac55590\/src\/ShootingScene.ts#L174\" rel=\"noopener noreferrer nofollow\">\u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e\u0439 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438<\/a>.<\/p>\n<h3>\u0413\u0430\u043b\u0430\u043a\u0442\u0438\u043a\u0430: \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f<\/h3>\n<p>\u041a\u043e\u0440\u0430\u0431\u043b\u044c \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432\u0441\u0435\u0433\u043e \u0438\u0437 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-galaxian-game\/blob\/fda19706ec30dd384568bcdb41dcc3341ac55590\/src\/ShootingScene.ts#L83\" rel=\"noopener noreferrer nofollow\">\u043e\u0434\u043d\u043e\u0439 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b<\/a>. \u041a\u043e\u0433\u0434\u0430 \u043a\u043e\u0440\u0430\u0431\u043b\u044c \u0434\u0432\u0438\u0436\u0435\u0442\u0441\u044f \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443, <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-galaxian-game\/blob\/fda19706ec30dd384568bcdb41dcc3341ac55590\/src\/Player.ts#L58\" rel=\"noopener noreferrer nofollow\">\u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u044e<\/a> \u0441\u043f\u0440\u0430\u0439\u0442 \u043a\u043e\u0440\u0430\u0431\u043b\u044f.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u0443\u0434\u043e\u0431\u043d\u043e \u0438\u0433\u0440\u0430\u0442\u044c \u0441 \u0441\u0435\u043d\u0441\u043e\u0440\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0438\u043b\u0438 \u043c\u044b\u0448\u043a\u043e\u0439 &#8212; \u044f \u0441\u0434\u0435\u043b \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043b\u044e\u0431\u043e\u0435 \u043a\u0430\u0441\u0430\u043d\u0438\u0435 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-galaxian-game\/blob\/fda19706ec30dd384568bcdb41dcc3341ac55590\/src\/Player.ts#L103\" rel=\"noopener noreferrer nofollow\">\u0432\u044b\u0448\u0435 \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u044b<\/a> \u043a\u043e\u0440\u0430\u0431\u043b\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u043b\u043e \u0432\u044b\u0441\u0442\u0440\u0435\u043b + \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443.<\/p>\n<details class=\"spoiler\">\n<summary>\u0413\u0430\u043b\u0430\u043a\u0442\u0438\u043a\u0430 &#8212; \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/960\/cee\/3ce\/960cee3cea8a90599ba0713376afddb8.png\" alt=\"\u0413\u0430\u043b\u0430\u043a\u0442\u0438\u043a\u0430 - \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f\" width=\"363\" height=\"229\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/960\/cee\/3ce\/960cee3cea8a90599ba0713376afddb8.png\"\/><\/p>\n<div><figcaption>\u0413\u0430\u043b\u0430\u043a\u0442\u0438\u043a\u0430 &#8212; \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f<\/figcaption><\/div>\n<\/figure>\n<p>\u0421\u0435\u0440\u0435\u0434\u0438\u043d\u0430 \u043a\u043e\u0440\u0430\u0431\u043b\u044f <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-galaxian-game\/blob\/fda19706ec30dd384568bcdb41dcc3341ac55590\/src\/Player.ts#L37\" rel=\"noopener noreferrer nofollow\">\u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f<\/a> \u043a\u0430\u043a <code>this.anchor.set(0.5, 0.5)<\/code>.<\/p>\n<\/div>\n<\/details>\n<h3>\u0413\u0430\u043b\u0430\u043a\u0442\u0438\u043a\u0430: \u043f\u0440\u0438\u0448\u0435\u043b\u044c\u0446\u044b<\/h3>\n<p>\u041f\u0440\u0438\u0448\u0435\u043b\u044c\u0446\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0433\u0440\u0443\u043f\u043f\u0430\u043c\u0438 \u043f\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u0415\u0441\u043b\u0438 \u043f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0433\u0440\u0443\u043f\u043f\u0443 \u043f\u0440\u0438\u0448\u0435\u043b\u044c\u0446\u0435\u0432, \u044f <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-galaxian-game\/blob\/fda19706ec30dd384568bcdb41dcc3341ac55590\/src\/ShootingScene.ts#L367\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e<\/a> \u0435\u0441\u0442\u044c \u043b\u0438 \u0434\u043b\u044f \u043d\u043e\u0432\u043e\u0439 \u0433\u0440\u0443\u043f\u043f\u044b \u043c\u0435\u0441\u0442\u043e \u0432\u0432\u0435\u0440\u0445\u0443 \u044d\u043a\u0440\u0430\u043d\u0430.<\/p>\n<p>\u041f\u0440\u0438\u0448\u0435\u043b\u044c\u0446\u0435\u0432 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e \u0432 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-galaxian-game\/blob\/fda19706ec30dd384568bcdb41dcc3341ac55590\/src\/ShootingScene.ts#L371\" rel=\"noopener noreferrer nofollow\">\u043e\u0434\u0438\u043d \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0447\u0430\u0441\u0442\u0438\u0446<\/a>, \u043e\u0434\u043d\u0430\u043a\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u043f\u0440\u0438\u0448\u0435\u043b\u0435\u0446 \u043f\u0440\u0438\u043d\u0430\u0434\u043b\u0435\u0436\u0438\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0439 \u0433\u0440\u0443\u043f\u043f\u0435 <code>Grid<\/code>. \u0413\u0440\u0443\u043f\u043f\u0430 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0441\u0442\u0440\u043e\u043a \u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-galaxian-game\/blob\/fda19706ec30dd384568bcdb41dcc3341ac55590\/src\/Grid.ts#L34\" rel=\"noopener noreferrer nofollow\">\u0432 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445<\/a>.<\/p>\n<p>\u0427\u0435\u043c \u0448\u0438\u0440\u0435 \u044d\u043a\u0440\u0430\u043d &#8212; \u0442\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u043f\u0440\u0438\u0448\u0435\u043b\u0435\u0446 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-galaxian-game\/blob\/fda19706ec30dd384568bcdb41dcc3341ac55590\/src\/Grid.ts#L46\" rel=\"noopener noreferrer nofollow\">\u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e<\/a> \u0432 \u0433\u0440\u0443\u043f\u043f\u0435.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0433\u0440\u0443\u043f\u043f\u0430 \u043f\u0440\u0438\u0448\u0435\u043b\u044c\u0446\u0435\u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u0430 \u043a\u0430\u043a \u0435\u0434\u0438\u043d\u044b\u0439 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043c &#8212; <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-galaxian-game\/blob\/fda19706ec30dd384568bcdb41dcc3341ac55590\/src\/Grid.ts#L85\" rel=\"noopener noreferrer nofollow\">\u044f \u043f\u0440\u043e\u0445\u043e\u0436\u0443\u0441\u044c \u043f\u043e \u0433\u0440\u0443\u043f\u043f\u0435<\/a> \u0438 \u0432\u044b\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u044e &#171;\u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0443&#187; \u0441\u0430\u043c\u043e\u0433\u043e \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e\/\u043b\u0435\u0432\u043e\u0433\u043e\/\u043f\u0440\u0430\u0432\u043e\u0433\u043e\/\u043d\u0438\u0436\u043d\u0435\u0433\u043e \u043f\u0440\u0438\u0448\u0435\u043b\u044c\u0446\u0430 \u0432 \u0433\u0440\u0443\u043f\u043f\u0435. \u0418\u043c\u0435\u044f &#171;\u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0443&#187; <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-galaxian-game\/blob\/fda19706ec30dd384568bcdb41dcc3341ac55590\/src\/Grid.ts#L73\" rel=\"noopener noreferrer nofollow\">\u043c\u043e\u0436\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/a> \u0432\u0441\u0435\u0439 \u0433\u0440\u0443\u043f\u043f\u044b \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0430\u0441\u044c \u0441 \u043a\u0440\u0430\u0435\u043c. \u0422\u0430\u043a\u0436\u0435 <code>\u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430<\/code> \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u044f \u0433\u0440\u0443\u043f\u043f\u0430. \u0418 \u0441\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435, <code>\u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-galaxian-game\/blob\/fda19706ec30dd384568bcdb41dcc3341ac55590\/src\/ShootingScene.ts#L255\" rel=\"noopener noreferrer nofollow\">\u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u0448\u0435\u043b\u044c\u0446\u0430 \u0438\u0437 \u043d\u0438\u0436\u043d\u0435\u0433\u043e \u0440\u044f\u0434\u0430<\/a> \u0441\u0430\u043c\u043e\u0439 \u043d\u0438\u0436\u043d\u0435\u0439 \u0433\u0440\u0443\u043f\u043f\u044b \u0438 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0438\u0442\u044c \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u043a\u043e\u0440\u0430\u0431\u043b\u044f.<\/p>\n<h3>\u0413\u0430\u043b\u0430\u043a\u0442\u0438\u043a\u0430: \u0447\u0430\u0441\u0442\u0438\u0446\u044b \u0434\u043b\u044f \u0432\u0437\u0440\u044b\u0432\u0430<\/h3>\n<p>\u0415\u0441\u043b\u0438 \u0441\u043d\u0430\u0440\u044f\u0434 \u043a\u043e\u0440\u0430\u0431\u043b\u044f \u043f\u0435\u0440\u0435\u0441\u0435\u043a\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u0440\u0438\u0448\u0435\u043b\u044c\u0446\u0435\u043c \u044f \u0443\u0434\u0430\u043b\u044f\u044e \u043f\u0440\u0438\u0448\u0435\u043b\u044c\u0446\u0430 \u0438 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-galaxian-game\/blob\/fda19706ec30dd384568bcdb41dcc3341ac55590\/src\/ShootingScene.ts#L221\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u0432\u0437\u0440\u044b\u0432 \u0438\u0437 \u0447\u0430\u0441\u0442\u0438\u0446<\/a>.<\/p>\n<p>\u0418\u0433\u0440\u043e\u043a \u043f\u0440\u043e\u0438\u0433\u0440\u0430\u043b, \u0435\u0441\u043b\u0438 \u0435\u0433\u043e \u043a\u043e\u0440\u0430\u0431\u043b\u044c <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-galaxian-game\/blob\/fda19706ec30dd384568bcdb41dcc3341ac55590\/src\/ShootingScene.ts#L208\" rel=\"noopener noreferrer nofollow\">\u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u0441 \u043f\u0440\u0438\u0448\u0435\u043b\u044c\u0446\u0435\u043c<\/a> \u0438\u043b\u0438 \u0431\u044b\u043b \u043f\u043e\u0440\u0430\u0436\u0435\u043d <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-galaxian-game\/blob\/fda19706ec30dd384568bcdb41dcc3341ac55590\/src\/ShootingScene.ts#L233\" rel=\"noopener noreferrer nofollow\">\u0441\u043d\u0430\u0440\u044f\u0434\u043e\u043c \u043f\u0440\u0438\u0448\u0435\u043b\u044c\u0446\u0435\u0432<\/a>. \u0412 \u043e\u0431\u043e\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-galaxian-game\/blob\/fda19706ec30dd384568bcdb41dcc3341ac55590\/src\/ShootingScene.ts#L407\" rel=\"noopener noreferrer nofollow\">\u0432\u0437\u0440\u044b\u0432 \u043a\u043e\u0440\u0430\u0431\u043b\u044f<\/a> &#8212; \u043e\u0434\u043d\u0430\u043a\u043e \u0438\u0433\u0440\u0443 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e \u043d\u0435 \u0441\u0440\u0430\u0437\u0443 \u0430 \u043f\u043e \u0438\u0441\u0442\u0435\u0447\u0435\u043d\u0438\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n<h2>\u0418\u0433\u0440\u0430 07: \u041f\u0430\u043a\u043c\u0430\u043d<\/h2>\n<h3>\u041f\u0430\u043a\u043c\u0430\u043d: \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435<\/h3>\n<p>\u0418\u0433\u0440\u043e\u043a \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0431\u0436\u043e\u0440\u043e\u0439 \u043f\u0430\u043a\u043c\u0430\u043d\u043e\u043c &#8212; \u043a\u0440\u0443\u0433 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0435\u0434\u0430\u0435\u0442 \u0448\u0430\u0440\u0438\u043a\u0438 (\u0433\u0440\u0430\u043d\u0443\u043b\u044b). \u041a\u0430\u0440\u0442\u0430 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0430 \u0441\u0442\u0435\u043d\u0430\u043c\u0438 \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435\u043b\u044c\u0437\u044f \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442\u044c. \u0426\u0435\u043b\u044c \u0438\u0433\u0440\u044b \u0441\u044a\u0435\u0441\u0442\u044c \u0432\u0441\u0435 \u0433\u0440\u0430\u043d\u0443\u043b\u044b \u0438 \u043d\u0435 \u043f\u043e\u043f\u0430\u0441\u0442\u044c\u0441\u044f \u0434\u0432\u0443\u043c \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u0438\u043a\u0430\u043c (\u043f\u0440\u0438\u0437\u0440\u0430\u043a\u0430\u043c). \u0415\u0441\u043b\u0438 \u0441\u044a\u0435\u0441\u0442\u044c \u0441\u0443\u043f\u0435\u0440-\u0433\u0440\u0430\u043d\u0443\u043b\u0443, \u0442\u043e \u043d\u0430 \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0430\u043a\u043c\u0430\u043d \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043d\u0435\u0443\u044f\u0437\u0432\u0438\u043c \u0438 \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u043f\u0435\u0442\u044c \u0441\u044a\u0435\u0441\u0442\u044c \u0438 \u043f\u0440\u0438\u0437\u0440\u0430\u043a\u043e\u0432.<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=5IMXpp3rohQ\" rel=\"noopener noreferrer nofollow\">\u041e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u0438\u0434\u0435\u043e<\/a>.<\/p>\n<h3>\u041f\u0430\u043a\u043c\u0430\u043d: \u043a\u0430\u0440\u0442\u0430<\/h3>\n<p>\u041a\u0430\u0440\u0442\u0430 (\u0443\u0440\u043e\u0432\u0435\u043d\u044c) \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u0438\u0437 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f, \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pacman-game\/blob\/6dbddc8b3bbce6ab525f0c16e8a4f9c296067d09\/src\/Map.ts#L27\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u044f\u043c \u0432 \u043a\u043e\u0434\u0435<\/a>. \u0421\u0442\u0440\u043e\u043a\u043e\u0432\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0442\u0430\u0439\u043b\u0430 \u043a\u0430\u0440\u0442\u044b <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pacman-game\/blob\/6dbddc8b3bbce6ab525f0c16e8a4f9c296067d09\/src\/Map.ts#L109\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043e\u0431\u044a\u0435\u043a\u0442<\/a> \u043a\u0430\u0440\u0442\u044b.<\/p>\n<p>\u041d\u0430 \u043a\u0430\u0440\u0442\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u044b <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pacman-game\/blob\/6dbddc8b3bbce6ab525f0c16e8a4f9c296067d09\/src\/Boundary.ts#L10\" rel=\"noopener noreferrer nofollow\">\u0441\u0442\u0435\u043d\u043a\u0438 \u0440\u0430\u0437\u043d\u043e\u0433\u043e \u0432\u0438\u0434\u0430<\/a> <code>Boundary<\/code> (\u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f), <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pacman-game\/blob\/6dbddc8b3bbce6ab525f0c16e8a4f9c296067d09\/src\/Pellet.ts#L9\" rel=\"noopener noreferrer nofollow\">\u0433\u0440\u0430\u043d\u0443\u043b\u044b<\/a> <code>Pellet<\/code>, <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pacman-game\/blob\/6dbddc8b3bbce6ab525f0c16e8a4f9c296067d09\/src\/PowerUp.ts#L9\" rel=\"noopener noreferrer nofollow\">\u0441\u0443\u043f\u0435\u0440-\u0433\u0440\u0430\u043d\u0443\u043b\u044b<\/a> <code>PowerUp<\/code>.<\/p>\n<p>\u041f\u043e\u0434 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pacman-game\/blob\/6dbddc8b3bbce6ab525f0c16e8a4f9c296067d09\/src\/MainScene.ts#L44\" rel=\"noopener noreferrer nofollow\">\u043a\u0430\u0440\u0442\u043e\u0439 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0430<\/a> \u043f\u043e\u0434\u043b\u043e\u0436\u043a\u0430 <code>background<\/code> \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u0430.<\/p>\n<p>\u0414\u0432\u0430 \u043f\u0440\u0438\u0437\u0440\u0430\u043a\u0430 <code>Ghost<\/code> \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0445 \u043c\u0435\u0441\u0442\u0430\u0445.<\/p>\n<p>\u041f\u0440\u0438\u0437\u0440\u0430\u043a\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u0438\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u0438\u043d\u0442\u0435\u043b\u043b\u0435\u043a\u0442\u043e\u043c (\u0418\u0418) &#8212; \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e\u0442\u0441\u044f \u0432\u0441\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u0432\u0438\u0434\u044b \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0439 (\u0432\u0432\u0435\u0440\u0445, \u0432\u043f\u0440\u0430\u0432\u043e, \u0432\u043d\u0438\u0437, \u0432\u043b\u0435\u0432\u043e) \u0438 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pacman-game\/blob\/6dbddc8b3bbce6ab525f0c16e8a4f9c296067d09\/src\/MainScene.ts#L391\" rel=\"noopener noreferrer nofollow\">\u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0435<\/a> \u0438\u0437 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445.<\/p>\n<h3>\u041f\u0430\u043a\u043c\u0430\u043d: \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u0443\u0440<\/h3>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0438\u0433\u0440\u0435 \u044f \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043b \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b \u043f\u0430\u043a\u043c\u0430\u043d\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>PixiJS<\/code>. \u041c\u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u0440\u0430\u0439\u0442 <code>AnimatedSprite<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u043a\u0440\u0443\u0433\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0438 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0440\u043e\u0442 (\u0441\u0435\u043a\u0446\u0438\u044f \u043a\u0440\u0443\u0433\u0430 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442\u0441\u044f).<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0441\u044f, \u0447\u0442\u043e \u0444\u0430\u0437\u0430 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u044f\/\u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f \u0440\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u0438\u0437 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pacman-game\/blob\/6dbddc8b3bbce6ab525f0c16e8a4f9c296067d09\/src\/Player.ts#L51\" rel=\"noopener noreferrer nofollow\">10 \u0444\u0440\u0435\u0439\u043c\u043e\u0432<\/a>. \u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0430 \u044f \u0440\u0438\u0441\u0443\u044e \u0430\u0440\u043a\u0443 \u0441 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pacman-game\/blob\/6dbddc8b3bbce6ab525f0c16e8a4f9c296067d09\/src\/Player.ts#L60\" rel=\"noopener noreferrer nofollow\">\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u043c \u0443\u0433\u043b\u043e\u043c<\/a>. \u041f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0443\u044e\u0441\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0443 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pacman-game\/blob\/6dbddc8b3bbce6ab525f0c16e8a4f9c296067d09\/src\/Player.ts#L63\" rel=\"noopener noreferrer nofollow\">\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u044b\u0432\u0430\u044e \u0432 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443<\/a>. \u0412\u0441\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e \u0432 \u043c\u0430\u0441\u0441\u0438\u0432. \u0414\u043b\u044f \u0444\u0430\u0437\u044b \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f, \u043a\u043e\u043f\u0438\u0440\u0443\u044e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pacman-game\/blob\/6dbddc8b3bbce6ab525f0c16e8a4f9c296067d09\/src\/Player.ts#L66\" rel=\"noopener noreferrer nofollow\">\u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435<\/a> \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0444\u0440\u0435\u0439\u043c\u044b \u0438\u0437 \u0444\u0430\u0437\u044b \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u044f.<br \/>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u0440\u0430\u0439\u0442 \u043f\u043e\u0434\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u044e \u0432 \u043d\u0443\u0436\u043d\u044b\u0439 \u0446\u0432\u0435\u0442.<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0430\u043a\u043c\u0430\u043d &#8212; \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b \u043f\u0430\u043a\u043c\u0430\u043d\u0430<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/447\/7bd\/80d\/4477bd80d69640901b9aa02026eb8d97.png\" alt=\"\u041f\u0430\u043a\u043c\u0430\u043d - \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b \u043f\u0430\u043a\u043c\u0430\u043d\u0430\" width=\"754\" height=\"51\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/447\/7bd\/80d\/4477bd80d69640901b9aa02026eb8d97.png\"\/><\/p>\n<div><figcaption>\u041f\u0430\u043a\u043c\u0430\u043d &#8212; \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b \u043f\u0430\u043a\u043c\u0430\u043d\u0430<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u0443\u0440 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pacman-game\/blob\/6dbddc8b3bbce6ab525f0c16e8a4f9c296067d09\/src\/Ghost.ts#L40\" rel=\"noopener noreferrer nofollow\">\u0434\u043b\u044f \u043f\u0440\u0438\u0437\u0440\u0430\u043a\u043e\u0432 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u0430<\/a>, \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0438\u0441\u0443\u044e \u044f &#171;\u0431\u0430\u043d\u0442\u0438\u043a&#187; &#8212; \u0442.\u0435. \u043a\u0440\u0443\u0433 \u0441 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044e\u0449\u0438\u043c\u0438\u0441\u044f \u0441\u0435\u043a\u0442\u043e\u0440\u0430\u043c\u0438 \u0432\u0432\u0435\u0440\u0445\u0443 \u0438 \u0432\u043d\u0438\u0437\u0443.<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0430\u043a\u043c\u0430\u043d &#8212; \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b \u043f\u0440\u0438\u0437\u0440\u0430\u043a\u0430<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/7ee\/191\/79d\/7ee19179df0679fa260ca8a1df337a5d.png\" alt=\"\u041f\u0430\u043a\u043c\u0430\u043d - \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b \u043f\u0440\u0438\u0437\u0440\u0430\u043a\u0430\" width=\"676\" height=\"50\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/7ee\/191\/79d\/7ee19179df0679fa260ca8a1df337a5d.png\"\/><\/p>\n<div><figcaption>\u041f\u0430\u043a\u043c\u0430\u043d &#8212; \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b \u043f\u0440\u0438\u0437\u0440\u0430\u043a\u0430<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<h3>\u041f\u0430\u043a\u043c\u0430\u043d: \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>\u0414\u043b\u044f \u0441\u0435\u043d\u0441\u043e\u0440\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0438 \u043c\u044b\u0448\u0438 \u0440\u0435\u0448\u0438\u043b \u0442\u043e\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u0443\u0434\u0430 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c. \u0412\u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0438 \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044f \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0441\u0430\u043c\u043e\u0433\u043e \u043f\u0430\u043a\u043c\u0430\u043d\u0430 &#8212; \u0447\u0442\u043e \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u043e.<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0430\u043a\u043c\u0430\u043d &#8212; \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d88\/6b1\/530\/d886b15302aa8cc953ae6a78c0c51bba.png\" alt=\"\u041f\u0430\u043a\u043c\u0430\u043d - \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f\" width=\"322\" height=\"322\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d88\/6b1\/530\/d886b15302aa8cc953ae6a78c0c51bba.png\"\/><\/p>\n<div><figcaption>\u041f\u0430\u043a\u043c\u0430\u043d &#8212; \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u041f\u0440\u0438 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0438 \u043f\u0440\u0438\u0437\u0440\u0430\u043a\u0430 \u0438 \u043f\u0430\u043a\u043c\u0430\u043d\u0430 \u043d\u0430\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u0447\u044c\u044f-\u0442\u043e \u0441\u043c\u0435\u0440\u0442\u044c: \u043f\u0440\u0438\u0437\u0440\u0430\u043a\u0430 &#8212; \u0435\u0441\u043b\u0438 \u0438\u0434\u0451\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441\u0443\u043f\u0435\u0440-\u0433\u0440\u0430\u043d\u0443\u043b\u044b, \u043f\u0430\u043a\u043c\u0430\u043d\u0430 &#8212; \u0432 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445.<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043f\u0430\u043a\u043c\u0430\u043d \u0441\u044a\u0435\u043b \u0432\u0441\u0435 \u0433\u0440\u0430\u043d\u0443\u043b\u044b &#8212; \u0438\u0433\u0440\u0430 \u043e\u043a\u043e\u043d\u0447\u0435\u043d\u0430. \u042f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u0432\u0441\u0451 \u0442\u043e-\u0436\u0435 \u0434\u0438\u0430\u043b\u043e\u0433\u043e\u0432\u043e\u0435 \u043e\u043a\u043d\u043e <code>StartModal<\/code> \u0441 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0438\u0433\u0440\u044b.<\/p>\n<h2>\u0418\u0433\u0440\u0430 08: \u0411\u0430\u0448\u0435\u043d\u043a\u0438<\/h2>\n<h3>\u0411\u0430\u0448\u0435\u043d\u043a\u0438: \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435<\/h3>\n<p>\u041a\u0430\u0440\u0442\u0430 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0434\u043e\u0440\u043e\u0433\u0438 \u0438 \u043c\u0435\u0441\u0442 \u043f\u043e \u043a\u0440\u0430\u044f\u043c \u0434\u043e\u0440\u043e\u0433\u0438, \u0433\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0431\u0430\u0448\u043d\u0438. \u041f\u043e \u0434\u043e\u0440\u043e\u0433\u0435 \u0438\u0434\u0443\u0442 \u043e\u0440\u043a\u0438. \u0417\u0430\u0434\u0430\u0447\u0430 \u043d\u0435 \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043e\u0440\u043a\u043e\u0432 \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u043a\u043e\u043d\u0435\u0446 \u043a\u0430\u0440\u0442\u044b, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0431\u0430\u0448\u043d\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u0431\u0438\u0442\u044c \u0432\u0441\u0435\u0445 \u043e\u0440\u043a\u043e\u0432. \u0417\u0430 \u0443\u0431\u0438\u0439\u0441\u0442\u0432\u043e \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043e\u0440\u043a\u0430 \u043d\u0430\u0447\u0438\u0441\u043b\u044f\u044e\u0442\u0441\u044f \u0434\u0435\u043d\u044c\u0433\u0438, \u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0435\u0449\u0451 \u0431\u0430\u0448\u0435\u043d. \u0418\u0433\u0440\u0430 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0435\u0441\u043b\u0438 \u0438\u0433\u0440\u043e\u043a \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u043b \u0431\u043e\u043b\u0435\u0435 10 \u043e\u0440\u043a\u043e\u0432.<\/p>\n<p>\u0414\u043b\u044f \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u044f \u044f \u0441\u0434\u0435\u043b\u0430\u043b \u0447\u0442\u043e\u0431\u044b \u0431\u0430\u0448\u043d\u044f \u043f\u043e\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0441\u0442\u0440\u0435\u043b\u044f\u043b\u0430 \u0442\u043e \u043a\u0430\u043c\u043d\u044f\u043c\u0438 \u0442\u043e \u043e\u0433\u043d\u0435\u043d\u043d\u044b\u043c \u0448\u0430\u0440\u043e\u043c.<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=C4_iRLlPNFc\" rel=\"noopener noreferrer nofollow\">\u041e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u0438\u0434\u0435\u043e<\/a>.<\/p>\n<h3>\u0411\u0430\u0448\u0435\u043d\u043a\u0438: \u0441\u043b\u043e\u0438 \u043a\u0430\u0440\u0442\u044b<\/h3>\n<p>\u041f\u0430\u043f\u043a\u0430 <code>src-tiled<\/code> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043f\u0440\u043e\u0435\u043a\u0442 \u043a\u0430\u0440\u0442\u044b \u0434\u043b\u044f <code>Tiled Map Editor<\/code>. \u0422\u0430\u0439\u043b\u043e\u0432\u0430\u044f \u043a\u0430\u0440\u0442\u0430 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0430 \u043f\u043e \u0441\u043b\u043e\u044f\u043c, \u043f\u0443\u0442\u044c \u0434\u043b\u044f \u043e\u0440\u043a\u043e\u0432 \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043d \u0432 \u0432\u0438\u0434\u0435 \u043b\u0438\u043d\u0438\u0439 \u0432 \u0441\u043b\u043e\u0435 <code>Waypoints<\/code>. \u0417\u0434\u0435\u0441\u044c \u044f \u043f\u043e\u0434\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043b \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0435 \u0442\u0438\u043f\u044b \u0441\u043b\u043e\u0451\u0432 \u0434\u043b\u044f <code>TypeScript<\/code> \u0442.\u043a. \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u0442\u0438\u043f \u0441\u043b\u043e\u044f <code>objectgroup<\/code>.<\/p>\n<details class=\"spoiler\">\n<summary>\u0442\u0438\u043f \u0441\u043b\u043e\u044f ObjectGroupLayer<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">interface IPolylinePoint {   x: number   y: number }  interface IObject {   class: string   height: number   id: number   name: string   polyline: IPolylinePoint[]   rotation: number   visible: boolean   width: number   x: number   y: number }  interface IObjectGroupLayer {   draworder: 'topdown'   id: number   name: string   objects: IObject[]   opacity: number   type: 'objectgroup'   visible: boolean   x: number   y: number } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041c\u0435\u0441\u0442\u0430 \u0433\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0431\u0430\u0448\u043d\u0438 <code>PlacementTile<\/code> \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u0442\u0430\u0439\u043b\u043e\u0432\u043e\u043c \u0441\u043b\u043e\u0435 <code>Placement Tiles<\/code>.<\/p>\n<details class=\"spoiler\">\n<summary>\u0411\u0430\u0448\u0435\u043d\u043a\u0438 &#8212; \u0441\u043b\u043e\u0438 \u043a\u0430\u0440\u0442\u044b<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/090\/339\/4b6\/0903394b681f1b147749091d77ee66b8.png\" alt=\"\u0411\u0430\u0448\u0435\u043d\u043a\u0438 - \u0441\u043b\u043e\u0438 \u043a\u0430\u0440\u0442\u044b\" width=\"497\" height=\"662\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/090\/339\/4b6\/0903394b681f1b147749091d77ee66b8.png\"\/><\/p>\n<div><figcaption>\u0411\u0430\u0448\u0435\u043d\u043a\u0438 &#8212; \u0441\u043b\u043e\u0438 \u043a\u0430\u0440\u0442\u044b<\/figcaption><\/div>\n<\/figure>\n<p>\u041b\u0438\u043d\u0438\u044f \u0432\u0434\u043e\u043b\u044c \u0434\u043e\u0440\u043e\u0433\u0438 &#8212; \u044d\u0442\u043e <code>objectgroup<\/code> \u0441\u043b\u043e\u0439<br \/>\u0417\u0435\u043b\u0435\u043d\u044b\u0435 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u044b &#8212; \u044d\u0442\u043e <code>tilelayer<\/code> \u0441\u043b\u043e\u0439<\/p>\n<\/div>\n<\/details>\n<h3>\u0411\u0430\u0448\u0435\u043d\u043a\u0438: \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u043e\u0439<\/h3>\n<p>\u0412 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u044d\u043a\u0440\u0430\u043d\u0430 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u0430\u043c\u0435\u0440\u044b, \u0435\u0441\u043b\u0438 \u0432\u0441\u044f \u043a\u0430\u0440\u0442\u0430 \u043d\u0435 \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u044d\u043a\u0440\u0430\u043d, \u044f \u0441\u0434\u0435\u043b\u0430\u043b \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438.<\/p>\n<p>\u0421\u043f\u0435\u0440\u0432\u0430 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-td-game\/blob\/c5fa27a1986069944386aa26fe17421af232da25\/src\/Map.ts#L153\" rel=\"noopener noreferrer nofollow\">\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e<\/a> \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u044b \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043a\u0430\u043c\u0435\u0440\u044b <code>maxXPivot<\/code> \u0438 <code>maxYPivot<\/code> &#8212; \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0432 \u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u043a\u0430\u043c\u0435\u0440\u0430 \u043c\u0435\u043d\u044c\u0448\u0435 \u043a\u0430\u0440\u0442\u044b.<br \/>\u0417\u0430\u0436\u0438\u043c\u0430\u044f \u043b\u0435\u0432\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443 \u043c\u044b\u0448\u0438 \u0438\u043b\u0438 \u0434\u043e\u0442\u0440\u043e\u043d\u0443\u0432\u0448\u0438\u0441\u044c \u0434\u043e \u044d\u043a\u0440\u0430\u043d\u0430 &#8212; \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0443. \u041f\u0440\u0438 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u0438 <code>pointerdown<\/code> \u0441\u043e\u0431\u044b\u0442\u0438\u044f <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-td-game\/blob\/c5fa27a1986069944386aa26fe17421af232da25\/src\/Map.ts#L42\" rel=\"noopener noreferrer nofollow\">\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e<\/a> \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b <code>pointerXDown<\/code> \u0438 <code>pointerYDown<\/code>. \u0417\u0430\u0442\u0435\u043c \u043f\u0440\u0438 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f <code>pointermove<\/code> <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-td-game\/blob\/c5fa27a1986069944386aa26fe17421af232da25\/src\/Map.ts#L331\" rel=\"noopener noreferrer nofollow\">\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e \u0440\u0430\u0437\u043d\u0438\u0446\u0443<\/a> \u0432 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u0445, \u0435\u0441\u043b\u0438 \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u043f\u0440\u0435\u0432\u044b\u0448\u0430\u0435\u0442 <code>10<\/code> \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 &#8212; \u0442\u043e \u0441\u043c\u0435\u0449\u0430\u044e \u043a\u0430\u0440\u0442\u0443 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e \u0444\u043b\u0430\u0433 <code>mapMoved<\/code>.<\/p>\n<p>\u041f\u0440\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0438 <code>pointerup<\/code> \u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e \u043f\u0435\u0440\u0435\u0434\u0432\u0438\u0433\u0430\u043b\u0430\u0441\u044c \u043b\u0438 \u043a\u0430\u0440\u0442\u0430. \u0415\u0441\u043b\u0438 \u043d\u0435\u0442 &#8212; \u0442\u043e \u044f \u043d\u0430\u0445\u043e\u0436\u0443 <code>PlacementTile<\/code> \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435, \u0435\u0441\u043b\u0438 \u0442\u0430\u043a\u043e\u0439 \u0442\u0430\u0439\u043b \u043d\u0430\u0439\u0434\u0435\u043d &#8212; <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-td-game\/blob\/c5fa27a1986069944386aa26fe17421af232da25\/src\/Map.ts#L313\" rel=\"noopener noreferrer nofollow\">\u0432\u044b\u0437\u044b\u0432\u0430\u044e \u0441\u043e\u0431\u044b\u0442\u0438\u0435<\/a> \u043d\u0430\u0436\u0430\u0442\u0438\u044f <code>handleClick<\/code> \u0443 \u044f\u0447\u0435\u0439\u043a\u0438.<\/p>\n<p>\u0421\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u044b <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-td-game\/blob\/c5fa27a1986069944386aa26fe17421af232da25\/src\/Map.ts#L336\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442<\/a> \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 <code>pivot<\/code> \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430.<\/p>\n<h3>\u0411\u0430\u0448\u0435\u043d\u043a\u0438: \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0431\u0430\u0448\u0435\u043d<\/h3>\n<p>\u0414\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0431\u0430\u0448\u043d\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u043c\u0435\u0442\u044c <code>75<\/code> \u043c\u043e\u043d\u0435\u0442. \u0417\u0430 \u0443\u0431\u0438\u0439\u0441\u0442\u0432\u043e \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043e\u0440\u043a\u0430 \u0438\u0433\u0440\u043e\u043a\u0443 \u043d\u0430\u0447\u0438\u0441\u043b\u044f\u0435\u0442\u0441\u044f <code>25<\/code> \u043c\u043e\u043d\u0435\u0442. \u0423 <code>StatusBar<\/code> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-td-game\/blob\/c5fa27a1986069944386aa26fe17421af232da25\/src\/StatusBar.ts#L24\" rel=\"noopener noreferrer nofollow\">\u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e<\/a> <code>_coins<\/code> \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043c\u043e\u043d\u0435\u0442 \u0432 \u0438\u0433\u0440\u0435.<\/p>\n<p>\u041c\u0435\u0441\u0442\u0430, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0431\u0430\u0448\u043d\u0438 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0438\u0437 <code>Placement Tiles<\/code> \u0441\u043b\u043e\u044f &#8212; \u044d\u0442\u0438 \u043c\u0435\u0441\u0442\u0430 <code>PlacementTile<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0437\u0430\u043d\u044f\u0442\u044b \u0431\u0430\u0448\u043d\u044f\u043c\u0438 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-td-game\/blob\/c5fa27a1986069944386aa26fe17421af232da25\/src\/PlacementTile.ts#L52\" rel=\"noopener noreferrer nofollow\">\u044f \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u044e<\/a> \u043f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u043c. <code>PlacementTile<\/code> &#8212; \u0438\u043c\u0435\u0435\u0442 \u0434\u0432\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0439 \u0431\u0430\u0448\u043d\u0435\u0439 \u0438 \u0431\u0435\u0437.<\/p>\n<p>\u041f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043c\u0435\u0441\u0442\u043e (<code>handleClick<\/code>), \u0435\u0441\u043b\u0438 \u043c\u0435\u0441\u0442\u043e \u043d\u0435 \u0437\u0430\u043d\u044f\u0442\u043e \u0438 \u0443 \u0438\u0433\u0440\u043e\u043a\u0430 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u0435\u043d\u0435\u0433 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-td-game\/blob\/c5fa27a1986069944386aa26fe17421af232da25\/src\/MainScene.ts#L140\" rel=\"noopener noreferrer nofollow\">\u044f \u0441\u0442\u0440\u043e\u044e<\/a> \u043d\u043e\u0432\u0443\u044e \u0431\u0430\u0448\u043d\u044e. \u0417\u0430\u0442\u0435\u043c \u044f \u0441\u043e\u0440\u0442\u0438\u0440\u0443\u044e \u043c\u0435\u0441\u0442\u0430 \u043f\u043e <code>y<\/code> \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u043d\u0438\u0436\u043d\u044f\u044f \u0431\u0430\u0448\u043d\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043b\u0430\u0441\u044c \u043f\u043e\u0432\u0435\u0440\u0445 \u0432\u0435\u0440\u0445\u043d\u0435\u0439.<\/p>\n<p>\u041f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0442\u0438\u043a \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-td-game\/blob\/c5fa27a1986069944386aa26fe17421af232da25\/src\/Map.ts#L226\" rel=\"noopener noreferrer nofollow\">\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e \u0431\u0430\u0448\u043d\u0438<\/a> \u0442\u043e\u0436\u0435. \u0423 \u043a\u0430\u0436\u0434\u043e\u0439 \u0431\u0430\u0448\u043d\u0438 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-td-game\/blob\/c5fa27a1986069944386aa26fe17421af232da25\/src\/Building.ts#L40\" rel=\"noopener noreferrer nofollow\">\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e<\/a> \u043d\u0435 \u0434\u043e\u0441\u0442\u0430\u0451\u0442 \u043b\u0438 \u043e\u043d\u0430 \u0434\u043e \u043a\u0430\u043a\u043e\u0433\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u043e\u0440\u043a\u0430 \u043f\u0443\u0442\u0451\u043c \u043f\u0440\u0438\u0441\u0432\u043e\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044f <code>target<\/code>. \u0415\u0441\u043b\u0438 \u0442\u0430\u043a\u043e\u0439 \u043e\u0440\u043a \u043d\u0430\u0439\u0434\u0435\u043d, \u0442\u043e \u0431\u0430\u0448\u043d\u044f <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-td-game\/blob\/c5fa27a1986069944386aa26fe17421af232da25\/src\/Building.ts#L51\" rel=\"noopener noreferrer nofollow\">\u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0441\u0442\u0440\u0435\u043b\u044f\u0442\u044c<\/a>. \u041f\u0440\u0438 \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u0438 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-td-game\/blob\/c5fa27a1986069944386aa26fe17421af232da25\/src\/Building.ts#LL58C50-L58C50\" rel=\"noopener noreferrer nofollow\">\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0433\u043e \u043a\u0430\u0434\u0440\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/a> &#8212; \u0431\u0430\u0448\u043d\u044f \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0438\u0432\u0430\u0435\u0442. \u0411\u0430\u0448\u043d\u044f <code>3<\/code> \u0440\u0430\u0437\u0430 \u043f\u043e\u0434\u0440\u044f\u0434 \u0441\u0442\u0440\u0435\u043b\u044f\u0435\u0442 \u043a\u0430\u043c\u043d\u044f\u043c\u0438, \u0430 \u0437\u0430\u0442\u0435\u043c <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-td-game\/blob\/c5fa27a1986069944386aa26fe17421af232da25\/src\/Building.ts#LL77C56-L77C56\" rel=\"noopener noreferrer nofollow\">\u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u043e\u0433\u043d\u0435\u043d\u043d\u044b\u043c \u0448\u0430\u0440\u043e\u043c<\/a> &#8212; \u043f\u043e\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u044f \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0435\u0433\u043e \u043a \u043e\u0440\u043a\u0443. \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043e\u0433\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0448\u0430\u0440\u0430 \u044f \u0432\u0437\u044f\u043b \u0438\u0437 \u0438\u0433\u0440\u044b \u041f\u043e\u043a\u0435\u043c\u043e\u043d.<\/p>\n<p>\u041a\u0430\u043c\u043d\u0438 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-td-game\/blob\/c5fa27a1986069944386aa26fe17421af232da25\/src\/Projectile.ts#L82\" rel=\"noopener noreferrer nofollow\">\u043b\u0435\u0442\u044f\u0442 \u0431\u044b\u0441\u0442\u0440\u043e<\/a>, \u043d\u043e \u0441\u0442\u0440\u043e\u0433\u043e \u043f\u043e \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0439 \u0442\u0440\u0430\u0435\u043a\u0442\u043e\u0440\u0438\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0441\u0442\u044c \u0448\u0430\u043d\u0441 \u043f\u0440\u043e\u043c\u0430\u0445\u043d\u0443\u0442\u044c\u0441\u044f. \u041f\u0440\u0438 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0438 \u043a\u0430\u043c\u043d\u044f \u0441 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u0438\u043a\u043e\u043c &#8212; \u044f \u0440\u0438\u0441\u0443\u044e \u043a\u0430\u043c\u0435\u043d\u043d\u044b\u0435 \u043e\u0441\u043a\u043e\u043b\u043a\u0438 <code>Explosion<\/code>. \u041e\u0441\u043a\u043e\u043b\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 <code>explosions<\/code> \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-td-game\/blob\/c5fa27a1986069944386aa26fe17421af232da25\/src\/Map.ts#L214\" rel=\"noopener noreferrer nofollow\">\u0443\u0434\u0430\u043b\u044f\u044e<\/a> \u043e\u0441\u043a\u043e\u043b\u043a\u0438 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u0432\u0448\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e.<\/p>\n<p>\u041e\u0433\u043d\u0435\u043d\u043d\u044b\u0439 \u0448\u0430\u0440 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-td-game\/blob\/c5fa27a1986069944386aa26fe17421af232da25\/src\/Projectile.ts#L97\" rel=\"noopener noreferrer nofollow\">\u043b\u0435\u0442\u0438\u0442 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e<\/a>, \u0437\u0430\u0442\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u0442 \u0441\u0432\u043e\u044e \u0442\u0440\u0430\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u043f\u043e\u043b\u0451\u0442\u0430 &#8212; \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0441\u0442\u044c \u0448\u0430\u043d\u0441 \u043d\u0435 \u0434\u043e\u0433\u043d\u0430\u0442\u044c \u043e\u0440\u043a\u0430.<\/p>\n<h3>\u0411\u0430\u0448\u0435\u043d\u043a\u0438: \u043e\u0440\u043a\u0438<\/h3>\n<p>\u041e\u0440\u043a\u0438 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-td-game\/blob\/c5fa27a1986069944386aa26fe17421af232da25\/src\/Map.ts#L275\" rel=\"noopener noreferrer nofollow\">\u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0432\u043e\u043b\u043d\u0430\u043c\u0438<\/a>. \u041a\u0430\u0436\u0434\u0430\u044f \u043d\u043e\u0432\u0430\u044f \u0432\u043e\u043b\u043d\u0430 \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442\u0441\u044f, \u043e\u0440\u043a\u043e\u0432 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0432\u0441\u0451 \u0431\u043e\u043b\u044c\u0448\u0435, \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043e\u0440\u043a\u043e\u0432 \u0442\u043e\u0436\u0435 \u0440\u0430\u0437\u043d\u0430\u044f.<\/p>\n<p>\u041e\u0440\u043a\u0438 <code>Enemy<\/code> \u0443\u0434\u0430\u043b\u044f\u044e\u0442\u0441\u044f \u0435\u0441\u043b\u0438 \u0443 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-td-game\/blob\/c5fa27a1986069944386aa26fe17421af232da25\/src\/Map.ts#L200\" rel=\"noopener noreferrer nofollow\">\u043d\u0438\u0445 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0436\u0438\u0437\u043d\u0438<\/a> \u0438\u043b\u0438 \u043e\u043d\u0438 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-td-game\/blob\/c5fa27a1986069944386aa26fe17421af232da25\/src\/Map.ts#L205\" rel=\"noopener noreferrer nofollow\">\u0432\u044b\u0448\u043b\u0438 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u043a\u0430\u0440\u0442\u044b<\/a> &#8212; \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044f \u0442\u0430\u043a\u0436\u0435 \u0432\u044b\u0447\u0438\u0442\u0430\u044e \u043e\u0434\u043d\u043e \u0441\u0435\u0440\u0434\u0435\u0447\u043a\u043e <code>_hearts<\/code>.<\/p>\n<h2>\u0418\u0433\u0440\u0430 09: \u0421\u043a\u0440\u043e\u043b\u043b\u0435\u0440<\/h2>\n<h3>\u0421\u043a\u0440\u043e\u043b\u043b\u0435\u0440: \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435<\/h3>\n<p>\u0418\u0433\u0440\u043e\u043a \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0441\u043e\u043c. \u041f\u0451\u0441 \u0431\u0435\u0436\u0438\u0442 \u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043e, \u0435\u043c\u0443 \u043c\u0435\u0448\u0430\u044e\u0442 \u0432\u0440\u0430\u0433\u0438: \u0440\u0430\u0441\u0442\u0435\u043d\u0438\u044f, \u043c\u0443\u0445\u0438, \u043f\u0430\u0443\u043a\u0438. \u041f\u0451\u0441 \u043c\u043e\u0436\u0435\u0442 \u043a\u0440\u0443\u0442\u0438\u0442\u044c\u0441\u044f \u0432 \u043f\u0440\u044b\u0436\u043a\u0435, \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u0443\u0431\u0438\u0432\u0430\u044f \u0432\u0440\u0430\u0433\u043e\u0432. \u0417\u0430 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0432\u0440\u0430\u0433\u0430 \u043d\u0430\u0447\u0438\u0441\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u0447\u043a\u0438. \u0415\u0441\u043b\u0438 \u043f\u0451\u0441 \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441 \u0432\u0440\u0430\u0433\u0430\u043c\u0438 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0431\u0435\u0433\u0430, \u0442\u043e \u0432\u044b\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0436\u0438\u0437\u043d\u044c &#8212; \u0432\u0441\u0435\u0433\u043e 5 \u0436\u0438\u0437\u043d\u0435\u0439. \u0426\u0435\u043b\u044c \u0438\u0433\u0440\u044b \u0437\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u0431\u0440\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0447\u043a\u043e\u0432.<\/p>\n<p>\u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0438 \u043e\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u0438\u0433\u0440, \u044d\u0442\u0430 \u0438\u0433\u0440\u0430 \u0432\u0437\u044f\u0442\u0430 \u043e\u0442 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0430\u0432\u0442\u043e\u0440\u0430.<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=GFO_txvwK_c\" rel=\"noopener noreferrer nofollow\">\u041e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u0438\u0434\u0435\u043e<\/a>.<\/p>\n<h3>\u0421\u043a\u0440\u043e\u043b\u043b\u0435\u0440: \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u043a\u0430 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432<\/h3>\n<p>\u0412 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0435 <code>Free texture packer<\/code> \u044f \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043b 3 \u0430\u0442\u043b\u0430\u0441\u0430:<\/p>\n<ol>\n<li>\n<p><a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/tree\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src-texture\/spritesheet\" rel=\"noopener noreferrer nofollow\">\u0410\u0442\u043b\u0430\u0441<\/a> \u0434\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u0443\u0440 \u043f\u0441\u0430, \u0432\u0440\u0430\u0433\u043e\u0432 \u0438 \u0447\u0430\u0441\u0442\u0438\u0446<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/tree\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src-texture\/city\" rel=\"noopener noreferrer nofollow\">\u0410\u0442\u043b\u0430\u0441<\/a> \u0434\u043b\u044f \u0444\u043e\u043d\u0430 \u0433\u043e\u0440\u043e\u0434\u0430<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/tree\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src-texture\/forest\" rel=\"noopener noreferrer nofollow\">\u0410\u0442\u043b\u0430\u0441<\/a> \u0434\u043b\u044f \u0444\u043e\u043d\u0430 \u043b\u0435\u0441\u0430<\/p>\n<\/li>\n<\/ol>\n<p>\u0412\u0441\u0435 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/blob\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src\/LoaderScene.ts#L10\" rel=\"noopener noreferrer nofollow\">\u0442\u0440\u0438 \u0430\u0442\u043b\u0430\u0441\u0430<\/a> \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e \u043f\u0435\u0440\u0435\u0434 \u043d\u0430\u0447\u0430\u043b\u043e\u043c \u0438\u0433\u0440\u044b.<\/p>\n<h3>\u0421\u043a\u0440\u043e\u043b\u043b\u0435\u0440: \u0447\u0430\u0441\u0442\u0438\u0446\u044b<\/h3>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043f\u0451\u0441 \u0431\u0435\u0436\u0438\u0442 &#8212; <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/blob\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src\/playerStates.ts#L76\" rel=\"noopener noreferrer nofollow\">\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e \u043f\u044b\u043b\u044c<\/a> \u0438\u0437 \u043f\u043e\u0434 \u043d\u043e\u0433. \u041a\u0430\u0436\u0434\u0430\u044f \u043f\u044b\u043b\u0438\u043d\u043a\u0430 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/blob\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src\/Particle.ts#L56\" rel=\"noopener noreferrer nofollow\">\u044d\u0442\u043e \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0439<\/a> \u043a\u0440\u0443\u0433.<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043f\u0451\u0441 \u043a\u0440\u0443\u0442\u0438\u0442\u0441\u044f &#8212; <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/blob\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src\/playerStates.ts#L147\" rel=\"noopener noreferrer nofollow\">\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e \u0447\u0430\u0441\u0442\u0438\u0447\u043a\u0438<\/a> \u043e\u0433\u043d\u044f.<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043f\u0451\u0441 \u043f\u0440\u0438\u0437\u0435\u043c\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u043a\u0440\u0443\u0447\u0435\u043d\u0438\u044f &#8212; <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/blob\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src\/playerStates.ts#L189\" rel=\"noopener noreferrer nofollow\">\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e \u0432\u0437\u0440\u044b\u0432<\/a> \u0438\u0437 \u043e\u0433\u043d\u0435\u043d\u043d\u044b\u0445 \u0438\u0441\u043a\u0440.<\/p>\n<p>\u0412 \u043c\u043e\u043c\u0435\u043d\u0442, \u043a\u043e\u0433\u0434\u0430 \u0433\u043b\u0430\u0432\u043d\u0430\u044f <code>MainScene<\/code> \u0441\u0446\u0435\u043d\u0430 \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0430 \u0432 \u0434\u0435\u0440\u0435\u0432\u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 <code>PixiJS<\/code> <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/blob\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src\/MainScene.ts#L47\" rel=\"noopener noreferrer nofollow\">\u044f \u043f\u043e\u0434\u0433\u043e\u0442\u0430\u0432\u043b\u0438\u0432\u0430\u044e<\/a> \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b \u0434\u043b\u044f \u0447\u0430\u0441\u0442\u0438\u0447\u0435\u043a.<\/p>\n<p>\u0414\u043b\u044f \u0447\u0430\u0441\u0442\u0438\u0447\u0435\u043a \u043e\u0433\u043d\u044f \u0438 \u0434\u043b\u044f \u043e\u0433\u043d\u0435\u043d\u043d\u044b\u0445 \u0438\u0441\u043a\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u0430 \u0438 \u0442\u0430 \u0436\u0435 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0430, \u0441 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/blob\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src\/Game.ts#L61\" rel=\"noopener noreferrer nofollow\">\u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430<\/a> &#8212; \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u043e\u0431\u043e\u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0447\u0430\u0441\u0442\u0438\u0446 <code>particles<\/code>.<\/p>\n<p>\u0412 \u0446\u0438\u043a\u043b\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u0432\u0438\u0436\u043e\u043a \u0438\u0433\u0440\u044b <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/blob\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src\/Game.ts#L237\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043e \u0432\u0441\u0435\u043c \u043f\u043e\u0442\u043e\u043c\u043a\u0430\u043c \u0438\u0437 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432<\/a> \u0438 \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u043a \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044e <code>markedForDeletion<\/code>. \u0414\u043b\u044f \u0432\u0441\u0435\u0445 \u0442\u0440\u0451\u0445 \u0442\u0438\u043f\u043e\u0432 \u0447\u0430\u0441\u0442\u0438\u0446 \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u0434\u043b\u044f \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f &#8212; <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/blob\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src\/Particle.ts#L29\" rel=\"noopener noreferrer nofollow\">\u043a\u043e\u0433\u0434\u0430 \u0448\u0438\u0440\u0438\u043d\u0430 \u0438 \u0432\u044b\u0441\u043e\u0442\u0430<\/a> \u043c\u0435\u043d\u044c\u0448\u0435 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u044b \u043f\u0438\u043a\u0441\u0435\u043b\u044f.<\/p>\n<h3>\u0421\u043a\u0440\u043e\u043b\u043b\u0435\u0440: \u0444\u043e\u043d<\/h3>\n<p>\u0424\u043e\u043d <code>Background<\/code> \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 5-\u0442\u0438 \u0441\u043b\u043e\u0451\u0432 <code>Layer<\/code>. \u041a\u0430\u0436\u0434\u044b\u0439 \u0441\u043b\u043e\u0439 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442\u0441\u044f \u043e\u0442 <code>TilingSprite<\/code> \u0447\u0442\u043e\u0431\u044b \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043e\u0434\u043d\u0443 \u0438 \u0442\u0443 \u0436\u0435 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443. \u0422\u0430\u043a\u0436\u0435 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043b\u043e\u044f \u0435\u0441\u0442\u044c \u0440\u0430\u0437\u043d\u0430\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 <code>speedModifier<\/code> \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/blob\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src\/Background.ts#L25\" rel=\"noopener noreferrer nofollow\">\u043e\u0442 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0438\u0433\u0440\u044b<\/a>.<\/p>\n<p>\u0412\u0441\u0435 5 \u0441\u043b\u043e\u0451\u0432 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e, \u043d\u0435 \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u044f \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0430, \u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u044f\u044f, \u0437\u0430 \u0441\u0447\u0435\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u0438.<\/p>\n<p>\u041f\u0440\u0438 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0435 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u0441 \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u043c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c. <code>TilingSprite<\/code> \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0435\u0442 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u043c\u043e\u044e \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443 \u0442\u0440\u0430\u0432\u044b, \u0442.\u043a. <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/blob\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src\/Background.ts#L103\" rel=\"noopener noreferrer nofollow\">\u044f \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u0432\u044b\u0441\u043e\u0442\u0443 \u0431\u043e\u043b\u044c\u0448\u0435 \u0447\u0435\u043c \u0432\u044b\u0441\u043e\u0442\u0430 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b<\/a> &#8212; \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442\u0441\u044f \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u043e\u043b\u043e\u0441\u044b.<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u043a\u0440\u043e\u043b\u043b\u0435\u0440 &#8212; \u043f\u043e\u043b\u043e\u0441\u044b \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/00d\/a9f\/908\/00da9f908f5f728561f7cf617b1e4b37.png\" alt=\"\u0421\u043a\u0440\u043e\u043b\u043b\u0435\u0440 - \u043f\u043e\u043b\u043e\u0441\u044b \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438\" width=\"815\" height=\"509\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/00d\/a9f\/908\/00da9f908f5f728561f7cf617b1e4b37.png\"\/><\/p>\n<div><figcaption>\u0421\u043a\u0440\u043e\u043b\u043b\u0435\u0440 &#8212; \u043f\u043e\u043b\u043e\u0441\u044b \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0442\u0440\u0430\u0432\u044b \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0443\u0441\u0442\u0443\u044e \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u043e \u0432\u0435\u0441\u044c \u044d\u043a\u0440\u0430\u043d.<\/p>\n<p>\u0412 \u0438\u0433\u0440\u0435 \u0441\u0434\u0435\u043b\u0430\u043b \u0434\u0432\u0430 \u0444\u043e\u043d\u0430. \u041e\u0434\u0438\u043d \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u0444\u043e\u043d &#8212; \u044d\u0442\u043e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/blob\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src\/Game.ts#L85\" rel=\"noopener noreferrer nofollow\">\u0433\u043e\u0440\u043e\u0434<\/a>, \u0432\u0442\u043e\u0440\u043e\u0439 \u0444\u043e\u043d &#8212; \u044d\u0442\u043e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/blob\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src\/Game.ts#L92\" rel=\"noopener noreferrer nofollow\">\u043b\u0435\u0441<\/a>.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043f\u0440\u043e\u0448\u043b\u0430 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0438\u0433\u0440\u044b &#8212; \u044f \u043f\u043b\u0430\u0432\u043d\u043e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/blob\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src\/Game.ts#L194\" rel=\"noopener noreferrer nofollow\">\u043c\u0435\u043d\u044f\u044e \u0444\u043e\u043d \u0441 \u0433\u043e\u0440\u043e\u0434\u0430 \u043d\u0430 \u043b\u0435\u0441<\/a>.<\/p>\n<h3>\u0421\u043a\u0440\u043e\u043b\u043b\u0435\u0440: \u043f\u0451\u0441<\/h3>\n<p>\u041f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0432 \u0432\u0438\u0434\u0435\u043e, \u044f \u0441\u0434\u0435\u043b\u0430\u043b <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/blob\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src\/playerStates.ts#L20\" rel=\"noopener noreferrer nofollow\">\u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441<\/a> \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f:<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u043a\u0440\u043e\u043b\u043b\u0435\u0440 &#8212; \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0441\u0430<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">import { Container } from 'pixi.js' import { Sitting, type PlayerState, EPlayerState, Running, Jumping, Falling, Rolling, Diving, Hit } from '.\/playerStates'  class Player extends Container {   public states!: Record&lt;EPlayerState, PlayerState>   public currentState!: PlayerState    constructor (options: IPlayerOptions) {     super()     this.states = {       [EPlayerState.SITTING]: new Sitting({ game: options.game }),       [EPlayerState.RUNNING]: new Running({ game: options.game }),       [EPlayerState.JUMPING]: new Jumping({ game: options.game }),       [EPlayerState.FALLING]: new Falling({ game: options.game }),       [EPlayerState.ROLLING]: new Rolling({ game: options.game }),       [EPlayerState.DIVING]: new Diving({ game: options.game }),       [EPlayerState.HIT]: new Hit({ game: options.game })     }     this.currentState = this.states.SITTING   } } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041a\u0430\u0436\u0434\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442\u0441\u044f \u043e\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 <code>PlayerState<\/code> &#8212; \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438\u043c\u0435\u044e\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434\u044b <code>enter()<\/code> \u0438 <code>handleInput()<\/code>.<\/p>\n<p><code>handleInput()<\/code> &#8212; \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0432\u0432\u043e\u0434\u0430 \u0438 \u043c\u0435\u043d\u044f\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e. <code>enter()<\/code> &#8212; \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043f\u0440\u0438 \u0432\u0445\u043e\u0434\u0435 \u0432 \u044d\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/p>\n<p>\u041f\u0451\u0441 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0439\u0442\u0438 \u0437\u0430 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/blob\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src\/Player.ts#L221\" rel=\"noopener noreferrer nofollow\">\u043b\u0435\u0432\u044b\u0439\/\u043f\u0440\u0430\u0432\u044b\u0439<\/a> \u043a\u0440\u0430\u0439 \u0443\u0440\u043e\u0432\u043d\u044f, \u0430 \u0442\u0430\u043a\u0436\u0435 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/blob\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src\/Player.ts#L235\" rel=\"noopener noreferrer nofollow\">\u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c\u0441\u044f<\/a> \u043d\u0438\u0436\u0435 \u0443\u0440\u043e\u0432\u043d\u044f \u0437\u0435\u043c\u043b\u0438.<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u043a\u0440\u043e\u043b\u043b\u0435\u0440 &#8212; \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435\u043c<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/fd4\/e5a\/8b2\/fd4e5a8b2b2157221fd4c08dabba1ced.png\" alt=\"\u0421\u043a\u0440\u043e\u043b\u043b\u0435\u0440 - \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435\u043c\" width=\"455\" height=\"652\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fd4\/e5a\/8b2\/fd4e5a8b2b2157221fd4c08dabba1ced.png\"\/><\/p>\n<div><figcaption>\u0421\u043a\u0440\u043e\u043b\u043b\u0435\u0440 &#8212; \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435\u043c<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0435\u043d\u0441\u043e\u0440\u043d\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430 \u0438\u043b\u0438 \u043c\u044b\u0448\u043a\u0438 \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043e &#8212; \u043f\u0440\u0438 \u0434\u043e\u0442\u0440\u0430\u0433\u0438\u0432\u0430\u043d\u0438\u0438 \u0432\u044b\u0448\u0435 \u0443\u0440\u043e\u0432\u043d\u044f \u043f\u0441\u0430 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/blob\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src\/InputHandler.ts#L160\" rel=\"noopener noreferrer nofollow\">\u044f \u043f\u0435\u0440\u0435\u0432\u043e\u0436\u0443 \u043f\u0441\u0430<\/a> \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u0440\u0443\u0447\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0410 \u0432\u043e\u0442 \u0435\u0441\u043b\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u0442\u043e \u043d\u0443\u0436\u043d\u043e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/blob\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src\/InputHandler.ts#L68\" rel=\"noopener noreferrer nofollow\">\u043d\u0430\u0436\u0438\u043c\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u0435\u043b<\/a> \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043f\u0440\u0438\u0441\u0435\u0441\u0442\u044c \u043f\u0441\u043e\u043c &#8212; \u0442\u043e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/blob\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src\/playerStates.ts#L48\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430 \u043a\u0430\u0440\u0442\u044b \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f<\/a>.<\/p>\n<h3>\u0421\u043a\u0440\u043e\u043b\u043b\u0435\u0440: \u0432\u0440\u0430\u0433\u0438<\/h3>\n<p>\u0412\u0441\u0435 \u0432\u0440\u0430\u0433\u0438 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442\u0441\u044f \u043e\u0442 \u043e\u0431\u0449\u0435\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 <code>Enemy<\/code>, \u043e\u0434\u043d\u0430\u043a\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0432\u0440\u0430\u0433 \u0438\u043c\u0435\u0435\u0442 \u0441\u0432\u043e\u0438 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f. \u0422\u0430\u043a \u043c\u0443\u0445\u0430 <code>FlyingEnemy<\/code> <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/blob\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src\/Enemy.ts#L68\" rel=\"noopener noreferrer nofollow\">\u043b\u0435\u0442\u0438\u0442 \u043f\u043e \u0441\u0438\u043d\u0443\u0441\u043e\u0438\u0434\u0435<\/a>. \u0420\u0430\u0441\u0442\u0435\u043d\u0438\u0435 <code>GroundEnemy<\/code> <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/blob\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src\/Enemy.ts#L82\" rel=\"noopener noreferrer nofollow\">\u0441\u0442\u043e\u0438\u0442 \u043d\u0430 \u043c\u0435\u0441\u0442\u0435<\/a>. \u041f\u0430\u0443\u043a <code>ClimbingEnemy<\/code> &#8212; <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/blob\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src\/Enemy.ts#L113\" rel=\"noopener noreferrer nofollow\">\u043e\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0438 \u043f\u043e\u0434\u044b\u043c\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u0430\u0443\u0442\u0438\u043d\u0435<\/a>.<\/p>\n<p>\u0414\u043b\u044f \u0432\u0440\u0430\u0433\u043e\u0432 \u0435\u0441\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 <code>enemies<\/code>, \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0438\u0437 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0442\u043e\u0436\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e \u0444\u043b\u0430\u0433\u0443 <code>markedForDeletion<\/code>.<\/p>\n<p>\u041c\u0443\u0445\u0438 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/blob\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src\/Game.ts#L271\" rel=\"noopener noreferrer nofollow\">\u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u043f\u043e \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0443<\/a> \u0432 \u0438\u0433\u0440\u0435, \u0430 \u0432\u043e\u0442 \u043f\u0430\u0443\u043a\u0438 \u0438 \u0440\u0430\u0441\u0442\u0435\u043d\u0438\u044f \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0435 \u043a\u0430\u0440\u0442\u044b <code>this.speed > 0<\/code>.<\/p>\n<p>\u041f\u0440\u0438 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0438 \u0432\u0440\u0430\u0433\u0430 \u0441 \u043f\u0441\u043e\u043c &#8212; <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/blob\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src\/Player.ts#L268\" rel=\"noopener noreferrer nofollow\">\u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e<\/a> \u0434\u044b\u043c\u0430 <code>Boom<\/code> &#8212; \u043a\u043e\u0442\u043e\u0440\u0443\u044e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/blob\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src\/Boom.ts#L36\" rel=\"noopener noreferrer nofollow\">\u0443\u0434\u0430\u043b\u044f\u044e \u043f\u0440\u0438 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0438<\/a> \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043f\u0451\u0441 \u043f\u0440\u0438 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u043b\u0441\u044f \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u043a\u0440\u0443\u0447\u0435\u043d\u0438\u044f &#8212; \u0442\u043e \u043e\u043d \u043d\u0435\u0443\u044f\u0437\u0432\u0438\u043c. <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/blob\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src\/Player.ts#L280\" rel=\"noopener noreferrer nofollow\">\u042f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e<\/a> \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0442\u0435\u043a\u0441\u0442 <code>FloatingMessage<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u0438\u0433\u0440\u043e\u043a \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043e\u0447\u043a\u0438. \u0422\u0435\u043a\u0441\u0442 <code>+1<\/code> \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u0435\u0442 \u043e\u0442 \u043c\u0435\u0441\u0442\u0430 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u043a \u043f\u0430\u043d\u0435\u043b\u0438 \u0432\u0432\u0435\u0440\u0445\u0443, \u0433\u0434\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u044b \u043e\u0447\u043a\u0438 \u0432 \u0438\u0433\u0440\u0435.<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u043a\u0440\u043e\u043b\u043b\u0435\u0440 &#8212; \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0442\u0435\u043a\u0441\u0442<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/238\/49c\/774\/23849c7742cea8741432a9bd4e454a88.png\" alt=\"\u0421\u043a\u0440\u043e\u043b\u043b\u0435\u0440 - \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0442\u0435\u043a\u0441\u0442\" width=\"1146\" height=\"795\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/238\/49c\/774\/23849c7742cea8741432a9bd4e454a88.png\"\/><\/p>\n<div><figcaption>\u0421\u043a\u0440\u043e\u043b\u043b\u0435\u0440 &#8212; \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0442\u0435\u043a\u0441\u0442<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0412\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0442\u0435\u043a\u0441\u0442 \u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/blob\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src\/FloatingMessage.ts#L52\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u0441\u043b\u0435 100-\u0433\u043e<\/a> \u0444\u0440\u0435\u0439\u043c\u0430.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043f\u0451\u0441 \u043f\u0440\u0438 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0438 \u043d\u0435 \u0431\u044b\u043b \u0432 \u043a\u0440\u0443\u0447\u0435\u043d\u0438\u0438 &#8212; <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/blob\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src\/Player.ts#L289\" rel=\"noopener noreferrer nofollow\">\u044f \u0432\u044b\u0447\u0438\u0442\u0430\u044e \u043e\u0434\u043d\u0443 \u0436\u0438\u0437\u043d\u044c<\/a> \u0438 \u0432\u044b\u0447\u0438\u0442\u0430\u044e \u043e\u0434\u043d\u043e \u043e\u0447\u043a\u043e. \u0412\u0440\u0430\u0433\u0430 \u044f \u0443\u0434\u0430\u043b\u044f\u044e \u0432 \u043b\u044e\u0431\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435.<\/p>\n<h3>\u0421\u043a\u0440\u043e\u043b\u043b\u0435\u0440: \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>\u0421\u0432\u0435\u0440\u0445\u0443 \u044d\u043a\u0440\u0430\u043d\u0430 \u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043f\u0430\u043d\u0435\u043b\u044c \u0441\u0442\u0430\u0442\u0443\u0441\u0430.<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u043a\u0440\u043e\u043b\u043b\u0435\u0440 &#8212; \u043f\u0430\u043d\u0435\u043b\u044c \u0441\u0442\u0430\u0442\u0443\u0441\u0430<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/9f9\/57b\/1f4\/9f957b1f4f00c2724ff05c4250a278ac.png\" alt=\"\u0421\u043a\u0440\u043e\u043b\u043b\u0435\u0440 - \u043f\u0430\u043d\u0435\u043b\u044c \u0441\u0442\u0430\u0442\u0443\u0441\u0430\" width=\"410\" height=\"238\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9f9\/57b\/1f4\/9f957b1f4f00c2724ff05c4250a278ac.png\"\/><\/p>\n<div><figcaption>\u0421\u043a\u0440\u043e\u043b\u043b\u0435\u0440 &#8212; \u043f\u0430\u043d\u0435\u043b\u044c \u0441\u0442\u0430\u0442\u0443\u0441\u0430<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u041d\u0430 \u043f\u0430\u043d\u0435\u043b\u0438 \u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0447\u043a\u043e\u0432, \u0432\u0440\u0435\u043c\u044f \u0438\u0433\u0440\u044b \u0438 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0436\u0438\u0437\u043d\u0435\u0439. \u0414\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u0430 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0435\u0433\u043e \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0431\u0435\u043b\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 <code>scoreTextShadow<\/code> \u0438 \u0441 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u043c \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435\u043c <code>scoreText<\/code> <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/blob\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src\/StatusBar.ts#L54\" rel=\"noopener noreferrer nofollow\">\u0447\u0435\u0440\u043d\u044b\u0439 \u043f\u043e\u0432\u0435\u0440\u0445 \u0431\u0435\u043b\u043e\u0433\u043e<\/a>. \u0422\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0435\u043d\u044c &#8212; \u0434\u043b\u044f \u043b\u0443\u0447\u0448\u0435\u0439 \u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u0438.<\/p>\n<p>\u0418\u0433\u0440\u0430 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\/blob\/83abd295b5c7ac35ae7eb0c54916c0f5757d59d5\/src\/Game.ts#LL206C1-L206C1\" rel=\"noopener noreferrer nofollow\">\u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f<\/a> \u043a\u043e\u0433\u0434\u0430 \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f. \u0417\u0430\u0442\u0435\u043c \u044f \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u044e \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0447\u043a\u043e\u0432 \u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043b\u0438\u0431\u043e \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043b\u0438\u0431\u043e \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0448\u043d\u043e\u0435.<\/p>\n<h2>\u0418\u0433\u0440\u0430 10: \u041a\u043e\u043c\u043d\u0430\u0442\u044b<\/h2>\n<h3>\u041a\u043e\u043c\u043d\u0430\u0442\u044b: \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435<\/h3>\n<p>\u0418\u0433\u0440\u043e\u043a \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0435\u0440\u0435\u0434\u0432\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0443\u0440\u043e\u0432\u043d\u044e. \u0426\u0435\u043b\u044c \u0438\u0433\u0440\u044b \u043f\u0440\u043e\u0439\u0442\u0438 3 \u0443\u0440\u043e\u0432\u043d\u044f \u0437\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f. \u041f\u0435\u0440\u0435\u0445\u043e\u0434 \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043a\u043e\u0433\u0434\u0430 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436 \u043e\u0442\u043a\u0440\u044b\u043b \u0434\u0432\u0435\u0440\u044c.<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=Lcdc2v-9PjA\" rel=\"noopener noreferrer nofollow\">\u041e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u0438\u0434\u0435\u043e<\/a>.<\/p>\n<h3>\u041a\u043e\u043c\u043d\u0430\u0442\u044b: \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438<\/h3>\n<p>\u0412 \u0438\u0433\u0440\u0435 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0436\u0435 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u043b \u043d\u0435\u043e\u0434\u043d\u043e\u043a\u0440\u0430\u0442\u043d\u043e. \u041e\u0442\u043b\u0438\u0447\u0438\u0439 \u043e\u0442 \u0434\u0440\u0443\u0433\u0438\u0445 \u0438\u0433\u0440 \u043d\u0435\u043c\u043d\u043e\u0433\u043e:<\/p>\n<ul>\n<li>\n<p>\u0412\u043d\u0430\u0447\u0430\u043b\u0435 \u044f \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u044e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-mrp-game\/blob\/58681c74711cfe023b03ee1ab7f4b05240f8c086\/src\/LoaderScene.ts#L88\" rel=\"noopener noreferrer nofollow\">\u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u0443 \u0447\u0430\u0441\u0442\u044c \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432<\/a> &#8212; \u0434\u043b\u044f \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-mrp-game\/blob\/58681c74711cfe023b03ee1ab7f4b05240f8c086\/src\/Game.ts#L60\" rel=\"noopener noreferrer nofollow\">\u044f \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u044e<\/a> \u0432 \u0444\u043e\u043d\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0421\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u0432\u0435\u0440\u0435\u0439 \u0438 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 <code>Tiled Map Editor<\/code> \u0432 \u0441\u043b\u043e\u0435 <code>Player and Door<\/code>. \u0414\u0430\u043b\u0435\u0435 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-mrp-game\/blob\/58681c74711cfe023b03ee1ab7f4b05240f8c086\/src\/Game.ts#L224\" rel=\"noopener noreferrer nofollow\">\u044f \u0440\u0430\u0441\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0438\u0433\u0440\u043e\u043a\u0430 \u0438 \u0434\u0432\u0435\u0440\u0438<\/a> \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044e.<\/p>\n<\/li>\n<\/ul>\n<details class=\"spoiler\">\n<summary>\u041a\u043e\u043c\u043d\u0430\u0442\u044b &#8212; \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u0432\u0435\u0440\u0435\u0439 \u0438 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/65b\/444\/de7\/65b444de77e94fdc825d0f197f16e86a.png\" alt=\"\u041a\u043e\u043c\u043d\u0430\u0442\u044b - \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u0432\u0435\u0440\u0435\u0439 \u0438 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430\" width=\"826\" height=\"446\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/65b\/444\/de7\/65b444de77e94fdc825d0f197f16e86a.png\"\/><\/p>\n<div><figcaption>\u041a\u043e\u043c\u043d\u0430\u0442\u044b &#8212; \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u0432\u0435\u0440\u0435\u0439 \u0438 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<ul>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-mrp-game\/blob\/58681c74711cfe023b03ee1ab7f4b05240f8c086\/src\/Player.ts#L358\" rel=\"noopener noreferrer nofollow\">\u0441\u0442\u043e\u0438\u0442 \u0443 \u0434\u0432\u0435\u0440\u0435\u0439<\/a>, <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-mrp-game\/blob\/58681c74711cfe023b03ee1ab7f4b05240f8c086\/src\/InputHandler.ts#L154\" rel=\"noopener noreferrer nofollow\">\u0442\u043e \u043a\u0430\u0441\u0430\u043d\u0438\u0435 \u0438\u043b\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043f\u043e \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0443<\/a> \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0434\u0432\u0435\u0440\u044c. \u0410 \u0442\u043e\u0447\u043d\u0435\u0435 \u0441\u0442\u0430\u0440\u0442\u0443\u0435\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u043d\u0438\u044f \u0434\u0432\u0435\u0440\u0435\u0439 + \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0437\u0430\u0445\u043e\u0434\u0430 \u0432 \u0434\u0432\u0435\u0440\u044c \u0434\u043b\u044f \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u0430\u043b\u0435\u0435, \u043a\u043e\u0433\u0434\u0430 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-mrp-game\/blob\/58681c74711cfe023b03ee1ab7f4b05240f8c086\/src\/Player.ts#L246\" rel=\"noopener noreferrer nofollow\">\u0434\u0432\u0435\u0440\u044c \u043e\u0442\u043a\u0440\u044b\u043b\u0430\u0441\u044c<\/a>, \u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-mrp-game\/blob\/58681c74711cfe023b03ee1ab7f4b05240f8c086\/src\/Game.ts#L185\" rel=\"noopener noreferrer nofollow\">\u043f\u043b\u0430\u0432\u043d\u043e\u0435 \u0437\u0430\u0442\u0435\u043d\u0435\u043d\u0438\u0435<\/a> \u043c\u0435\u0436\u0434\u0443 \u0443\u0440\u043e\u0432\u043d\u044f\u043c\u0438. \u0414\u043b\u044f \u0437\u0430\u0442\u0435\u043d\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-mrp-game\/blob\/58681c74711cfe023b03ee1ab7f4b05240f8c086\/src\/Game.ts#L87\" rel=\"noopener noreferrer nofollow\">\u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a<\/a> \u0438 \u043f\u043b\u0430\u0432\u043d\u043e \u043c\u0435\u043d\u044f\u044e \u0435\u043c\u0443 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u0442\u0435\u043d\u0438\u0442\u044c \u044d\u043a\u0440\u0430\u043d. \u041f\u0440\u0438 \u0442\u0451\u043c\u043d\u043e\u043c \u044d\u043a\u0440\u0430\u043d\u0435 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-mrp-game\/blob\/58681c74711cfe023b03ee1ab7f4b05240f8c086\/src\/Game.ts#L192\" rel=\"noopener noreferrer nofollow\">\u043c\u0435\u043d\u044f\u044e \u0443\u0440\u043e\u0432\u0435\u043d\u044c<\/a> \u0438 \u0437\u0430\u0442\u0435\u043c \u043f\u043b\u0430\u0432\u043d\u043e \u0443\u0431\u0438\u0440\u0430\u044e \u0437\u0430\u0442\u0435\u043d\u0435\u043d\u0438\u0435.<\/p>\n<h2>\u0418\u0433\u0440\u0430 11: \u041f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u0440<\/h2>\n<h3>\u041f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u0440: \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435<\/h3>\n<p>\u0418\u0433\u0440\u043e\u043a \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0435\u0440\u0435\u0434\u0432\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0443\u0440\u043e\u0432\u043d\u044e \u0438 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043f\u0440\u044b\u0433\u0438\u0432\u0430\u0442\u044c \u043d\u0430 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b.<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=Lcdc2v-9PjA\" rel=\"noopener noreferrer nofollow\">\u041e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u0438\u0434\u0435\u043e<\/a>.<\/p>\n<h3>\u041f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u0440: \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438<\/h3>\n<p>\u041e\u0442\u043b\u0438\u0447\u0438\u044f \u043e\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u0438\u0433\u0440:<\/p>\n<ul>\n<li>\n<p>\u0412\u043e\u043a\u0440\u0443\u0433 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430 \u0440\u0438\u0441\u0443\u044e <code>camerabox<\/code> \u0432 \u0432\u0438\u0434\u0435 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-vp-game\/blob\/0478116b5f53118bfaa3eb283cdec7a4af083edc\/src\/Game.ts#L92\" rel=\"noopener noreferrer nofollow\">\u043d\u0435\u0432\u0438\u0434\u0438\u043c\u043e\u0433\u043e \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430<\/a>. \u0415\u0441\u043b\u0438 \u044d\u0442\u043e\u0442 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-vp-game\/blob\/0478116b5f53118bfaa3eb283cdec7a4af083edc\/src\/Game.ts#L198\" rel=\"noopener noreferrer nofollow\">\u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u043b\u044e\u0431\u043e\u0433\u043e \u043a\u0440\u0430\u044f \u044d\u043a\u0440\u0430\u043d\u0430<\/a> &#8212; \u0442\u043e \u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u044e \u043a\u0430\u0440\u0442\u0443 <code>pivot<\/code> \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u043a\u0443\u0434\u0430.<\/p>\n<\/li>\n<\/ul>\n<details class=\"spoiler\">\n<summary>\u041f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u0440 &#8212; \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0430\u043c\u0435\u0440\u044b-\u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/be2\/08f\/4ec\/be208f4eccdb0980a897fed20c38bd8b.png\" alt=\"\u041f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u0440 - \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0430\u043c\u0435\u0440\u044b-\u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430\" width=\"610\" height=\"482\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/be2\/08f\/4ec\/be208f4eccdb0980a897fed20c38bd8b.png\"\/><\/p>\n<div><figcaption>\u041f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u0440 &#8212; \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0430\u043c\u0435\u0440\u044b-\u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<h2>\u0418\u0433\u0440\u0430 12: \u042d\u043b\u044c\u0444 \u0438 \u043e\u0440\u043a\u0438<\/h2>\n<h3>\u042d\u043b\u044c\u0444 \u0438 \u043e\u0440\u043a\u0438: \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0438 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430<\/h3>\n<p>\u0418\u0433\u0440\u043e\u043a \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u044d\u043b\u044c\u0444\u0438\u0439\u043a\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0445\u043e\u0434\u0438\u0442 \u043f\u043e \u043a\u0430\u0440\u0442\u0435. \u042d\u043b\u044c\u0444\u0438\u0439\u043a\u0430 \u043c\u043e\u0436\u0435\u0442 \u0441\u0442\u0440\u0435\u043b\u044f\u0442\u044c \u0441\u0442\u0440\u0435\u043b\u0430\u043c\u0438. \u041d\u0430 \u043a\u0430\u0440\u0442\u0435 \u0435\u0441\u0442\u044c \u0432\u0440\u0430\u0433\u0438 &#8212; \u043e\u0440\u043a\u0438. \u0412 \u0431\u043b\u0438\u0436\u043d\u0435\u043c \u0431\u043e\u044e \u043e\u0440\u043a\u0438 \u0443\u0431\u0438\u0432\u0430\u044e\u0442 \u044d\u043b\u044c\u0444\u0438\u0439\u043a\u0443, \u0430 \u0432\u043e\u0442 \u0441\u0442\u0440\u0435\u043b\u044f\u0442\u044c \u0441\u0442\u0440\u0435\u043b\u0430\u043c\u0438 \u0438\u0437 \u043b\u0443\u043a\u0430 \u043c\u043e\u0436\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u044d\u043b\u044c\u0444\u0438\u0439\u043a\u0430. \u0418\u0433\u0440\u0430 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u0433\u0434\u0430 \u0432\u0441\u0435 \u043e\u0440\u043a\u0438 \u043f\u043e\u0432\u0435\u0440\u0436\u0435\u043d\u044b.<\/p>\n<p>\u0412 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0435 \u0430\u0432\u0442\u043e\u0440\u043a(\u0430) \u0432\u044b\u043f\u0443\u0441\u0442\u0438\u043b\u0430 \u0438\u0433\u0440\u0443 \u0432 \u0434\u0432\u0443\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430\u0445:<\/p>\n<ol>\n<li>\n<p>\u041f\u0435\u0440\u0432\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043e\u043f\u0438\u0441\u0430\u043d \u0432\u0441\u043a\u043e\u043b\u044c\u0437\u044c \u0432 \u044d\u0442\u043e\u043c <a href=\"https:\/\/www.youtube.com\/watch?v=a9NqjKgp4CY\" rel=\"noopener noreferrer nofollow\">\u0432\u0438\u0434\u0435\u043e<\/a>. \u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 <a href=\"https:\/\/vk.com\/webgirlkristina?w=wall497728935_67%2Fall\" rel=\"noopener noreferrer nofollow\">\u0432\u043e \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u0435<\/a>. \u0412\u0441\u0451 \u0432 \u043e\u0434\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435, \u043d\u0430 <code>ES5<\/code>, \u0431\u0435\u0437 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u043a\u0430\u0440\u0442 &#8212; \u0437\u0430\u0442\u043e \u0438\u0433\u0440\u0430 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f \u0432\u0435\u0441\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<\/li>\n<li>\n<p>\u0412\u0442\u043e\u0440\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u043d \u0432 <a href=\"https:\/\/www.youtube.com\/watch?v=vO240aVy1Y4&amp;list=PLSUAU8pldTeVxDiM9vMj_jszZ1KHv5Ztr\" rel=\"noopener noreferrer nofollow\">\u0441\u0435\u0440\u0438\u0438 \u0432\u0438\u0434\u0435\u043e\u0443\u0440\u043e\u043a\u043e\u0432<\/a>. \u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 <a href=\"https:\/\/github.com\/webgirlkristina\/elven-scout\" rel=\"noopener noreferrer nofollow\">\u043d\u0430 github<\/a>. \u041a\u043e\u0434 \u0440\u0430\u0437\u0431\u0438\u0442 \u043d\u0430 \u043c\u043e\u0434\u0443\u043b\u0438, \u043d\u0430 <code>ES6<\/code> &#8212; \u043d\u043e \u0434\u043e \u043a\u043e\u043d\u0446\u0430 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 &#8212; \u043e\u0440\u043a \u043d\u0435 \u0430\u0442\u0430\u043a\u0443\u0435\u0442, \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0445\u043e\u0434\u0438\u0442\u044c \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u043a\u0430\u0440\u0442\u044b.<\/p>\n<\/li>\n<\/ol>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043b \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u043e\u0441\u0442\u044c 2-\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u043e\u043c 1-\u0433\u043e, \u043f\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u043b \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432. \u0420\u0435\u0448\u0438\u043b \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0433\u0440\u0430\u0444\u0438\u043a\u0443\/\u0441\u043f\u0440\u0430\u0439\u0442\u044b \u043e\u0431\u043e\u0438\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 &#8212; \u0441\u0434\u0435\u043b\u0430\u043b \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u0432\u0430 \u0443\u0440\u043e\u0432\u043d\u044f. \u0412\u0441\u0435 \u0441\u043f\u0440\u0430\u0439\u0442\u044b \u043f\u043e\u0440\u0435\u0437\u0430\u043b \u043d\u0430 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u043a\u0430\u0434\u0440\u044b \u0438 \u0441\u043e\u0437\u0434\u0430\u043b \u043e\u0434\u0438\u043d \u043e\u0431\u0449\u0438\u0439 \u0430\u0442\u043b\u0430\u0441. \u0412\u043a\u043b\u044e\u0447\u0435\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e, \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f.<\/p>\n<p>\u041a\u0430\u0440\u0442\u0443 \u0438\u0437 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043b \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0432 <code>Tiled Map Editor<\/code> &#8212; \u0442.\u043a. \u043e\u043d\u0430 \u0431\u044b\u043b\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u0430 \u0432 \u043a\u043e\u0434\u0435. \u0422\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0440\u0430\u0441\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0440\u043a\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u0434\u043b\u044f \u043e\u0431\u043e\u0438\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 (\u0443\u0440\u043e\u0432\u043d\u0435\u0439).<\/p>\n<p>\u0418\u0437 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0432\u0437\u044f\u043b \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u044e\u0449\u0438\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0438 \u0437\u0432\u0443\u043a\u0438.<\/p>\n<h3>\u042d\u043b\u044c\u0444 \u0438 \u043e\u0440\u043a\u0438: \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441<\/h3>\n<p>\u041a\u0430\u043c\u0435\u0440\u0430 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0432\u0441\u0451, \u0447\u0442\u043e \u0432\u0438\u0434\u043d\u043e \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0438 \u0435\u0441\u0442\u044c \u043a\u0430\u043c\u0435\u0440\u0430.<br \/>\u041e\u0434\u043d\u0430\u043a\u043e \u043a\u0430\u043c\u0435\u0440\u0430 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-es-game\/blob\/89d6fd6118ed03711b5e67828abf5288ee514a13\/src\/Camera.ts#L21\" rel=\"noopener noreferrer nofollow\">\u0441\u043b\u0435\u0434\u0438\u0442 \u0437\u0430 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0435\u043c<\/a> <code>watchObject<\/code> \u0438 \u0438\u043c\u0435\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043a\u0430\u0440\u0442\u0435 <code>TileMap<\/code>, \u0447\u0442\u043e\u0431\u044b <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-es-game\/blob\/89d6fd6118ed03711b5e67828abf5288ee514a13\/src\/Camera.ts#L34\" rel=\"noopener noreferrer nofollow\">\u0441\u043c\u0435\u0449\u0430\u0442\u044c \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/a> \u043a\u0430\u0440\u0442\u044b <code>pivot<\/code>. \u0415\u0441\u043b\u0438 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436 \u043d\u0435 \u0432\u044b\u0445\u043e\u0434\u0438\u0442 \u0437\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043e\u043a\u043d\u0430 \u0437\u0430 \u0432\u044b\u0447\u0435\u0442\u043e\u043c <code>scrollEdge<\/code> &#8212; \u0442\u043e \u043a\u0430\u043c\u0435\u0440\u0430 \u043d\u0435 \u0434\u0432\u0438\u0433\u0430\u0435\u0442 \u043a\u0430\u0440\u0442\u0443.<\/p>\n<p>\u041f\u0430\u043d\u0435\u043b\u044c \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0435\u043a\u0441\u0442\u0430 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0441\u0442\u0430\u0432\u0448\u0438\u0445\u0441\u044f \u043e\u0440\u043a\u043e\u0432 <code>orcsText<\/code>, \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c <code>levelText<\/code> \u0438 \u0432\u0440\u0435\u043c\u044f \u0438\u0433\u0440\u044b <code>timeText<\/code>. \u0414\u0432\u0438\u0436\u043e\u043a \u0438\u0433\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b <code>updateTime<\/code>\/<code>updateLevel<\/code>\/<code>updateOrcs<\/code> \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e.<\/p>\n<h3>\u042d\u043b\u044c\u0444 \u0438 \u043e\u0440\u043a\u0438: OOP<\/h3>\n<p>\u041e\u0440\u043a <code>Orc<\/code> \u0438 \u044d\u043b\u044c\u0444\u0438\u0439\u043a\u0430 <code>Player<\/code> \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442\u0441\u044f \u043e\u0442 <code>Body<\/code>. <code>Body<\/code> \u043a\u043b\u0430\u0441\u0441 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-es-game\/blob\/89d6fd6118ed03711b5e67828abf5288ee514a13\/src\/Body.ts#LL111C3-L111C13\" rel=\"noopener noreferrer nofollow\">\u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442<\/a> \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f <code>Stand<\/code>\/<code>Walk<\/code>\/<code>Attack<\/code> \u0432\u043e \u0432\u0441\u0435\u0445 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f\u0445. \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0441\u043c\u0435\u0440\u0442\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0432\u043d\u0438\u0437 <code>DeadDown<\/code>. \u041f\u0440\u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u043d\u0430 \u043d\u043e\u0432\u044b\u0439 \u0441\u043f\u0440\u0430\u0439\u0442, <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-es-game\/blob\/89d6fd6118ed03711b5e67828abf5288ee514a13\/src\/Body.ts#L273\" rel=\"noopener noreferrer nofollow\">\u044f \u0432\u043a\u043b\u044e\u0447\u0430\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0441 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043a\u0430\u0434\u0440\u0430<\/a> <code>gotoAndPlay(0)<\/code>, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u0440\u0430\u0439\u0442. \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430 <code>PlayerState<\/code> \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442\u0441\u044f \u043e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 <code>BodyState<\/code> \u0442.\u043a. \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0432\u0432\u043e\u0434 <code>InputHandler<\/code>.<\/p>\n<p>\u0414\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0439 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e <code>setCollisionShapePosition()<\/code> \u043c\u0435\u0442\u043e\u0434 &#8212; \u0442.\u043a. \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0433\u043e \u0441\u043f\u0440\u0430\u0439\u0442\u0430 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0440\u0430\u0441\u0447\u0435\u0442\u0430\u0445 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0439.<\/p>\n<p>\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u044d\u043b\u044c\u0444\u0438\u0439\u043a\u043e\u0439 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-es-game\/blob\/89d6fd6118ed03711b5e67828abf5288ee514a13\/src\/InputHandler.ts#L10\" rel=\"noopener noreferrer nofollow\">\u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e<\/a> \u0441\u0435\u043d\u0441\u043e\u0440\u043d\u044b\u043c \u0432\u0432\u043e\u0434\u043e\u043c, \u043c\u044b\u0448\u043a\u043e\u0439 \u0438\u043b\u0438 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u043e\u0439 \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 <code>InputHandler<\/code>.<\/p>\n<p>\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0440\u043a\u0430\u043c\u0438 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-es-game\/blob\/89d6fd6118ed03711b5e67828abf5288ee514a13\/src\/AI.ts#L5\" rel=\"noopener noreferrer nofollow\">\u0431\u0435\u0440\u0451\u0442 \u043d\u0430 \u0441\u0435\u0431\u044f<\/a> \u043f\u0440\u043e\u0441\u0442\u043e\u0439 <code>\u0418\u0418<\/code> \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 <code>AI<\/code>. \u0412\u043a\u0440\u0430\u0442\u0446\u0435 \u0441\u0443\u0442\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f &#8212; \u044d\u0442\u043e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-es-game\/blob\/89d6fd6118ed03711b5e67828abf5288ee514a13\/src\/AI.ts#L59\" rel=\"noopener noreferrer nofollow\">\u0432\u044b\u0431\u043e\u0440 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0433\u043e \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f<\/a> \u043a\u0430\u0436\u0434\u044b\u0435 <code>500-200<\/code> \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434.<\/p>\n<p>\u041a\u043b\u0430\u0441\u0441 <code>Collider<\/code> &#8212; \u0431\u0435\u0440\u0451\u0442 \u043d\u0430 \u0441\u0435\u0431\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043f\u043e \u0440\u0430\u0441\u0447\u0435\u0442\u0443 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0439. \u041f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0443\u0440\u043e\u0432\u043d\u044f <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-es-game\/blob\/89d6fd6118ed03711b5e67828abf5288ee514a13\/src\/Collider.ts#L53\" rel=\"noopener noreferrer nofollow\">\u044f \u0441\u0434\u0435\u043b\u0430\u043b \u043c\u0435\u0442\u043e\u0434<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442 \u0432\u0441\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b \u0432 \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/p>\n<details class=\"spoiler\">\n<summary>\u042d\u043b\u044c\u0444 \u0438 \u043e\u0440\u043a\u0438 &#8212; \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0439<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/4e2\/9b4\/5d3\/4e29b45d36a573bc1d43a827df725ffd.png\" alt=\"\u042d\u043b\u044c\u0444 \u0438 \u043e\u0440\u043a\u0438 - \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0439\" width=\"272\" height=\"315\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/4e2\/9b4\/5d3\/4e29b45d36a573bc1d43a827df725ffd.png\"\/><\/p>\n<div><figcaption>\u042d\u043b\u044c\u0444 \u0438 \u043e\u0440\u043a\u0438 &#8212; \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0439<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u041a\u043b\u0430\u0441\u0441 <code>Hitbox<\/code> &#8212; \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0435\u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0431\u043b\u043e\u043a\u043e\u0432 \u043d\u0430 \u043a\u0430\u0440\u0442\u0435. \u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0438 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0431\u043b\u043e\u043a\u043e\u0432 \u0431\u0435\u0440\u0451\u0442\u0441\u044f \u0438\u0437 \u0441\u043b\u043e\u044f <code>Misc<\/code>.<\/p>\n<h3>\u042d\u043b\u044c\u0444 \u0438 \u043e\u0440\u043a\u0438: \u0430\u0442\u0430\u043a\u0430 \u043e\u0440\u043a\u0430<\/h3>\n<p>\u0423 \u043e\u0440\u043a\u0430 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-es-game\/blob\/89d6fd6118ed03711b5e67828abf5288ee514a13\/src\/Orc.ts#L12\" rel=\"noopener noreferrer nofollow\">\u0435\u0441\u0442\u044c \u0434\u0438\u0441\u0442\u0430\u043d\u0446\u0438\u044f<\/a> \u043f\u0440\u044b\u0436\u043a\u0430. \u0415\u0441\u043b\u0438 \u044d\u043b\u044c\u0444\u0438\u0439\u043a\u0430 \u043f\u0440\u0438\u0431\u043b\u0438\u0436\u0430\u0435\u0442\u0441\u044f \u043a \u043e\u0440\u043a\u0443 \u043d\u0430 \u044d\u0442\u0443 \u0434\u0438\u0441\u0442\u0430\u043d\u0446\u0438\u044e &#8212; \u0442\u043e \u043e\u0440\u043a \u043a\u0430\u043a \u0431\u044b <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-es-game\/blob\/89d6fd6118ed03711b5e67828abf5288ee514a13\/src\/Orc.ts#L44\" rel=\"noopener noreferrer nofollow\">&#171;\u043f\u0440\u044b\u0433\u0430\u0435\u0442&#187; \u043a \u044d\u043b\u044c\u0444\u0438\u0439\u043a\u0435 \u0438 \u043d\u0430\u043d\u043e\u0441\u0438\u0442 \u0443\u0434\u0430\u0440<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-es-game\/blob\/89d6fd6118ed03711b5e67828abf5288ee514a13\/src\/TileMap.ts#L170\" rel=\"noopener noreferrer nofollow\">\u0443\u0431\u0438\u0432\u0430\u0435\u0442 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430<\/a> &#8212; \u0438\u0433\u0440\u0430 \u043e\u043a\u043e\u043d\u0447\u0435\u043d\u0430.<\/p>\n<h2>\u0418\u0433\u0440\u0430 13: \u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f<\/h2>\n<h3>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f: \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435<\/h3>\n<p>\u0412\u0441\u0435 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0435 \u0438\u0433\u0440\u044b \u044f \u0434\u0435\u043b\u0430\u043b 1 \u043c\u0435\u0441\u044f\u0446, \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0436\u0435 \u0434\u0435\u043b\u0430\u043b \u0438 \u044d\u0442\u0443 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044e\u044e \u0438\u0433\u0440\u0443.<br \/>\u0412 \u0434\u0430\u043b\u0451\u043a\u043e\u043c 2014 \u0433\u043e\u0434\u0443 \u043f\u043e\u043f\u0430\u043b\u0430\u0441\u044c \u043c\u043d\u0435 \u043a\u043d\u0438\u0436\u043a\u0430 <a href=\"https:\/\/www.amazon.com\/HTML5-Games-Experts-Voice-Development-ebook\/dp\/B00ACC6AT6\" rel=\"noopener noreferrer nofollow\">Pro HTML5 Games<\/a> \u0437\u0430 \u0430\u0432\u0442\u043e\u0440\u0441\u0442\u0432\u043e\u043c \u0410\u0434\u0438\u0442\u044c\u044f \u0420\u0430\u0432\u0438 \u0428\u0430\u043d\u043a\u0430\u0440 (Aditya Ravi Shankar). \u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 <a href=\"https:\/\/github.com\/adityaravishankar\/last-colony\" rel=\"noopener noreferrer nofollow\">\u044f \u043d\u0430\u0448\u0435\u043b \u043d\u0430 github<\/a>.<\/p>\n<p>\u0412 2016 \u0433\u043e\u0434\u0443 \u044f \u0441\u043d\u043e\u0432\u0430 \u0432\u0435\u0440\u043d\u0443\u043b\u0441\u044f \u043a \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c\u0443 \u043a\u043e\u0434\u0443 &#8212; <a href=\"https:\/\/github.com\/volodalexey\/last_colony\" rel=\"noopener noreferrer nofollow\">\u0438 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u043b \u0435\u0433\u043e<\/a> \u043c\u0435\u0441\u0442\u0430\u043c\u0438. \u0420\u0435\u0448\u0438\u043b \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u043e\u0442 <code>jQuery<\/code>, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0430\u0440\u0443 \u043d\u043e\u0432\u044b\u0445 \u0437\u0432\u0443\u043a\u043e\u0432 &#8212; \u0438 \u0437\u0432\u0443\u043a\u043e\u0432\u043e\u0439 \u0434\u0432\u0438\u0436\u043e\u043a \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430 <a href=\"https:\/\/github.com\/volodalexey\/last_colony\/blob\/master\/js\/sounds.js#L21\" rel=\"noopener noreferrer nofollow\">Web Audio API<\/a>. \u0421 \u0437\u0430\u0434\u0430\u0447\u0435\u0439 \u044f \u0441\u043f\u0440\u0430\u0432\u0438\u043b\u0441\u044f, \u043d\u043e \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0441\u044e \u0438\u0433\u0440\u0443 \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c.<\/p>\n<p>\u0418 \u0432\u043e\u0442 \u0432 2023 \u0433\u043e\u0434\u0443 \u044f \u043d\u0430\u0448\u0435\u043b \u0432\u0440\u0435\u043c\u044f \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u0438 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0441\u0451 \u043d\u0430 <code>TypeScript<\/code> + <code>PixiJS<\/code>.<\/p>\n<p>\u0416\u0430\u043d\u0440 \u0438\u0433\u0440\u044b &#8212; \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u041f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u0441\u043c\u0435\u0441\u044c \u0438\u0437 <a href=\"https:\/\/ru.wikipedia.org\/wiki\/Command_%26_Conquer\" rel=\"noopener noreferrer nofollow\">Command &amp; Conquer<\/a> + <a href=\"https:\/\/ru.wikipedia.org\/wiki\/StarCraft\" rel=\"noopener noreferrer nofollow\">StarCraft<\/a>. \u0418\u0433\u0440\u043e\u043a \u0438\u0433\u0440\u0430\u0435\u0442 \u0437\u0430 \u043e\u0434\u043d\u0443 \u043a\u043e\u043c\u0430\u043d\u0434\u0443, \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440 (<code>CPU<\/code>) \u0437\u0430 \u0434\u0440\u0443\u0433\u0443\u044e. \u0415\u0441\u0442\u044c \u0442\u0440\u0438 \u0440\u0435\u0436\u0438\u043c\u0430 \u0438\u0433\u0440\u044b:<\/p>\n<ol>\n<li>\n<p>\u041f\u0440\u043e\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u043a\u0430\u043c\u043f\u0430\u043d\u0438\u044f. \u0412 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0435 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 3-\u0445 \u043c\u0438\u0441\u0441\u0438\u0439, \u044f \u0441\u0434\u0435\u043b\u0430\u043b 4.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0434\u0438\u043d\u043e\u0447\u043d\u044b\u0439 \u043c\u0430\u0442\u0447 \u043f\u0440\u043e\u0442\u0438\u0432 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430 (\u0432 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0435 \u0442\u0430\u043a\u043e\u0433\u043e \u043d\u0435\u0442).<\/p>\n<\/li>\n<li>\n<p>\u0421\u0435\u0442\u0435\u0432\u0430\u044f \u0438\u0433\u0440\u0430 \u0434\u0432\u0443\u0445 \u0438\u0433\u0440\u043e\u043a\u043e\u0432 \u043f\u0440\u043e\u0442\u0438\u0432 \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0430.<\/p>\n<\/li>\n<\/ol>\n<p>\u0412 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0435 \u0438\u0433\u0440\u0430 \u0431\u044b\u043b\u0430 \u0442\u0430\u043a\u043e\u0439: \u0435\u0441\u0442\u044c \u0431\u0430\u0437\u0430 <code>Base<\/code> &#8212; \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u0437\u0434\u0430\u043d\u0438\u0435 &#8212; \u043e\u0431\u044b\u0447\u043d\u043e \u0435\u0433\u043e \u043f\u043e\u0442\u0435\u0440\u044f \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0448. \u0411\u0430\u0437\u0430 \u043c\u043e\u0436\u0435\u0442 \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u043a\u043b\u0435\u0442\u043a\u0435 \u0442\u0443\u0440\u0435\u043b\u044c <code>GroundTurret<\/code> \u0438\u043b\u0438 \u043a\u043e\u0441\u043c\u043e\u043f\u043e\u0440\u0442 (\u0437\u0430\u0432\u043e\u0434) <code>Starport<\/code>. \u041d\u0443\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0431\u0430\u0437\u0443 \u0438 \u0441\u043f\u0440\u0430\u0432\u0430 \u043d\u0430 \u043f\u0430\u043d\u0435\u043b\u0438 \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0430, \u0435\u0441\u043b\u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u0435\u043d\u0435\u0433. \u041f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435 \u0437\u0434\u0430\u043d\u0438\u044f \u0434\u043b\u044f \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0430 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043c\u044b\u0448\u043a\u043e\u0439 \u0433\u0434\u0435 \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c, \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u0435\u0442 \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u043e.<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0431\u0430\u0437\u044b<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/64d\/ddf\/e14\/64dddfe14a65dca32f186b7847609ef1.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0431\u0430\u0437\u044b\" width=\"561\" height=\"211\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/64d\/ddf\/e14\/64dddfe14a65dca32f186b7847609ef1.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0431\u0430\u0437\u044b<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u041a\u043e\u0441\u043c\u043e\u043f\u043e\u0440\u0442, \u043c\u043e\u0436\u0435\u0442 \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0445 \u044e\u043d\u0438\u0442\u043e\u0432 &#8212; \u043b\u0435\u0433\u043a\u0438\u0439 \u0442\u0430\u043d\u043a <code>ScoutTank<\/code>, \u0442\u044f\u0436\u0435\u043b\u044b\u0439 \u0442\u0430\u043d\u043a <code>HeavyTank<\/code>, \u0432\u0435\u0440\u0442\u043e\u043b\u0451\u0442 <code>Chopper<\/code>, \u0445\u0430\u0440\u0432\u0435\u0441\u0442\u0435\u0440 (\u043a\u043e\u043c\u0431\u0430\u0439\u043d) <code>Harvester<\/code> \u0438 \u0441\u0430\u043c\u043e\u043b\u0451\u0442 <code>Wraith<\/code>. \u0415\u0441\u043b\u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043a\u043e\u0441\u043c\u043e\u043f\u043e\u0440\u0442 &#8212; \u0441\u043f\u0440\u0430\u0432\u0430 \u043d\u0430 \u043f\u0430\u043d\u0435\u043b\u0438 \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0430 \u044e\u043d\u0438\u0442\u043e\u0432, \u0435\u0441\u043b\u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u0435\u043d\u0435\u0433. \u041f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u044e\u043d\u0438\u0442\u0430 &#8212; \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u044e\u043d\u0438\u0442 \u0438 \u0442\u0435\u043b\u0435\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0431\u044b \u0438\u0437 \u043a\u043e\u0441\u043c\u043e\u043f\u043e\u0440\u0442\u0430.<\/p>\n<p>\u0425\u0430\u0440\u0432\u0435\u0441\u0442\u0435\u0440 \u043c\u043e\u0436\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043d\u0435\u0444\u0442\u044f\u043d\u0443\u044e \u0432\u044b\u0448\u043a\u0443 <code>OilDerrick<\/code>, \u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u044e\u043d\u0438\u0442\u044b \u0432\u043e\u0435\u043d\u043d\u044b\u0435.<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043a\u043e\u0441\u043c\u043e\u043f\u043e\u0440\u0442\u0430<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f7e\/d29\/b58\/f7ed29b5818162b5c9a285cd137cdf99.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043a\u043e\u0441\u043c\u043e\u043f\u043e\u0440\u0442\u0430\" width=\"586\" height=\"142\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f7e\/d29\/b58\/f7ed29b5818162b5c9a285cd137cdf99.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043a\u043e\u0441\u043c\u043e\u043f\u043e\u0440\u0442\u0430<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u041f\u043e\u0438\u0441\u043a\u0430\u0432 \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435, <a href=\"https:\/\/github.com\/cdk-king\/lastColony\" rel=\"noopener noreferrer nofollow\">\u044f \u043d\u0430\u0448\u0435\u043b \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u043d\u044b\u0439 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434<\/a> \u044d\u0442\u043e\u0439 \u0438\u0433\u0440\u044b, \u0433\u0434\u0435 \u0430\u0432\u0442\u043e\u0440 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043b \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u043e \u0437\u0434\u0430\u043d\u0438\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0440\u0430\u0431\u043e\u0447\u0435\u0433\u043e (<code>SCV<\/code>) \u043a\u0430\u043a \u0432 <code>StarCraft<\/code>. \u0422.\u0435. \u0431\u0430\u0437\u0430 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0437\u0434\u0430\u043d\u0438\u044f. \u0411\u0430\u0437\u0430 \u0441\u0442\u0440\u043e\u0438\u0442 \u0440\u0430\u0431\u043e\u0447\u0435\u0433\u043e \u0438\u043b\u0438 \u0445\u0430\u0440\u0432\u0435\u0441\u0442\u0435\u0440\u0430. \u0420\u0430\u0431\u043e\u0447\u0438\u0439 \u0441\u0442\u0440\u043e\u0438\u0442 \u043a\u043e\u0441\u043c\u043e\u043f\u043e\u0440\u0442 \u0438\u043b\u0438 \u0442\u0443\u0440\u0435\u043b\u044c. \u0413\u0440\u0430\u0444\u0438\u043a\u0443 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0447\u0435\u0433\u043e \u044f \u0442\u043e\u0436\u0435 \u0432\u0437\u044f\u043b \u043e\u0442\u0442\u0443\u0434\u0430. \u042d\u0442\u043e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u044f \u0441\u0434\u0435\u043b\u0430\u043b \u0438 \u0443 \u0441\u0435\u0431\u044f \u0432 \u0438\u0433\u0440\u0435.<\/p>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 <a href=\"https:\/\/www.adityaravishankar.com\/projects\/games\/lastcolony\/\" rel=\"noopener noreferrer nofollow\">\u0430\u0432\u0442\u043e\u0440\u0430 \u0428\u0430\u043d\u043a\u0430\u0440\u0430<\/a> \u043f\u043e \u0438\u0433\u0440\u0435 <a href=\"https:\/\/web.archive.org\/web\/20201119082449\/https:\/\/www.adityaravishankar.com\/projects\/games\/lastcolony\/\" rel=\"noopener noreferrer nofollow\">\u0443\u0436\u0435 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442<\/a>.<\/p>\n<h3>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f: \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u0442\u0435\u043a\u0441\u0442\u0443\u0440<\/h3>\n<p>\u041a\u0430\u043a \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0441\u0442\u0430\u0440\u044b\u0435 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b \u043d\u0430\u0440\u0435\u0437\u0430\u0442\u044c \u0438 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0432\u043c\u0435\u0441\u0442\u0435 &#8212; \u0441\u043b\u043e\u0436\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430. \u041a\u043e\u0433\u0434\u0430 \u0440\u0435\u0437\u0430\u043b \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b \u043d\u0430 \u0444\u0440\u0435\u0439\u043c\u044b, \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435, \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u0435\u0440\u0432\u044b\u0439 \u043a\u0430\u0434\u0440 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 40\u044540 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b \u043e\u0442\u043b\u0438\u0447\u043d\u043e, \u0430 \u0432\u043e\u0442 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043e\u0431\u0440\u0435\u0437\u0430\u043b\u0441\u044f \u0441\u043e \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435\u043c. \u0422\u0435\u043a\u0441\u0442\u0443\u0440\u044b \u0438\u043a\u043e\u043d\u043e\u043a \u044f \u0432\u0437\u044f\u043b \u0438\u0437 <a href=\"https:\/\/github.com\/FortAwesome\/Font-Awesome\/tree\/6.x\/svgs\/solid\" rel=\"noopener noreferrer nofollow\">Font Awesome<\/a> &#8212; \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u043b <code>.svg<\/code> \u0444\u0430\u0439\u043b \u0432 <code>Gimp<\/code> \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u043b \u0432 <code>.png<\/code>.<\/p>\n<p>\u041a\u0430\u0440\u0442\u0430 \u0432 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0435 \u0431\u044b\u043b\u0430 \u0434\u0432\u0443\u0445 \u0432\u0438\u0434\u043e\u0432, \u043e\u0431\u044b\u0447\u043d\u0430\u044f \u043a\u0430\u0440\u0442\u0430 \u0443\u0440\u043e\u0432\u043d\u044f \u0438 \u043a\u0430\u0440\u0442\u0430 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u0443\u0440\u043e\u0432\u043d\u044f \u0441 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u043a\u043e\u0439.<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u0430\u0440\u0442\u044b<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0422\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0430 \u043a\u0430\u0440\u0442\u0430:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/736\/435\/877\/736435877a8105102a0bf250eba0a816.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u043a\u0430\u0440\u0442\u0430\" width=\"268\" height=\"156\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/736\/435\/877\/736435877a8105102a0bf250eba0a816.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u043a\u0430\u0440\u0442\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u0410 \u0442\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0430 \u043a\u0430\u0440\u0442\u0430 \u0441 \u0440\u0435\u0436\u0438\u043c\u043e\u043c \u043e\u0442\u043b\u0430\u0434\u043a\u0438:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/4c5\/7ab\/a11\/4c57aba11f5cab6fde54bc59b787035b.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u043a\u0430\u0440\u0442\u0430 \u0441 \u0440\u0435\u0436\u0438\u043c\u043e\u043c \u043e\u0442\u043b\u0430\u0434\u043a\u0438\" width=\"260\" height=\"159\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/4c5\/7ab\/a11\/4c57aba11f5cab6fde54bc59b787035b.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u043a\u0430\u0440\u0442\u0430 \u0441 \u0440\u0435\u0436\u0438\u043c\u043e\u043c \u043e\u0442\u043b\u0430\u0434\u043a\u0438<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0414\u043b\u044f \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u043f\u043e \u0441\u0435\u0442\u043a\u0435 \u043c\u043d\u0435 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u0430\u0440\u0442\u044b \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u043b\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0440\u0435\u0448\u0438\u043b \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u0441\u0435\u0442\u043a\u0443 \u043f\u043e\u0432\u0435\u0440\u0445 \u043b\u044e\u0431\u043e\u0439 \u043a\u0430\u0440\u0442\u044b. \u041f\u0440\u0438 \u0432\u043a\u043b\u044e\u0447\u0451\u043d\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u0434\u043b\u044f \u043a\u0430\u0440\u0442\u044b <code>localStorage.getItem('debug') === 'rts-grid'<\/code> <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/components\/TileMap.ts#L143\" rel=\"noopener noreferrer nofollow\">\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0438\u0441\u0443\u044e<\/a> \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0439 \u043a\u043b\u0435\u0442\u043a\u0435 \u043a\u0430\u0440\u0442\u044b \u0435\u0451 \u0433\u0440\u0430\u043d\u0438\u0446\u044b, \u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b <code>x<\/code> \u0438 <code>y<\/code>.<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u0440\u0435\u0436\u0438\u043c \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u043a\u0430\u0440\u0442\u044b<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">import { Text, Graphics } from 'pixi.js'  for (let x = 0; x &lt; this.mapGridWidth; x++) {   for (let y = 0; y &lt; this.mapGridHeight; y++) {     const gr = new Graphics()     \/\/ ...     gr.drawRect(0, 0, this.gridSize, this.gridSize)     const text = new Text(`x=${x}\\ny=${y}`)     text.anchor.set(0.5, 0.5)     text.position.set(this.gridSize \/ 2, this.gridSize \/ 2)     gr.addChild(text)     this.addChild(gr)   } } <\/code><\/pre>\n<p>\u0422\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/5cb\/c9c\/38a\/5cbc9c38adb8d237fa03e007530da576.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - \u0440\u0435\u0436\u0438\u043c \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u043a\u0430\u0440\u0442\u044b\" width=\"561\" height=\"454\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5cb\/c9c\/38a\/5cbc9c38adb8d237fa03e007530da576.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u0440\u0435\u0436\u0438\u043c \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u043a\u0430\u0440\u0442\u044b<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u041a\u0430\u0440\u0442\u0430 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 <code>60\u044540<\/code> \u044f\u0447\u0435\u0435\u043a, \u0447\u0442\u043e \u0432 \u0441\u0443\u043c\u043c\u0435 <code>2400<\/code> \u044f\u0447\u0435\u0435\u043a \u0434\u043b\u044f \u043e\u0442\u043b\u0430\u0434\u043a\u0438. \u041c\u043e\u0439 \u043d\u043e\u0443\u0442\u0431\u0443\u043a \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0440\u0435\u0436\u0438\u043c \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u043a\u0430\u0440\u0442\u044b \u043d\u0430 <code>2<\/code> \u0441\u0435\u043a\u0443\u043d\u0434\u044b \u0434\u043e\u043b\u044c\u0448\u0435, \u0437\u0430\u0442\u043e \u043f\u043e\u0442\u043e\u043c \u0447\u0443\u0432\u0441\u0442\u0432\u0443\u0435\u0442\u0441\u044f \u0432\u0441\u044f \u043c\u043e\u0449\u044c <code>PixiJS<\/code> &#8212; \u0434\u0430\u043b\u044c\u0448\u0435 \u0438\u0434\u0451\u0442 \u0431\u0435\u0437 \u0442\u043e\u0440\u043c\u043e\u0437\u043e\u0432, \u0441\u0443\u0431\u044a\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u043d\u0435 \u043c\u043e\u0433\u0443 \u043e\u0442\u043b\u0438\u0447\u0438\u0442\u044c \u043e\u0442 \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430.<\/p>\n<p>\u042f \u043d\u0435 \u0445\u043e\u0442\u0435\u043b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0443 \u0432 \u043a\u043e\u0434\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src-tiled\/tileset.tsx\" rel=\"noopener noreferrer nofollow\">\u0432\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0442\u0430\u0439\u043b\u044b<\/a> \u0438\u0437 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u0430\u0440\u0442\u044b.<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u0432\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0435 \u0442\u0430\u0439\u043b\u044b<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/5db\/e1f\/1e6\/5dbe1f1e6cef886f36b5bab4307c2db8.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - \u0432\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0435 \u0442\u0430\u0439\u043b\u044b\" width=\"292\" height=\"296\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5db\/e1f\/1e6\/5dbe1f1e6cef886f36b5bab4307c2db8.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u0432\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0435 \u0442\u0430\u0439\u043b\u044b<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0417\u0430\u0442\u0435\u043c \u0443\u0436\u0435 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043b \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u0443\u044e \u043a\u0430\u0440\u0442\u0443 \u0432 <code>Tiled Map Editor<\/code>. \u0414\u0430\u0436\u0435 \u0434\u0432\u0435 \u043a\u0430\u0440\u0442\u044b, <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src-tiled\/level-1.png\" rel=\"noopener noreferrer nofollow\">\u043f\u0435\u0440\u0432\u0430\u044f<\/a> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f 3-\u0445 \u043c\u0438\u0441\u0441\u0438\u0439 \u043a\u0430\u043a \u0432 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0435. <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src-tiled\/level-2.png\" rel=\"noopener noreferrer nofollow\">\u0412\u0442\u043e\u0440\u0430\u044f<\/a> \u043a\u0430\u0440\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 4-\u0439 \u043c\u0438\u0441\u0441\u0438\u0438, \u0440\u0435\u0436\u0438\u043c\u0435 \u043f\u0440\u043e\u0442\u0438\u0432 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430 \u0438\u043b\u0438 \u0432 \u0441\u0435\u0442\u0435\u0432\u043e\u0439 \u0438\u0433\u0440\u0435. \u0412 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u044f \u0443\u0436\u0435 \u0440\u0430\u0441\u0441\u0442\u0430\u0432\u0438\u043b \u043d\u0435\u0444\u0442\u044f\u043d\u044b\u0435 \u043f\u044f\u0442\u043d\u0430 \u0438 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0438\u043b \u044d\u0442\u0438 \u043c\u0435\u0441\u0442\u0430 \u0432 \u0441\u043b\u043e\u0435 <code>Oilfields<\/code>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0434\u043b\u044f \u0431\u0430\u0437 \u0432 \u0441\u043b\u043e\u0435 <code>Spawn-Locations<\/code>.<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u0441\u043b\u043e\u0438 \u043a\u0430\u0440\u0442\u044b<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/43a\/da6\/a28\/43ada6a28fafbead43bd69d4622d2026.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - \u0441\u043b\u043e\u0438 \u043a\u0430\u0440\u0442\u044b\" width=\"752\" height=\"213\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/43a\/da6\/a28\/43ada6a28fafbead43bd69d4622d2026.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u0441\u043b\u043e\u0438 \u043a\u0430\u0440\u0442\u044b<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<h3>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f: \u043c\u0435\u043d\u044e \u0438\u0433\u0440\u044b<\/h3>\n<p>\u0412 \u0441\u0430\u043c\u043e\u043c \u043d\u0430\u0447\u0430\u043b\u0435, \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e, \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u043a\u0438 \u0432\u0441\u0435\u0445 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c <code>LoaderScene<\/code> &#8212; \u043a\u043e\u0442\u043e\u0440\u0430\u044f <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/scenes\/LoaderScene.ts#L6\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0435<\/a> \u0430\u0442\u043b\u0430\u0441\u044b. \u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0435\u043d\u044b \u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u043c\u0435\u043d\u044e <code>MenuScene<\/code> \u0438 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/scenes\/MenuScene.ts#L63\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u0433\u0440\u0443\u0436\u0430\u044e \u043e\u0441\u0442\u0430\u0432\u0448\u0438\u0435\u0441\u044f \u0447\u0430\u0441\u0442\u0438<\/a>.<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u043c\u0435\u043d\u044e<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/4af\/cc6\/24e\/4afcc624e30527b88c0f5ac3ab9fab2f.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u043c\u0435\u043d\u044e\" width=\"519\" height=\"356\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/4af\/cc6\/24e\/4afcc624e30527b88c0f5ac3ab9fab2f.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u043c\u0435\u043d\u044e<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0412 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0435 \u043c\u0435\u043d\u044e \u0431\u044b\u043b\u043e \u043d\u0430 <code>HTML<\/code>, \u043c\u043d\u0435 \u0436\u0435 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u0451 \u043d\u0430 <code>PixiJS<\/code> \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u043c\u043e\u0438\u0445 \u043f\u043b\u0430\u043d\u043e\u0432. \u041c\u043e\u0439 \u043f\u0435\u0440\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 &#8212; \u043a\u043d\u043e\u043f\u043a\u0430 (<code>Button<\/code>). \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/components\/Button.ts#L3\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432<\/a>.<\/p>\n<p>\u0412 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043c\u043d\u0435 \u043d\u0443\u0436\u043d\u044b 3 \u0442\u0438\u043f\u0430 \u043a\u043d\u043e\u043f\u043e\u043a:<\/p>\n<ol>\n<li>\n<p>\u041a\u043d\u043e\u043f\u043a\u0430 \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u043c, \u043d\u043e \u0431\u0435\u0437 \u0438\u043a\u043e\u043d\u043a\u0438<\/p>\n<\/li>\n<li>\n<p>\u041a\u043d\u043e\u043f\u043a\u0430 \u0431\u0435\u0437 \u0442\u0435\u043a\u0441\u0442\u0430 \u043d\u043e \u0441 \u0438\u043a\u043e\u043d\u043a\u043e\u0439<\/p>\n<\/li>\n<li>\n<p>\u041a\u043d\u043e\u043f\u043a\u0438 \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u043c \u0438 \u0438\u043a\u043e\u043d\u043a\u043e\u0439<\/p>\n<\/li>\n<\/ol>\n<p>\u0412 \u043c\u0435\u043d\u044e \u0443 \u043c\u0435\u043d\u044f \u0442\u0440\u0438 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 \u043a\u043d\u043e\u043f\u043a\u0430-\u0438\u043a\u043e\u043d\u043a\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0432\u0432\u0435\u0440\u0445\u0443.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c <code>Campaign<\/code> (\u043a\u0430\u043c\u043f\u0430\u043d\u0438\u044e \u0438\u043b\u0438 \u043f\u0440\u043e\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u0435) &#8212; \u0442\u043e \u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u0441\u0435\u0445 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u043c\u0438\u0441\u0441\u0438\u0439 (\u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438 \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u043c), \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043b\u044e\u0431\u0443\u044e. \u0410 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043a\u043d\u043e\u043f\u043a\u0443-\u0438\u043a\u043e\u043d\u043a\u0443 &#171;\u0434\u043e\u043c\u0438\u043a&#187; &#8212; \u0434\u043b\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430.<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u0441\u043f\u0438\u0441\u043e\u043a \u043c\u0438\u0441\u0441\u0438\u0439<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/622\/ffb\/d56\/622ffbd56b456c0d156dd4c49c835a55.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u043c\u0435\u043d\u044e\" width=\"428\" height=\"406\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/622\/ffb\/d56\/622ffbd56b456c0d156dd4c49c835a55.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u043c\u0435\u043d\u044e<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<ul>\n<li>\n<p>\u041c\u0438\u0441\u0441\u0438\u044f 1 &#8212; \u0423\u043f\u0440\u0430\u0432\u043b\u044f\u044f \u0442\u044f\u0436\u0435\u043b\u044b\u043c \u0442\u0430\u043d\u043a\u043e\u043c \u0434\u043e\u0435\u0445\u0430\u0442\u044c \u0434\u043e \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u043b\u0435\u0432\u043e\u0433\u043e \u0443\u0433\u043b\u0430 \u0438 \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u044c \u043d\u0430 \u0431\u0430\u0437\u0443 \u0434\u0432\u0430 \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0430<\/p>\n<\/li>\n<li>\n<p>\u041c\u0438\u0441\u0441\u0438\u044f 2 &#8212; \u0414\u0435\u0440\u0436\u0430\u0442\u044c \u043e\u0431\u043e\u0440\u043e\u043d\u0443, \u043f\u043e\u043a\u0430 \u043d\u0435 \u043f\u0440\u0438\u043b\u0435\u0442\u0438\u0442 \u043f\u043e\u0434\u043a\u0440\u0435\u043f\u043b\u0435\u043d\u0438\u0435 \u0438\u0437 2-\u0445 \u0432\u0435\u0440\u0442\u043e\u043b\u0451\u0442\u043e\u0432 &#8212; \u0442\u043e\u0433\u0434\u0430 \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0438\u0442\u044c \u0432\u0440\u0430\u0436\u0435\u0441\u043a\u0443\u044e \u0431\u0430\u0437\u0443<\/p>\n<\/li>\n<li>\n<p>\u041c\u0438\u0441\u0441\u0438\u044f 3 &#8212; \u0421\u043f\u0430\u0441\u0442\u0438 \u043e\u0441\u0442\u0430\u0432\u0448\u0438\u0439\u0441\u044f \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442, \u0437\u0430\u0442\u0435\u043c \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0438\u0442\u044c \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u0438\u043a\u0430<\/p>\n<\/li>\n<li>\n<p>\u041c\u0438\u0441\u0441\u0438\u044f 4 &#8212; \u041f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0445\u0430\u0440\u0432\u0435\u0441\u0442\u0435\u0440 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u043d\u0435\u0444\u0442\u0435\u0432\u044b\u0448\u043a\u0443. \u041f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0447\u0435\u0433\u043e \u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0435\u0433\u043e \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0442\u0443\u0440\u0435\u043b\u044c. \u0423\u0431\u0438\u0442\u044c \u0432\u0440\u0430\u0436\u0435\u0441\u043a\u043e\u0433\u043e \u043b\u0435\u0433\u043a\u043e\u0433\u043e \u0442\u0430\u043d\u043a\u0430. \u041f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043a\u043e\u0441\u043c\u043e\u043f\u043e\u0440\u0442, \u043d\u0430 \u043d\u0451\u043c \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043b\u0435\u0433\u043a\u0438\u0439 \u0442\u0430\u043d\u043a \u0438 \u0432\u0435\u0440\u0442\u043e\u043b\u0451\u0442. \u0423\u043d\u0438\u0447\u0442\u043e\u0436\u0438\u0442\u044c \u0432\u0440\u0430\u0436\u0435\u0441\u043a\u0438\u0439 \u043b\u0451\u0433\u043a\u0438\u0439 \u0442\u0430\u043d\u043a \u0438 \u0431\u0430\u0437\u0443.<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0435\u0440\u0432\u044b\u0435 3 \u043c\u0438\u0441\u0441\u0438\u0438 \u0441\u0434\u0435\u043b\u0430\u043b \u043a\u0430\u043a \u0432 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0435, \u0430 \u0432\u043e\u0442 4-\u044e \u0441\u0434\u0435\u043b\u0430\u043b \u0432 \u0432\u0438\u0434\u0435 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f &#8212; \u0441\u043e\u0431\u0440\u0430\u043b \u0432\u0441\u0435 \u0443\u0447\u0435\u0431\u043d\u044b\u0435 \u043c\u0438\u0441\u0441\u0438\u0438 \u0438\u0437 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0430 \u0432 \u043e\u0434\u043d\u0443.<\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Button<\/code> \u0438\u043c\u0435\u0435\u0442 4 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f: \u043e\u0431\u044b\u0447\u043d\u043e\u0435 (<code>idle<\/code>), \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0435 (<code>selected<\/code>), \u043d\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 (<code>disabled<\/code>) \u0438 \u043d\u0430\u0432\u0435\u0434\u0451\u043d\u043d\u043e\u0435 (<code>hover<\/code>). \u0412\u043d\u0443\u0442\u0440\u0438 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/components\/Button.ts#L283\" rel=\"noopener noreferrer nofollow\">\u044f \u0440\u0438\u0441\u0443\u044e<\/a> \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u043a\u0440\u0443\u0433\u043b\u0451\u043d\u043d\u044b\u0435 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438 \u0434\u043b\u044f \u0444\u043e\u043d\u0430 <code>background<\/code>, \u0434\u043b\u044f \u0433\u0440\u0430\u043d\u0438\u0446 <code>border<\/code> &#8212; \u0432\u0441\u0451 \u0431\u0435\u043b\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c \u0438 \u043f\u043e\u0442\u043e\u043c \u043e\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u044e. \u0415\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u044e \u0438\u043a\u043e\u043d\u043a\u0443 \u0432 \u0432\u0438\u0434\u0435 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b, \u0442\u043e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/components\/Button.ts#L180\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443 \u0438\u043a\u043e\u043d\u043a\u0438<\/a> \u0432 \u0432\u0438\u0434\u0435 \u0441\u043f\u0440\u0430\u0439\u0442\u0430, \u0430 \u043f\u043e\u0442\u043e\u043c \u0442\u0435\u043a\u0441\u0442. \u0422\u0430\u043a\u0436\u0435 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u044e \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/components\/Button.ts#L239\" rel=\"noopener noreferrer nofollow\">\u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0441\u044c \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f<\/a> \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f.<\/p>\n<p>\u0412 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044f <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/components\/Button.ts#L416\" rel=\"noopener noreferrer nofollow\">\u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u043d\u0443\u0436\u043d\u043e\u0435<\/a> \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438.<\/p>\n<details class=\"spoiler\">\n<summary>PixiJS \u0441\u043e\u0432\u0435\u0442 11: \u0412\u044b\u0432\u043e\u0434 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0418\u043d\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u0432\u0441\u0435\u0433\u043e <code>Application<\/code> \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u043c\u043e\u0434\u0443\u043b\u044c <code>Debug<\/code>.<\/p>\n<pre><code class=\"typescript\">import { Application } from 'pixi.js' import debug from 'debug'  const app = new Application({})  export const logApp = debug('rts-app')  if (logApp.enabled) {   logApp('window.app initialized!');   (window as unknown as any).app = app } <\/code><\/pre>\n<p>\u0412 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044f \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u0432 <code>localStorage<\/code> \u043a\u043b\u044e\u0447 <code>debug<\/code> \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c <code>rts-app<\/code> (\u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443) \u0438 \u043f\u043e\u0441\u043b\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043c\u043e\u0433\u0443 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/5cd\/5d6\/4d4\/5cd5d64d46ee7e78db4f1acffa57ad26.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - \u0432\u044b\u0432\u043e\u0434 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c\" width=\"908\" height=\"564\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5cd\/5d6\/4d4\/5cd5d64d46ee7e78db4f1acffa57ad26.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u0432\u044b\u0432\u043e\u0434 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u043b\u044f \u043b\u0443\u0447\u0448\u0435\u0433\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0435\u0433\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u0443\u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043e\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445:<\/p>\n<pre><code class=\"typescript\">import { Container, Graphics } from 'pixi.js'  class BorderRect extends Graphics {} class BorderContainer extends Container {}  const borderRect = new BorderRect() const borderContainer = new BorderContainer()  this.addChild(borderRect) this.addChild(borderContainer) <\/code><\/pre>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/39a\/176\/c7b\/39a176c7b4c5d0bab456cd0f5da964de.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u043d\u044b\u0439 \u0432\u044b\u0432\u043e\u0434 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c\" width=\"517\" height=\"83\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/39a\/176\/c7b\/39a176c7b4c5d0bab456cd0f5da964de.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u043d\u044b\u0439 \u0432\u044b\u0432\u043e\u0434 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<h3>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f: \u0437\u0432\u0443\u043a<\/h3>\n<p>\u0427\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u0432\u0435\u0441\u0435\u043b\u0435\u0435, \u044f \u0432\u0437\u044f\u043b \u0441\u0442\u0430\u0440\u0443\u044e \u0434\u043e\u0431\u0440\u0443\u044e \u043e\u0437\u0432\u0443\u0447\u043a\u0443 \u0438\u0437 \u043d\u0435\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0437\u0432\u0443\u0447\u043a\u0438 <code>\u0424\u0430\u0440\u0433\u0443\u0441<\/code> \u0438\u0437 \u0438\u0433\u0440\u044b <code>StarCraft<\/code>.<\/p>\n<p>\u0412\u0441\u0435 \u0437\u0432\u0443\u043a\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043b \u043d\u0430 4 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438:<\/p>\n<ol>\n<li>\n<p>\u0413\u043e\u043b\u043e\u0441\u0430 (<code>voiceVolume<\/code>) &#8212; \u043a\u043e\u0433\u0434\u0430 \u044e\u043d\u0438\u0442\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043f\u0440\u0438\u043a\u0430\u0437 \u043d\u0430 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435, \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u043e \u0438\u043b\u0438 \u0430\u0442\u0430\u043a\u0443.<\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0441\u0442\u0440\u0435\u043b\u044b (<code>shootVolume<\/code>) &#8212; \u043a\u043e\u0433\u0434\u0430 \u044e\u043d\u0438\u0442 \u0441\u0442\u0440\u0435\u043b\u044f\u0435\u0442 \u0441\u043d\u0430\u0440\u044f\u0434\u043e\u043c (<code>Cannon<\/code>), \u043f\u0443\u043b\u0435\u0439 (<code>Bullet<\/code>), \u0440\u0430\u043a\u0435\u0442\u043e\u0439 (<code>Rocket<\/code>), \u043b\u0430\u0437\u0435\u0440\u043e\u043c (<code>Laser<\/code>).<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u044f (<code>hitVolume<\/code>) &#8212; \u043a\u043e\u0433\u0434\u0430 \u0441\u043d\u0430\u0440\u044f\u0434\/\u043f\u0443\u043b\u044f\/\u0440\u0430\u043a\u0435\u0442\u0430\/\u043b\u0430\u0437\u0435\u0440 \u043f\u043e\u043f\u0430\u043b\u0438 \u0432 \u0446\u0435\u043b\u044c.<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f (<code>messageVolume<\/code>) &#8212; \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u043f\u0430\u043d\u0435\u043b\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439.<\/p>\n<\/li>\n<\/ol>\n<p>\u0412\u0435\u0441\u044c \u0437\u0432\u0443\u043a \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043b \u0432 <code>.mp3<\/code> \u0444\u043e\u0440\u043c\u0430\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f <a href=\"https:\/\/en.wikipedia.org\/wiki\/MP3#Licensing\" rel=\"noopener noreferrer nofollow\">\u0432\u0441\u0435\u0445 \u043f\u0430\u0442\u0435\u043d\u0442\u043e\u0432<\/a> \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432\u043e \u0432\u0441\u0435\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. \u0417\u0432\u0443\u043a\u0438 \u0434\u043b\u044f 2-\u0439 \u0438 3-\u0439 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u043d\u0430\u0448\u0435\u043b \u043d\u0430 <a href=\"https:\/\/freesound.org\/\" rel=\"noopener noreferrer nofollow\">\u0441\u0430\u0439\u0442\u0435 freesound.org<\/a>, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0442\u0435\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0436\u0435 \u0431\u044b\u043b\u0438 \u0432 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0438\u0433\u0440\u0435.<\/p>\n<p>\u0414\u043b\u044f \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0432\u0441\u0451 \u0442\u0443 \u0436\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/utils\/Audio.ts#L157\" rel=\"noopener noreferrer nofollow\">HowlerJS<\/a> &#8212; \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0433\u0438\u0431\u043a\u043e \u043f\u043e\u0434\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0433\u0440\u043e\u043c\u043a\u043e\u0441\u0442\u0438.<\/p>\n<p>\u041f\u0440\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043b\u0430\u0441\u0441\u0430 <code>Audio<\/code> &#8212; <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/utils\/Audio.ts#L103\" rel=\"noopener noreferrer nofollow\">\u044f \u043f\u044b\u0442\u0430\u044e\u0441\u044c \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c<\/a> \u0438\u0437 <code>localStorage<\/code> &#8212; \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0437\u0432\u0443\u043a\u0430, \u0435\u0441\u043b\u0438 \u0442\u0430\u043a\u043e\u0432\u044b\u0435 \u0438\u043c\u0435\u044e\u0442\u0441\u044f.<\/p>\n<p>\u041a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f \u0433\u043e\u043b\u043e\u0441\u0430 \u043f\u043e\u0434\u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0435\u0439 + \u0440\u0430\u0437\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c 3:<\/p>\n<ul>\n<li>\n<p>&#171;\u0434\u0432\u0438\u0433\u0430\u044e\u0441\u044c\/\u0438\u0434\u0443&#187;<\/p>\n<\/li>\n<li>\n<p>&#171;\u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u044e\/\u0430\u0442\u0430\u043a\u0443\u044e\/\u0434\u0435\u043b\u0430\u044e&#187;<\/p>\n<\/li>\n<li>\n<p>&#171;\u043e\u0448\u0438\u0431\u043a\u0430<\/p>\n<\/li>\n<\/ul>\n<p>\u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443 \u0435\u0441\u043b\u0438 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0447\u0435\u043c\u0443 \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0437\u0434\u0430\u043d\u0438\u0435 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/utils\/Audio.ts#L509\" rel=\"noopener noreferrer nofollow\">\u044f \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u044e<\/a> \u0437\u0432\u0443\u043a &#171;\u0440\u0430\u0431\u043e\u0447\u0438\u0439&#187; + &#171;\u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u044e\/\u0430\u0442\u0430\u043a\u0443\u044e\/\u0434\u0435\u043b\u0430\u044e&#187;. \u0412 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a \u044d\u0442\u043e\u043c\u0443 \u044f \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e \u0432\u0441\u0435 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0435 \u0437\u0432\u0443\u043a\u0438 \u0440\u0430\u0431\u043e\u0447\u0435\u0433\u043e. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0435\u0440\u0435\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u043c\u044b\u0445 \u0433\u043e\u043b\u043e\u0441\u043e\u0432, \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u044b\u0441\u0442\u0440\u043e \u043c\u0435\u043d\u044f\u0435\u0442 \u043f\u0440\u0438\u043a\u0430\u0437 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u0438 \u0442\u043e\u0433\u043e \u0436\u0435 \u044e\u043d\u0438\u0442\u0430.<\/p>\n<h3>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f: \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0437\u0432\u0443\u043a\u0430<\/h3>\n<p>\u0414\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0437\u0432\u0443\u043a\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e <code>SettingsModal<\/code>. \u0415\u0433\u043e \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/scenes\/MenuScene.ts#L131\" rel=\"noopener noreferrer nofollow\">\u044f \u0441\u043e\u0437\u0434\u0430\u044e \u0435\u0434\u0438\u043d\u043e\u0436\u0434\u044b<\/a> \u0432 <code>MenuScene<\/code> &#8212; \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u044e \u0443\u0436\u0435 \u0432 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0446\u0435\u043d\u044b. \u0422\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0446\u0435\u043d\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u043e\u0442\u043e\u043c\u043a\u0430 \u044d\u0442\u043e\u0442 \u0436\u0435 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 (\u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u044f \u0443\u0431\u0438\u0440\u0430\u044e \u0435\u0433\u043e \u0438\u0437 \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432 \u043c\u0435\u043d\u044e \u0441\u0446\u0435\u043d\u044b).<\/p>\n<p>\u041f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 &#8212; \u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u0437\u0432\u0443\u043a\u0430.<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u043e\u043a\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0437\u0432\u0443\u043a\u0430<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a4f\/b03\/3e5\/a4fb033e54e33f3e6172d726b52ce94c.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - \u043e\u043a\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0437\u0432\u0443\u043a\u0430\" width=\"392\" height=\"521\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a4f\/b03\/3e5\/a4fb033e54e33f3e6172d726b52ce94c.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u043e\u043a\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0437\u0432\u0443\u043a\u0430<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0414\u043b\u044f \u0433\u0440\u043e\u043c\u043a\u043e\u0441\u0442\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 &#8212; \u043f\u043e\u043b\u0437\u0443\u043d\u043e\u043a <code>Slider<\/code> (<code>&lt;input type=\"range\" \/><\/code>). \u041a\u0430\u0440\u0435\u0442\u043a\u0430 (<code>Caret<\/code>) \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0430 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/components\/SettingsModal.ts#L70\" rel=\"noopener noreferrer nofollow\">\u0434\u0432\u0443\u043c\u044f \u043a\u0440\u0443\u0433\u0430\u043c\u0438<\/a>, \u043f\u043e\u043b\u043e\u0441\u0430 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0430 \u0434\u0432\u0443\u043c\u044f \u0441\u043a\u0440\u0443\u0433\u043b\u0451\u043d\u043d\u044b\u043c\u0438 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430\u043c\u0438.<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u0435\u043d\u044f\u0435\u0442 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0433\u0440\u043e\u043c\u043a\u043e\u0441\u0442\u0438, <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/components\/SettingsModal.ts#L495\" rel=\"noopener noreferrer nofollow\">\u044f \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u044e \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0439<\/a> \u0437\u0432\u0443\u043a \u0438\u0437 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u043b (<code>Apply<\/code>) \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0437\u0432\u0443\u043a\u0430 &#8212; <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/utils\/Audio.ts#L133\" rel=\"noopener noreferrer nofollow\">\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e<\/a> \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0432 <code>localStorage<\/code>, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c.<\/p>\n<h3>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f: \u043f\u0430\u043d\u0435\u043b\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439<\/h3>\n<p>\u0412 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0435 \u043f\u0435\u0440\u0435\u0434 \u043d\u0430\u0447\u0430\u043b\u043e\u043c \u043c\u0438\u0441\u0441\u0438\u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0430\u0441\u044c \u0441\u0446\u0435\u043d\u0430 \u0431\u0440\u0438\u0444\u0438\u043d\u0433\u0430 &#8212; \u0433\u0434\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b\u043e\u0441\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043c\u0438\u0441\u0441\u0438\u0438 \u0438 \u043a\u0440\u0430\u0442\u043a\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435.<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u0441\u0446\u0435\u043d\u0430 \u0431\u0440\u0438\u0444\u0438\u043d\u0433\u0430 \u0432 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0435<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a31\/a3e\/29b\/a31a3e29be350511656245dd0c78c31c.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - \u0441\u0446\u0435\u043d\u0430 \u0431\u0440\u0438\u0444\u0438\u043d\u0433\u0430 \u0432 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0435\" width=\"558\" height=\"436\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a31\/a3e\/29b\/a31a3e29be350511656245dd0c78c31c.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u0441\u0446\u0435\u043d\u0430 \u0431\u0440\u0438\u0444\u0438\u043d\u0433\u0430 \u0432 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0435<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u042f \u0440\u0435\u0448\u0438\u043b \u043d\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u0443 \u0441\u0446\u0435\u043d\u0443, \u0430 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0430\u043d\u0435\u043b\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 <code>StatusBar<\/code>. \u0422\u0430\u043a \u043f\u0440\u0438 \u043d\u0430\u0447\u0430\u043b\u0435 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043c\u0438\u0441\u0441\u0438\u0438 \u044f \u043f\u0438\u0448\u0443 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043c\u0438\u0441\u0441\u0438\u0438 \u0438 \u043a\u0440\u0430\u0442\u043a\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0432 \u0432\u0438\u0434\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043d\u0430 \u043f\u0430\u043d\u0435\u043b\u0438. \u0418 \u0434\u0430\u043b\u0435\u0435 \u043b\u044e\u0431\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0432 \u044d\u0442\u0443 \u043f\u0430\u043d\u0435\u043b\u044c. \u041a\u0430\u043a \u0438 \u0432 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u0435\u043b\u0435\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0439 \u043f\u043e\u0440\u0442\u0440\u0435\u0442 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430 (1 \u0438\u0437 4-\u0445). \u0422\u0435\u043a\u0441\u0442\u0443\u0440\u044b \u043f\u043e\u0440\u0442\u0440\u0435\u0442\u043e\u0432 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u0435\u043b\u0435\u0439 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/scenes\/MenuScene.ts#L65\" rel=\"noopener noreferrer nofollow\">\u044f \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u044e<\/a> \u0432 \u0441\u0430\u043c\u043e\u043c \u043a\u043e\u043d\u0446\u0435, \u0442.\u043a. \u044d\u0442\u043e \u0441\u0430\u043c\u044b\u0435 \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b \u0434\u043b\u044f \u0438\u0433\u0440\u044b.<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u043f\u0430\u043d\u0435\u043b\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c9e\/af0\/48e\/c9eaf048e395933b3632158fe6263e91.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - \u043f\u0430\u043d\u0435\u043b\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439\" width=\"486\" height=\"99\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c9e\/af0\/48e\/c9eaf048e395933b3632158fe6263e91.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u043f\u0430\u043d\u0435\u043b\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439<\/figcaption><\/div>\n<\/figure>\n<p>\u041b\u044e\u0431\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u043f\u043e\u0440\u0442\u0440\u0435\u0442\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u0435\u043b\u044f (1), \u0442\u0435\u043a\u0441\u0442\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f (2) \u0438 \u0442\u0435\u043a\u0441\u0442\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0432 \u0438\u0433\u0440\u0435 (3).<\/p>\n<\/div>\n<\/details>\n<p>\u0422.\u043a. \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043c\u043d\u043e\u0433\u043e, \u0442\u043e \u043f\u0430\u043d\u0435\u043b\u044c \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0433 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u043b. \u0417\u0434\u0435\u0441\u044c \u0432\u0441\u0442\u0430\u0451\u0442 \u0432\u0441\u0451 \u0442\u0430 \u0436\u0435 \u0437\u0430\u0434\u0430\u0447\u0430 \u0441 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\u043c\u0438 &#8212; \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u0435\u0433\u043e \u043f\u043e\u0442\u043e\u043c\u043a\u0438 \u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b\u0438\u0441\u044c \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.<\/p>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b \u044f \u044d\u0442\u043e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0447\u0435\u0440\u0435\u0437 \u043c\u0430\u0441\u043a\u0443 <a href=\"https:\/\/pixijs.download\/dev\/docs\/PIXI.AnimatedSprite.html#mask\" rel=\"noopener noreferrer nofollow\">mask<\/a>. <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/components\/StatusBar.ts#L227\" rel=\"noopener noreferrer nofollow\">\u0420\u0438\u0441\u0443\u044e \u043c\u0430\u0441\u043a\u0443<\/a> \u043a\u0430\u043a \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432, \u0437\u0430\u0442\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u0440\u0435\u0437\u0430\u0442\u044c \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u044e \u044d\u0442\u0443 \u043c\u0430\u0441\u043a\u0443 <code>container.mask<\/code>. \u041f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0443 \u044f \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>pivot.y<\/code> &#8212; \u0441\u043d\u0430\u0447\u0430\u043b\u0430 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/components\/StatusBar.ts#L272\" rel=\"noopener noreferrer nofollow\">\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e<\/a> \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 &#8212; \u0437\u0430\u0442\u0435\u043c <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/components\/StatusBar.ts#L291\" rel=\"noopener noreferrer nofollow\">\u0432\u043a\u043b\u044e\u0447\u0430\u044e \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c<\/a> \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 <code>this.eventMode = 'static'<\/code> \u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0441\u044c \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f <code>pointer...<\/code> \u0434\u043b\u044f \u0441\u0435\u043d\u0441\u043e\u0440\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0438 <code>wheel<\/code> \u0434\u043b\u044f \u043c\u044b\u0448\u0438.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u044f <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/components\/StatusBar.ts#L232\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f<\/a> \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e &#8212; \u0442\u043e \u044f <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/components\/StatusBar.ts#L267\" rel=\"noopener noreferrer nofollow\">\u0441\u0434\u0435\u043b\u0430\u043b \u043f\u043b\u0430\u0432\u043d\u0443\u044e \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0443<\/a> \u0434\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0422.\u043a. \u044f \u0441\u043b\u0435\u0434\u0443\u044e <code>Mobile\u200c \u200cFirst\u200c<\/code> \u043f\u043e\u0434\u0445\u043e\u0434\u0443, \u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0434\u0443\u043c\u0430\u0442\u044c \u043a\u0430\u043a \u043f\u0430\u043d\u0435\u043b\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445. \u041f\u0440\u043e\u0441\u0442\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442 &#8212; \u043d\u0435 \u0432\u044b\u0445\u043e\u0434, \u0442.\u043a. \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u044f \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u044e \u0442\u0435\u043a\u0441\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0442\u0435\u043a\u0441\u0442 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u043b\u0441\u044f \u043d\u0430 \u0434\u0440\u0443\u0433\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443. \u041a\u043e\u0433\u0434\u0430 \u044f \u0440\u0438\u0441\u0443\u044e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435, \u044f \u043f\u0435\u0440\u0435\u0434\u0430\u044e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/components\/StatusBar.ts#L72\" rel=\"noopener noreferrer nofollow\">\u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u0443\u044e<\/a> \u0448\u0438\u0440\u0438\u043d\u0443 <code>wordWrapWidth<\/code> \u0442\u0435\u043a\u0441\u0442\u0430. \u0415\u0441\u043b\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0442\u043e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/components\/StatusBar.ts#L358\" rel=\"noopener noreferrer nofollow\">\u044f \u0434\u043e\u0441\u0442\u0430\u044e \u0432\u0441\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f<\/a> \u0438\u0437 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0438 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u044e \u0438\u0445 \u0441 \u0434\u0440\u0443\u0433\u043e\u0439 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 \u0442\u0435\u043a\u0441\u0442\u0430.<\/p>\n<h3>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f: \u043a\u0430\u0440\u0442\u0430 \u0438 \u043c\u0438\u043d\u0438-\u043a\u0430\u0440\u0442\u0430<\/h3>\n<p>\u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044e\u043d\u0438\u0442\u0430 \u0438 \u0437\u0434\u0430\u043d\u0438\u044f \u0432 \u0438\u0433\u0440\u0435 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/interfaces\/IItem.ts#L54\" rel=\"noopener noreferrer nofollow\">\u0438\u043c\u0435\u044e\u0442\u0441\u044f<\/a> \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0448\u0438\u0440\u0438\u043d\u044b \u0438 \u0432\u044b\u0441\u043e\u0442\u044b <code>collisionOptions<\/code> &#8212; \u044d\u0442\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0439. \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u0434\u043b\u044f \u044e\u043d\u0438\u0442\u043e\u0432 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u043e\u0439, \u044f \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438 \u0434\u043b\u044f \u044e\u043d\u0438\u0442\u043e\u0432 &#8212; \u0442\u0430\u043a \u0440\u0430\u0441\u0447\u0435\u0442 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u0430\u043c\u044b\u043c \u043f\u0440\u043e\u0441\u0442\u044b\u043c.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0435\u0441\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0440\u0430\u0434\u0438\u0443\u0441 \u043e\u0431\u0437\u043e\u0440\u0430 (<code>sightRadius<\/code>) &#8212; \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u043c\u0438\u043d\u0438-\u043a\u0430\u0440\u0442\u0430<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/652\/139\/f1b\/652139f1b43c589766358549059aee98.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - \u043c\u0438\u043d\u0438-\u043a\u0430\u0440\u0442\u0430\" width=\"161\" height=\"105\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/652\/139\/f1b\/652139f1b43c589766358549059aee98.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u043c\u0438\u043d\u0438-\u043a\u0430\u0440\u0442\u0430<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0412 \u0432\u0435\u0440\u0445\u0443 \u0441\u043f\u0440\u0430\u0432\u0430 \u0432\u043e\u0437\u043b\u0435 \u043f\u0430\u043d\u0435\u043b\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043c\u0438\u043d\u0438-\u043a\u0430\u0440\u0442\u0443 <code>MiniMap<\/code>. \u0414\u043b\u044f \u043c\u0438\u043d\u0438-\u043a\u0430\u0440\u0442\u044b \u044f \u0440\u0438\u0441\u0443\u044e \u043a\u0430\u0440\u0442\u0443 \u0443\u0440\u043e\u0432\u043d\u044f \u0438 \u0432\u0441\u0435\u0445 \u044e\u043d\u0438\u0442\u043e\u0432 \u0438 \u0437\u0434\u0430\u043d\u0438\u0439. \u041a\u0430\u0440\u0442\u0430 \u0443\u0440\u043e\u0432\u043d\u044f \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0430 \u0434\u0432\u0443\u043c\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u043c\u0438\u0441\u044f \u0441\u043f\u0440\u0430\u0439\u0442\u0430\u043c\u0438 <code>background<\/code> \u0438 <code>background2<\/code>, \u043e\u0431\u043e\u0438\u043c \u0441\u043f\u0440\u0430\u0439\u0442\u0430\u043c \u044f \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u0443\u044e \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443 \u043a\u0430\u0440\u0442\u044b \u0443\u0440\u043e\u0432\u043d\u044f. <code>background<\/code> \u0441\u043f\u0440\u0430\u0439\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0442\u0451\u043c\u043d\u0430\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043a\u0430\u0440\u0442\u044b, \u043a\u0443\u0434\u0430 \u043d\u0435 \u0434\u043e\u0441\u0442\u0430\u0451\u0442 \u043e\u0431\u0437\u043e\u0440 \u044e\u043d\u0438\u0442\u043e\u0432\/\u0437\u0434\u0430\u043d\u0438\u0439 \u0438\u0437 \u043a\u043e\u043c\u0430\u043d\u0434\u044b. <code>background2<\/code> \u0441\u043f\u0440\u0430\u0439\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u044e\u043d\u0438\u0442\u043e\u0432 \u0438 \u0437\u0434\u0430\u043d\u0438\u0439 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u044b. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u044f \u0440\u0438\u0441\u0443\u044e \u0432\u0441\u0435\u0445 \u044e\u043d\u0438\u0442\u043e\u0432 \u0438 \u0437\u0434\u0430\u043d\u0438\u0439 \u043d\u0430 \u043a\u0430\u0440\u0442\u0435, \u0437\u0430\u0442\u0435\u043c \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u0435 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/components\/MiniMap.ts#L251\" rel=\"noopener noreferrer nofollow\">\u0440\u0438\u0441\u0443\u044e \u043a\u0440\u0443\u0433 \u043e\u0431\u0437\u043e\u0440\u0430<\/a> \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u044e\u043d\u0438\u0442\u0430. \u0412 \u043a\u043e\u043d\u0446\u0435 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/components\/MiniMap.ts#L257\" rel=\"noopener noreferrer nofollow\">\u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e<\/a> \u043c\u0430\u0441\u043a\u0443 <code>mask<\/code> \u0434\u043b\u044f <code>background2<\/code> \u0441\u043f\u0440\u0430\u0439\u0442\u0430 &#8212; \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n<p>\u042e\u043d\u0438\u0442\u043e\u0432 \u044f \u0440\u0438\u0441\u0443\u044e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/components\/MiniMap.ts#L247\" rel=\"noopener noreferrer nofollow\">\u043a\u0430\u043a \u043a\u0440\u0443\u0433\u0438<\/a>, \u0437\u0434\u0430\u043d\u0438\u044f &#8212; \u043a\u0430\u043a \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438, \u0438 \u0440\u0430\u0441\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u044e \u0446\u0432\u0435\u0442\u043e\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u044b <code>team<\/code> &#8212; \u0441\u0438\u043d\u0438\u0439 \u0438\u043b\u0438 \u0437\u0435\u043b\u0435\u043d\u044b\u0439.<\/p>\n<p>\u041f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0436\u0435\u043b\u0442\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043a\u0430\u043c\u0435\u0440\u044b.<\/p>\n<h3>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f: \u043f\u0430\u043d\u0435\u043b\u044c \u043f\u0440\u0438\u043a\u0430\u0437\u043e\u0432<\/h3>\n<p>\u0421\u043b\u0435\u0434\u0443\u044f <code>Mobile\u200c \u200cFirst\u200c<\/code> \u043f\u043e\u0434\u0445\u043e\u0434\u0443 &#8212; \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043d\u0435 \u0442\u0430\u043a \u043c\u043d\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043f\u0430\u043d\u0435\u043b\u044c \u043f\u0440\u0438\u043a\u0430\u0437\u043e\u0432. \u0410 \u0440\u0430\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043a\u0430\u0437\u044b \u044e\u043d\u0438\u0442\u0430\u043c &#8212; \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0438\u0433\u0440\u044b. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0441\u0434\u0435\u043b\u0430\u043b \u044d\u0442\u0443 \u043f\u0430\u043d\u0435\u043b\u044c \u0432\u044b\u0435\u0437\u0436\u0430\u044e\u0449\u0435\u0439, \u0442.\u0435. \u0435\u0441\u043b\u0438 \u0432\u044b\u0431\u0440\u0430\u043d\u043e \u0437\u0434\u0430\u043d\u0438\u0435 \u0438\u043b\u0438 \u044e\u043d\u0438\u0442 &#8212; \u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043f\u0430\u043d\u0435\u043b\u044c \u043f\u0440\u0438\u043a\u0430\u0437\u043e\u0432. \u041f\u0430\u043d\u0435\u043b\u044c \u043d\u0435 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u0442\u0441\u044f, \u0437\u0430\u0442\u043e \u0435\u0451 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043d\u0430 \u0434\u0440\u0443\u0433\u0443\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u044d\u043a\u0440\u0430\u043d\u0430.<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u043f\u0430\u043d\u0435\u043b\u044c \u043f\u0440\u0438\u043a\u0430\u0437\u043e\u0432<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c0e\/158\/fea\/c0e158fea3ff6444772c754bfc829cb4.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - \u043f\u0430\u043d\u0435\u043b\u044c \u043f\u0440\u0438\u043a\u0430\u0437\u043e\u0432 \u0441\u043b\u0435\u0432\u0430\" width=\"210\" height=\"476\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c0e\/158\/fea\/c0e158fea3ff6444772c754bfc829cb4.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u043f\u0430\u043d\u0435\u043b\u044c \u043f\u0440\u0438\u043a\u0430\u0437\u043e\u0432 \u0441\u043b\u0435\u0432\u0430<\/figcaption><\/div>\n<\/figure>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/86e\/fed\/0dd\/86efed0dd17e195b01baeafd9da4c1f4.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - \u043f\u0430\u043d\u0435\u043b\u044c \u043f\u0440\u0438\u043a\u0430\u0437\u043e\u0432 \u0441\u043f\u0440\u0430\u0432\u0430\" width=\"178\" height=\"354\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/86e\/fed\/0dd\/86efed0dd17e195b01baeafd9da4c1f4.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u043f\u0430\u043d\u0435\u043b\u044c \u043f\u0440\u0438\u043a\u0430\u0437\u043e\u0432 \u0441\u043f\u0440\u0430\u0432\u0430<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0423 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044e\u043d\u0438\u0442\u0430 \u0438\u043b\u0438 \u0437\u0434\u0430\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0441\u0432\u043e\u0438 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u0440\u0438\u043a\u0430\u0437\u044b. \u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 \u043f\u0440\u0438\u043a\u0430\u0437\u043e\u0432 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u044f \u0441\u0434\u0435\u043b\u0430\u043b \u0432 \u0432\u0438\u0434\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 <code>commands: ECommandName[]<\/code>. \u041f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435 \u044e\u043d\u0438\u0442\u0430 \u0438\u043b\u0438 \u0437\u0434\u0430\u043d\u0438\u044f \u044f \u0440\u0438\u0441\u0443\u044e \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0440\u0438\u043a\u0430\u0437\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u0441 \u043f\u0440\u0438\u043a\u0430\u0437\u043e\u043c. \u0421\u0430\u043c\u0430\u044f \u043f\u0435\u0440\u0432\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430 \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 &#171;\u0443\u0431\u0440\u0430\u0442\u044c \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435&#187;. \u041d\u0430 \u0441\u0442\u0430\u0440\u0435\u043d\u044c\u043a\u043e\u043c <code>iPhone 6s<\/code> \u0443 \u043c\u0435\u043d\u044f \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f 5 \u043a\u043d\u043e\u043f\u043e\u043a \u0432 \u0432\u044b\u0441\u043e\u0442\u0443 &#8212; \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0432\u0441\u0435\u0433\u0434\u0430 \u0441\u0442\u0430\u0440\u0430\u043b\u0441\u044f \u043d\u0435 \u0432\u044b\u0445\u043e\u0434\u0438\u0442\u044c \u0437\u0430 \u044d\u0442\u043e\u0442 \u043b\u0438\u043c\u0438\u0442. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043b \u043a\u043d\u043e\u043f\u043a\u0438 \u043f\u0440\u0438\u043a\u0430\u0437\u0430 \u0434\u043b\u044f \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043a\u0443\u0434\u0430-\u0442\u043e, \u0438\u043b\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0437\u0430 \u043a\u0435\u043c-\u0442\u043e &#8212; \u0435\u0441\u043b\u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u043a\u0430\u0437 \u0438 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043d\u0430 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c, \u0442\u043e \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043a\u0430\u0437 \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u0437\u0430 \u043d\u0435\u0439, \u0435\u0441\u043b\u0438 \u043d\u0430 \u043c\u0435\u0441\u0442\u043d\u043e\u0441\u0442\u044c &#8212; \u0442\u043e \u0438\u0434\u0442\u0438.<\/p>\n<h3>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f: \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/h3>\n<p>\u0421\u043e\u0431\u0440\u0430\u0432 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0432\u043c\u0435\u0441\u0442\u0435 \u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043b \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435. \u0422\u0430\u043a \u0432\u0435\u0440\u0445\u043d\u044f\u044f \u043f\u0430\u043d\u0435\u043b\u044c <code>TopBar<\/code> \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u043f\u0430\u043d\u0435\u043b\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 <code>StatusBar<\/code> \u0438 \u043c\u0438\u043d\u0438-\u043a\u0430\u0440\u0442\u044b <code>MiniMap<\/code>. \u0421\u043b\u0435\u0432\u0430 \u0438\u043b\u0438 \u0441\u043f\u0440\u0430\u0432\u0430 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u0431\u043e\u043a\u043e\u0432\u0443\u044e \u043f\u0430\u043d\u0435\u043b\u044c <code>SideBar<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438 \u0438 \u043f\u0430\u043d\u0435\u043b\u0438 \u043f\u0440\u0438\u043a\u0430\u0437\u043e\u0432 <code>CommandsBar<\/code>. \u041f\u0440\u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/Game.ts#L554\" rel=\"noopener noreferrer nofollow\">\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u044e<\/a> \u0448\u0438\u0440\u0438\u043d\u0443 \u044d\u043a\u0440\u0430\u043d\u0430 \u0432 <code>TopBar<\/code> &#8212; \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0441\u043c\u0435\u0449\u0430\u0435\u0442 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u0438\u043d\u0438 \u043a\u0430\u0440\u0442\u044b (\u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u044e \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043a\u0430\u043c\u0435\u0440\u044b) \u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u0442 \u043f\u0430\u043d\u0435\u043b\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439. \u0414\u043b\u044f \u0431\u043e\u043a\u043e\u0432\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/components\/SideBar.ts#L222\" rel=\"noopener noreferrer nofollow\">\u0432 \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0451\u0442\u0435<\/a> \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0430\u043d\u0435\u043b\u0438.<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0430\u043d\u0435\u043b\u0435\u0439<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/9d7\/d76\/a0d\/9d7d76a0d3e9913d82a0e60f0bd1e602.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0430\u043d\u0435\u043b\u0435\u0439\" width=\"860\" height=\"530\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9d7\/d76\/a0d\/9d7d76a0d3e9913d82a0e60f0bd1e602.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0430\u043d\u0435\u043b\u0435\u0439<\/figcaption><\/div>\n<\/figure>\n<p>1 &#8212; \u043f\u0430\u043d\u0435\u043b\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439, \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430 500 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0435\u0449\u0435 \u043c\u0435\u0441\u0442\u043e, \u043e\u043d\u043e \u0434\u0435\u043b\u0438\u0442\u0441\u044f \u0440\u0430\u0432\u043d\u043e\u043c\u0435\u0440\u043d\u043e \u043f\u043e \u043a\u0440\u0430\u044f\u043c<br \/>2 &#8212; \u043c\u0438\u043d\u0438-\u043a\u0430\u0440\u0442\u0430, \u0432\u0441\u0435\u0433\u0434\u0430 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430<br \/>3,4 &#8212; \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043f\u0430\u043d\u0435\u043b\u044c \u0438 \u043f\u0430\u043d\u0435\u043b\u044c \u043f\u0440\u0438\u043a\u0430\u0437\u043e\u0432 &#8212; \u043d\u0435 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u044e\u0442\u0441\u044f<\/p>\n<\/div>\n<\/details>\n<p>\u0421\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u0441\u0435\u0439 \u0438\u0433\u0440\u044b \u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u044b. \u041f\u043e \u0441\u0443\u0442\u0438, \u0435\u0441\u043b\u0438 \u0431\u044b \u0431\u044b\u043b\u043e 3-\u0435 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0435 \u043c\u044b \u043c\u0435\u043d\u044f\u043b\u0438 \u0431\u044b <code>z<\/code> \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0443 \u0434\u043b\u044f \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u044f \u043a\u0430\u0440\u0442\u044b (\u043e\u0442\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u043f\u0440\u0438\u0431\u043b\u0438\u0436\u0435\u043d\u0438\u0435 \u043a\u0430\u043c\u0435\u0440\u044b). \u0412 \u0438\u0433\u0440\u0435 \u044f \u0441\u0434\u0435\u043b\u0430\u043b \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u044b \u0434\u0432\u0443\u043c\u044f \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u044b\u0448\u043a\u0438 \u043f\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044e <code>wheel<\/code> \u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0435\u043d\u0441\u043e\u0440\u043d\u043e\u0433\u043e \u0432\u0432\u043e\u0434\u0430 (\u0434\u0432\u0443\u043c\u044f \u043f\u0430\u043b\u044c\u0446\u0430\u043c\u0438 &#8212; <code>pinch zoom<\/code>).<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u044b \u043f\u0430\u043b\u044c\u0446\u0430\u043c\u0438<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/412\/c35\/98c\/412c3598c03ead21d8b679d45104bac5.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u044b \u043f\u0430\u043b\u044c\u0446\u0430\u043c\u0438\" width=\"282\" height=\"436\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/412\/c35\/98c\/412c3598c03ead21d8b679d45104bac5.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u044b \u043f\u0430\u043b\u044c\u0446\u0430\u043c\u0438<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u0432\u0430 \u043a\u0440\u0430\u0441\u043d\u044b\u0445 \u043a\u0440\u0443\u0433\u0430 &#8212; \u044d\u0442\u043e \u043f\u043e \u0441\u0443\u0442\u0438 \u0434\u0432\u0430 \u043f\u0430\u043b\u044c\u0446\u0430 (\u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f).<\/p>\n<\/div>\n<\/details>\n<p>\u0412 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u0430\u0440\u0442\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0442\u043e\u0447\u043a\u0430, \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0435\u0441\u043b\u0438 \u0434\u0435\u043b\u0430\u0442\u044c \u0431\u0435\u0437 \u044d\u0442\u043e\u0439 \u0442\u043e\u0447\u043a\u0438, \u0442\u043e \u0432\u0441\u044f \u043a\u0430\u0440\u0442\u0430 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u0441\u044f\/\u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c\u0441\u044f \u0438 \u0441\u043c\u0435\u0441\u0442\u0438\u0442\u044c\u0441\u044f \u043e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u043f\u043e\u043a\u0430\u0436\u0435\u0442 \u043d\u0435 \u0442\u043e, \u0447\u0442\u043e \u043e\u0436\u0438\u0434\u0430\u043b\u043e\u0441\u044c. \u0410\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0442\u0430\u043a\u043e\u0439, \u0447\u0442\u043e \u043f\u043e\u0441\u043b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430 \u043d\u0443\u0436\u043d\u043e \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043a\u0430\u043c\u0435\u0440\u0443 \u0432 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0433\u0434\u0435 \u043d\u0435\u043f\u043e\u0434\u0432\u0438\u0436\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430 \u0442\u043e\u043c \u0436\u0435 \u043c\u0435\u0441\u0442\u0435. \u0422\u0430\u043a \u0434\u043b\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043c\u044b\u0448\u0438 <code>wheel<\/code> \u043d\u0435\u043f\u043e\u0434\u0432\u0438\u0436\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443 \u043b\u0435\u0433\u043a\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c &#8212; \u044d\u0442\u043e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/Game.ts#L473\" rel=\"noopener noreferrer nofollow\">\u0438 \u0435\u0441\u0442\u044c \u0442\u043e\u0447\u043a\u0430<\/a> \u0437\u0430\u0434\u0430\u043d\u043d\u0430\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438 <code>x<\/code> \u0438 <code>y<\/code>. \u0414\u043b\u044f \u0441\u0435\u043d\u0441\u043e\u0440\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u043d\u0443\u0436\u043d\u043e \u0434\u0432\u0430 \u043f\u0430\u043b\u044c\u0446\u0430 (\u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f <code>pointer<\/code>), \u0435\u0441\u043b\u0438 \u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e, \u0447\u0442\u043e \u0434\u0432\u0430 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f \u0430\u043a\u0442\u0438\u0432\u043d\u044b \u0438 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0442\u043e \u044f \u043d\u0430\u0445\u043e\u0436\u0443 \u043d\u0435\u043f\u043e\u0434\u0432\u0438\u0436\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443 &#8212; \u043a\u0430\u043a \u0442\u043e\u0447\u043a\u0443 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/Game.ts#L436\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435 \u043b\u0438\u043d\u0438\u0438<\/a>, \u0441\u043e\u0435\u0434\u0438\u043d\u044f\u044e\u0449\u0435\u0439 \u0434\u0432\u0430 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f.<\/p>\n<p>\u0421\u0430\u043c \u0436\u0435 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f\/\u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043c\u044b\u0448\u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u044b\u0439, \u0430 \u0432\u043e\u0442 \u0434\u043b\u044f \u0441\u0435\u043d\u0441\u043e\u0440\u043d\u043e\u0433\u043e \u0432\u0432\u043e\u0434\u0430 \u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e \u0435\u0433\u043e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/Game.ts#L432\" rel=\"noopener noreferrer nofollow\">\u043a\u0430\u043a \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435<\/a> \u0441\u0442\u0430\u0440\u043e\u0433\u043e \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a \u043d\u043e\u0432\u043e\u043c\u0443 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044e \u043c\u0435\u0436\u0434\u0443 \u043f\u0430\u043b\u044c\u0446\u0430\u043c\u0438.<\/p>\n<details class=\"spoiler\">\n<summary>PixiJS \u0441\u043e\u0432\u0435\u0442 12: \u041f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442<\/summary>\n<div class=\"spoiler__content\">\n<p>\u041e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0440\u0435\u0442\u0438\u0442\u044c \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e \u043a\u043e\u0433\u0434\u0430 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0432 \u0434\u0440\u0443\u0433\u043e\u0439. \u0421\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0442\u043e, \u0447\u0442\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043c\u0435\u0441\u0442\u0430 \u0434\u0435\u0440\u0435\u0432\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 <code>PixiJS<\/code>, \u043c\u043e\u0433\u0443\u0442 \u0438\u043c\u0435\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u044b.<br \/> \u0414\u043b\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>toGlobal<\/code> \u0438 <code>toLocal<\/code> \u0444\u0443\u043d\u043a\u0446\u0438\u0438 &#8212; \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0442\u043e\u0447\u043a\u0438 \u0431\u0443\u0434\u0435\u0442 \u043a\u0430\u043a \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442. \u0410\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0442\u0430\u043a\u043e\u0439, \u0431\u0435\u0440\u0435\u043c \u0442\u043e\u0447\u043a\u0443 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u043c \u0435\u0451 \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b, \u0437\u0430\u0442\u0435\u043c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u043c \u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0443\u0436\u0435 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.<\/p>\n<pre><code class=\"typescript\">import { Container, Graphics } from 'pixi.js'  const container1 = new Container() container1.scale.set(0.5, 0.8) const rect1 = new Graphics() rect1.position.set(14, 18) rect1.beginFill(0xff00ff) rect1.drawRoundedRect(0, 0, 500, 500, 5) rect1.endFill() container1.addChild(rect1) const container2 = new Container()  const local1Rect1Center = { x: rect1.x + rect1.width \/ 2, y: rect1.y + rect1.height \/ 2 } const globalRect1Center = container1.toGlobal(local1Rect1Center) const local2Rect1Center = container2.tolocal(globalRect1Center) <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<h3>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f: \u0432\u044b\u0431\u043e\u0440 \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0440\u044f\u0434\u043a\u0430<\/h3>\n<p>\u041a\u0430\u0436\u0434\u043e\u0433\u043e \u044e\u043d\u0438\u0442\u0430 \u0438\u043b\u0438 \u0437\u0434\u0430\u043d\u0438\u0435 \u0432 \u0438\u0433\u0440\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c. \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043e\u0442\u0434\u0430\u043b \u043f\u0440\u0438\u043a\u0430\u0437, \u043d\u0443\u0436\u043d\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0434\u0430\u043d \u043f\u0440\u0438\u043a\u0430\u0437. \u0412\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u043c\u043e\u0436\u043d\u043e \u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043b\u0438 \u044e\u043d\u0438\u0442\u043e\u0432, \u0434\u0430\u0436\u0435 \u0432\u0440\u0430\u0436\u0435\u0441\u043a\u0438\u0445. \u041e\u0434\u043d\u0430\u043a\u043e \u0434\u043b\u044f \u0432\u0440\u0430\u0436\u0435\u0441\u043a\u0438\u0445 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043a\u0430\u0437\u044b.<\/p>\n<p>\u0412 \u0438\u0433\u0440\u0435 \u044f \u0440\u0438\u0441\u0443\u044e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u043e\u043a\u0440\u0443\u0433 \u044e\u043d\u0438\u0442\u0430, \u0435\u0441\u043b\u0438 \u043e\u043d \u0432\u044b\u0431\u0440\u0430\u043d, \u0438 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a &#8212; \u043e\u043a\u043e\u043b\u043e \u0437\u0434\u0430\u043d\u0438\u044f. <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/interfaces\/ISelectable.ts#L8\" rel=\"noopener noreferrer nofollow\">\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0433\u0440\u0430\u0444\u0438\u043a\u0438<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435, \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043f\u043e\u043b\u0435 <code>drawSelectionOptions<\/code>.<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u044b\u0431\u043e\u0440\u0430<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/9f0\/60f\/256\/9f060f25665a1b9dc5fe6c0c97707ac2.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u044b\u0431\u043e\u0440\u0430 \u0437\u0434\u0430\u043d\u0438\u044f\" width=\"304\" height=\"397\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9f0\/60f\/256\/9f060f25665a1b9dc5fe6c0c97707ac2.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u044b\u0431\u043e\u0440\u0430 \u0437\u0434\u0430\u043d\u0438\u044f<\/figcaption><\/div>\n<\/figure>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/8b0\/061\/b27\/8b0061b2775e50198d597d6c7edf4215.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u044b\u0431\u043e\u0440\u0430 \u044e\u043d\u0438\u0442\u0430\" width=\"330\" height=\"328\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/8b0\/061\/b27\/8b0061b2775e50198d597d6c7edf4215.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u044b\u0431\u043e\u0440\u0430 \u044e\u043d\u0438\u0442\u0430<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0412 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0438\u0433\u0440\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u044b\u0431\u043e\u0440\u0430 \u0432\u043e\u0437\u0434\u0443\u0448\u043d\u044b\u0445 \u044e\u043d\u0438\u0442\u043e\u0432 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043a\u0430\u043a \u0431\u044b \u043c\u0435\u0441\u0442\u043e \u043d\u0430 \u0437\u0435\u043c\u043b\u0435, \u0433\u0434\u0435 \u044d\u0442\u043e\u0442 \u044e\u043d\u0438\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f. \u042f \u0441\u0447\u0438\u0442\u0430\u044e \u0442\u0430\u043a\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0431\u0435\u0441\u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c, \u0442.\u043a. \u043c\u0435\u0441\u0442\u043e \u043d\u0430 \u0437\u0435\u043c\u043b\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0434\u0430\u0451\u0442, \u043c\u043e\u0436\u043d\u043e \u0435\u0433\u043e \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0437\u0430 \u0442\u043e\u0447\u043a\u0443 \u043e\u0442\u0441\u0447\u0435\u0442\u0430 \u043f\u0440\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0438 \u043e\u0431\u0437\u043e\u0440\u0430, \u043d\u043e \u0441\u043d\u0430\u0440\u044f\u0434\u044b \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u044b \u043b\u0435\u0442\u0435\u0442\u044c \u0432 \u0441\u043f\u0440\u0430\u0439\u0442 \u0432\u043e\u0437\u0434\u0443\u0448\u043d\u043e\u0433\u043e \u044e\u043d\u0438\u0442\u0430, \u0430 \u043d\u0435 \u0435\u0433\u043e \u043c\u0435\u0441\u0442\u043e \u043d\u0430 \u0437\u0435\u043c\u043b\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u043e\u0442\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u043e\u0442 \u0442\u0430\u043a\u043e\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u0432\u044b\u0431\u043e\u0440 \u0432\u043e\u0437\u0434\u0443\u0448\u043d\u044b\u0445 \u044e\u043d\u0438\u0442\u043e\u0432<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0422\u0430\u043a \u0431\u044b\u043b\u043e \u0432 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0435:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0e0\/650\/4f7\/0e06504f78cc723a484d41ee8de77502.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - \u0432\u044b\u0431\u043e\u0440 \u0432\u043e\u0437\u0434\u0443\u0448\u043d\u044b\u0445 \u044e\u043d\u0438\u0442\u043e\u0432 \u0432 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0435\" width=\"172\" height=\"155\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0e0\/650\/4f7\/0e06504f78cc723a484d41ee8de77502.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u0432\u044b\u0431\u043e\u0440 \u0432\u043e\u0437\u0434\u0443\u0448\u043d\u044b\u0445 \u044e\u043d\u0438\u0442\u043e\u0432 \u0432 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u0422\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u043b \u044f:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/868\/c9c\/f5b\/868c9cf5b580f3d1dd180e8e551b0cb9.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - \u0432\u044b\u0431\u043e\u0440 \u0432\u043e\u0437\u0434\u0443\u0448\u043d\u044b\u0445 \u044e\u043d\u0438\u0442\u043e\u0432 \u0443 \u043c\u0435\u043d\u044f\" width=\"404\" height=\"523\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/868\/c9c\/f5b\/868c9cf5b580f3d1dd180e8e551b0cb9.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u0432\u044b\u0431\u043e\u0440 \u0432\u043e\u0437\u0434\u0443\u0448\u043d\u044b\u0445 \u044e\u043d\u0438\u0442\u043e\u0432 \u0443 \u043c\u0435\u043d\u044f<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u044f \u0440\u0438\u0441\u0443\u044e \u043f\u043e\u043b\u043e\u0441\u0443 \u0436\u0438\u0437\u043d\u0435\u0439, \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 <code>drawLifeBarOptions<\/code>.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u044e\u043d\u0438\u0442 \u0438\u043b\u0438 \u0437\u0434\u0430\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u0430\u0442\u0430\u043a\u043e\u0432\u0430\u0442\u044c, \u0442\u043e \u043d\u0438\u0436\u0435 \u043f\u043e\u043b\u043e\u0441\u043a\u0438 \u0436\u0438\u0437\u043d\u0435\u0439 \u044f \u0440\u0438\u0441\u0443\u044e \u043f\u043e\u043b\u043e\u0441\u043a\u0443 \u043f\u0435\u0440\u0435\u0437\u0430\u0440\u044f\u0434\u043a\u0438 \u043e\u0440\u0443\u0436\u0438\u044f, \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 <code>drawReloadBarOptions<\/code>.<\/p>\n<p>\u0412 \u0438\u0433\u0440\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044e\u043d\u0438\u0442\u043e\u0432, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0436\u0430\u0442\u044c \u043b\u0435\u0432\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443 \u043c\u044b\u0448\u0438 \u0438 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a, \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435, \u0432\u0441\u0435 \u044e\u043d\u0438\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043f\u0430\u043b\u0438 \u0432 \u0440\u0430\u043c\u043a\u0443 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0431\u0440\u0430\u043d\u044b.<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u0440\u0430\u043c\u043a\u0430 \u0434\u043b\u044f \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e4d\/41b\/ee7\/e4d41bee7f50754607861fe38dc99ed2.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - \u0440\u0430\u043c\u043a\u0430 \u0434\u043b\u044f \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f\" width=\"262\" height=\"255\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e4d\/41b\/ee7\/e4d41bee7f50754607861fe38dc99ed2.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u0440\u0430\u043c\u043a\u0430 \u0434\u043b\u044f \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0422.\u043a. \u0441\u043e\u0431\u044b\u0442\u0438\u0439\u043d\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0432 <code>PixiJS<\/code> \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u043c\u0438\u0442\u0438\u0440\u0443\u0435\u0442 <code>DOM<\/code> \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u0432\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043e\u0442 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0438\u044f. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 <code>DOM<\/code> \u0437\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u0432 <code>mousedown<\/code> \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043f\u0443\u0442\u0451\u043c <code>e.preventDefault()<\/code> \u044f \u0437\u043d\u0430\u044e, \u0447\u0442\u043e <code>click<\/code> \u043d\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0451\u0442. \u041e\u0442\u0441\u044e\u0434\u0430 \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0432\u0435\u0441\u0438\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u043b\u043e\u0433\u0438\u043a\u0438 \u043d\u0430 \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c (<code>pointer<\/code>) &#8212; \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f <code>pointerup<\/code>, <code>pointermove<\/code> \u0438 <code>pointerdown<\/code>, \u0430 \u0432\u043e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0435\u0449\u0451 \u0438 <code>pointertap<\/code> &#8212; \u043d\u0435\u0442 \u0441\u043c\u044b\u0441\u043b\u0430.<\/p>\n<p>\u0412 \u0438\u0433\u0440\u0435 \u044f \u043c\u043d\u043e\u0433\u043e \u0434\u0435\u043b\u0430\u044e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0434\u043d\u043e\u0433\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f:<\/p>\n<ul>\n<li>\n<p>\u0442\u0430\u043a \u0435\u0441\u043b\u0438 \u0434\u043e\u0442\u0440\u043e\u043d\u0443\u0442\u044c\u0441\u044f <code>pointerdown<\/code> + <code>pointerup<\/code> \u0434\u043e \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e \u044e\u043d\u0438\u0442\u0430 &#8212; <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/Game.ts#L319\" rel=\"noopener noreferrer nofollow\">\u043e\u043d \u0432\u044b\u0431\u0435\u0440\u0435\u0442\u0441\u044f<\/a><\/p>\n<\/li>\n<li>\n<p>\u0442\u0430\u043a \u0435\u0441\u043b\u0438 \u0434\u0432\u0430 \u0440\u0430\u0437\u0430 \u0431\u044b\u0441\u0442\u0440\u043e \u0434\u043e\u0442\u0440\u043e\u043d\u0443\u0442\u044c\u0441\u044f (<code>pointerdown<\/code> + <code>pointerup<\/code>)<code>x2<\/code> \u043d\u0430 \u043a\u0430\u043a\u043e\u043c-\u0442\u043e \u044e\u043d\u0438\u0442\u0435 &#8212; <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/Game.ts#L177\" rel=\"noopener noreferrer nofollow\">\u0432\u044b\u0431\u0435\u0440\u0443\u0442\u0441\u044f \u0432\u0441\u0435 \u044e\u043d\u0438\u0442\u044b<\/a> \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0442\u0438\u043f\u0430 \u0432 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438<\/p>\n<\/li>\n<li>\n<p>\u0435\u0441\u043b\u0438 \u0437\u0430\u0436\u0430\u0442\u044c \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0438 \u0432\u0435\u0441\u0442\u0438 \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443, \u0442\u043e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/Game.ts#L454\" rel=\"noopener noreferrer nofollow\">\u044f \u0440\u0438\u0441\u0443\u044e<\/a> \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0443\u044e \u0440\u0430\u043c\u043a\u0443 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f<\/p>\n<\/li>\n<\/ul>\n<h3>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f: \u043f\u0440\u0438\u043a\u0430\u0437\u044b \u0434\u043b\u044f \u044e\u043d\u0438\u0442\u043e\u0432<\/h3>\n<p>\u0423 \u0432\u0441\u0435\u0445 \u044e\u043d\u0438\u0442\u043e\u0432 \u0432 \u0438\u0433\u0440\u0435 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>_order<\/code> &#8212; \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u0442 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043f\u0440\u0438\u043a\u0430\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f.<\/p>\n<p>\u0414\u043b\u044f \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0445 \u044e\u043d\u0438\u0442\u043e\u0432 \u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u0435\u0433\u043e \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043f\u0440\u0438\u043a\u0430\u0437 (\u043a\u0430\u043a \u0432 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u043d\u043e\u043c \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0435), \u0442.\u0435. <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/utils\/Order.ts#L79\" rel=\"noopener noreferrer nofollow\">\u0440\u0438\u0441\u0443\u044e \u0435\u0433\u043e<\/a>. \u0422\u0430\u043a \u0434\u043b\u044f \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0430 \u0437\u0434\u0430\u043d\u0438\u044f \u044f \u0440\u0438\u0441\u0443\u044e \u043b\u0438\u043d\u0438\u044e \u043e\u0442 \u044e\u043d\u0438\u0442\u0430 \u043a \u043c\u0435\u0441\u0442\u0443 \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0430 \u0438 \u043f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0435 \u0437\u0434\u0430\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u043e. \u0414\u043b\u044f \u0430\u0442\u0430\u043a\u0438 <code>attack<\/code> \u044f \u0440\u0438\u0441\u0443\u044e \u043b\u0438\u043d\u0438\u044e \u0438 \u0446\u0435\u043b\u044c \u0430\u0442\u0430\u043a\u0438 \u043e\u0431\u0432\u043e\u0436\u0443 \u043a\u0440\u0443\u0436\u043a\u043e\u043c.<\/p>\n<p>\u041b\u0438\u043d\u0438\u044e \u043e\u0442 \u0446\u0435\u043d\u0442\u0440\u0430 \u044e\u043d\u0438\u0442\u0430 \u043a \u043c\u0435\u0441\u0442\u0443 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u044f \u0440\u0438\u0441\u0443\u044e \u043f\u0440\u0435\u0440\u044b\u0432\u0438\u0441\u0442\u0443\u044e, \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u0442\u0430\u043a\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043d\u0435\u0442 \u0432 <code>PixiJS<\/code>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/utils\/Order.ts#L125\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c<\/a> \u043c\u043d\u043e\u0433\u043e \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u043b\u0438\u043d\u0438\u0439 \u0432\u0440\u0443\u0447\u043d\u0443\u044e.<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043a\u0430\u0437\u0430<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/3ab\/6fb\/075\/3ab6fb075fce01735b6342837b3791c0.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043a\u0430\u0437\u0430 \u0434\u043b\u044f \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0430\" width=\"424\" height=\"336\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/3ab\/6fb\/075\/3ab6fb075fce01735b6342837b3791c0.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043a\u0430\u0437\u0430 \u0434\u043b\u044f \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0430<\/figcaption><\/div>\n<\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/77c\/4ed\/0e3\/77c4ed0e3d667eab12351865f5afd901.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043a\u0430\u0437\u0430 \u0434\u043b\u044f \u0430\u0442\u0430\u043a\u0438\" width=\"594\" height=\"374\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/77c\/4ed\/0e3\/77c4ed0e3d667eab12351865f5afd901.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043a\u0430\u0437\u0430 \u0434\u043b\u044f \u0430\u0442\u0430\u043a\u0438<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043b\u044e\u0431\u043e\u0439 \u044e\u043d\u0438\u0442 \u0438\u043c\u0435\u0435\u0442 \u043f\u0440\u0438\u043a\u0430\u0437 &#171;\u0441\u0442\u043e\u044f\u0442\u044c&#187; (<code>stand<\/code>), \u0434\u043b\u044f \u0430\u0442\u0430\u043a\u0443\u044e\u0449\u0438\u0445 \u044e\u043d\u0438\u0442\u043e\u0432 \u044f <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/vehicles\/AttackableVehicle.ts#LL141C36-L141C36\" rel=\"noopener noreferrer nofollow\">\u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u0442\u0438\u043a\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e<\/a> \u043d\u0435 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u043b\u0438 \u043a\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0432 \u043f\u043e\u043b\u0435 \u0437\u0440\u0435\u043d\u0438\u044f, \u043a\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0430\u0442\u0430\u043a\u043e\u0432\u0430\u0442\u044c. \u0418 \u0434\u0430\u043b\u0435\u0435 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u044e \u043f\u0440\u0438\u043a\u0430\u0437 \u043d\u0430 \u0430\u0442\u0430\u043a\u0443 <code>attack<\/code> \u0432\u0440\u0430\u0436\u0435\u0441\u043a\u043e\u0433\u043e \u044e\u043d\u0438\u0442\u0430. \u041e\u0434\u043d\u0430\u043a\u043e, \u0435\u0441\u043b\u0438 \u044e\u043d\u0438\u0442 \u0432\u0438\u0434\u0438\u0442 \u043d\u0435\u0434\u0430\u043b\u0435\u043a\u043e, \u0430 \u0435\u0433\u043e \u0430\u0442\u0430\u043a\u0443\u044e\u0442, \u0442\u043e \u044f \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/projectiles\/Projectile.ts#L217\" rel=\"noopener noreferrer nofollow\">\u0432\u044b\u0434\u0430\u044e \u0430\u0442\u0430\u043a\u0443\u044e\u0449\u0435\u043c\u0443 \u043f\u0440\u0438\u043a\u0430\u0437<\/a> \u043e\u0442\u0432\u0435\u0442\u0438\u0442\u044c.<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u044f \u0441\u0434\u0435\u043b\u0430\u043b \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0437\u0435\u043c\u043d\u044b\u0435 \u044e\u043d\u0438\u0442\u044b \u043c\u043e\u0433\u043b\u0438 \u0430\u0442\u0430\u043a\u043e\u0432\u0430\u0442\u044c \u0432\u043e\u0437\u0434\u0443\u0448\u043d\u044b\u0445 <code>canAttackAir = true<\/code>, \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u043f\u043e\u0438\u0441\u043a\u0430 \u043f\u0443\u0442\u0438 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u0443\u0442\u044c \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u044a\u0435\u0445\u0430\u0442\u044c \u043a \u0432\u043e\u0437\u0434\u0443\u0448\u043d\u043e\u043c\u0443 \u044e\u043d\u0438\u0442\u0443, \u0435\u0441\u043b\u0438 \u0442\u043e\u0442 &#171;\u0437\u0430\u0432\u0438\u0441&#187; \u043d\u0430\u0434 \u043f\u0440\u0435\u043f\u044f\u0442\u0441\u0442\u0432\u0438\u0435\u043c. \u041f\u043e\u0441\u043b\u0435 \u043f\u043e\u0438\u0441\u043a\u0430 \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 \u044f \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u043c\u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u044a\u0435\u0437\u0436\u0430\u0442\u044c \u044e\u043d\u0438\u0442\u043e\u043c \u043d\u0430 \u0441\u043e\u0441\u0435\u0434\u043d\u044e\u044e \u043a\u043b\u0435\u0442\u043a\u0443. \u041e\u0434\u043d\u0430\u043a\u043e \u0432\u044b\u0431\u043e\u0440 \u0432\u0441\u0435\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432, \u043a\u0430\u043a \u043f\u043e\u0434\u044a\u0435\u0445\u0430\u0442\u044c \u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u044c \u0434\u043e \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u0438\u043a\u0430 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043d\u044f\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0440\u0435\u0448\u0438\u043b \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0437\u044f\u0442\u044c \u0432\u0441\u0435 \u043a\u043b\u0435\u0442\u043a\u0438 \u0432 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/vehicles\/AttackableVehicle.ts#L84\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 1-2 \u043a\u043b\u0435\u0442\u043e\u043a<\/a> \u0432\u043e\u043a\u0440\u0443\u0433 \u0432\u043e\u0437\u0434\u0443\u0448\u043d\u043e\u0433\u043e \u044e\u043d\u0438\u0442\u0430 \u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u0443\u044e (\u0437\u0430 \u043e\u0434\u0438\u043d \u0442\u0438\u043a) &#8212; \u0435\u0441\u043b\u0438 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/vehicles\/AttackableVehicle.ts#L121\" rel=\"noopener noreferrer nofollow\">\u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u043f\u043e\u0438\u0441\u043a\u0430 \u043f\u0443\u0442\u0438 \u043f\u043e\u043a\u0430\u0436\u0435\u0442<\/a>, \u0447\u0442\u043e \u043d\u0430 \u044d\u0442\u0443 \u043a\u043b\u0435\u0442\u043a\u0443 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u044a\u0435\u0445\u0430\u0442\u044c &#8212; \u044f \u043f\u043e\u0434\u044a\u0435\u0437\u0436\u0430\u044e.<\/p>\n<p>\u0414\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u044e\u043d\u0438\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e\u0435 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 <code>move<\/code>, \u043a\u043e\u0433\u0434\u0430 \u044e\u043d\u0438\u0442 \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u0435\u0442 \u0432\u0441\u0435\u0445 \u0432\u0440\u0430\u0433\u043e\u0432, \u043f\u043e\u043a\u0430 \u043d\u0435 \u043f\u043e\u0434\u044a\u0435\u0434\u0435\u0442 \u043a \u043a\u043b\u0435\u0442\u043a\u0435 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0418\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 <code>move-and-attack<\/code>, \u043a\u043e\u0433\u0434\u0430 \u044e\u043d\u0438\u0442 \u043e\u0442\u0432\u043b\u0435\u0447\u0451\u0442\u0441\u044f \u043d\u0430 \u0430\u0442\u0430\u043a\u0443 \u043f\u043e \u043f\u0443\u0442\u0438.<\/p>\n<h3>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f: \u0442\u0443\u043c\u0430\u043d \u0432\u043e\u0439\u043d\u044b<\/h3>\n<p>\u0422\u0443\u043c\u0430\u043d \u0432\u043e\u0439\u043d\u044b &#8212; \u0441\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0451, \u0447\u0442\u043e \u043d\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u0432 \u0440\u0430\u0434\u0438\u0443\u0441 \u043e\u0431\u0437\u043e\u0440\u0430. \u041a\u0430\u043a \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0442\u0443\u043c\u0430\u043d \u0432\u043e\u0439\u043d\u044b \u043d\u0430 <code>PixiJS<\/code> \u044f \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043b \u043d\u0435 \u0441\u0440\u0430\u0437\u0443. \u0422\u0435\u043c \u0431\u043e\u043b\u0435\u0435, \u0447\u0442\u043e \u044f \u0434\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0441\u044f \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d\u044b. \u0414\u043b\u044f \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0438\u043b\u0438 \u0434\u043b\u044f \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f <code>2d<\/code>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0434\u0443\u043c\u0430\u0442\u044c \u0441\u0430\u043c\u043e\u043c\u0443.<\/p>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u044f \u043f\u043e\u0434\u0443\u043c\u0430\u043b, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u043b\u043e\u0436\u0438\u0442\u044c \u0441\u0432\u0435\u0440\u0445\u0443 \u043a\u0430\u0440\u0442\u044b \u0447\u0451\u0440\u043d\u044b\u0439 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0438 \u043d\u0430\u0434\u0435\u043b\u0430\u0442\u044c \u0432 \u043d\u0451\u043c \u043e\u0442\u0432\u0435\u0440\u0441\u0442\u0438\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>beginHole<\/code>\/<code>endHole<\/code><\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0442\u0432\u0435\u0440\u0441\u0442\u0438\u0439<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/6f1\/325\/baf\/6f1325baf7105ce579f7a7a6c752d816.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0442\u0432\u0435\u0440\u0441\u0442\u0438\u0439\" width=\"364\" height=\"459\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/6f1\/325\/baf\/6f1325baf7105ce579f7a7a6c752d816.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0442\u0432\u0435\u0440\u0441\u0442\u0438\u0439<\/figcaption><\/div>\n<\/figure>\n<p>\u0417\u0434\u0435\u0441\u044c \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u043e\u0442\u0432\u0435\u0440\u0441\u0442\u0438\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043d\u0435\u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e. \u041f\u043e\u043b\u0435 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0441\u0430\u043c\u043e\u043b\u0451\u0442\u0430 \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f.<\/p>\n<\/div>\n<\/details>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0431\u044b\u0441\u0442\u0440\u043e \u0432\u0441\u043a\u0440\u044b\u043b \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 <code>PixiJS<\/code>, \u0435\u0441\u043b\u0438 <a href=\"https:\/\/pixijs.download\/dev\/docs\/PIXI.Graphics.html#beginHole\" rel=\"noopener noreferrer nofollow\">\u043e\u0442\u0432\u0435\u0440\u0441\u0442\u0438\u044f \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0430<\/a> &#8212; \u043e\u0431 \u044d\u0442\u043e\u043c \u0434\u0430\u0436\u0435 \u0435\u0441\u0442\u044c \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435, \u043e\u0442\u0432\u0435\u0440\u0441\u0442\u0438\u044f \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0430.<\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u0430\u0441\u043a\u0443 \u043e\u0431\u0437\u043e\u0440\u0430 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/components\/TileMap.ts#L597\" rel=\"noopener noreferrer nofollow\">\u044f \u0440\u0438\u0441\u0443\u044e<\/a> \u043a\u0430\u043a \u043a\u0440\u0443\u0433 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044e\u043d\u0438\u0442\u0430 \u0438\u043b\u0438 \u0437\u0434\u0430\u043d\u0438\u044f \u0432 \u043e\u0434\u043d\u043e\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u0435 <code>Graphics<\/code>.<\/p>\n<p>\u0412 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0441\u0447\u0451\u0442\u0435 \u043c\u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0442\u0440\u0438 \u0441\u043b\u043e\u044f \u043a\u0430\u0440\u0442\u044b:<\/p>\n<ol>\n<li>\n<p>\u0421\u043b\u043e\u0439 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u0440\u0430\u0437\u043c\u044b\u0442\u044b\u0439 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/components\/TileMap.ts#L621\" rel=\"noopener noreferrer nofollow\">\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043c\u0430\u0441\u043a\u0443 \u043e\u0431\u0437\u043e\u0440\u0430<\/a> (\u043e\u0431\u0437\u043e\u0440 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d \u043d\u0430 <code>1.3<\/code>). \u0414\u043b\u044f \u0440\u0430\u0437\u043c\u044b\u0442\u0438\u044f \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 <code>BlurFilter<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u0421\u043b\u043e\u0439 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e, \u043d\u043e \u0441 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/components\/TileMap.ts#L115\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c<\/a> \u0437\u0430\u0442\u0435\u043d\u0435\u043d\u0438\u0435\u043c<\/p>\n<\/li>\n<li>\n<p>\u0421\u043b\u043e\u0439 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/components\/TileMap.ts#L625\" rel=\"noopener noreferrer nofollow\">\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043c\u0430\u0441\u043a\u0443<\/a> \u043e\u0431\u0437\u043e\u0440\u0430<\/p>\n<\/li>\n<\/ol>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u0441\u043b\u043e\u0438 \u043a\u0430\u0440\u0442\u044b<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/4d4\/c7c\/416\/4d4c7c41661c0d59f0bf2e14cf207f55.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - 1-\u0439 \u0441\u043b\u043e\u0439 \u043a\u0430\u0440\u0442\u044b\" width=\"346\" height=\"323\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/4d4\/c7c\/416\/4d4c7c41661c0d59f0bf2e14cf207f55.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; 1-\u0439 \u0441\u043b\u043e\u0439 \u043a\u0430\u0440\u0442\u044b<\/figcaption><\/div>\n<\/figure>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/29e\/ccb\/dce\/29eccbdceb9236f929b7d003a7f297af.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - 2-\u0439 \u0441\u043b\u043e\u0439 \u043a\u0430\u0440\u0442\u044b\" width=\"320\" height=\"294\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/29e\/ccb\/dce\/29eccbdceb9236f929b7d003a7f297af.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; 2-\u0439 \u0441\u043b\u043e\u0439 \u043a\u0430\u0440\u0442\u044b<\/figcaption><\/div>\n<\/figure>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/818\/6cb\/8b5\/8186cb8b587ce9bc852f9a6228b2bee2.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - 3-\u0439 \u0441\u043b\u043e\u0439 \u043a\u0430\u0440\u0442\u044b\" width=\"256\" height=\"241\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/818\/6cb\/8b5\/8186cb8b587ce9bc852f9a6228b2bee2.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; 3-\u0439 \u0441\u043b\u043e\u0439 \u043a\u0430\u0440\u0442\u044b<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0415\u0441\u043b\u0438 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432\u0441\u0435 \u0442\u0440\u0438 \u0441\u043b\u043e\u044f \u0438 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/components\/TileMap.ts#L622\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435<\/a> \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u043f\u043e\u0432\u0435\u0440\u0445 &#8212; \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0438\u0434\u0438\u0442 \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c.<\/p>\n<p>\u0412\u0441\u0435 \u044e\u043d\u0438\u0442\u044b \u0438 \u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0435, \u043d\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u044e\u0442 \u0432 \u043f\u043e\u043b\u0435 \u0437\u0440\u0435\u043d\u0438\u044f \u044f \u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043f\u0440\u0438 \u044d\u0442\u043e\u043c <code>renderable = false<\/code> \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e. \u042d\u0442\u043e \u0436\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0438 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439 \u043d\u0430 \u043c\u0438\u043d\u0438-\u043a\u0430\u0440\u0442\u0435. \u041f\u043e \u0441\u0443\u0442\u0438 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 <a href=\"https:\/\/gamedev.stackexchange.com\/questions\/44054\/efficiently-culling-off-screen-objects-on-a-top-down-2d-map\" rel=\"noopener noreferrer nofollow\">Culling<\/a> \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0430, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0432\u0438\u0434\u0435\u043e\u043a\u0430\u0440\u0442\u0443 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0442\u043e, \u0447\u0442\u043e \u0438 \u0442\u0430\u043a \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u0438\u0434\u043d\u043e.<\/p>\n<h3>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f: \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u043e \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u043e<\/h3>\n<p>\u0414\u043b\u044f \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0430 \u044e\u043d\u0438\u0442\u043e\u0432 \u043d\u0430 \u0431\u0430\u0437\u0435 <code>Base<\/code> \u0438\u043b\u0438 \u0437\u0430\u0432\u043e\u0434\u0435 <code>Starport<\/code> \u044f \u0434\u0435\u043b\u0430\u044e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435: \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e \u0435\u0441\u0442\u044c \u043b\u0438 \u043c\u0435\u0441\u0442\u043e, \u0447\u0442\u043e\u0431\u044b \u044e\u043d\u0438\u0442 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/buildings\/Base.ts#L181\" rel=\"noopener noreferrer nofollow\">\u0432\u043e\u0437\u043b\u0435 \u0437\u0434\u0430\u043d\u0438\u044f<\/a>, \u0438\u043b\u0438 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/buildings\/Starport.ts#L236\" rel=\"noopener noreferrer nofollow\">\u043d\u0430 \u0437\u0434\u0430\u043d\u0438\u0438<\/a>. \u0414\u0430\u043b\u044c\u0448\u0435 \u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0430, \u0438 \u043a\u043e\u0433\u0434\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u043e\u0434\u043e\u0448\u043b\u0430 \u043a \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u043c\u0443 \u043a\u0430\u0434\u0440\u0443, \u044f \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e \u0435\u0449\u0435 \u0440\u0430\u0437 \u043c\u0435\u0441\u0442\u043e \u0438 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0434\u0435\u043d\u0435\u0433 \u0438 \u043d\u0430\u043a\u043e\u043d\u0435\u0446 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/buildings\/Starport.ts#L327\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e \u044e\u043d\u0438\u0442<\/a> \u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439 \u0442\u0435\u043b\u0435\u043f\u043e\u0440\u0442\u0430\u0446\u0438\u0438 &#8212; \u043f\u043e \u0441\u0443\u0442\u0438 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/oop\/TeleportableSelectableLifeableRoundItem.ts#L32\" rel=\"noopener noreferrer nofollow\">\u043a\u0440\u0443\u0433 \u043f\u043e\u0432\u0435\u0440\u0445<\/a> \u044e\u043d\u0438\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c.<\/p>\n<p>\u0414\u043b\u044f \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0430 \u0437\u0434\u0430\u043d\u0438\u0439 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043f\u0435\u0440\u0435\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b. \u0421\u0430\u043c\u0430 \u0441\u0435\u0442\u043a\u0430 \u0434\u043b\u044f \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0430 \u043e\u0441\u0442\u0430\u043b\u0430\u0441\u044c <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/components\/TileMap.ts#L436\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u0435\u0436\u043d\u0435\u0439<\/a> \u043a\u0430\u043a \u0438 \u0432 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0435, \u044d\u0442\u043e \u0434\u0432\u0443\u0445\u043c\u0435\u0440\u043d\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432, \u0433\u0434\u0435 <code>0<\/code> \u0438 <code>1<\/code> \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438, \u043c\u043e\u0436\u043d\u043e \u043b\u0438 \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043d\u0430 \u0434\u0430\u043d\u043d\u043e\u0439 \u043a\u043b\u0435\u0442\u043a\u0435 \u0438\u043b\u0438 \u043d\u0435\u043b\u044c\u0437\u044f. \u0412 <code>Mobile\u200c \u200cFirst\u200c<\/code> \u043f\u043e\u0434\u0445\u043e\u0434\u0435, \u044f \u043d\u0435 \u043c\u043e\u0433\u0443 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043c\u0435\u0441\u0442\u043e \u0434\u043b\u044f \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0430 \u043f\u0440\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0438 \u043c\u044b\u0448\u0438 \u043f\u043e \u044d\u043a\u0440\u0430\u043d\u0443. \u042f \u0441\u0434\u0435\u043b\u0430\u043b \u043f\u043e \u0434\u0440\u0443\u0433\u043e\u043c\u0443, \u043f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u044f \u0440\u0438\u0441\u0443\u044e \u0441\u0435\u0442\u043a\u0443 \u043f\u043e\u0432\u0435\u0440\u0445 \u043a\u0430\u0440\u0442\u044b. \u0423 \u0441\u0435\u0442\u043a\u0438 \u0437\u0435\u043b\u0451\u043d\u044b\u0435 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u044b \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043a\u0443\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0437\u0434\u0430\u043d\u0438\u0435, \u043a\u0440\u0430\u0441\u043d\u044b\u0435 &#8212; \u043a\u0443\u0434\u0430 \u043d\u0435\u043b\u044c\u0437\u044f.<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u0441\u0435\u0442\u043a\u0430 \u0434\u043b\u044f \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0430<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0421\u0435\u0442\u043a\u0430 \u0434\u043b\u044f \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0430:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0c7\/6c1\/ab0\/0c76c1ab0964bd5e360982cc286d7c1e.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - \u0441\u0435\u0442\u043a\u0430 \u0434\u043b\u044f \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0430\" width=\"274\" height=\"288\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0c7\/6c1\/ab0\/0c76c1ab0964bd5e360982cc286d7c1e.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u0441\u0435\u0442\u043a\u0430 \u0434\u043b\u044f \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u0421\u0435\u0442\u043a\u0430 \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043d\u0435\u0444\u0442\u0435\u0432\u044b\u0448\u043a\u0438:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/15e\/d0b\/670\/15ed0b670b9e764cef16a3456fadfda1.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - \u0441\u0435\u0442\u043a\u0430 \u0434\u043b\u044f \u043d\u0435\u0444\u0442\u0435\u0432\u044b\u0448\u043a\u0438\" width=\"238\" height=\"297\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/15e\/d0b\/670\/15ed0b670b9e764cef16a3456fadfda1.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u0441\u0435\u0442\u043a\u0430 \u0434\u043b\u044f \u043d\u0435\u0444\u0442\u0435\u0432\u044b\u0448\u043a\u0438<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0421\u0435\u0442\u043a\u0430 \u0434\u043b\u044f \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0435 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u044e\u043d\u0438\u0442\u043e\u0432 <code>rebuildBuildableGrid()<\/code>, \u0447\u0442\u043e\u0431\u044b \u043d\u0435\u043b\u044c\u0437\u044f \u0431\u044b\u043b\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u043e \u043d\u0430 \u043c\u0435\u0441\u0442\u0435, \u0433\u0434\u0435 \u0441\u0442\u043e\u044f\u0442 \u044e\u043d\u0438\u0442\u044b. \u0415\u0441\u043b\u0438 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0442\u043a\u0443 \u043a\u0430\u043a \u043e\u0434\u0438\u043d \u043e\u0431\u0449\u0438\u0439 <code>Graphics<\/code> (\u043f\u043e\u043c\u043d\u0438\u0442\u0435 \u043f\u0440\u043e <code>2400<\/code> \u043a\u043b\u0435\u0442\u043e\u043a), \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044f \u043a \u043d\u0435\u043c\u0443 <code>drawRect<\/code> \u0438 \u043c\u0435\u043d\u044f\u0442\u044c \u0443 \u043d\u0435\u0433\u043e \u0446\u0432\u0435\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f <code>beginFill<\/code> &#8212; \u0442\u043e \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043d\u043e \u043c\u043e\u0439 \u0441\u0442\u0430\u0440\u0435\u043d\u044c\u043a\u0438\u0439 <code>iPhone 6s<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0438\u0433\u0440 &#8212; \u043d\u0435 \u0432\u044b\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u0442, \u0438 \u043f\u043e\u0441\u043b\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u0435\u0442\u043a\u0438 <code>Safari<\/code> \u0437\u0430\u0432\u0438\u0441\u0430\u0435\u0442. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u043e\u0439\u0434\u044f\u0441\u044c \u043f\u043e \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c \u044f \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0441\u044f \u043d\u0430 \u0442\u043e\u043c, \u0447\u0442\u043e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/utils\/Hitbox.ts#L9\" rel=\"noopener noreferrer nofollow\">\u0440\u0438\u0441\u0443\u044e \u043a\u0432\u0430\u0434\u0440\u0430\u0442 \u0435\u0434\u0438\u043d\u043e\u0436\u0434\u044b<\/a>, \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e \u0435\u0433\u043e \u0432 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443, \u0438 \u0437\u0430\u0442\u0435\u043c \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u044d\u0442\u0443 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043a\u043b\u0435\u0442\u043e\u043a \u043a\u0430\u0440\u0442\u044b. \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0432\u0441\u0435\u0445 \u043a\u043b\u0435\u0442\u043e\u043a \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 <code>hitboxes<\/code> \u044f \u0442\u043e\u0436\u0435 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/components\/TileMap.ts#L181\" rel=\"noopener noreferrer nofollow\">\u0434\u0435\u043b\u0430\u044e \u0435\u0434\u0438\u043d\u043e\u0436\u0434\u044b<\/a> &#8212; \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0440\u0430\u0437\u043d\u0438\u0446\u044b \u043c\u0435\u0436\u0434\u0443 <code>Container<\/code> \u0438 <code>ParticleContainer<\/code> \u043d\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u043b. \u0410 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0442\u0438\u043a\u0435, \u044f \u043f\u0440\u043e\u0445\u043e\u0436\u0443\u0441\u044c \u043f\u043e <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/utils\/Hitbox.ts#L46\" rel=\"noopener noreferrer nofollow\">\u0432\u0441\u0435\u043c \u043f\u043e\u0442\u043e\u043c\u043a\u0430\u043c \u0441\u0435\u0442\u043a\u0438<\/a> &#8212; \u0438 \u043f\u043e\u0434\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u044e \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443 \u0432 \u043d\u0443\u0436\u043d\u044b\u0439 \u0446\u0432\u0435\u0442, \u0442\u0435 \u0436\u0435 \u043a\u043b\u0435\u0442\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u043a\u0430\u043c\u0435\u0440\u044b \u044f \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e (<code>renderable = false<\/code>).<\/p>\n<p>\u0414\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043d\u0435\u0444\u0442\u0435\u0432\u044b\u0448\u043a\u0438 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0442\u043e\u0442 \u0436\u0435 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439, \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0435\u0442\u043a\u0443 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e \u0434\u0440\u0443\u0433\u0443\u044e, \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u044f \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0438\u0437 \u0441\u043b\u043e\u044f <code>Oilfields<\/code>, \u0438 \u043d\u0435\u0437\u0430\u043d\u044f\u0442\u044b\u0435 \u043c\u0435\u0441\u0442\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e \u0437\u0435\u043b\u0451\u043d\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c.<\/p>\n<h3>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f: \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f<\/h3>\n<p>\u041f\u043e\u0447\u0435\u043c\u0443-\u0442\u043e \u043f\u0440\u0438 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0435 \u044e\u043d\u0438\u0442\u043e\u0432 \u043e\u043a\u043e\u043b\u043e 20, \u0438\u0433\u0440\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u043b\u0430 \u0437\u0430\u043c\u0435\u0442\u043d\u043e \u0442\u043e\u0440\u043c\u043e\u0437\u0438\u0442\u044c \u0434\u0430\u0436\u0435 \u043d\u0430 \u043c\u043e\u0451\u043c \u043d\u043e\u0443\u0442\u0431\u0443\u043a\u0435. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u043f\u043e\u0448\u0435\u043b \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0438\u0441\u043f\u0435\u043a\u0442\u043e\u0440, \u0447\u0442\u043e \u0436\u0435 \u0442\u0430\u043c \u0442\u0432\u043e\u0440\u0438\u0442\u044c\u0441\u044f. \u0418 \u043f\u0440\u043e\u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u0430\u0434\u0440\u043e\u0432, \u044f \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u043f\u043e\u0438\u0441\u043a\u0430 \u043f\u0443\u0442\u0438 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0437\u0430\u0442\u0440\u0430\u0442\u043d\u044b\u0439. \u041e\u0434\u0438\u043d \u0444\u0440\u0435\u0439\u043c \u0438\u043d\u043e\u0433\u0434\u0430 \u0434\u043b\u0438\u043b\u0441\u044f \u043e\u043a\u043e\u043b\u043e <code>40<\/code> \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434.<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u043f\u043e\u0438\u0441\u043a \u0442\u043e\u0440\u043c\u043e\u0437\u043e\u0432 \u0432 \u0438\u043d\u0441\u043f\u0435\u043a\u0442\u043e\u0440\u0435<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/aac\/90e\/d64\/aac90ed64b5f324e696c410a50031ba9.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - \u043f\u043e\u0438\u0441\u043a \u0442\u043e\u0440\u043c\u043e\u0437\u043e\u0432 \u0432 \u0438\u043d\u0441\u043f\u0435\u043a\u0442\u043e\u0440\u0435\" width=\"1653\" height=\"768\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/aac\/90e\/d64\/aac90ed64b5f324e696c410a50031ba9.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u043f\u043e\u0438\u0441\u043a \u0442\u043e\u0440\u043c\u043e\u0437\u043e\u0432 \u0432 \u0438\u043d\u0441\u043f\u0435\u043a\u0442\u043e\u0440\u0435<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u042d\u0442\u043e\u0442 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u044f \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u043b \u0441 <a href=\"https:\/\/github.com\/adityaravishankar\/last-colony\/blob\/master\/js\/astar.js\" rel=\"noopener noreferrer nofollow\">JavaScript<\/a> \u043d\u0430 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/8497025b04aa520ddca91a475d9f8334ae08799c\/src\/utils\/AStar.ts\" rel=\"noopener noreferrer nofollow\">TypeScript<\/a>. \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0432 \u043d\u0451\u043c \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u043d\u0430\u0448\u0435\u043b \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0432 \u0432\u0438\u0434\u0435 <a href=\"https:\/\/github.com\/prettymuchbryce\/easystarjs\" rel=\"noopener noreferrer nofollow\">easystarjs<\/a> \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u043b <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/utils\/Pathfinder.ts#L22\" rel=\"noopener noreferrer nofollow\">\u043d\u0430 \u043d\u0435\u0451<\/a>.<\/p>\n<p>\u0412\u0442\u043e\u0440\u044b\u043c \u0447\u0442\u043e, \u0432\u044b\u0437\u0432\u0430\u043b\u043e \u043f\u043e\u0434\u043e\u0437\u0440\u0435\u043d\u0438\u0435, \u044d\u0442\u043e \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0434\u043e\u043b\u0433\u0438\u0439 \u0432\u044b\u0437\u043e\u0432 <code>checkCollisionObjects<\/code>. \u041f\u043e\u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0432 \u0431\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e, \u044f \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c <code>width<\/code> \u0438 <code>height<\/code> \u0433\u0440\u0430\u0444\u0438\u043a\u0438 <code>Graphics<\/code> &#8212; \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0434\u043e\u0440\u043e\u0433\u043e\u0441\u0442\u043e\u044f\u0449\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f. \u041d\u043e \u0442.\u043a. \u0443 \u043c\u0435\u043d\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u044f \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u043b \u044d\u0442\u0438 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043a \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u0440\u0430\u043d\u044f\u0442 \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443.<\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u0430\u0434\u0440\u0430 \u043f\u0440\u0438 \u0442\u043e\u043c \u0436\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0435 \u044e\u043d\u0438\u0442\u043e\u0432 \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u043b\u043e\u0441\u044c \u0441 <code>40<\/code> \u0434\u043e <code>5<\/code> \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434.<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/bde\/682\/325\/bde68232514b71dd72de06ffbafd6939.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438\" width=\"1631\" height=\"771\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/bde\/682\/325\/bde68232514b71dd72de06ffbafd6939.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0415\u0441\u043b\u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043b\u044c\u0448\u0435, \u0442\u043e \u044f \u0431\u044b \u0432\u043e\u043e\u0431\u0449\u0435 \u0432\u0441\u044e \u0433\u0440\u0430\u0444\u0438\u043a\u0443 \u0437\u0430\u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043b: \u043f\u043e\u043b\u043e\u0441\u044b \u0436\u0438\u0437\u043d\u0435\u0439, \u043f\u0435\u0440\u0435\u0437\u0430\u0440\u044f\u0434\u043a\u0438, \u043a\u0440\u0443\u0433\u0438\/\u043a\u0432\u0430\u0434\u0440\u0430\u0442\u044b \u0434\u043b\u044f \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f, \u043a\u0440\u0443\u0433\u0438 \u043e\u0431\u0437\u043e\u0440\u0430.<\/p>\n<h3>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f: \u0441\u0435\u0442\u0435\u0432\u0430\u044f \u0438\u0433\u0440\u0430<\/h3>\n<p>\u041f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435 \u0440\u0435\u0436\u0438\u043c\u0430 <code>Multiplayer<\/code> &#8212; \u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e \u044d\u043a\u0440\u0430\u043d \u0441\u0435\u0442\u0435\u0432\u043e\u0439 \u0438\u0433\u0440\u044b. \u041f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u044d\u0442\u043e \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u0434\u043b\u044f \u0430\u0434\u0440\u0435\u0441\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u043a \u043d\u0435\u043c\u0443 \u043f\u043e \u0432\u0435\u0431-\u0441\u043e\u043a\u0435\u0442\u0443. \u0411\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f <code>HTML<\/code> &#8212; \u044d\u0442\u043e \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0437\u0430\u0442\u0440\u0430\u0442\u043d\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0432\u044b\u0431\u0440\u0430\u043b \u043a\u043e\u043c\u043f\u0440\u043e\u043c\u0438\u0441\u0441\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 &#8212; \u0441\u0430\u043c\u043e \u043f\u043e\u043b\u0435 \u044f \u0440\u0438\u0441\u0443\u044e \u043d\u0430 <code>PixiJS<\/code>, \u0430 \u043f\u0440\u0438 &#171;\u0444\u043e\u043a\u0443\u0441\u0435&#187; \u043d\u0430 \u044d\u0442\u043e \u043f\u043e\u043b\u0435 &#8212; \u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e \u0432 <code>DOM<\/code> \u0434\u0435\u0440\u0435\u0432\u043e \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u043f\u043e\u043b\u0435 \u0441 \u0442\u0430\u043a\u0438\u043c\u0438 \u0436\u0435 \u0441\u0442\u0438\u043b\u044f\u043c\u0438, \u0438 \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u043f\u043e \u043d\u0435\u043c\u0443 \u0444\u043e\u043a\u0443\u0441. \u0422\u0430\u043a \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 &#8212; <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/components\/Input.ts#L10\" rel=\"noopener noreferrer nofollow\">Input<\/a>.<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u043d\u0430\u0447\u0430\u043b\u043e \u0441\u0435\u0442\u0435\u0432\u043e\u0439 \u0438\u0433\u0440\u044b<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/903\/4b3\/0cb\/9034b30cbc43e10414051944ca029e0f.png\" alt=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f - \u043d\u0430\u0447\u0430\u043b\u043e \u0441\u0435\u0442\u0435\u0432\u043e\u0439 \u0438\u0433\u0440\u044b\" width=\"377\" height=\"531\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/903\/4b3\/0cb\/9034b30cbc43e10414051944ca029e0f.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f &#8212; \u043d\u0430\u0447\u0430\u043b\u043e \u0441\u0435\u0442\u0435\u0432\u043e\u0439 \u0438\u0433\u0440\u044b<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0421\u0435\u0442\u0435\u0432\u043e\u0439 \u043a\u043e\u0434 \u044f \u0442\u043e\u0436\u0435 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u043b \u043d\u0430 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/server.ts\" rel=\"noopener noreferrer nofollow\">TypeScript<\/a>. \u041a\u043e\u0434 \u043d\u0435 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0435\u043d, \u0438 \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u0440\u0430\u0441\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u0445 \u043c\u0435\u0436\u0434\u0443 \u043a\u043b\u0438\u0435\u043d\u0442\u0430\u043c\u0438. \u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0434\u0432\u0438\u0436\u043e\u043a \u0438\u0433\u0440\u044b \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043e\u0442 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0435\u0439 &#8212; \u0432 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0434\u0432\u0438\u0436\u043e\u043a \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u0441\u043b\u0430\u0442\u044c\/\u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f.<\/p>\n<h3>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f: \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>\u0418\u0433\u0440\u0443 \u043c\u043e\u0436\u043d\u043e \u0435\u0449\u0451 \u0443\u043b\u0443\u0447\u0448\u0430\u0442\u044c \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u043e \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>\u0411\u0430\u043b\u0430\u043d\u0441 &#8212; \u0437\u0434\u0435\u0441\u044c \u044f \u0441\u0442\u0430\u0440\u0430\u043b\u0441\u044f \u043f\u043e\u0434\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044e\u043d\u0438\u0442\u0430, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0431\u044b\u043b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c. \u041b\u0451\u0433\u043a\u0438\u0439 \u0442\u0430\u043d\u043a \u0430\u0442\u0430\u043a\u0443\u0435\u0442 \u043f\u043e \u0432\u043e\u0437\u0434\u0443\u0445\u0443 \u0438 \u0437\u0435\u043c\u043b\u0435, \u0441\u0442\u0440\u0435\u043b\u044f\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u043e, \u0432\u0438\u0434\u0438\u0442 \u043c\u0430\u043b\u043e, \u0435\u0437\u0434\u0438\u0442 \u0431\u044b\u0441\u0442\u0440\u043e. \u0422\u044f\u0436\u0435\u043b\u044b\u0439 \u0442\u0430\u043d\u043a \u0430\u0442\u0430\u043a\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e \u0437\u0435\u043c\u043b\u0435, \u0434\u043e\u043b\u0433\u043e \u043f\u0435\u0440\u0435\u0437\u0430\u0440\u044f\u0436\u0430\u0435\u0442\u0441\u044f, \u043a\u0440\u0435\u043f\u043a\u0438\u0439. \u0412\u0435\u0440\u0442\u043e\u043b\u0451\u0442 \u0434\u0430\u043b\u0435\u043a\u043e \u0432\u0438\u0434\u0438\u0442 \u0438 \u0441\u0442\u0440\u0435\u043b\u044f\u0435\u0442, \u043d\u043e \u0430\u0442\u0430\u043a\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0437\u0435\u043c\u043d\u044b\u0435 \u0446\u0435\u043b\u0438. \u0421\u0430\u043c\u043e\u043b\u0451\u0442 \u0430\u0442\u0430\u043a\u0443\u0435\u0442 \u0432\u0441\u0435\u0445, \u043d\u043e \u0431\u043b\u0438\u0437\u043a\u043e \u0438 \u0434\u043e\u0440\u043e\u0433\u043e \u0441\u0442\u043e\u0438\u0442. \u0418 \u0442.\u0434.<\/p>\n<p>\u0418\u0433\u0440\u0430\u0442\u044c \u043f\u0440\u043e\u0442\u0438\u0432 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0418\u0418 \u043e\u0447\u0435\u043d\u044c \u043b\u0435\u0433\u043a\u043e, \u0442.\u043a. \u0418\u0418 \u0432 \u043c\u043e\u0451\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0431\u043e\u0440 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u043e\u0434\u0438\u043d \u0437\u0430 \u0434\u0440\u0443\u0433\u0438\u043c. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/utils\/AI.ts#L169\" rel=\"noopener noreferrer nofollow\">\u044f \u0441\u043e\u0431\u0438\u0440\u0430\u044e \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0443<\/a> \u043f\u043e \u0432\u0441\u0435\u043c \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u043c, \u0438 \u043f\u043e\u0442\u043e\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e \u0442\u0440\u0435\u0431\u0443\u0435\u043c\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443, \u043a\u0430\u043a \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0435\u0449\u0435 \u0437\u0430\u0432\u043e\u0434 \u0438\u043b\u0438 \u0442\u0443\u0440\u0435\u043b\u044c, \u043f\u043e\u0441\u043b\u0430\u0442\u044c \u0432 \u0430\u0442\u0430\u043a\u0443 \u0438 \u0442.\u0434. \u0412\u044b\u0437\u043e\u0432 \u0418\u0418 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0432 <a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\/blob\/9be1a9b0b1f5a96dfc185bb03e1e175ef7967b7c\/src\/utils\/AI.ts#L130\" rel=\"noopener noreferrer nofollow\">100<\/a> \u0444\u0440\u0435\u0439\u043c\u043e\u0432. \u0418\u0418 \u0441\u0435\u0439\u0447\u0430\u0441 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d \u0436\u0435\u0441\u0442\u043a\u043e \u043a \u043a\u0430\u0440\u0442\u0435, \u0430 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b, \u0447\u0442\u043e\u0431\u044b \u043e\u043d &#171;\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0441\u044f&#187; \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u043a\u0430\u0440\u0442\u0435.<\/p>\n<p>\u0423 \u044e\u043d\u0438\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u043b\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435 \u0430\u0442\u0430\u043a\u0443\u0435\u043c\u043e\u0433\u043e \u0432 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u0435 \u0431\u044b\u043b \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u0439 \u044e\u043d\u0438\u0442. \u041f\u0440\u0438 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u0430\u0443\u0434\u0438\u043e, \u0432\u044b\u0431\u0438\u0440\u0430\u043b\u0441\u044f \u0433\u043e\u043b\u043e\u0441 \u0441\u0430\u043c\u043e\u0433\u043e \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u043e\u0433\u043e \u044e\u043d\u0438\u0442\u0430.<\/p>\n<p>\u041d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u043f\u0430\u043d\u0435\u043b\u0438 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f, \u0442.\u0435. \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0441\u0435\u0433\u043e \u044e\u043d\u0438\u0442\u043e\u0432 \u0432\u044b\u0431\u0440\u0430\u043d\u043e.<\/p>\n<p>\u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c. \u0422.\u043a. \u043f\u0430\u043d\u0435\u043b\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u0438\u043b\u0438 \u043a\u0430\u0440\u0442\u0430 \u0441\u0435\u0439\u0447\u0430\u0441 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0432\u0435\u0440\u0445\u0443, \u0430 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u043f\u0430\u043d\u0435\u043b\u0438 \u0432 \u043b\u044e\u0431\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u044d\u043a\u0440\u0430\u043d\u0430.<\/p>\n<p>\u0423 \u0428\u0430\u043d\u043a\u0430\u0440\u0430 \u0435\u0441\u0442\u044c \u043d\u0435\u0434\u043e\u0434\u0435\u043b\u0430\u043d\u043d\u0430\u044f \u0438\u0433\u0440\u0430 <a href=\"https:\/\/github.com\/adityaravishankar\/command-and-conquer\" rel=\"noopener noreferrer nofollow\">Command &amp; Conquer &#8212; HTML5<\/a> &#8212; \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e \u0441\u0443\u0442\u0438 \u043f\u043e\u0445\u043e\u0436\u0430 \u043d\u0430 \u0435\u0433\u043e \u0438\u0433\u0440\u0443 <a href=\"https:\/\/github.com\/adityaravishankar\/last-colony\" rel=\"noopener noreferrer nofollow\">Last Colony<\/a>, \u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u043b\u0435\u0433\u043a\u043e \u0431\u044b\u0442\u044c \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u043d\u0430 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043c\u043e\u0435\u0439.<\/p>\n<p>\u041e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u0441\u043e\u0432\u0435\u0442\u044b \u0434\u043b\u044f <code>PixiJS<\/code> \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0432\u0438\u0434\u0435\u043e <a href=\"https:\/\/www.youtube.com\/watch?v=EvD9PBzJLiA\" rel=\"noopener noreferrer nofollow\">PixiJS &#8212; 12 \u0441\u043e\u0432\u0435\u0442\u043e\u0432 \u0434\u043b\u044f \u043d\u043e\u0432\u0438\u0447\u043a\u043e\u0432<\/a><\/p>\n<p>\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u0432\u0441\u0435\u0445 \u0438\u0433\u0440:<br \/><a href=\"https:\/\/github.com\/volodalexey\/simple-html5-rts-game\" rel=\"noopener noreferrer nofollow\">\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f<\/a><br \/><a href=\"https:\/\/github.com\/volodalexey\/simple-html5-es-game\" rel=\"noopener noreferrer nofollow\">\u042d\u043b\u044c\u0444 \u0438 \u043e\u0440\u043a\u0438<\/a><br \/><a href=\"https:\/\/github.com\/volodalexey\/simple-html5-vp-game\" rel=\"noopener noreferrer nofollow\">\u041f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u0440<\/a><br \/><a href=\"https:\/\/github.com\/volodalexey\/simple-html5-mrp-game\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u043c\u043d\u0430\u0442\u044b<\/a><br \/><a href=\"https:\/\/github.com\/volodalexey\/simple-html5-sidescroller-game\" rel=\"noopener noreferrer nofollow\">\u0421\u043a\u0440\u043e\u043b\u043b\u0435\u0440<\/a><br \/><a href=\"https:\/\/github.com\/volodalexey\/simple-html5-td-game\" rel=\"noopener noreferrer nofollow\">\u0411\u0430\u0448\u0435\u043d\u043a\u0438<\/a><br \/><a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pacman-game\" rel=\"noopener noreferrer nofollow\">\u041f\u0430\u043a\u043c\u0430\u043d<\/a><br \/><a href=\"https:\/\/github.com\/volodalexey\/simple-html5-galaxian-game\" rel=\"noopener noreferrer nofollow\">\u0413\u0430\u043b\u0430\u043a\u0442\u0438\u043a\u0430<\/a><br \/><a href=\"https:\/\/github.com\/volodalexey\/simple-html5-fighting-game\" rel=\"noopener noreferrer nofollow\">\u0414\u0440\u0430\u043a\u0438<\/a><br \/><a href=\"https:\/\/github.com\/volodalexey\/simple-html5-mario-game\" rel=\"noopener noreferrer nofollow\">\u041c\u0430\u0440\u0438\u043e<\/a><br \/><a href=\"https:\/\/github.com\/volodalexey\/simple-html5-shooting-game\" rel=\"noopener noreferrer nofollow\">\u0421\u0442\u0440\u0435\u043b\u044f\u043b\u043a\u0438<\/a><br \/><a href=\"https:\/\/github.com\/volodalexey\/simple-html5-pokemon-game\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u043a\u0435\u043c\u043e\u043d<\/a><br \/><a href=\"https:\/\/github.com\/volodalexey\/simple-html5-farm-game\" rel=\"noopener noreferrer nofollow\">\u0424\u0435\u0440\u043c\u0430<\/a><\/p>\n<p><a href=\"https:\/\/volodalexey.github.io\/portfolio\/\" rel=\"noopener noreferrer nofollow\">\u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u0441\u0435\u0445 \u0438\u0433\u0440<\/a><\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p> <!----> <!----><\/div>\n<p> <!----> <!----><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\/articles\/741086\/\"> https:\/\/habr.com\/ru\/articles\/741086\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u043e\u043f\u0438\u0441\u0430\u043b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 13-\u0442\u0438 \u0438\u0433\u0440 \u043d\u0430 <code>PixiJS<\/code>. \u041e\u043a\u043e\u043b\u043e 70% \u0442\u0435\u043a\u0441\u0442\u0430 &#8212; \u044d\u0442\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0438 \u0438\u0433\u0440, \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 &#8212; \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0430 <code>PixiJS<\/code>. \u041f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u043c\u043d\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430, \u0442.\u043a. \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0432\u0435\u0442\u044b \u0434\u043b\u044f <code>PixiJS<\/code> \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0435\u0435 \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c \u0438\u0437 \u0438\u0433\u0440.<\/p>\n<p>\u0421\u0430\u043c\u0430\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0438\u0433\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u0430\u043c\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0438 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439.<\/p>\n<h2>\u041d\u0430 \u0447\u0451\u043c \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c?<\/h2>\n<p>\u0415\u0441\u043b\u0438 \u043c\u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0447\u0442\u043e-\u0442\u043e \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0432 <code>HTMLCanvasElement<\/code> \u0443 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u043f\u0446\u0438\u0439:<\/p>\n<ol>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0438\u043b\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a.<\/p>\n<\/li>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e <code>2d<\/code> \u0438\u043b\u0438 <code>webgl<\/code> \u0432 \u0432\u0438\u0434\u0435 API \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 <code>CanvasRenderingContext2D<\/code>, <code>WebGLRenderingContext<\/code>.<\/p>\n<\/li>\n<\/ol>\n<p>\u0420\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u044f \u0445\u043e\u0447\u0443 \u0434\u0432\u0443\u0445\u043c\u0435\u0440\u043d\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f (\u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b) &#8212; \u0434\u0432\u0443\u0445\u043c\u0435\u0440\u043d\u044b\u0435 \u0438\u0433\u0440\u044b.<\/p>\n<p>\u0412\u043a\u0440\u0430\u0442\u0446\u0435 \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a:<\/p>\n<ul>\n<li>\n<p><code>2d<\/code> \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 &#8212; \u0440\u0438\u0441\u0443\u0435\u0442 \u0432\u0441\u0451 \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u044b\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u043e\u043c <code>CPU<\/code>.<\/p>\n<\/li>\n<li>\n<p><code>webgl<\/code> \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 &#8212; \u0440\u0438\u0441\u0443\u0435\u0442 \u0432\u0441\u0451 \u043d\u0430 \u0432\u0438\u0434\u0435\u043e\u043a\u0430\u0440\u0442\u0435 <code>GPU<\/code>, \u0430 \u0442\u043e\u0447\u043d\u0435\u0435 \u043c\u043d\u043e\u0433\u043e \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u043e\u0432 \u043d\u0430 \u0432\u0438\u0434\u0435\u043e\u043a\u0430\u0440\u0442\u0435 \u0440\u0430\u0441\u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u0438\u0432\u0430\u044e\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0434\u0432\u0443\u0445\u043c\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0443\u043c\u0435\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 <code>2d<\/code> \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442. \u041e\u0434\u043d\u0430\u043a\u043e \u043d\u0438\u0447\u0442\u043e \u043d\u0435 \u043c\u0435\u0448\u0430\u0435\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0434\u0432\u0443\u0445\u043c\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0438 \u043d\u0430 <code>webgl<\/code>. \u0414\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0432\u0438\u0434\u0435\u043e\u043a\u0430\u0440\u0442\u044b \u043d\u0430 \u043f\u043e\u043b\u043d\u0443\u044e \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435 \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>webgl<\/code>.<\/p>\n<p>\u041d\u0443\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u0432\u0435\u0449\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 <code>webgl<\/code>, \u0430 \u0435\u0441\u0442\u044c \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442 \u0432 <code>2d<\/code>. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <a href=\"https:\/\/pixijs.download\/release\/docs\/PIXI.html#BLEND_MODES\" rel=\"noopener noreferrer nofollow\">BLEND_MODES<\/a>, \u0442\u0430\u043a\u0430\u044f \u0432\u0435\u0449\u044c \u0434\u043b\u044f &#171;\u0441\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u044f&#187; \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043d\u0430 <code>webgl<\/code> \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d, \u0437\u0430\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f <code>2d<\/code> \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0442\u0443\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/CanvasRenderingContext2D\/globalCompositeOperation\" rel=\"noopener noreferrer nofollow\">\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439<\/a>.<\/p>\n<p>\u042f \u0445\u043e\u0447\u0443 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0434\u0432\u0443\u0445\u043c\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043d\u0430 <code>webgl<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443.<\/p>\n<h2>\u041f\u043e\u0447\u0435\u043c\u0443 PixiJS ?<\/h2>\n<p>\u0411\u044b\u0441\u0442\u0440\u043e \u043f\u0440\u043e\u0431\u0435\u0436\u0430\u0432\u0448\u0438\u0441\u044c \u043f\u043e \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u043c\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u0443:<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<th>\n<p>\u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435<\/p>\n<\/th>\n<th>\n<p>\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442<\/p>\n<\/th>\n<th>\n<p>\u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0432\u0451\u0437\u0434 \u043d\u0430 github<\/p>\n<\/th>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><a href=\"https:\/\/github.com\/mrdoob\/three.js\/\" rel=\"noopener noreferrer nofollow\">ThreeJS<\/a><\/p>\n<\/td>\n<td>\n<p align=\"left\">webgl<\/p>\n<\/td>\n<td>\n<p align=\"left\">92k<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><a href=\"https:\/\/github.com\/pixijs\/pixijs\" rel=\"noopener noreferrer nofollow\">PixiJS<\/a><\/p>\n<\/td>\n<td>\n<p align=\"left\">2d, webgl<\/p>\n<\/td>\n<td>\n<p align=\"left\">40k<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><a href=\"https:\/\/github.com\/photonstorm\/phaser\" rel=\"noopener noreferrer nofollow\">PhaserJS<\/a><\/p>\n<\/td>\n<td>\n<p align=\"left\">2d, webgl<\/p>\n<\/td>\n<td>\n<p align=\"left\">34.5k<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><a href=\"https:\/\/github.com\/fabricjs\/fabric.js\" rel=\"noopener noreferrer nofollow\">FabricJS<\/a><\/p>\n<\/td>\n<td>\n<p align=\"left\">2d<\/p>\n<\/td>\n<td>\n<p align=\"left\">24.9k<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><a href=\"https:\/\/github.com\/BabylonJS\/Babylon.js\" rel=\"noopener noreferrer nofollow\">BabylonJS<\/a><\/p>\n<\/td>\n<td>\n<p align=\"left\">webgl<\/p>\n<\/td>\n<td>\n<p align=\"left\">20.7k<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\"><a href=\"https:\/\/github.com\/playcanvas\/engine\" rel=\"noopener noreferrer nofollow\">PlayCanvas<\/a><\/p>\n<\/td>\n<td>\n<p align=\"left\">webgl<\/p>\n<\/td>\n<td>\n<p align=\"left\">8.4k<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0415\u0441\u043b\u0438 \u0431\u044b \u044f \u0445\u043e\u0442\u0435\u043b \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0433\u0440\u0430\u043c\u0438 \u043d\u0430 <code>JavaScript<\/code>, \u0442\u043e <code>PlayCanvas<\/code>, <code>PhaserJS<\/code> \u0438\u043b\u0438 <code>BabylonJS<\/code> \u0441\u043e\u0437\u0434\u0430\u043d\u044b \u0438\u043c\u0435\u043d\u043d\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e. \u041c\u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0438\u0441\u0430\u0442\u044c \u043c\u0435\u043d\u044c\u0448\u0435 \u043a\u043e\u0434\u0430, \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043b\u043e\u043c\u0430\u0442\u044c \u0433\u043e\u043b\u043e\u0432\u0443 \u0433\u0434\u0435 \u0432\u0437\u044f\u0442\u044c \u0434\u0432\u0438\u0436\u043e\u043a \u0434\u043b\u044f \u0444\u0438\u0437\u0438\u043a\u0438 \u0438 \u0442.\u0434.<\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u0431\u043e\u043b\u0435\u0435 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0435 <code>PixiJS<\/code> \/ <code>FabricJS<\/code> \/ <code>ThreeJS<\/code> \u0441\u043e\u0437\u0434\u0430\u043d\u044b \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0438\u0433\u0440. \u042f \u0440\u0435\u0448\u0438\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u043d\u0430 <code>JS<\/code> \u0432\u043d\u0430\u0447\u0430\u043b\u0435. \u0414\u043b\u044f \u0438\u043d\u0434\u0438-\u0438\u0433\u0440 \u043c\u043d\u0435 \u0445\u0432\u0430\u0442\u0438\u0442, \u0430 \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u044b\u0445 <code>AAA<\/code> \u0438\u0433\u0440 \u043c\u043d\u0435 \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u044f\u0437\u044b\u043a &#8212; \u0438 \u0443\u0447\u0438\u0442\u044c <code>JS<\/code> \u0438\u0433\u0440\u043e\u0432\u044b\u0435 \u0434\u0432\u0438\u0436\u043a\u0438 \u0431\u0435\u0437 \u043e\u0441\u043e\u0431\u043e\u0439 \u043d\u0430\u0434\u043e\u0431\u043d\u043e\u0441\u0442\u0438. \u0418\u0437 \u043c\u0438\u043d\u0443\u0441\u043e\u0432, \u043f\u0438\u0441\u0430\u0442\u044c \u0438\u0433\u0440\u044b \u043d\u0430 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0445 \u0431\u043e\u043b\u0435\u0435 \u0437\u0430\u0442\u0440\u0430\u0442\u043d\u043e \u043f\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n<p>\u0423\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u0433\u043e\u0434\u044f\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0432, \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0434\u0432\u0443\u0445\u043c\u0435\u0440\u043d\u043e\u0433\u043e \u0438 \u0442\u0440\u0451\u0445\u043c\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435. \u0410 \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u0441\u0442\u0440\u043e\u0447\u043a\u043e\u0439 \u0432 \u0440\u0435\u0437\u044e\u043c\u0435.<\/p>\n<p>\u0414\u043b\u044f \u0431\u043e\u043b\u0435\u0435-\u043c\u0435\u043d\u0435\u0435 \u0434\u043e\u043b\u0433\u043e\u0438\u0433\u0440\u0430\u044e\u0449\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0432\u0437\u044f\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0435 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u043e\u0435. <code>FabricJS<\/code> &#8212; \u0443\u043c\u0435\u0435\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0434\u043b\u044f <code>NodeJS<\/code>, \u043d\u043e \u043d\u0435 \u0443\u043c\u0435\u0435\u0442 \u0432 <code>webgl<\/code> \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u0430 \u0434\u043b\u044f \u0438\u0433\u0440 \u043d\u0443\u0436\u043d\u043e \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0431\u044b\u0441\u0442\u0440\u043e \u0438 \u043c\u043d\u043e\u0433\u043e. <code>ThreeJS<\/code> &#8212; \u0431\u043e\u043b\u044c\u0448\u0435 \u0434\u043b\u044f \u0442\u0440\u0451\u0445\u043c\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430.<\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u044f \u0432\u0437\u044f\u043b <code>PixiJS<\/code> \u043a\u0430\u043a \u0441\u0430\u043c\u0443\u044e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0443\u044e, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u0443\u044e \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0434\u0432\u0443\u0445\u043c\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043d\u0430 <code>webgl<\/code>.<\/p>\n<p><code>PixiJS<\/code> \u0434\u0430\u0436\u0435 \u0443\u043c\u0435\u0435\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0432 <code>2d<\/code> \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435, \u043d\u043e \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/www.npmjs.com\/package\/pixi.js-legacy\" rel=\"noopener noreferrer nofollow\">pixi.js-legacy<\/a> &#8212; \u044f \u0442\u0430\u043a\u043e\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0443.<\/p>\n<h2>PixiJS \u0432\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<p>\u0412 <code>2016<\/code> \u0433\u043e\u0434\u0443 \u0441\u0430\u043c\u044b\u0439 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0432 \u043c\u0438\u0440\u0435 <code>Chrome<\/code> \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u0451\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c <a href=\"https:\/\/blog.google\/products\/chrome\/flash-and-chrome\/\" rel=\"noopener noreferrer nofollow\">Adobe Flash Player<\/a>. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u0430\u043c\u0435\u043d\u044b \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u043b\u043e\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>HTML5<\/code> \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e:<\/p>\n<ul>\n<li>\n<p><code>2d<\/code> \u0438 <code>webgl<\/code> \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u044b \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/Web_Audio_API\" rel=\"noopener noreferrer nofollow\">Web Audio API<\/a> \u0438 <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/HTMLMediaElement\" rel=\"noopener noreferrer nofollow\">HTMLMediaElement<\/a> \u0434\u043b\u044f \u0437\u0432\u0443\u043a\u0430 \u0438 \u0432\u0438\u0434\u0435\u043e.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/WebSocket\" rel=\"noopener noreferrer nofollow\">WebSocket<\/a> \u0438 <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/WebRTC_API\" rel=\"noopener noreferrer nofollow\">WebRTC API<\/a> \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043a\u043e\u043c\u043c\u0443\u043d\u0438\u043a\u0430\u0446\u0438\u0438 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u0443\u043c\u0430\u044e \u0441\u0432\u043e\u0435\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u0432\u044b\u0445\u043e\u0434 <code>PixiJS<\/code> \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447 &#8212; \u043f\u043e\u043c\u043e\u0433\u043b\u0438 <code>Flash<\/code> \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430 <code>HTML5<\/code>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u0431\u0443\u0441\u043b\u043e\u0432\u0438\u043b\u0438 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442\/\u043a\u043b\u0430\u0441\u0441 \u0432 PixiJS &#8212; \u044d\u0442\u043e <a href=\"https:\/\/pixijs.io\/guides\/basics\/display-object.html\" rel=\"noopener noreferrer nofollow\">DisplayObject<\/a>. \u041d\u043e \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044f \u0435\u0433\u043e \u043d\u0435 \u0431\u0443\u0434\u0443.<\/p>\n<p>\u042f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442\u044b\/\u043a\u043b\u0430\u0441\u0441\u044b \u0443\u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043e\u0442 <code>DisplayObject<\/code>:<\/p>\n<ul>\n<li>\n<p>\u0441\u043f\u0440\u0430\u0439\u0442 <a href=\"https:\/\/pixijs.io\/guides\/basics\/sprites.html\" rel=\"noopener noreferrer nofollow\">Sprite<\/a> \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 (\u0442\u0435\u043a\u0441\u0442\u0443\u0440);<\/p>\n<\/li>\n<li>\n<p>\u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u0440\u0430\u0439\u0442 <a href=\"https:\/\/pixijs.download\/release\/docs\/PIXI.AnimatedSprite.html\" rel=\"noopener noreferrer nofollow\">AnimatedSprite<\/a>, \u0442.\u0435. \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u0435\u043d\u044f\u0435\u0442 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0441\u043f\u0440\u0430\u0439\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430 \u0438\u043b\u0438 \u0432\u0440\u0443\u0447\u043d\u0443\u044e;<\/p>\n<\/li>\n<li>\n<p>\u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0433\u0440\u0430\u0444\u0438\u043a\u0443 <a href=\"https:\/\/pixijs.io\/guides\/basics\/graphics.html\" rel=\"noopener noreferrer nofollow\">Graphics<\/a>, \u0442.\u0435. \u043b\u0438\u043d\u0438\u0438, \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438, \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u044b, \u043c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438, \u0434\u0443\u0433\u0438, \u0430\u0440\u043a\u0438, \u043a\u0440\u0443\u0433\u0438 \u0438 \u0442.\u0434.;<\/p>\n<\/li>\n<li>\n<p>\u0442\u0435\u043a\u0441\u0442 <a href=\"https:\/\/pixijs.io\/guides\/basics\/text.html\" rel=\"noopener noreferrer nofollow\">Text<\/a>;<\/p>\n<\/li>\n<li>\n<p>\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 <a href=\"https:\/\/pixijs.io\/guides\/basics\/containers.html\" rel=\"noopener noreferrer nofollow\">Container<\/a>, \u043a\u0443\u0434\u0430 \u0432\u0441\u0451 \u0432\u044b\u0448\u0435\u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d\u043d\u043e\u0435 \u0431\u0443\u0434\u0443 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u0438 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c (\u043f\u0435\u0440\u0435\u0434\u0432\u0438\u0433\u0430\u0442\u044c, \u043f\u043e\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c, \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043f\u043e\u0434\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c\/\u0437\u0430\u0442\u0435\u043d\u044f\u0442\u044c, \u0441\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0438\u043b\u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c).<\/p>\n<\/li>\n<\/ul>\n<p><code>Container<\/code> \u0445\u0440\u0430\u043d\u0438\u0442 \u0434\u0435\u0440\u0435\u0432\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432-\u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0435\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f <code>parent<\/code>, \u0435\u0433\u043e \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432 <code>children<\/code>. \u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u0442\u043e\u043c\u043a\u0430 <code>addChild()<\/code>, \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u043f\u043e\u0442\u043e\u043c\u043a\u0430 <code>removeChild()<\/code> \u0438\u043b\u0438 \u0441\u0430\u043c\u043e\u0443\u0434\u0430\u043b\u0438\u0442\u044c\u0441\u044f <code>removeFromParent()<\/code>.<\/p>\n<p><code>Sprite<\/code>, <code>AnimatedSprite<\/code>, <code>Graphics<\/code> \u0438 <code>Text<\/code> \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442\u0441\u044f \u043e\u0442 <code>Container<\/code>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u043d\u0438\u0445 \u0442\u043e\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0438 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u0438.<\/p>\n<p>\u0421 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u043e\u0439 \u043d\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432, \u043a\u0430\u0436\u0434\u044b\u0439 \u043f\u043e\u0442\u043e\u043c\u043e\u043a \u043c\u043e\u0436\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u043e\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0441\u043b\u0438 \u0432\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u0443\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u043a\u0443\u0434\u0430-\u0442\u043e \u0435\u0449\u0451, \u0442\u043e \u043e\u043d \u0441\u0430\u043c\u043e\u0443\u0434\u0430\u043b\u0438\u0442\u044c\u0441\u044f \u0438\u0437 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f.<\/p>\n<p>\u0412\u0441\u0451 \u044d\u0442\u043e \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442 <a href=\"https:\/\/learn.javascript.ru\/dom-nodes\" rel=\"noopener noreferrer nofollow\">DOM-\u0434\u0435\u0440\u0435\u0432\u043e<\/a>, \u043d\u0435 \u0442\u0430\u043a \u043b\u0438? \u0410 \u0432\u0435\u0437\u0434\u0435 \u0433\u0434\u0435 \u0435\u0441\u0442\u044c \u0434\u0435\u0440\u0435\u0432\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435\u0440 \u0445\u043e\u0447\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c&#8230; \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, <a href=\"https:\/\/github.com\/facebook\/react\/\" rel=\"noopener noreferrer nofollow\">React<\/a>! \u0422\u0430\u043a\u043e\u0435 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u0432 \u0432\u0438\u0434\u0435 <a href=\"https:\/\/github.com\/pixijs\/pixi-react\" rel=\"noopener noreferrer nofollow\">Pixi React<\/a> &#8212; \u043d\u043e \u044f \u0442\u0430\u043a\u043e\u0435 \u043d\u0435 \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>\u0412\u043a\u0440\u0430\u0442\u0446\u0435 \u043c\u043e\u044f \u0438\u0433\u0440\u0430 \u043d\u0430 <code>PixiJS<\/code> \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e:<\/p>\n<ul>\n<li>\n<p>\u0421\u0446\u0435\u043d\u0430. \u0422.\u043a. \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u0434\u043b\u044f \u0441\u0446\u0435\u043d\u044b \u0432 <code>PixiJS<\/code> \u043d\u0435\u0442, \u0442\u043e \u0441\u0446\u0435\u043d\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u043a\u0443\u0434\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b. \u0415\u0441\u0442\u044c \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f <a href=\"https:\/\/pixijs.download\/release\/docs\/PIXI.Application.html#stage\" rel=\"noopener noreferrer nofollow\">Stage<\/a>.<\/p>\n<details class=\"spoiler\">\n<summary>IScene<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">import { Container, type DisplayObject } from 'pixi.js'  interface IScene extends DisplayObject {   handleUpdate: (deltaMS: number) => void   handleResize: (options: { viewWidth: number, viewHeight: number }) => void }  class DefaultScene extends Container implements IScene {   handleUpdate (): void {}   handleResize (): void {} } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<\/li>\n<li>\n<p>\u041c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0446\u0435\u043d. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u0446\u0435\u043d\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432. \u0421\u0446\u0435\u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u043c\u0435\u043d\u044e. \u0421\u0446\u0435\u043d\u0430 \u0441\u0430\u043c\u043e\u0439 \u0438\u0433\u0440\u044b. \u0414\u043b\u044f \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0446\u0435\u043d\u0430\u043c\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e <code>SceneManager<\/code>.<\/p>\n<details class=\"spoiler\">\n<summary>SceneManager<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">abstract class SceneManager {     private static currentScene: IScene = new DefaultScene()     public static async initialize (): Promise&lt;void> {}     public static async changeScene (newScene: IScene): Promise&lt;void> {       this.currentScene = newScene     } } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u043a\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e <code>Assets<\/code> \u043c\u043e\u0434\u0443\u043b\u044c (\u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a). \u041a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0435\u0437 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0438 \u043f\u0430\u0440\u0441\u0438\u0442 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 <code>.jpg<\/code>, <code>.png<\/code>, <code>.json<\/code>, <code>.tiff<\/code>\/<code>.woff2<\/code>. \u0412 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u043a\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u043e\u0431\u044b\u0447\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u0441\u0446\u0435\u043d\u0443 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. \u0412 \u0441\u0446\u0435\u043d\u0435 \u0440\u0438\u0441\u0443\u044e \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0432 \u0432\u0438\u0434\u0435 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0448\u0438\u0440\u0438\u043d\u0435. \u0412\u0441\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0438\u0442\u044c \u0432 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442\u0435 \u0438 \u043f\u043e\u0442\u043e\u043c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a \u043f\u0435\u0440\u0435\u0434\u0430\u0432 \u0435\u043c\u0443 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442.<\/p>\n<details class=\"spoiler\">\n<summary>\u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442\u0430 \u0432 \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">import { Container, Assets, type ResolverManifest } from 'pixi.js'  const manifest: ResolverManifest = {   bundles: [     {       name: 'bundle-1',       assets: {         spritesheet: '.\/spritesheet.json',         background: '.\/background.png',         font: '.\/font.woff2'       }     }   ] }  class LoaderScene extends Container implements IScene {   async initializeLoader (): Promise&lt;void> {     await Assets.init({ manifest })     await Assets.loadBundle(manifest.bundles.map(bundle => bundle.name), this.downloadProgress)   }    private readonly downloadProgress = (progressRatio: number): void => {} } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<\/li>\n<li>\n<p>\u0414\u0432\u0438\u0436\u043e\u043a \u0438\u043b\u0438 \u044f\u0434\u0440\u043e \u0438\u0433\u0440\u044b <code>World<\/code>\/<code>Game<\/code> &#8212; \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0443 \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u0430, \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 <a href=\"https:\/\/pixijs.download\/release\/docs\/PIXI.Application.html\" rel=\"noopener noreferrer nofollow\">Application<\/a> \u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0443\u0436\u0435 \u0433\u043e\u0442\u043e\u0432\u044b\u0439, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0432 \u0441\u0446\u0435\u043d\u0443, \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430 <a href=\"https:\/\/pixijs.download\/release\/docs\/PIXI.Ticker.html\" rel=\"noopener noreferrer nofollow\">Ticker<\/a>, \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f <code>resize<\/code>, <code>pointer...<\/code>, <code>key...<\/code>.<\/p>\n<details class=\"spoiler\">\n<summary>World\/Game<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">import { type Application } from 'pixi.js'  class World {   public app: Application&lt;HTMLCanvasElement>   constructor ({ app }: { app: Application&lt;HTMLCanvasElement> }) {     this.app = app     this.app.ticker.add(this.handleAppTick)     this.container.on('pointertap', this.handleClick)   }    handleAppTick = (): void => {}   handleClick = (): void => {} } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<\/li>\n<li>\n<p>\u041b\u044e\u0431\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u0438\u0433\u0440\u0435 \u043c\u043e\u0436\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u0451 \u0442\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u0447\u0442\u043e \u0438 \u044f\u0434\u0440\u043e \u0438\u0433\u0440\u044b, \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0431\u043e\u043b\u044c\u0448\u0435\u043c \u0438\u043b\u0438 \u043c\u0435\u043d\u044c\u0448\u0435\u043c \u043e\u0431\u044a\u0451\u043c\u0435. \u0417\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 <code>Application<\/code>.<\/p>\n<details class=\"spoiler\">\n<summary>\u043f\u0440\u0438\u043c\u0435\u0440 StartModal \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">import { Container, Graphics, Text, Texture } from 'pixi.js'  class StartModal extends Container {   public background!: Graphics   public text!: Text   public icon!: Sprite   constructor (texture: Texture) {     super()     this.setup(texture)     this.draw()   }    setup (texture: Texture): void {     this.background = new Graphics()     this.addChild(this.background)      this.text = new Text('\u041f\u0440\u0438\u0432\u0435\u0442 Habr!')     this.addChild(this.text)      this.icon = new Sprite(texture)     this.addChild(this.icon)   }    draw (): void {     this.background.beginFill(0xff00ff)     this.background.drawRoundedRect(0, 0, 500, 500, 5)     this.background.endFill()   } } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<\/li>\n<\/ul>\n<h2>\u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/h2>\n<p>\u0414\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u0433\u0440 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u0437 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430. \u0420\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c \u043a\u043e\u0434 \u043d\u0430 \u0444\u0430\u0439\u043b\u044b \u0438 \u043c\u043e\u0434\u0443\u043b\u0438. \u041f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438  \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>import<\/code> \u0438 <code>export<\/code>. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u043a\u043e\u0434\u0430 \u0438 \u0430\u0432\u0442\u043e\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435. \u0421\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0432\u0441\u0435 \u0444\u0430\u0439\u043b\u044b \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u043e\u043c (<code>bundler<\/code>). \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e (<code>TypeScript<\/code>). \u0412 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c (<code>compile<\/code>) \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u0444\u0430\u0439\u043b \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c (<code>hot-reload<\/code>) \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u043a\u043e\u0433\u0434\u0430 \u044f \u043f\u043e\u043c\u0435\u043d\u044f\u043b \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434.<\/p>\n<p><a href=\"https:\/\/github.com\/microsoft\/TypeScript\" rel=\"noopener noreferrer nofollow\">TypeScript<\/a> (<code>91.4k<\/code> \u0437\u0432\u0451\u0437\u0434) \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0432\u0441\u0435\u043c\u0435\u0441\u0442\u043d\u043e \u0434\u043b\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<p><a href=\"https:\/\/github.com\/webpack\/webpack\" rel=\"noopener noreferrer nofollow\">Webpack<\/a> (<code>61.3k<\/code> \u0437\u0432\u0451\u0437\u0434) \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0434\u043b\u044f \u0440\u0435\u0436\u0438\u043c\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 <a href=\"https:\/\/github.com\/webpack\/webpack-dev-server\" rel=\"noopener noreferrer nofollow\">Webpack Dev Server<\/a> (<code>7.6k<\/code> \u0437\u0432\u0451\u0437\u0434). <a href=\"https:\/\/github.com\/jantimon\/html-webpack-plugin\" rel=\"noopener noreferrer nofollow\">HTML Webpack Plugin <\/a> (<code>10.5k<\/code> \u0437\u0432\u0451\u0437\u0434) \u0434\u043b\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u0432\u0445\u043e\u0434\u0430 (\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u0431\u043e\u0440\u043a\u0438).<\/p>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u043e\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u0438 \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c\u0441\u044f <a href=\"https:\/\/github.com\/eslint\/eslint\" rel=\"noopener noreferrer nofollow\">ESLint<\/a> (<code>22.7k<\/code> \u0437\u0432\u0451\u0437\u0434) \u0441\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c \u043a\u043e\u043d\u0444\u0438\u0433\u043e\u043c \u0434\u043b\u044f \u0442\u0430\u0439\u043f\u0441\u043a\u0440\u0438\u043f\u0442\u0430 <a href=\"https:\/\/github.com\/standard\/eslint-config-standard-with-typescript\" rel=\"noopener noreferrer nofollow\">eslint-config-standard-with-typescript <\/a>. \u0424\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c <code>Visual Studio Code<\/code> \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044f <code>ESLint<\/code>.<\/p>\n<p>\u0414\u043b\u044f \u043b\u043e\u0433\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u043e\u0437\u044c\u043c\u0443 <a href=\"https:\/\/github.com\/debug-js\/debug\" rel=\"noopener noreferrer nofollow\">Debug<\/a> \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 (<code>10.7k<\/code> \u0437\u0432\u0451\u0437\u0434).<\/p>\n<p><code>PixiJS<\/code> \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0435\u0437 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0438 \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u0432 &#8212; \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430. \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e <code>HTML<\/code> \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0432\u043e\u0436\u0443 \u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c\u0443, \u043b\u044e\u0431\u044b\u0435 \u044d\u043a\u0440\u0430\u043d\u044b\/\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u0432 \u0438\u0433\u0440\u0435 \u0434\u0435\u043b\u0430\u044e \u043d\u0430 <code>PixiJS<\/code>. \u0412\u0441\u0435 \u0438\u0433\u0440\u044b \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 <code>Mobile\u200c \u200cFirst\u200c<\/code> \u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e. \u0412\u0441\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432 \u0432 \u043f\u0430\u043f\u043a\u0435 <code>src-texture<\/code>. \u0412\u0441\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u043a\u0430\u0440\u0442\u044b \u0443\u0440\u043e\u0432\u043d\u0435\u0439 \u0432 \u043f\u0430\u043f\u043a\u0435 <code>src-tiled<\/code>.<\/p>\n<p>\u0418\u0442\u0430\u043a, <a href=\"https:\/\/pixijs.io\/guides\/index.html\" rel=\"noopener noreferrer nofollow\">\u0432\u043e\u043e\u0440\u0443\u0436\u0438\u0432\u0448\u0438\u0441\u044c<\/a> <a href=\"https:\/\/github.com\/kittykatattack\/learningPixi\" rel=\"noopener noreferrer nofollow\">\u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438<\/a> <a href=\"https:\/\/www.pixijselementals.com\/\" rel=\"noopener noreferrer nofollow\">\u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430\u043c\u0438<\/a> \u043f\u043e <code>PixiJS<\/code> \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u044e \u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435.<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435: \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u0445\u043e\u0434\u044f \u0438\u0437 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0433\u043e<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\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-348713","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/348713","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=348713"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/348713\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=348713"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=348713"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=348713"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}