{"id":349841,"date":"2023-07-06T03:00:53","date_gmt":"2023-07-06T03:00:53","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=349841"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=349841","title":{"rendered":"<span>\u041f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0438\u0433\u0440\u0443<\/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>\u041d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043b\u0438\u0448\u044c \u0431\u043b\u043e\u043a\u043d\u043e\u0442 \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440. \u0418\u0433\u0440\u0430 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c. \u041d\u0430 windows, android, linux \u0438 \u0434\u0430\u0436\u0435 \u043d\u0430 \u0442\u0435\u043b\u0435\u0432\u0438\u0437\u043e\u0440\u0435. \u0422\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f HTML5.<\/p>\n<p>\u042f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0433\u0443\u043c\u0430\u043d\u0438\u0442\u0430\u0440\u0438\u0439, \u0435\u0441\u043b\u0438 \u0447\u0442\u043e.<\/p>\n<h2>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0431\u0430\u0437\u044b<\/h2>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0434\u0432\u0430 \u0444\u0430\u0439\u043b\u0430: <strong>index.html<\/strong> \u0438 <strong>script.js<\/strong>. \u041d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u043e\u0432 \u043d\u0430 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c, \u043a\u0430\u043a \u0438 \u043a\u043e\u0434 \u0438\u0433\u0440\u044b.<\/p>\n<p><strong>index.html<\/strong> \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0438\u0433\u0440\u044b (\u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435). \u0424\u0430\u0439\u043b \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0435\u0441\u0442\u044c \u0442\u0435\u043b\u043e (<em>body<\/em>) \u0438 \u0444\u0430\u0439\u043b\u044b \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 (<em>script<\/em>). \u041f\u043e\u043a\u0430 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0444\u0430\u0439\u043b script.js. \u041d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u0432\u0435 \u0441\u0442\u0440\u043e\u0447\u043a\u0438 \u0432 \u0444\u0430\u0439\u043b:<\/p>\n<pre><code class=\"xml\">&lt;body>&lt;\/body> &lt;script src=\"script.js\">&lt;\/script><\/code><\/pre>\n<p>\u0424\u0430\u0439\u043b <strong>script.js<\/strong> \u0445\u0440\u0430\u043d\u0438\u0442 \u043a\u043e\u0434 \u0438\u0433\u0440\u044b \u043d\u0430 \u044f\u0437\u044b\u043a\u0435 <a href=\"https:\/\/learn.javascript.ru\/\" rel=\"noopener noreferrer nofollow\">JavaScript<\/a>. \u0412 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <strong>\u0445\u043e\u043b\u0441\u0442 <\/strong>(<em>canvas<\/em>), \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0438\u0433\u0440\u0443. \u0417\u0430\u0442\u0435\u043c, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0445\u043e\u043b\u0441\u0442 \u0432 \u0442\u0435\u043b\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 (<em>document<\/em>). \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 script.js:<\/p>\n<pre><code class=\"javascript\">const canvas = document.createElement('canvas')  \/\/ \u0421\u043e\u0437\u0434\u0430\u043b\u0438 \u0445\u043e\u043b\u0441\u0442 document.body.appendChild(canvas)  \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0445\u043e\u043b\u0441\u0442 \u0432 \u0442\u0435\u043b\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430<\/code><\/pre>\n<figure class=\"float\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/03b\/129\/3af\/03b1293af1c7712110d4dd7324c45d26.png\" alt=\"2D\" title=\"2D\" width=\"256\" height=\"240\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/03b\/129\/3af\/03b1293af1c7712110d4dd7324c45d26.png\"\/><\/p>\n<div><figcaption>2D<\/figcaption><\/div>\n<\/figure>\n<p>\u0421\u043b\u043e\u0432\u043e &#171;<a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%9A%D0%BE%D0%BD%D1%82%D0%B5%D0%BA%D1%81%D1%82\" rel=\"noopener noreferrer nofollow\"><em>\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442<\/em><\/a>&#187; \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 <strong>\u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e<\/strong>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0447\u0442\u043e-\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442. \u0418\u0433\u0440\u0430 \u0434\u0432\u0443\u0445\u043c\u0435\u0440\u043d\u0430\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0432 <em>\u0434\u0432\u0443\u043c\u0435\u0440\u043d\u043e\u043c 2d \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435<\/em> (<em>context, <\/em>2D, <em>Dimensional &#8212; \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0435<\/em>). \u041d\u0430\u0440\u0438\u0441\u0443\u0435\u043c \u043d\u0430 \u0445\u043e\u043b\u0441\u0442\u0435 \u0434\u0432\u0430 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 (<em>rectangle, rect<\/em>). \u041e\u0434\u0438\u043d \u0447\u0435\u0440\u043d\u044b\u0439 (<em>#000000<\/em>), \u0434\u0440\u0443\u0433\u043e\u0439 &#8212; \u0441\u0435\u0440\u044b\u0439 (<em>#aaaaaa<\/em>). <a href=\"https:\/\/www.w3schools.com\/colors\/colors_hexadecimal.asp\" rel=\"noopener noreferrer nofollow\">\u0426\u0432\u0435\u0442\u0430 \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0432 16-\u0440\u0438\u0447\u043d\u044b\u043c \u0447\u0438\u0441\u043b\u043e\u043c (<em>hexidecimal; hex<\/em>).<\/a> \u0420\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043d\u0430 \u0445\u043e\u043b\u0441\u0442\u0435 \u0438\u0437\u043c\u0435\u0440\u044f\u044e\u0442\u0441\u044f \u0432 <a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%9F%D0%B8%D0%BA%D1%81%D0%B5%D0%BB%D1%8C\" rel=\"noopener noreferrer nofollow\">\u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445<\/a> (<em>pixel; px<\/em>), \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u043e\u0442 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u043b\u0435\u0432\u043e\u0433\u043e \u0443\u0433\u043b\u0430, \u0434\u0432\u0443\u043c\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f\u043c\u0438 \u0438\u043a\u0441 (<em>x<\/em>) \u0438 \u0438\u0433\u0440\u0438\u043a (<em>y<\/em>). \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0443 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430  \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0445\u043e\u043b\u0441\u0442\u0435 (<em>x,y<\/em>), \u0448\u0438\u0440\u0438\u043d\u0430 \u0438 \u0432\u044b\u0441\u043e\u0442\u0430 (<em>width, height<\/em>), \u0446\u0432\u0435\u0442 (<em>color<\/em>). \u041e\u043d \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0431\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u043c (<em>stroke<\/em>) \u0438\u043b\u0438 \u0437\u0430\u043a\u0440\u0430\u0448\u0435\u043d\u043d\u044b\u043c (<em>fill<\/em>). <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/CanvasRenderingContext2D\" rel=\"noopener noreferrer nofollow\">\u041e \u0442\u043e\u043c, \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c 2D \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0445\u043e\u043b\u0441\u0442\u0430 \u0432 WEB<\/a>, \u0430 \u0442\u0430\u043a \u0436\u0435 &#8212; <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/Canvas_API\/Tutorial\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u043b\u043d\u043e\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e<\/a>.<\/p>\n<pre><code class=\"javascript\">canvas.width = 400 \/\/ \u0428\u0438\u0440\u0438\u043d\u0430 \u0445\u043e\u043b\u0441\u0442\u0430 canvas.height = 225 \/\/ \u0412\u044b\u0441\u043e\u0442\u0430 \u0445\u043e\u043b\u0441\u0442\u0430 context = canvas.getContext('2d') \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c 2d \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 context.strokeStyle = '#ff0000' \/\/ \u0426\u0432\u0435\u0442 \u043e\u0431\u0432\u043e\u0434\u043a\u0438 context.fillStyle = '#0000ff' \/\/ \u0426\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 x = 0, y = 0, width = 100, height = 100 \/\/ \u041f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 context.strokeRect(x, y, width, height) \/\/ \u041f\u0435\u0440\u0432\u044b\u0439 - \u043e\u0431\u0432\u043e\u0434\u0438\u043c x2 = 150, y2 = 0, width2 = 100, height2 = 100 \/\/ \u041f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u0432\u0442\u043e\u0440\u043e\u0433\u043e context.fillRect(x2, y2, width2, height2) \/\/ \u0412\u0442\u043e\u0440\u043e\u0439 - \u0437\u0430\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c<\/code><\/pre>\n<figure class=\"float\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/082\/07d\/d58\/08207dd581bc947b55e6398e91d52693.png\" alt=\"v.0.1\" title=\"v.0.1\" width=\"327\" height=\"135\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/082\/07d\/d58\/08207dd581bc947b55e6398e91d52693.png\"\/><\/p>\n<div><figcaption>v.0.1<\/figcaption><\/div>\n<\/figure>\n<p>\u041c\u043e\u0436\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0444\u0430\u0439\u043b index.html \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0447\u0442\u043e \u0438\u0433\u0440\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0414\u043e\u043b\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u043d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0435 v.0.1. \u0415\u0449\u0435 \u043c\u0430\u043b\u043e \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u0438\u0433\u0440\u0443, \u043d\u043e \u0442\u0435\u043f\u0435\u0440\u044c, \u0443\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c <strong>\u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438<\/strong> <em>(interaction, inter &#8212; \u043f\u043e\u0441\u0440\u0435\u0434\u0438, act &#8212; \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435), <\/em>\u0447\u0442\u043e\u0431\u044b \u0445\u043e\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b\u043e<em>.<\/em><\/p>\n<h2>\u041c\u0435\u0445\u0430\u043d\u0438\u043a\u0438<\/h2>\n<p>\u041f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435\/\u043f\u0440\u043e\u0438\u0441\u0448\u0435\u0441\u0442\u0432\u0438\u0435. \u0421\u043e\u0431\u044b\u0442\u0438\u0435 \u0432 <em>\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435<\/em> \u0438\u0433\u0440\u044b &#8212; \u044d\u0442\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0430. \u041f\u0440\u0438\u0447\u0438\u043d\u044b \u043c\u043e\u0433\u0443\u0442 \u043f\u043e \u0440\u0430\u0437\u043d\u044b\u043c\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b \u0438\u0433\u0440\u0443, \u043f\u0440\u043e\u0448\u043b\u043e \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0432\u0440\u0435\u043c\u044f, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0436\u0430\u043b \u043a\u043b\u0430\u0432\u0438\u0448\u0443 \u0438\u043b\u0438 \u0442\u044b\u043a\u043d\u0443\u043b \u043f\u0430\u043b\u044c\u0446\u0435\u043c\/\u043c\u044b\u0448\u043a\u043e\u0439 \u0432 \u044d\u043a\u0440\u0430\u043d. \u041d\u0430 \u044d\u0442\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0440\u0435\u0430\u043a\u0446\u0438\u044e \u0438\u0433\u0440\u044b (<em>re &#8212; \u043e\u0431\u0440\u0430\u0442\u043d\u043e<\/em>, <em>act &#8212; \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435<\/em>), \u0438\u043d\u044b\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438 &#8212; \u043e\u0442\u0432\u0435\u0442\u043d\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043e\u0442 \u0438\u0433\u0440\u044b \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043e\u0442 \u0438\u0433\u0440\u043e\u043a\u0430. \u0412 <em>\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 <\/em>\u0436\u0435 \u0438\u0433\u0440\u043e\u043a\u0430 (\u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0438\u0433\u0440\u043e\u043a\u0430), \u0441\u043e\u0431\u044b\u0442\u0438\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0434\u0432\u0443\u0445 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432, \u0430 \u0435\u0433\u043e \u0440\u0435\u0430\u043a\u0446\u0438\u0435\u0439 \u0431\u0443\u0434\u0435\u0442 \u044d\u043c\u043e\u0446\u0438\u044f (<em>emotion,<\/em> <em>e &#8212; \u043d\u0430\u0440\u0443\u0436\u0443, moveo &#8212; \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f<\/em>). \u0412 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u044d\u043c\u043e\u0446\u0438\u0438 &#8212; \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 &#8212; \u043a\u043b\u0438\u043a \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435.<\/p>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0440\u0435\u0430\u043a\u0446\u0438\u044e \u0438\u0433\u0440\u044b, \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u0432\u0435\u0442\u0438\u0442\u044c \u043d\u0430 \u0432\u043e\u043f\u0440\u043e\u0441 &#8212; \u0447\u0442\u043e\u0431\u044b \u0447\u0442\u043e? \u0418\u0433\u0440\u0430 &#8212; \u0438\u043d\u0441\u0442\u0438\u043d\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f. \u041f\u0440\u043e\u0448\u043b\u043e \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u0445\u043e\u0440\u043e\u0448\u043e \u0438\u043b\u0438 \u043f\u043b\u043e\u0445\u043e &#8212; \u0438\u0433\u0440\u043e\u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043f\u043e \u0441\u0432\u043e\u0438\u043c \u044d\u043c\u043e\u0446\u0438\u044f\u043c. \u0415\u0441\u043b\u0438 \u044d\u043c\u043e\u0446\u0438\u0438 \u043f\u043e\u0437\u0438\u0442\u0438\u0432\u043d\u044b\u0435 &#8212; \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0443\u0441\u0432\u043e\u0435\u043d \u0443\u0441\u043f\u0435\u0448\u043d\u043e, \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u044b\u0435 &#8212; \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b. \u0418\u0433\u0440\u043e\u043a \u043e\u0441\u043e\u0437\u043d\u0430\u0435\u0442 \u0438 \u044d\u043c\u043e\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u0440\u0435\u0430\u0433\u0438\u0440\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438\u0433\u0440\u044b, \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0435 <strong>\u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0438<\/strong> (<em>mech; meg\u02b0 &#8212; \u043c\u043e\u0447\u044c<\/em>). \u0415\u0441\u043b\u0438 \u0438\u0433\u0440\u0430 \u0438\u0445 \u043d\u0435 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 &#8212; \u043e\u043d\u0438 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f <em>\u0441\u043a\u0440\u044b\u0442\u044b\u043c\u0438<\/em>, \u0438\u043d\u0430\u0447\u0435 &#8212; <em>\u044f\u0432\u043d\u044b\u043c\u0438<\/em>. \u0418\u0433\u0440\u043e\u043a \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0438\u0433\u0440\u044b &#8212; <em>\u043e\u0431\u044a\u0435\u043a\u0442<\/em> (<em>ob &#8212; \u043d\u0430\u043f\u0440\u043e\u0442\u0438\u0432, iactum<\/em> <em>&#8212; \u0432\u043e\u0437\u0434\u0432\u0438\u0433\u0430\u044e<\/em>), \u0442.\u0435. \u0438\u0433\u0440\u0430 \u0432\u043e\u0437\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442 \u043d\u0430 \u0438\u0433\u0440\u043e\u043a\u0430 \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c \u043c\u0435\u0445\u0430\u043d\u0438\u043a.<\/p>\n<figure class=\"float full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/306\/f42\/1d1\/306f421d1f7e4ee2ebe8059f646896ae.png\" width=\"1024\" height=\"768\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/306\/f42\/1d1\/306f421d1f7e4ee2ebe8059f646896ae.png\"\/><\/figure>\n<p>\u0427\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e &#8212; \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0438 \u0431\u0435\u0440\u0443\u0442 \u0443\u0436\u0435 \u0438\u0437 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0445 \u0438\u0433\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0435\u0431\u044f \u0437\u0430\u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043b\u0438. \u041e\u0431\u044b\u0447\u043d\u043e, \u0441\u043e\u0432\u043e\u043a\u0443\u043f\u043d\u043e\u0441\u0442\u044c \u043c\u0435\u0445\u0430\u043d\u0438\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442 <strong>\u0436\u0430\u043d\u0440<\/strong> \u0438\u0433\u0440\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0436\u0430\u043d\u0440 &#171;\u043a\u0432\u0435\u0441\u0442&#187; (<em>quest &#8212; \u043f\u043e\u0438\u0441\u043a\u0438<\/em>). \u041a\u0430\u043a \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0437 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f &#8212; \u044d\u0442\u043e \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0430 \u043f\u043e\u0438\u0441\u043a\u0430 \u0447\u0435\u0433\u043e \u043b\u0438\u0431\u043e. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0433\u0440\u0430 &#171;\u041d\u0430\u0439\u0434\u0438 \u0412\u0430\u043b\u044c\u0434\u043e&#187; &#8212; \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043f\u0430\u0440\u043d\u044f \u0432 \u043a\u0440\u0430\u0441\u043d\u043e-\u0431\u0435\u043b\u043e\u043c \u043a\u043e\u043b\u043f\u0430\u043a\u0435 \u0438 \u0441\u0432\u0438\u0442\u0435\u0440\u0435 \u0441\u0440\u0435\u0434\u0438 \u043a\u0443\u0447\u0438 \u043f\u043e\u0445\u043e\u0436\u0438\u0445 \u043b\u044e\u0434\u0435\u0439. \u041f\u043e\u043c\u0438\u043c\u043e \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f &#8212; \u0438\u0433\u0440\u0430 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u043b\u0435\u0447\u044c \u0438\u0433\u0440\u043e\u043a\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0430\u043c\u0438: \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0438 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044c\u043d\u044b\u0435. \u0421\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442 \u044d\u043c\u043e\u0446\u0438\u0438 \u0447\u0443\u0432\u0441\u0442\u0432\u0430 \u043f\u0440\u0438\u043d\u0430\u0434\u043b\u0435\u0436\u043d\u043e\u0441\u0442\u0438, \u0447\u0443\u0432\u0441\u0442\u0432\u0430 \u043f\u0440\u0438\u0437\u043d\u0430\u043d\u0438\u044f; \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044c\u043d\u044b\u0435 &#8212; \u0430\u0437\u0430\u0440\u0442 (<em>\u041d\u0435 \u0434\u0443\u043c\u0430\u044e, \u0447\u0442\u043e \u043c\u043e\u0435\u0439 \u043a\u043e\u043c\u043f\u0435\u0442\u0435\u043d\u0446\u0438\u0438 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u043d\u0430 \u0438\u0441\u0447\u0435\u0440\u043f\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u0443\u0434\u0443 \u0440\u0430\u0434 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044e \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445<\/em>).<\/p>\n<figure class=\"float full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/cb6\/21a\/121\/cb621a1210d6f4000bc818c88d39ed5b.png\" alt=\"\u041a\u0440\u0438\u0432\u0430\u044f \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f\" title=\"\u041a\u0440\u0438\u0432\u0430\u044f \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f\" width=\"600\" height=\"443\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/cb6\/21a\/121\/cb621a1210d6f4000bc818c88d39ed5b.png\"\/><\/p>\n<div><figcaption>\u041a\u0440\u0438\u0432\u0430\u044f \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0438\u0433\u0440\u044b \u0432\u0430\u0436\u043d\u043e \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043a\u0440\u0438\u0432\u0443\u044e \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 \u0438\u0433\u0440\u043e\u043a &#171;<em>\u043f\u0435\u0440\u0435\u043e\u0431\u0443\u0447\u0435\u043d<\/em>&#187; &#8212; \u0438\u0433\u0440\u0430 \u043d\u0438\u0447\u0435\u043c\u0443 \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442 \u0435\u0433\u043e \u043d\u0430\u0443\u0447\u0438\u0442\u044c \u0438 \u0438\u0433\u0440\u043e\u043a\u0443 \u0431\u0443\u0434\u0435\u0442 \u0441\u043a\u0443\u0447\u043d\u043e. \u0415\u0441\u043b\u0438 \u0438\u0433\u0440\u043e\u043a &#171;<em>\u043d\u0435 \u043e\u0431\u0443\u0447\u0435\u043d<\/em>&#187; &#8212; \u0443 \u043d\u0435\u0433\u043e \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u0431\u044b\u0442\u044c \u0442\u0435\u0445 \u043d\u0430\u0432\u044b\u043a\u043e\u0432 \u0438 \u0437\u043d\u0430\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0438\u0433\u0440\u044b &#8212; \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043e\u043d \u043d\u0438\u0447\u0435\u043c\u0443 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0443\u0447\u0430\u0442\u044c\u0441\u044f \u0438 \u043e\u043d \u043f\u043e\u0442\u0435\u0440\u044f\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0435\u0441.<\/p>\n<h2>\u0413\u0435\u0439\u043c\u0434\u0438\u0437\u0430\u0439\u043d<\/h2>\n<p>\u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043d\u0430\u0443\u0447\u0438\u0442\u044c \u0438\u0433\u0440\u043e\u043a\u0430 \u043d\u0430\u0436\u0438\u043c\u0430\u0442\u044c \u043d\u0430 \u0437\u0430\u043a\u0440\u0430\u0448\u0435\u043d\u043d\u044b\u0439 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435. \u0414\u0435\u043b\u0430\u0435\u043c \u043c\u044b \u044d\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0438\u0433\u0440\u044b, \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c \u043c\u0435\u0445\u0430\u043d\u0438\u043a, \u0432\u043e\u0437\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044f \u043d\u0430 \u044d\u043c\u043e\u0446\u0438\u0438 \u0438\u0433\u0440\u043e\u043a\u0430. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0438\u0433\u0440\u043e\u043a \u0443\u0436\u0435 \u043e\u0431\u0443\u0447\u0435\u043d \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0441\u0438\u043d\u0438\u0439 &#8212; \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0439 \u0438 \u043f\u0440\u0438\u044f\u0442\u043d\u044b\u0439 \u0446\u0432\u0435\u0442, \u0430 \u043a\u0440\u0430\u0441\u043d\u044b\u0439 &#8212; \u043e\u043f\u0430\u0441\u043d\u044b\u0439 \u0438 \u043d\u0435\u043f\u0440\u0438\u044f\u0442\u043d\u044b\u0439. \u0410 \u0437\u043d\u0430\u0447\u0438\u0442, \u043a\u0440\u0430\u0441\u043d\u044b\u043c \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0437\u043b\u043e\u0441\u0442\u044c ?. \u0421\u0438\u043d\u0438\u043c &#8212; \u0443\u0441\u043f\u043e\u043a\u0430\u0438\u0432\u0430\u0442\u044c ?. \u0415\u0441\u043b\u0438 \u0438\u0433\u0440\u043e\u043a \u0441\u043f\u0440\u0430\u0432\u0438\u043b\u0441\u044f \u043e\u0442\u043b\u0438\u0447\u043d\u043e &#8212; \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u0435\u043c\u0441\u044f \u0435\u0433\u043e \u043f\u043e\u0440\u0430\u0434\u043e\u0432\u0430\u0442\u044c ?.<\/p>\n<figure class=\"float\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/91f\/4f8\/5ce\/91f4f85ce1f9396aa9313f839229b2f4.png\" alt=\"\u0426\u0432\u0435\u0442\u043e\u0432\u0430\u044f \u043f\u0430\u043b\u0438\u0442\u0440\u0430 &quot;\u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u0430\u044f&quot;\" title=\"\u0426\u0432\u0435\u0442\u043e\u0432\u0430\u044f \u043f\u0430\u043b\u0438\u0442\u0440\u0430 &quot;\u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u0430\u044f&quot;\" width=\"185\" height=\"253\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/91f\/4f8\/5ce\/91f4f85ce1f9396aa9313f839229b2f4.png\"\/><\/p>\n<div><figcaption>\u0426\u0432\u0435\u0442\u043e\u0432\u0430\u044f \u043f\u0430\u043b\u0438\u0442\u0440\u0430 &#171;\u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u0430\u044f&#187;<\/figcaption><\/div>\n<\/figure>\n<p>\u0411\u0443\u0434\u0435\u043c \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0434\u0432\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f: \u0438\u0433\u0440\u043e\u043a \u0443\u0441\u043f\u0435\u043b \u043d\u0430\u0436\u0430\u0442\u044c \u043d\u0430 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a, \u0438\u043b\u0438 &#8212; \u043d\u0435 \u0443\u0441\u043f\u0435\u043b. \u0415\u0441\u043b\u0438 \u0438\u0433\u0440\u043e\u043a \u0443\u0441\u043f\u0435\u043b &#8212; \u043c\u044b \u043f\u043e\u043e\u0449\u0440\u044f\u0435\u043c \u0435\u0433\u043e \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u044d\u043c\u043e\u0446\u0438\u0435\u0439 \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u0435\u043d\u0438\u044f, \u0435\u0441\u043b\u0438 \u043d\u0435\u0442 &#8212; \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u043e\u0439. \u0412\u043e\u0437\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0437\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0433\u0440\u0430\u0444\u0438\u043a\u0438 (<em>graphica &#8212; \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435<\/em>). \u0427\u0435\u043c \u0434\u043e\u043b\u044c\u0448\u0435 \u0438\u0433\u0440\u043e\u043a \u043d\u0435 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u0442 \u043d\u0430 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a &#8212; \u0442\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0431\u0443\u0434\u0435\u043c \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043a\u0440\u0430\u0441\u043d\u043e\u0433\u043e. \u0415\u0441\u043b\u0438 \u043d\u0430\u0436\u0430\u043b \u043d\u0430 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a &#8212; \u0431\u0443\u0434\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u0438\u043d\u0438\u0439. \u0415\u0441\u043b\u0438 \u043f\u0440\u043e\u044f\u0432\u0438\u043b \u0443\u0441\u043f\u0435\u0445 &#8212; \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0437\u0435\u043b\u0435\u043d\u044b\u0439. \u042d\u0442\u043e\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u0438\u0433\u0440\u043e\u043a \u043d\u0430\u0443\u0447\u0438\u043b\u0441\u044f \u043d\u0430\u0436\u0438\u043c\u0430\u0442\u044c \u043d\u0430 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a. (<em>\u0415\u0441\u043b\u0438 \u0437\u043d\u0430\u0435\u0442\u0435 \u043a\u0430\u043a\u0438\u0435-\u043d\u0438\u0431\u0443\u0434\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0438 &#8212; \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u0435\u0441\u044c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445<\/em>)<\/p>\n<h2>\u0421\u043a\u0440\u044b\u0442\u0430\u044f \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0430<\/h2>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0447\u0442\u043e \u0438\u0433\u0440\u043e\u043a \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0443\u0447\u0438\u043b\u0441\u044f &#8212; \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441\u0447\u0438\u0442\u0430\u0442\u044c, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u043e\u043d \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043b \u0437\u0430\u0434\u0430\u0447\u0443. \u041c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0438\u0433\u0440\u043e\u043a\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0435, \u0442.\u0435. \u044d\u0442\u043e \u0441\u043a\u0440\u044b\u0442\u0430\u044f \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0430. \u0427\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u043f\u044b\u0442\u043e\u043a \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f &#8212; \u0442\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u0443\u043f\u043e\u0440\u0441\u0442\u0432\u043e\u043c \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0431\u043b\u0430\u0434\u0430\u0442\u044c \u0438\u0433\u0440\u043e\u043a. \u0423\u043f\u043e\u0440\u0441\u0442\u0432\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043d\u043d\u043e\u0441\u0442\u0438 \u0438\u0433\u0440\u043e\u043a\u0430. \u0411\u0443\u0434\u0435\u043c \u0441\u0447\u0438\u0442\u0430\u0442\u044c, \u0447\u0442\u043e \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u0443\u043f\u043e\u0440\u0441\u0442\u0432\u043e \u0438\u0433\u0440\u043e\u043a\u0430 &#8212; 1\/10, \u0442.\u0435. \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0435\u0441 \u043a \u043d\u0430\u0448\u0435\u0439 \u0438\u0433\u0440\u0435 10%. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043e\u0436\u0438\u0434\u0430\u0442\u044c, \u0447\u0442\u043e \u0438\u0433\u0440\u043e\u043a \u043f\u0440\u043e\u0432\u0435\u0434\u0435\u0442 \u0432 \u0438\u0433\u0440\u0435 5.4 \u0441\u0435\u043a\u0443\u043d\u0434\u044b.<\/p>\n<blockquote>\n<p>\u0421\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u043e\u0442\u0447\u0435\u0442\u0443 Contentsquare 2021 Digital Experience Benchmark, \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u043f\u043e \u0431\u043e\u043b\u044c\u043d\u0438\u0446\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u00a054 \u0441\u0435\u043a\u0443\u043d\u0434\u044b.<\/p>\n<\/blockquote>\n<p>\u0421\u0447\u0438\u0442\u0430\u0435\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0443\u0441\u043f\u0435\u0445\u043e\u0432 (successes) \u0438 \u043d\u0435\u0443\u0434\u0430\u0447 (fails). \u0415\u0441\u043b\u0438 \u0438\u0433\u0440\u043e\u043a \u0441\u043f\u0440\u0430\u0432\u0438\u043b\u0441\u044f, \u0442.\u0435. \u0434\u043e\u0441\u0442\u0438\u0433 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0443\u0441\u043f\u0435\u0445\u0430 (wins) &#8212; \u0438\u0433\u0440\u043e\u043a \u043e\u0431\u0443\u0447\u0435\u043d, \u0438\u0433\u0440\u0430 \u043e\u043a\u043e\u043d\u0447\u0435\u043d\u0430. \u0415\u0441\u043b\u0438 \u0436\u0435 \u0438\u0433\u0440\u043e\u043a \u043d\u0435 \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f &#8212; \u0442\u043e \u0435\u043c\u0443 \u043d\u0443\u0436\u043d\u043e <strong>\u043f\u043e\u043c\u043e\u0447\u044c<\/strong>. \u0415\u0441\u043b\u0438 \u0438\u0433\u0440\u043e\u043a \u0434\u043e\u0441\u0442\u0438\u0433 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0447\u0438\u0441\u043b\u0430 \u043d\u0435\u0443\u0434\u0430\u0447 (looses) \u043c\u044b \u043f\u043e\u043c\u043e\u0436\u0435\u043c \u0435\u043c\u0443 \u0438 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u0438\u043c \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u043f\u043e\u0434 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c, \u0447\u0442\u043e\u0431\u044b \u0443 \u043d\u0435\u0433\u043e \u0442\u043e\u0447\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c, \u0438 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c \u0447\u0438\u0441\u043b\u043e \u043d\u0435\u0443\u0434\u0430\u0447. \u042d\u0442\u043e \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0438. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u043c, \u043a\u0430\u043a \u043e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0415\u0441\u0442\u044c \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u044c, \u0447\u0442\u043e \u043c\u044b \u043d\u0435 \u0441\u043c\u043e\u0433\u043b\u0438 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u044d\u043c\u043e\u0446\u0438\u044e &#8212; \u0442\u043e\u0433\u0434\u0430 \u0438 \u0441\u0430\u043c\u0430 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0430 \u0432 \u0446\u0435\u043b\u043e\u043c \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u041f\u043e\u043c\u043d\u0438\u043c \u0437\u0430\u043a\u043e\u043d \u041c\u0435\u0440\u0444\u0438.<\/p>\n<figure class=\"float full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/519\/308\/837\/51930883735e719893e0de5df82687c4.jpg\" alt=\"\u041f\u043e\u043e\u0449\u0440\u0435\u043d\u0438\u0435 => \u042d\u043c\u043e\u0446\u0438\u044f&#187; title=&#187;\u041f\u043e\u043e\u0449\u0440\u0435\u043d\u0438\u0435 => \u042d\u043c\u043e\u0446\u0438\u044f&#187; width=&#187;612&#8243; height=&#187;660&#8243; data-src=&#187;https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/519\/308\/837\/51930883735e719893e0de5df82687c4.jpg&#187; data-blurred=&#187;true&#187;\/><\/p>\n<div><figcaption>\u041f\u043e\u043e\u0449\u0440\u0435\u043d\u0438\u0435 => \u042d\u043c\u043e\u0446\u0438\u044f<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043a\u0440\u0435\u043f\u0438\u0442\u044c \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 &#8212; \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0443 \u043f\u043e\u043e\u0449\u0440\u0435\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 \u0438\u0433\u0440\u043e\u043a \u043d\u0430\u0443\u0447\u0438\u043b\u0441\u044f \u0438 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0443\u0441\u043f\u0435\u0448\u043d\u044b\u0445 \u043f\u043e\u043f\u044b\u0442\u043e\u043a \u0434\u043e\u0441\u0442\u0438\u0433\u043b\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c\u0430 (wins), \u043c\u044b \u043d\u0430\u0433\u0440\u0430\u0434\u0438\u043c \u0438\u0433\u0440\u043e\u043a\u0430 \u043d\u043e\u0432\u043e\u0439 \u043f\u0440\u0438\u044f\u0442\u043d\u043e\u0439 \u044d\u043c\u043e\u0446\u0438\u0435\u0439 &#8212; \u0443\u0434\u0438\u0432\u043b\u0435\u043d\u0438\u0435\u043c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u0435\u043b\u0435\u043d\u044b\u0439. \u0421\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f\u043c &#8212; \u0447\u0435\u043b\u043e\u0432\u0435\u0447\u0435\u0441\u043a\u0438\u0439 \u0433\u043b\u0430\u0437 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0432\u043e\u0441\u043f\u0440\u0438\u0438\u043c\u0447\u0438\u0432 \u043a <a href=\"https:\/\/hypertextbook.com\/facts\/2007\/SusanZhao.shtml\" rel=\"noopener noreferrer nofollow\">\u0437\u0435\u043b\u0451\u043d\u043e\u043c\u0443 \u0443\u0447\u0430\u0441\u0442\u043a\u0443 \u0441\u043f\u0435\u043a\u0442\u0440\u0430<\/a>, \u0446\u0432\u0435\u0442 \u043f\u0440\u0438\u044f\u0442\u043d\u044b\u0439. \u042d\u0442\u043e\u0442 \u0446\u0432\u0435\u0442 \u0438\u0433\u0440\u043e\u043a \u043d\u0435 \u043e\u0436\u0438\u0434\u0430\u0435\u0442 \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u0442.\u043a. \u043c\u044b \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0438 \u0435\u043c\u0443 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0438 \u0441\u0438\u043d\u0438\u0439.<\/p>\n<h2>\u042f\u0432\u043d\u0430\u044f \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0430<\/h2>\n<p>\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043d\u0430 \u044d\u043a\u0440\u0430\u043d. \u0421\u043e\u0431\u044b\u0442\u0438\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435\u043c  (<em>pointwerdown<\/em>) \u043d\u0430 \u0442\u0435\u043b\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430. \u0421\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f (\u0441\u0438\u043c\u0432\u043e\u043b \u21d2) \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u043a\u0443\u0434\u0430 \u0438\u0433\u0440\u043e\u043a \u043f\u043e\u043f\u0430\u043b. \u0423 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f \u0442\u043e\u0436\u0435 \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 x \u0438 \u0443, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0447\u0442\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c (\u0442\u043e\u0447\u043a\u0430) \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430. \u0415\u0441\u0442\u044c <a href=\"https:\/\/dzen.ru\/a\/XL_gTVaa9gCzO1Yv\" rel=\"noopener noreferrer nofollow\">\u0445\u043e\u0440\u043e\u0448\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f<\/a> \u043d\u0430 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443, \u0440\u0430\u0441\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0443. \u0415\u0441\u043b\u0438 \u043f\u043e\u043f\u0430\u043b \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435\u043c \u0432 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0432 x,y \u0441 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 \u0438 \u0432\u044b\u0441\u043e\u0442\u043e\u0439 width \u0438 height &#8212; \u043f\u043e\u043f\u044b\u0442\u043a\u0430 \u0443\u0441\u043f\u0435\u0448\u043d\u0430\u044f, \u043c\u044b \u043f\u043e\u0434\u043a\u0440\u0435\u043f\u043b\u044f\u0435\u043c \u0441\u0438\u043d\u0438\u043c. \u0415\u0441\u043b\u0438 \u043d\u0435 \u043f\u043e\u043f\u0430\u043b &#8212; \u043a\u0440\u0430\u0441\u043d\u044b\u043c. \u041f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430\u0440\u0438\u0441\u0443\u0435\u043c \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u044f \u0432 \u0442\u043e\u0447\u043a\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f. \u041f\u0440\u0438 \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u0438 &#8212; \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c \u043f\u0440\u043e\u043c\u0430\u0445\u0438 \u0438 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0438\u0433\u0440\u043e\u043a \u0447\u0443\u0432\u0441\u0442\u0432\u043e\u0432\u0430\u043b <strong>\u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 <\/strong>(<em>progress,<\/em> <em>pro &#8212; \u0432\u043f\u0435\u0440\u0435\u0434, gradi &#8212; \u0438\u0434\u0442\u0438<\/em>), \u0447\u0442\u043e \u043e\u043d \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u043d\u0430 \u043c\u0435\u0441\u0442\u0435 \u0432 \u0441\u0432\u043e\u0435\u043c \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0438 &#8212; \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430 \u0432 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0443. \u0426\u0438\u0444\u0440 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0443\u0441\u043f\u0435\u0445\u043e\u0432 (successes) \u0438 \u043d\u0435\u0443\u0434\u0430\u0447 (fails) \u0438\u0433\u0440\u043e\u043a \u043d\u0435 \u0432\u0438\u0434\u0438\u0442, \u043d\u043e \u043d\u0443\u0436\u043d\u043e \u0435\u043c\u0443 \u0434\u0430\u0442\u044c \u043e\u0431 \u044d\u0442\u043e\u043c \u0437\u043d\u0430\u0442\u044c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u043c \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 successes \u0438 fails \u043f\u043e\u0434\u0440\u044f\u0434. \u0415\u0441\u043b\u0438 \u0438\u0433\u0440\u043e\u043a \u043f\u0440\u0435\u0432\u044b\u0441\u0438\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0448\u0438\u0431\u043e\u043a &#8212; \u0437\u0430\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u043a\u0440\u0430\u0441\u043d\u044b\u043c \u0438 \u0440\u0438\u0441\u0443\u0435\u043c \u043d\u043e\u0432\u044b\u0439, \u043f\u043e\u0434 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435\u043c.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0438\u0433\u0440\u043e\u043a \u0441\u043f\u0440\u0430\u0432\u0438\u043b\u0441\u044f \u0441 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435\u043c &#8212; \u0440\u0438\u0441\u0443\u0435\u043c \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u0435 \u0437\u0435\u043b\u0435\u043d\u044b\u043c. \u041d\u0430 \u044d\u0442\u043e\u043c \u0431\u0430\u0437\u043e\u0432\u043e \u043e\u0431\u0443\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u0438\u0433\u0440\u043e\u043a\u0430 \u0443\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u044d\u043a\u0437\u0430\u043c\u0435\u043d. \u0411\u0443\u0434\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0432 \u043d\u043e\u0432\u0443\u044e \u0442\u043e\u0447\u043a\u0443, \u043e\u0436\u0438\u0434\u0430\u044f \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u044f \u0441 \u043f\u0435\u0440\u0432\u043e\u0439 \u043f\u043e\u043f\u044b\u0442\u043a\u0438. \u041f\u043e\u0432\u0442\u043e\u0440\u0438\u043c \u044d\u0442\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u0438 \u0432 \u043a\u043e\u043d\u0446\u0435 \u0434\u0430\u0434\u0438\u043c \u043e\u0446\u0435\u043d\u043a\u0443 \u0437\u0430 \u043f\u0440\u043e\u0436\u0430\u0442\u0443\u044e \u0446\u0435\u043f\u043e\u0447\u043a\u0443 \u0446\u0435\u043b\u0435\u0439. \u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0435\u043c \u043e\u0446\u0435\u043d\u043a\u0443 \u043a\u0430\u043a \u0432\u0440\u0435\u043c\u044f, \u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0438\u0433\u0440\u043e\u043a \u043f\u0440\u043e\u0436\u0430\u043b \u0432\u0441\u0435 \u0446\u0435\u043b\u0438, \u0447\u0435\u043c \u0431\u044b\u0441\u0442\u0440\u0435\u0435 &#8212; \u0442\u0435\u043c \u043b\u0443\u0447\u0448\u0435. \u0415\u0441\u043b\u0438 \u0443\u0441\u043f\u0435\u0448\u043d\u043e &#8212; \u0432\u044b\u0432\u0435\u0434\u0435\u043c \u043e\u0446\u0435\u043d\u043a\u0443 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d. \u0415\u0441\u043b\u0438 \u0438\u0433\u0440\u043e\u043a \u0441\u0434\u0430\u043b \u043d\u0430 \u043e\u0442\u043b\u0438\u0447\u043d\u043e, \u0442.\u0435. \u043e\u0446\u0435\u043d\u043a\u0430 \u043f\u0440\u0435\u0432\u044b\u0448\u0430\u0435\u0442 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u043e\u0433\u043e &#8212; \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0435\u0449\u0435 \u043e\u0434\u043d\u0443 \u0446\u0435\u043b\u044c \u0432 \u0446\u0435\u043f\u043e\u0447\u043a\u0443 \u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u043d\u043e\u0432\u043e, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u044d\u0442\u0443 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0443 \u0432\u044b\u0432\u043e\u0434\u043e\u043c \u0442\u0435\u043a\u0441\u0442\u0430 \u0441 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c. \u0414\u0430\u043b\u0435\u0435 &#8212; \u043e\u0442\u043b\u0438\u0447\u043d\u0438\u043a\u0443 \u0443\u0436\u0435 \u043d\u0435\u0447\u0435\u043c\u0443 \u0443\u0447\u0438\u0442\u044c\u0441\u044f, \u043b\u0438\u0448\u044c \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0432\u044b\u043a.<\/p>\n<figure class=\"float full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/98e\/0a8\/bb6\/98e0a8bb68faeb623ee13e246afa649c.png\" width=\"615\" height=\"748\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/98e\/0a8\/bb6\/98e0a8bb68faeb623ee13e246afa649c.png\"\/><\/figure>\n<p>\u0414\u043b\u044f \u043e\u0449\u0443\u0449\u0435\u043d\u0438\u044f \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0438 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430 &#8212; \u0431\u0443\u0434\u0435\u043c \u0437\u0430\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u0445\u043e\u043b\u0441\u0442 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c \u0431\u0435\u043b\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u0435, \u0438\u0437-\u0437\u0430 \u0447\u0435\u0433\u043e \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0435 \u043f\u043e\u043f\u044b\u0442\u043a\u0438 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0441\u0442\u0432\u043e\u0440\u044f\u0442\u044c\u0441\u044f. \u0414\u043b\u044f \u043e\u0442\u043b\u0438\u0447\u043d\u0438\u043a\u0430 &#8212; \u0431\u0443\u0434\u0435\u043c \u0437\u0430\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043f\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u0412 \u0441\u0440\u0435\u0434\u043d\u0435\u043c, \u0432 \u0438\u0433\u0440\u0430\u0445 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u043e\u043a\u043e\u043b\u043e 60 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0439 (\u043a\u0430\u0434\u0440\u043e\u0432) \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443 (<em>FPS,<\/em> <em>frames per secord)<\/em>. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043f\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438: \u043a\u0430\u0436\u0434\u044b\u0435 1000\/60, \u0433\u0434\u0435 1000 &#8212; \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0435 (<em>\u043c\u0438\u043b\u043b\u0438-, milli-, \u043e\u0434\u043d\u0430 \u0442\u044b\u0441\u044f\u0447\u043d\u0430\u044f<\/em>), 60 &#8212; FPS. \u0422.\u0435. \u043a\u0430\u0436\u0434\u044b\u0435 16.66.. \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0437\u0430\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u043d\u0438\u0435 \u044d\u043a\u0440\u0430\u043d\u0430 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c \u0431\u0435\u043b\u044b\u043c.<\/p>\n<p>\u0414\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u044f\u0440\u043a\u0438\u0445 \u044d\u043c\u043e\u0446\u0438\u0439 &#8212; \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0437\u0432\u0443\u043a\u043e\u043c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043e\u043d\u043b\u0430\u0439\u043d \u0441\u0435\u043a\u0432\u0435\u043d\u0441\u043e\u0440 (<a href=\"https:\/\/onlinesequencer.net\/\" rel=\"noopener noreferrer nofollow\">https:\/\/onlinesequencer.net\/<\/a>), \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u043e \u0437\u0432\u0443\u043a\u0443 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u0435, \u043f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0441 \u0446\u0432\u0435\u0442\u043e\u043c.<\/p>\n<h2>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/h2>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430, \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0445\u043e\u043b\u0441\u0442, \u0432\u044b\u0440\u043e\u0432\u043d\u044f\u0435\u043c.<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">const canvas = document.createElement('canvas')  \/\/ \u0421\u043e\u0437\u0434\u0430\u043b\u0438 \u0445\u043e\u043b\u0441\u0442 const context = canvas.getContext('2d') \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c 2d \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 document.body.appendChild(canvas)  \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0445\u043e\u043b\u0441\u0442 \u0432 \u0442\u0435\u043b\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 canvas.width = screen.width \/\/ \u0428\u0438\u0440\u0438\u043d\u0430 \u0445\u043e\u043b\u0441\u0442\u0430 \u043f\u043e \u0448\u0438\u0440\u0438\u043d\u0435 \u044d\u043a\u0440\u0430\u043d\u0430 canvas.height = screen.height \/\/ \u0412\u044b\u0441\u043e\u0442\u0430 \u0445\u043e\u043b\u0441\u0442\u0430 \u043f\u043e \u0448\u0438\u0440\u0438\u043d\u0435 \u044d\u043a\u0440\u0430\u043d\u0430 \/\/\u042d\u0442\u043e \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u0445\u043e\u043b\u0441\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u043b\u0441\u044f \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435 \u0440\u043e\u0432\u043d\u043e canvas.style.left = 0 canvas.style.top = 0 canvas.style.position = 'absolute' \/\/\u0415\u0441\u043b\u0438 \u043d\u0435 \u0432\u043e \u0432\u0435\u0441\u044c \u044d\u043a\u0440\u0430\u043d - \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0441\u043a\u0440\u043e\u043b\u043b document.body.style.overflow = 'hidden' \/\/\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0442\u0430\u043d\u0438\u0446\u044b document.title = 'Game'<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u044d\u0442\u0430\u043f &#8212; \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432 \u0438\u0433\u0440\u0435. \u0421\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0431\u0435\u0434, \u0443\u0441\u043f\u0435\u0445\u043e\u0432 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f, \u043f\u0443\u0442\u0438 \u043a \u0444\u0430\u0439\u043b\u0430\u043c \u0437\u0432\u0443\u043a\u043e\u0432 \u0438 \u0442.\u0434. \u042f \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u044e \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043e\u0442 \u0434\u0430\u043d\u043d\u044b\u0445, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u0430\u0436\u0434\u044b\u0439 \u0431\u043b\u043e\u043a \u0438\u0433\u0440\u044b \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 JS \u043e\u0431\u044a\u0435\u043a\u0442. \u041e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043e\u043d\u0438 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 JSON.<\/p>\n<details class=\"spoiler\">\n<summary>\u0414\u0430\u043d\u043d\u044b\u0435<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">\/\/\u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u0443\u0440\u043e\u0432\u043d\u044f const level = {     \/\/\u0421\u0440\u0435\u0434\u043d\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u0438\u0433\u0440\u044b     defaultTime: 5400,     \/\/\u0426\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430 \u043d\u043e\u0432\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f     levelUpColor: '#ff00ff',     \/\/\u0426\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430 \u043e\u0447\u043a\u043e\u0432 \u0446\u0435\u043f\u043e\u0447\u043a\u0438     scoreColor: '#000000',     easy: {         \/\/\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0447\u043a\u043e\u0432 \u0434\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f         scoreUp: 10,         currentPosition: 0,         min: [100, 100],         max: [400, 300],         step: [100, 100],         positions:[ [100,100], [100,200], [200,200], [300,200] ],         lastTime: null,         bestTime: null,     }, } \/\/\u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u0431\u0430\u0437\u044b const base = { \/\/ \u041f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430     x: level.easy.positions[0][0],      y: level.easy.positions[0][1],      width: 100,      height: 100, \/\/ \u041f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u0432\u0442\u043e\u0440\u043e\u0433\u043e     x2: level.easy.positions[0][0],     y2: level.easy.positions[0][1],     width2: 10,      height2: 10, \/\/\u0417\u0430\u043b\u0438\u0432\u043a\u0430     strokeStyle:'#000000', \/\/\u0417\u0430\u043a\u0440\u0430\u0441\u043a\u0430     fillStyle:'#aaaaaa', } \/\/\u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0438 const mechanic = {     \/\/\u0426\u0432\u0435\u0442 \u0443\u0441\u043f\u043e\u043a\u043e\u0435\u043d\u0438\u044f     successColor: '#0000ff',     \/\/\u0426\u0432\u0435\u0442 \u043f\u043e\u0431\u0435\u0434\u044b     winColor: '#00ff00',     \/\/\u0426\u0432\u0435\u0442 \u043f\u043e\u0440\u0430\u0436\u0435\u043d\u0438\u044f     failColor: '#ff0000',     \/\/\u0417\u0430\u043a\u0440\u0430\u0441\u043a\u0430 \u044d\u043a\u0440\u0430\u043d\u0430     eraserColor: '#ffffff20',     wins: 3,     looses: 3,     successes: 0,     fails: 0,     sizeStep: 20,     winner:false,     hits: 0,     success: false,     cursor: { x: 0, y: 0 },     size: 0,     overwinSizeStep: 10,     overwin: 0,     baseWidth: base.width,     baseHeight: base.height,     pointerShrink: 0.85, } \/\/\u041f\u0443\u0442\u0438 \u043a \u0437\u0432\u0443\u043a\u0430\u043c const audio = {     fail:'sfx\/fail.mp3',     level:'sfx\/level.mp3',     success: 'sfx\/success.mp3',     win:'sfx\/win.mp3',     loose:'sfx\/loose.mp3',     score:'sfx\/score.mp3' }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u044d\u0442\u0438\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c, \u043a\u0430\u043a \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0430 \u0438\u0433\u0440\u044b \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c.<\/p>\n<details class=\"spoiler\">\n<summary>\u0411\u0430\u0437\u0430<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">\/\/\u0420\u0438\u0441\u0443\u0435\u043c \u0431\u0430\u0437\u0443 function drawBase() {     context.strokeStyle = base.strokeStyle \/\/ \u0426\u0432\u0435\u0442 \u043e\u0431\u0432\u043e\u0434\u043a\u0438     context.fillStyle = base.fillStyle \/\/ \u0426\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438     context.fillRect(base.x, base.y, base.width, base.height) \/\/ \u0437\u0430\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c     context.strokeRect(base.x2, base.y2, base.width2, base.height2) \/\/ \u043e\u0431\u0432\u043e\u0434\u0438\u043c }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>\u0417\u0430\u043b\u0438\u0432\u043a\u0430 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">function fade(){     context.fillStyle = mechanic.eraserColor \/\/ \u0426\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438     context.fillRect(0, 0, canvas.width, canvas.height) \/\/ \u0437\u0430\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>\u0421\u043e\u0431\u044b\u0442\u0438\u0435 \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">function onClick(e) {     fade()     base.x2 = e.x - base.width2 \/ 2     base.y2 = e.y - base.height2 \/ 2     mechanic.hits++     mechanic.cursor = getCursorPositionOnCanvas(canvas, e)     mechanic.success =          mechanic.cursor.x >= base.x &amp;&amp; mechanic.cursor.y >= base.y         &amp;&amp; mechanic.cursor.x &lt;= base.x + base.width         &amp;&amp; mechanic.cursor.y &lt;= base.y + base.height     if(mechanic.success){         new Audio(audio.success).play()         mechanic.fails = 0         mechanic.successes++         if(mechanic.successes >= mechanic.wins){             new Audio(audio.win).play()             mechanic.overwin = 1 + mechanic.successes - mechanic.wins             mechanic.size = mechanic.size + mechanic.sizeStep             mechanic.fillStyle = mechanic.winColor             level.easy.currentPosition++             level.easy.currentPosition = level.easy.currentPosition % level.easy.positions.length             if(level.easy.currentPosition === 0){                 mechanic.winner = true                 if(level.easy.lastTime===null){                     level.easy.lastTime = new Date()                 }                  else{                     level.easy.bestTime =  new Date() - level.easy.lastTime                 }             }             const position = level.easy.positions[level.easy.currentPosition]             base.x = position[0]             base.y = position[1]             base.x2 =  position[0] + base.width \/ 2 -  base.width2 \/ 2             base.y2 = position[1] + base.height \/ 2 -  base.height2 \/ 2             drawBase()         }         else{             mechanic.fillStyle = mechanic.successColor              mechanic.size = mechanic.successes \/ mechanic.wins * mechanic.sizeStep         }     }     else{         new Audio(audio.fail).play()         level.easy.currentPosition = 0         level.easy.lastTime = null         mechanic.fails++         mechanic.successes=0         if(mechanic.fails >= mechanic.looses){             new Audio(audio.loose).play()             mechanic.winner = false             mechanic.fails = 0             context.fillStyle = mechanic.failColor             context.fillRect(base.x, base.y, base.width, base.height)             base.x = mechanic.cursor.x - base.width \/2             base.y = mechanic.cursor.y - base.height \/2             drawBase()         }         if(mechanic.winner){             drawBase()         }         if(mechanic.overwin > 0){             mechanic.successes=mechanic.wins             mechanic.overwin = 0             mechanic.size = 0             context.fillStyle = mechanic.failColor             context.fillRect(base.x, base.y, base.width, base.height)             drawBase()         }         mechanic.size = mechanic.fails \/ mechanic.looses * mechanic.sizeStep         mechanic.fillStyle = mechanic.failColor     }     context.fillStyle = mechanic.fillStyle     context.fillRect(mechanic.cursor.x - mechanic.size\/2, mechanic.cursor.y - mechanic.size\/2, mechanic.size , mechanic.size)      if(level.easy.bestTime !== null){         showText(e)     } }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u043e\u0447\u043a\u043e\u0432 \u0438 \u043f\u043e\u0431\u0435\u0434\u044b<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">function showText(e) {     new Audio(audio.score).play()     const speed = level.defaultTime \/ level.easy.bestTime     const rating = 1 + Math.round(speed * 5)     const fontSize = (10 + 15 * speed)     context.font = fontSize + \"px serif\"     context.fillStyle = level.scoreColor     context.fillText('+' + rating + '!', e.x, e.y)     level.easy.bestTime = null     level.easy.lastTime = new Date()     if (rating > level.easy.scoreUp) {         new Audio(audio.level).play()         document.title = 'x' + level.easy.positions.length         context.fillStyle = level.levelUpColor         context.fillText('NEXT LEVEL!', e.x, e.y + fontSize)         const random = getRandom(mechanic.hits)         addLevelPosition(random)     } }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u043e\u0432\u0443\u044e \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u0432 \u0446\u0435\u043f\u043e\u0447\u043a\u0443 \u0434\u043b\u044f \u043e\u0442\u043b\u0438\u0447\u043d\u0438\u043a\u0430<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">function addLevelPosition(random){     const lastPosition = level.easy.positions[level.easy.positions.length-1]     const directions = []     if(lastPosition[0]>level.easy.min[0]){ directions.push( [-1,0]) }     if(lastPosition[0]&lt;level.easy.max[0]){ directions.push( [1,0]) }     if(lastPosition[1]>level.easy.min[1]){ directions.push( [0,-1]) }     if(lastPosition[1]&lt;level.easy.max[1]){ directions.push( [0,1]) }     const directionId = Math.round(random * (directions.length-1))     const direction = directions[directionId]     const newX = lastPosition[0]+direction[0]*level.easy.step[0]     const newY = lastPosition[1]+direction[1]*level.easy.step[1]     const newPosition = [newX,newY]     level.easy.positions.push(newPosition) }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>\u0414\u0435\u0442\u0430\u043b\u0438<\/summary>\n<div class=\"spoiler__content\">\n<p>\u042d\u0442\u043e \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0442\u043e\u0447\u043a\u0443 \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u044f \u043d\u0430 \u0445\u043e\u043b\u0441\u0442\u0435, \u0430 \u043d\u0435 \u043d\u0430 \u0432\u0441\u0435\u043c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435. \u0412\u0435\u0434\u044c \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u043c\u044b \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043f\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0443, \u0430 \u043d\u0435 \u0445\u043e\u043b\u0441\u0442\u0443.<\/p>\n<pre><code class=\"javascript\">function getCursorPositionOnCanvas(canvas, evt) {     var rect = canvas.getBoundingClientRect()     return {         x: evt.clientX - rect.left,         y: evt.clientY - rect.top     } }<\/code><\/pre>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f (<em>random<\/em>) &#8212; \u044f \u0431\u0435\u0440\u0443 \u043d\u043e\u043c\u0435\u0440 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u0438 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u044e \u043e\u0442 \u043d\u0435\u0433\u043e \u043a\u043e\u0441\u0438\u043d\u0443\u0441. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u043f\u0441\u0435\u0432\u0434\u043e\u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0435 (\u043d\u0435\u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e\u0435) \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043e\u0442 -1 \u0434\u043e 1, \u043c\u0438\u043d\u0443\u0441 &#8212; \u0443\u0431\u0438\u0440\u0430\u0435\u043c.<\/p>\n<pre><code class=\"javascript\">function getRandom(increment){     const random = Math.abs(Math.cos(increment))     return random }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>\u0421\u043e\u0431\u044b\u0442\u0438\u044f<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0412 \u0438\u0433\u0440\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f 3 \u0442\u0438\u043f\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439: \u0438\u0433\u0440\u043e\u043a \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b \u0438\u0433\u0440\u0443 &#8212; \u0440\u0438\u0441\u0443\u0435\u043c \u0431\u0430\u0437\u0443. \u0418\u0433\u0440\u043e\u043a \u043d\u0430\u0436\u0430\u043b \u043d\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 &#8212; \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043d\u0430\u0436\u0430\u0442\u0438\u0435. \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c 2 \u0442\u0430\u0439\u043c\u0435\u0440\u0430, \u043f\u0435\u0440\u0432\u044b\u0439 &#8212; \u0437\u0430\u043a\u0440\u0430\u0441\u043a\u0430 \u044d\u043a\u0440\u0430\u043d\u0430 \u0434\u043b\u044f \u043e\u0442\u043b\u0438\u0447\u043d\u0438\u043a\u0430 (winner), \u0438 \u0434\u043b\u044f \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u044f \u0441\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u043d\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0441\u044f \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u0438\u043c.<\/p>\n<pre><code class=\"javascript\">drawBase() document.body.addEventListener('pointerdown', onClick) setInterval(()=>{     if(mechanic.winner>0){         fade()     } }, 1000\/30) setInterval(()=>{     mechanic.size *= mechanic.pointerShrink },100)<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<h2>\u041f\u043e\u043b\u0438\u0440\u043e\u0432\u043a\u0430<\/h2>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0438 \u0433\u043e\u0442\u043e\u0432\u044b &#8212; \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u043a &#171;\u043f\u043e\u043b\u0438\u0440\u043e\u0432\u043a\u0435&#187; \u0438\u0433\u0440\u044b. \u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 &#8212; \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u0435\u043d. \u0412\u0441\u0435\u0433\u0434\u0430 \u0435\u0441\u0442\u044c \u0447\u0442\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c, \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438\u0433\u0440\u043e\u0432\u044b\u0445 \u0441\u0438\u0441\u0442\u0435\u043c, \u043d\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u043d\u0438\u044f \u0438 \u043d\u0430\u0432\u044b\u043a\u0438. \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0438\u0433\u0440\u044b \u0438\u0437 \u0441\u0442\u0430\u0442\u044c\u0438 &#8212; \u043d\u0443\u0436\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438 \u0431\u043b\u043e\u043a\u043d\u043e\u0442. \u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043c\u043e\u0436\u043d\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0430 \u044d\u0442\u043e \u041f\u041e \u0435\u0441\u0442\u044c \u0432 \u043f\u043e\u0434\u0430\u0432\u043b\u044f\u044e\u0449\u0435\u043c \u0447\u0438\u0441\u043b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0441\u0438\u0441\u0442\u0435\u043c.<\/p>\n<figure class=\"float full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/109\/96f\/f39\/10996ff3911da6d4b5630afded563539.png\" alt=\"OSU\" title=\"OSU\" width=\"1280\" height=\"720\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/109\/96f\/f39\/10996ff3911da6d4b5630afded563539.png\"\/><\/p>\n<div><figcaption>OSU<\/figcaption><\/div>\n<\/figure>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e, \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u0438 \u0443\u043c\u0435\u043d\u0438\u0435 &#8212; \u0434\u0430\u0436\u0435 \u0438\u0433\u0440\u0443 \u0441 \u0433\u043e\u0442\u043e\u0432\u043e\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u0443\u0441\u0438\u043b\u0435\u043d\u0438\u0435\u043c \u044d\u043c\u043e\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0442\u043a\u043b\u0438\u043a\u0430 (\u043a\u0430\u043a \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0437\u0432\u0443\u043a\u0430). \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043a\u0430\u043a \u0438 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435, \u0442\u0430\u043a \u0438 \u0437\u0432\u0443\u043a\u043e\u0432\u043e\u0435. \u041c\u043e\u0436\u043d\u043e \u0443\u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0438\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0438. \u0417\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438 \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0444\u043e\u043d\u043e\u0432\u0443\u044e \u043c\u0443\u0437\u044b\u043a\u0443, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u043f\u043e\u0434\u0441\u0447\u0435\u0442\u0430 \u043e\u0447\u043a\u043e\u0432; \u043c\u0443\u043b\u044c\u0442\u0438\u043f\u043b\u0435\u0435\u0440\u043d\u043e\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 (<em>multi &#8212; \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e, player &#8212; \u0438\u0433\u0440\u043e\u043a<\/em>), \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0437\u0432\u0443\u043a\u043e\u0432 \u0438 \u0442.\u0434. \u041e\u0434\u0438\u043d \u0438\u0437 \u0443\u0441\u043f\u0435\u0448\u043d\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u043a\u043b\u0438\u043a\u0435\u0440\u0430 &#8212; OSU, \u043d\u0435\u043c\u0430\u043b\u043e\u0432\u0430\u0436\u043d\u043e\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u043e\u0439 \u0432 \u043d\u0435\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u0443\u0437\u044b\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0438\u0442\u043c, \u0432\u043e\u0437\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043d\u0430 \u0447\u0443\u0432\u0441\u0442\u0432\u0430 \u0442\u0430\u043a\u0442\u0430 (<em>tactus &#8212; \u043f\u0440\u0438\u043a\u043e\u0441\u043d\u043e\u0432\u0435\u043d\u0438\u0435, \u0442\u043e\u043b\u0447\u043e\u043a<\/em>,\u00a0<em>\u0443\u0434\u0430\u0440<\/em>), \u044d\u043c\u043e\u0446\u0438\u044f \u043a\u043e\u0433\u0434\u0430 &#171;\u043c\u0443\u0437\u044b\u043a\u0430 \u043a\u0430\u0447\u0430\u0435\u0442&#187;.<\/p>\n<figure class=\"float full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/d23\/b02\/335\/d23b0233509de97e888f65c9e0bb8247.jpg\" alt=\"\u0411\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0441\u0442\u044c - \u043d\u0435 \u043f\u0440\u0435\u0434\u0435\u043b\" title=\"\u0411\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0441\u0442\u044c - \u043d\u0435 \u043f\u0440\u0435\u0434\u0435\u043b\" width=\"700\" height=\"745\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d23\/b02\/335\/d23b0233509de97e888f65c9e0bb8247.jpg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0411\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0441\u0442\u044c &#8212; \u043d\u0435 \u043f\u0440\u0435\u0434\u0435\u043b<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e, \u0443 \u0438\u0433\u0440\u044b \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043a\u0430\u043a \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0434\u0438\u0437\u0430\u0439\u043d, \u0442\u0430\u043a \u0438 \u0437\u0432\u0443\u043a\u043e\u0432\u043e\u0439. \u041a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u044d\u0442\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0433\u0440\u044b \u043c\u043e\u0436\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c, \u043e\u0434\u043d\u0430\u043a\u043e \u044d\u0442\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u043d\u0430\u0432\u044b\u043a\u043e\u0432 \u0432 \u044d\u0442\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438. \u0412 \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u0433\u0440\u0435 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0438 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0437\u043d\u0430\u0447\u0438\u043c\u044b\u0435 \u0447\u0430\u0441\u0442\u0438, \u0441\u0438\u043b\u044c\u043d\u044b\u0435 \u0438 \u0441\u043b\u0430\u0431\u044b\u0435 \u0441\u0442\u043e\u0440\u043e\u043d\u044b. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0438 \u0438\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u044f. \u041a\u0430\u043a \u0438 \u043f\u0440\u0438\u0447\u0438\u043d\u044b, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0432 \u043d\u0438\u0445 \u0431\u0443\u0434\u0443\u0442 \u0438\u0433\u0440\u0430\u0442\u044c. \u0418\u0433\u0440\u0430 &#8212; \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u043e\u043c \u0438\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u0430, \u0441\u043e\u0447\u0435\u0442\u0430\u044e\u0449\u0430\u044f \u0432 \u0441\u0435\u0431\u0435 \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u043e\u0432 \u0438\u0441\u043a\u0443\u0441\u0441\u0442\u0432: \u0436\u0438\u0432\u043e\u043f\u0438\u0441\u0438, \u043c\u0443\u0437\u044b\u043a\u0438, \u043f\u0435\u0441\u043d\u044c, \u043f\u043e\u044d\u0437\u0438\u0438 \u0438 \u043f\u0440\u043e\u0437\u044b, \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u043e\u0433\u043e \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u0442\u0432\u0430, \u043a\u0438\u043d\u043e \u0438 \u0442.\u0434. \u0422\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0438 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043d\u043e\u0432\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u0447\u0443\u0432\u0441\u0442\u0432\u0430\u043c\u0438 \u0438\u0433\u0440\u043e\u043a\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u0430\u043a\u0442\u0438\u043b\u044c\u043d\u044b\u0435 (\u0432\u0438\u0431\u0440\u043e\u043c\u043e\u0442\u043e\u0440, \u043b\u0430\u0437\u0435\u0440\u043d\u044b\u0439 \u043f\u0438\u0441\u0442\u043e\u043b\u0435\u0442, \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u0438 \u0442.\u0434.) \u0438\u043b\u0438  \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 (\u043e\u0447\u043a\u0438 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438).<\/p>\n<p>\u0421\u0430\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u0438 \u043a\u043e\u0434 \u0438\u0433\u0440\u044b \u0442\u043e\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0430\u0442\u044c. \u041f\u043e\u0434\u0435\u043b\u044e\u0441\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c\u0438 \u0432 \u044d\u0442\u043e\u043c \u0434\u0435\u043b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438.<\/p>\n<p>\u0420\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043a\u043e\u0434\u0430 <strong>Visual Studio Code<\/strong> <a href=\"https:\/\/code.visualstudio.com\/\" rel=\"noopener noreferrer nofollow\">https:\/\/code.visualstudio.com\/<\/a> <\/p>\n<p>\u041e\u043d\u043b\u0430\u0439\u043d \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u043c\u0443\u0437\u044b\u043a\u0438 Online Sequencer <a href=\"https:\/\/onlinesequencer.net\/\" rel=\"noopener noreferrer nofollow\">https:\/\/onlinesequencer.net\/<\/a><\/p>\n<p>\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 2D \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d \u0438 \u043d\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u0435\u043d, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u043d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0438\u0433\u0440. \u0421 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435\u043c WebGL &#8212; \u0438\u0433\u0440\u044b \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 &#8212; \u0431\u043e\u043b\u0435\u0435 \u043d\u0430\u0432\u043e\u0440\u043e\u0447\u0435\u043d\u044b \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438. \u042f \u0435\u0433\u043e \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b, \u0442.\u043a. \u043e\u043d \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u044b\u0439. \u041e\u0434\u043d\u0430\u043a\u043e, \u0435\u0433\u043e <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/WebGLRenderingContext\" rel=\"noopener noreferrer nofollow\">\u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a<\/a>:<\/p>\n<pre><code class=\"javascript\">const canvas = document.getElementById(\"myCanvas\"); const gl = canvas.getContext(\"webgl\");<\/code><\/pre>\n<p>\u0415\u0441\u0442\u044c \u0434\u0432\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0432 webgl, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u043f\u0440\u043e\u0449\u0430\u044e\u0442 \u0440\u0430\u0431\u043e\u0442\u0443:<\/p>\n<p><a href=\"https:\/\/threejs.org\/\" rel=\"noopener noreferrer nofollow\">https:\/\/threejs.org\/<\/a> \u0434\u043b\u044f 3D<\/p>\n<p><a href=\"https:\/\/pixijs.com\/\" rel=\"noopener noreferrer nofollow\">https:\/\/pixijs.com\/<\/a> \u0434\u043b\u044f 2D<\/p>\n<p><strong>QA<\/strong><\/p>\n<ul>\n<li>\n<p><em>\u041f\u043e\u0447\u0435\u043c\u0443 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0439? <\/em>\u041f\u043e\u0442\u043e\u043c\u0443, \u043a\u0430\u043a \u044f \u043d\u0435 \u0437\u043d\u0430\u044e \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430. \u0421\u0430\u043c\u044b\u0439 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u044f\u0437\u044b\u043a (\u0442.\u0435. \u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439, \u0442.\u043a. \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u044f\u0437\u044b\u043a &#8212; \u0441\u043b\u043e\u0436\u043d\u043e). \u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043a \u0441\u0440\u0435\u0434\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u041e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 &#8212; \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u043e\u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u0438\u0437\u0443\u0447\u0430\u0442\u044c.<\/p>\n<\/li>\n<li>\n<p><em>\u041d\u043e \u0441\u043a\u0430\u0447\u0430\u0442\u044c \u0430\u0441\u0441\u0435\u0442\u043e\u0432 \u0432 UE \u0438 \u043d\u0430\u0442\u044b\u043a\u0430\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u043c\u044b\u0448\u043a\u043e\u0439 \u0436\u0435 \u043f\u0440\u043e\u0449\u0435?<\/em> \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043d\u043e, \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u0440\u043e \u0442\u043e, \u043a\u0430\u043a <strong>\u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c<\/strong> \u0438\u0433\u0440\u0443. \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u044e, \u0447\u0442\u043e \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u0443\u0436\u0435 \u0443\u043c\u0435\u0435\u0442.<\/p>\n<\/li>\n<li>\n<p><em>\u0413\u0434\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c?<\/em> <a href=\"https:\/\/ildar-in.itch.io\/rectangleclick\" rel=\"noopener noreferrer nofollow\">\u0412\u044b\u043b\u043e\u0436\u0438\u043b \u043d\u0430 itch.io<\/a>. \u041c\u0430\u043a\u0441\u0438\u043c\u0443\u043c \u043d\u0430\u0431\u0440\u0430\u043b \u0446\u0435\u043f\u043e\u0447\u043a\u0443 \u0438\u0437 12.<\/p>\n<\/li>\n<\/ul>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>\u0421\u0442\u0430\u0442\u044c\u044e \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u043a \u043f\u044f\u0442\u043d\u0438\u0447\u043d\u043e\u043c\u0443 \u0438\u0433\u0440\u043e\u0432\u043e\u043c\u0443 \u0434\u0436\u0435\u043c\u0443 (GMTK Game Jam 2023). \u041d\u0438\u043a\u043e\u0433\u0434\u0430 \u0432 \u043d\u0438\u0445 \u043d\u0435 \u0443\u0447\u0430\u0441\u0442\u0432\u043e\u0432\u0430\u043b, \u0432\u043e\u0442 \u0438 \u0440\u0435\u0448\u0438\u043b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0447\u0442\u043e \u0443\u0441\u043f\u0435\u044e \u0437\u0430\u043f\u0438\u043b\u0438\u0442\u044c \u0445\u043e\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0437\u0430 \u043f\u0430\u0440\u0443 \u0434\u043d\u0435\u0439, \u0437\u0430\u043e\u0434\u043d\u043e \u0440\u0435\u0444\u043b\u0435\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043b \u043d\u0430 \u0442\u0435\u043c\u0443 \u0433\u0435\u0439\u043c \u0434\u0438\u0437\u0430\u0439\u043d\u0430. <a href=\"https:\/\/ildar-in.itch.io\/\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u0431\u043e\u043b\u0435\u0439\u0442\u0435 \u0437\u0430 \u043c\u0435\u043d\u044f<\/a> \u0438\u043b\u0438 \u0441\u0430\u043c\u0438 <a href=\"https:\/\/itch.io\/jam\/gmtk-2023\" rel=\"noopener noreferrer nofollow\">\u0443\u0447\u0430\u0441\u0442\u0432\u0443\u0439\u0442\u0435<\/a>.<\/p>\n<p>\u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435!<\/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\/745954\/\"> https:\/\/habr.com\/ru\/articles\/745954\/<\/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>\u041d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043b\u0438\u0448\u044c \u0431\u043b\u043e\u043a\u043d\u043e\u0442 \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440. \u0418\u0433\u0440\u0430 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c. \u041d\u0430 windows, android, linux \u0438 \u0434\u0430\u0436\u0435 \u043d\u0430 \u0442\u0435\u043b\u0435\u0432\u0438\u0437\u043e\u0440\u0435. \u0422\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f HTML5.<\/p>\n<p>\u042f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0433\u0443\u043c\u0430\u043d\u0438\u0442\u0430\u0440\u0438\u0439, \u0435\u0441\u043b\u0438 \u0447\u0442\u043e.<\/p>\n<h2>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0431\u0430\u0437\u044b<\/h2>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0434\u0432\u0430 \u0444\u0430\u0439\u043b\u0430: <strong>index.html<\/strong> \u0438 <strong>script.js<\/strong>. \u041d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u043e\u0432 \u043d\u0430 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c, \u043a\u0430\u043a \u0438 \u043a\u043e\u0434 \u0438\u0433\u0440\u044b.<\/p>\n<p><strong>index.html<\/strong> \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0438\u0433\u0440\u044b (\u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435). \u0424\u0430\u0439\u043b \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0435\u0441\u0442\u044c \u0442\u0435\u043b\u043e (<em>body<\/em>) \u0438 \u0444\u0430\u0439\u043b\u044b \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 (<em>script<\/em>). \u041f\u043e\u043a\u0430 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0444\u0430\u0439\u043b script.js. \u041d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u0432\u0435 \u0441\u0442\u0440\u043e\u0447\u043a\u0438 \u0432 \u0444\u0430\u0439\u043b:<\/p>\n<pre><code class=\"xml\">&lt;body>&lt;\/body> &lt;script src=\"script.js\">&lt;\/script><\/code><\/pre>\n<p>\u0424\u0430\u0439\u043b <strong>script.js<\/strong> \u0445\u0440\u0430\u043d\u0438\u0442 \u043a\u043e\u0434 \u0438\u0433\u0440\u044b \u043d\u0430 \u044f\u0437\u044b\u043a\u0435 <a href=\"https:\/\/learn.javascript.ru\/\" rel=\"noopener noreferrer nofollow\">JavaScript<\/a>. \u0412 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <strong>\u0445\u043e\u043b\u0441\u0442 <\/strong>(<em>canvas<\/em>), \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0438\u0433\u0440\u0443. \u0417\u0430\u0442\u0435\u043c, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0445\u043e\u043b\u0441\u0442 \u0432 \u0442\u0435\u043b\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 (<em>document<\/em>). \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 script.js:<\/p>\n<pre><code class=\"javascript\">const canvas = document.createElement('canvas')  \/\/ \u0421\u043e\u0437\u0434\u0430\u043b\u0438 \u0445\u043e\u043b\u0441\u0442 document.body.appendChild(canvas)  \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0445\u043e\u043b\u0441\u0442 \u0432 \u0442\u0435\u043b\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430<\/code><\/pre>\n<figure class=\"float\">\n<div><figcaption>2D<\/figcaption><\/div>\n<\/figure>\n<p>\u0421\u043b\u043e\u0432\u043e &#171;<a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%9A%D0%BE%D0%BD%D1%82%D0%B5%D0%BA%D1%81%D1%82\" rel=\"noopener noreferrer nofollow\"><em>\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442<\/em><\/a>&#187; \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 <strong>\u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e<\/strong>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0447\u0442\u043e-\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442. \u0418\u0433\u0440\u0430 \u0434\u0432\u0443\u0445\u043c\u0435\u0440\u043d\u0430\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0432 <em>\u0434\u0432\u0443\u043c\u0435\u0440\u043d\u043e\u043c 2d \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435<\/em> (<em>context, <\/em>2D, <em>Dimensional &#8212; \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0435<\/em>). \u041d\u0430\u0440\u0438\u0441\u0443\u0435\u043c \u043d\u0430 \u0445\u043e\u043b\u0441\u0442\u0435 \u0434\u0432\u0430 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 (<em>rectangle, rect<\/em>). \u041e\u0434\u0438\u043d \u0447\u0435\u0440\u043d\u044b\u0439 (<em>#000000<\/em>), \u0434\u0440\u0443\u0433\u043e\u0439 &#8212; \u0441\u0435\u0440\u044b\u0439 (<em>#aaaaaa<\/em>). <a href=\"https:\/\/www.w3schools.com\/colors\/colors_hexadecimal.asp\" rel=\"noopener noreferrer nofollow\">\u0426\u0432\u0435\u0442\u0430 \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0432 16-\u0440\u0438\u0447\u043d\u044b\u043c \u0447\u0438\u0441\u043b\u043e\u043c (<em>hexidecimal; hex<\/em>).<\/a> \u0420\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043d\u0430 \u0445\u043e\u043b\u0441\u0442\u0435 \u0438\u0437\u043c\u0435\u0440\u044f\u044e\u0442\u0441\u044f \u0432 <a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%9F%D0%B8%D0%BA%D1%81%D0%B5%D0%BB%D1%8C\" rel=\"noopener noreferrer nofollow\">\u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445<\/a> (<em>pixel; px<\/em>), \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u043e\u0442 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u043b\u0435\u0432\u043e\u0433\u043e \u0443\u0433\u043b\u0430, \u0434\u0432\u0443\u043c\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f\u043c\u0438 \u0438\u043a\u0441 (<em>x<\/em>) \u0438 \u0438\u0433\u0440\u0438\u043a (<em>y<\/em>). \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0443 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430  \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0445\u043e\u043b\u0441\u0442\u0435 (<em>x,y<\/em>), \u0448\u0438\u0440\u0438\u043d\u0430 \u0438 \u0432\u044b\u0441\u043e\u0442\u0430 (<em>width, height<\/em>), \u0446\u0432\u0435\u0442 (<em>color<\/em>). \u041e\u043d \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0431\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u043c (<em>stroke<\/em>) \u0438\u043b\u0438 \u0437\u0430\u043a\u0440\u0430\u0448\u0435\u043d\u043d\u044b\u043c (<em>fill<\/em>). <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/CanvasRenderingContext2D\" rel=\"noopener noreferrer nofollow\">\u041e \u0442\u043e\u043c, \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c 2D \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0445\u043e\u043b\u0441\u0442\u0430 \u0432 WEB<\/a>, \u0430 \u0442\u0430\u043a \u0436\u0435 &#8212; <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/Canvas_API\/Tutorial\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u043b\u043d\u043e\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e<\/a>.<\/p>\n<pre><code class=\"javascript\">canvas.width = 400 \/\/ \u0428\u0438\u0440\u0438\u043d\u0430 \u0445\u043e\u043b\u0441\u0442\u0430 canvas.height = 225 \/\/ \u0412\u044b\u0441\u043e\u0442\u0430 \u0445\u043e\u043b\u0441\u0442\u0430 context = canvas.getContext('2d') \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c 2d \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 context.strokeStyle = '#ff0000' \/\/ \u0426\u0432\u0435\u0442 \u043e\u0431\u0432\u043e\u0434\u043a\u0438 context.fillStyle = '#0000ff' \/\/ \u0426\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 x = 0, y = 0, width = 100, height = 100 \/\/ \u041f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 context.strokeRect(x, y, width, height) \/\/ \u041f\u0435\u0440\u0432\u044b\u0439 - \u043e\u0431\u0432\u043e\u0434\u0438\u043c x2 = 150, y2 = 0, width2 = 100, height2 = 100 \/\/ \u041f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u0432\u0442\u043e\u0440\u043e\u0433\u043e context.fillRect(x2, y2, width2, height2) \/\/ \u0412\u0442\u043e\u0440\u043e\u0439 - \u0437\u0430\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c<\/code><\/pre>\n<figure class=\"float\">\n<div><figcaption>v.0.1<\/figcaption><\/div>\n<\/figure>\n<p>\u041c\u043e\u0436\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0444\u0430\u0439\u043b index.html \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0447\u0442\u043e \u0438\u0433\u0440\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0414\u043e\u043b\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u043d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0435 v.0.1. \u0415\u0449\u0435 \u043c\u0430\u043b\u043e \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u0438\u0433\u0440\u0443, \u043d\u043e \u0442\u0435\u043f\u0435\u0440\u044c, \u0443\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c <strong>\u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438<\/strong> <em>(interaction, inter &#8212; \u043f\u043e\u0441\u0440\u0435\u0434\u0438, act &#8212; \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435), <\/em>\u0447\u0442\u043e\u0431\u044b \u0445\u043e\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b\u043e<em>.<\/em><\/p>\n<h2>\u041c\u0435\u0445\u0430\u043d\u0438\u043a\u0438<\/h2>\n<p>\u041f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435\/\u043f\u0440\u043e\u0438\u0441\u0448\u0435\u0441\u0442\u0432\u0438\u0435. \u0421\u043e\u0431\u044b\u0442\u0438\u0435 \u0432 <em>\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435<\/em> \u0438\u0433\u0440\u044b &#8212; \u044d\u0442\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0430. \u041f\u0440\u0438\u0447\u0438\u043d\u044b \u043c\u043e\u0433\u0443\u0442 \u043f\u043e \u0440\u0430\u0437\u043d\u044b\u043c\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b \u0438\u0433\u0440\u0443, \u043f\u0440\u043e\u0448\u043b\u043e \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0432\u0440\u0435\u043c\u044f, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0436\u0430\u043b \u043a\u043b\u0430\u0432\u0438\u0448\u0443 \u0438\u043b\u0438 \u0442\u044b\u043a\u043d\u0443\u043b \u043f\u0430\u043b\u044c\u0446\u0435\u043c\/\u043c\u044b\u0448\u043a\u043e\u0439 \u0432 \u044d\u043a\u0440\u0430\u043d. \u041d\u0430 \u044d\u0442\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0440\u0435\u0430\u043a\u0446\u0438\u044e \u0438\u0433\u0440\u044b (<em>re &#8212; \u043e\u0431\u0440\u0430\u0442\u043d\u043e<\/em>, <em>act &#8212; \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435<\/em>), \u0438\u043d\u044b\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438 &#8212; \u043e\u0442\u0432\u0435\u0442\u043d\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043e\u0442 \u0438\u0433\u0440\u044b \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043e\u0442 \u0438\u0433\u0440\u043e\u043a\u0430. \u0412 <em>\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 <\/em>\u0436\u0435 \u0438\u0433\u0440\u043e\u043a\u0430 (\u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0438\u0433\u0440\u043e\u043a\u0430), \u0441\u043e\u0431\u044b\u0442\u0438\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0434\u0432\u0443\u0445 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432, \u0430 \u0435\u0433\u043e \u0440\u0435\u0430\u043a\u0446\u0438\u0435\u0439 \u0431\u0443\u0434\u0435\u0442 \u044d\u043c\u043e\u0446\u0438\u044f (<em>emotion,<\/em> <em>e &#8212; \u043d\u0430\u0440\u0443\u0436\u0443, moveo &#8212; \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f<\/em>). \u0412 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u044d\u043c\u043e\u0446\u0438\u0438 &#8212; \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 &#8212; \u043a\u043b\u0438\u043a \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435.<\/p>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0440\u0435\u0430\u043a\u0446\u0438\u044e \u0438\u0433\u0440\u044b, \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u0432\u0435\u0442\u0438\u0442\u044c \u043d\u0430 \u0432\u043e\u043f\u0440\u043e\u0441 &#8212; \u0447\u0442\u043e\u0431\u044b \u0447\u0442\u043e? \u0418\u0433\u0440\u0430 &#8212; \u0438\u043d\u0441\u0442\u0438\u043d\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f. \u041f\u0440\u043e\u0448\u043b\u043e \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u0445\u043e\u0440\u043e\u0448\u043e \u0438\u043b\u0438 \u043f\u043b\u043e\u0445\u043e &#8212; \u0438\u0433\u0440\u043e\u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043f\u043e \u0441\u0432\u043e\u0438\u043c \u044d\u043c\u043e\u0446\u0438\u044f\u043c. \u0415\u0441\u043b\u0438 \u044d\u043c\u043e\u0446\u0438\u0438 \u043f\u043e\u0437\u0438\u0442\u0438\u0432\u043d\u044b\u0435 &#8212; \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0443\u0441\u0432\u043e\u0435\u043d \u0443\u0441\u043f\u0435\u0448\u043d\u043e, \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u044b\u0435 &#8212; \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b. \u0418\u0433\u0440\u043e\u043a \u043e\u0441\u043e\u0437\u043d\u0430\u0435\u0442 \u0438 \u044d\u043c\u043e\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u0440\u0435\u0430\u0433\u0438\u0440\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438\u0433\u0440\u044b, \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0435 <strong>\u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0438<\/strong> (<em>mech; meg\u02b0 &#8212; \u043c\u043e\u0447\u044c<\/em>). \u0415\u0441\u043b\u0438 \u0438\u0433\u0440\u0430 \u0438\u0445 \u043d\u0435 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 &#8212; \u043e\u043d\u0438 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f <em>\u0441\u043a\u0440\u044b\u0442\u044b\u043c\u0438<\/em>, \u0438\u043d\u0430\u0447\u0435 &#8212; <em>\u044f\u0432\u043d\u044b\u043c\u0438<\/em>. \u0418\u0433\u0440\u043e\u043a \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0438\u0433\u0440\u044b &#8212; <em>\u043e\u0431\u044a\u0435\u043a\u0442<\/em> (<em>ob &#8212; \u043d\u0430\u043f\u0440\u043e\u0442\u0438\u0432, iactum<\/em> <em>&#8212; \u0432\u043e\u0437\u0434\u0432\u0438\u0433\u0430\u044e<\/em>), \u0442.\u0435. \u0438\u0433\u0440\u0430 \u0432\u043e\u0437\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442 \u043d\u0430 \u0438\u0433\u0440\u043e\u043a\u0430 \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c \u043c\u0435\u0445\u0430\u043d\u0438\u043a.<\/p>\n<figure class=\"float full-width\"><\/figure>\n<p>\u0427\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e &#8212; \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0438 \u0431\u0435\u0440\u0443\u0442 \u0443\u0436\u0435 \u0438\u0437 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0445 \u0438\u0433\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0435\u0431\u044f \u0437\u0430\u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043b\u0438. \u041e\u0431\u044b\u0447\u043d\u043e, \u0441\u043e\u0432\u043e\u043a\u0443\u043f\u043d\u043e\u0441\u0442\u044c \u043c\u0435\u0445\u0430\u043d\u0438\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442 <strong>\u0436\u0430\u043d\u0440<\/strong> \u0438\u0433\u0440\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0436\u0430\u043d\u0440 &#171;\u043a\u0432\u0435\u0441\u0442&#187; (<em>quest &#8212; \u043f\u043e\u0438\u0441\u043a\u0438<\/em>). \u041a\u0430\u043a \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0437 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f &#8212; \u044d\u0442\u043e \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0430 \u043f\u043e\u0438\u0441\u043a\u0430 \u0447\u0435\u0433\u043e \u043b\u0438\u0431\u043e. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0433\u0440\u0430 &#171;\u041d\u0430\u0439\u0434\u0438 \u0412\u0430\u043b\u044c\u0434\u043e&#187; &#8212; \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043f\u0430\u0440\u043d\u044f \u0432 \u043a\u0440\u0430\u0441\u043d\u043e-\u0431\u0435\u043b\u043e\u043c \u043a\u043e\u043b\u043f\u0430\u043a\u0435 \u0438 \u0441\u0432\u0438\u0442\u0435\u0440\u0435 \u0441\u0440\u0435\u0434\u0438 \u043a\u0443\u0447\u0438 \u043f\u043e\u0445\u043e\u0436\u0438\u0445 \u043b\u044e\u0434\u0435\u0439. \u041f\u043e\u043c\u0438\u043c\u043e \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f &#8212; \u0438\u0433\u0440\u0430 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u043b\u0435\u0447\u044c \u0438\u0433\u0440\u043e\u043a\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0430\u043c\u0438: \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0438 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044c\u043d\u044b\u0435. \u0421\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442 \u044d\u043c\u043e\u0446\u0438\u0438 \u0447\u0443\u0432\u0441\u0442\u0432\u0430 \u043f\u0440\u0438\u043d\u0430\u0434\u043b\u0435\u0436\u043d\u043e\u0441\u0442\u0438, \u0447\u0443\u0432\u0441\u0442\u0432\u0430 \u043f\u0440\u0438\u0437\u043d\u0430\u043d\u0438\u044f; \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044c\u043d\u044b\u0435 &#8212; \u0430\u0437\u0430\u0440\u0442 (<em>\u041d\u0435 \u0434\u0443\u043c\u0430\u044e, \u0447\u0442\u043e \u043c\u043e\u0435\u0439 \u043a\u043e\u043c\u043f\u0435\u0442\u0435\u043d\u0446\u0438\u0438 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u043d\u0430 \u0438\u0441\u0447\u0435\u0440\u043f\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u0443\u0434\u0443 \u0440\u0430\u0434 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044e \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445<\/em>).<\/p>\n<figure class=\"float full-width\">\n<div><figcaption>\u041a\u0440\u0438\u0432\u0430\u044f \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0438\u0433\u0440\u044b \u0432\u0430\u0436\u043d\u043e \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043a\u0440\u0438\u0432\u0443\u044e \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 \u0438\u0433\u0440\u043e\u043a &#171;<em>\u043f\u0435\u0440\u0435\u043e\u0431\u0443\u0447\u0435\u043d<\/em>&#187; &#8212; \u0438\u0433\u0440\u0430 \u043d\u0438\u0447\u0435\u043c\u0443 \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442 \u0435\u0433\u043e \u043d\u0430\u0443\u0447\u0438\u0442\u044c \u0438 \u0438\u0433\u0440\u043e\u043a\u0443 \u0431\u0443\u0434\u0435\u0442 \u0441\u043a\u0443\u0447\u043d\u043e. \u0415\u0441\u043b\u0438 \u0438\u0433\u0440\u043e\u043a &#171;<em>\u043d\u0435 \u043e\u0431\u0443\u0447\u0435\u043d<\/em>&#187; &#8212; \u0443 \u043d\u0435\u0433\u043e \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u0431\u044b\u0442\u044c \u0442\u0435\u0445 \u043d\u0430\u0432\u044b\u043a\u043e\u0432 \u0438 \u0437\u043d\u0430\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0438\u0433\u0440\u044b &#8212; \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043e\u043d \u043d\u0438\u0447\u0435\u043c\u0443 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0443\u0447\u0430\u0442\u044c\u0441\u044f \u0438 \u043e\u043d \u043f\u043e\u0442\u0435\u0440\u044f\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0435\u0441.<\/p>\n<h2>\u0413\u0435\u0439\u043c\u0434\u0438\u0437\u0430\u0439\u043d<\/h2>\n<p>\u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043d\u0430\u0443\u0447\u0438\u0442\u044c \u0438\u0433\u0440\u043e\u043a\u0430 \u043d\u0430\u0436\u0438\u043c\u0430\u0442\u044c \u043d\u0430 \u0437\u0430\u043a\u0440\u0430\u0448\u0435\u043d\u043d\u044b\u0439 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435. \u0414\u0435\u043b\u0430\u0435\u043c \u043c\u044b \u044d\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0438\u0433\u0440\u044b, \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c \u043c\u0435\u0445\u0430\u043d\u0438\u043a, \u0432\u043e\u0437\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044f \u043d\u0430 \u044d\u043c\u043e\u0446\u0438\u0438 \u0438\u0433\u0440\u043e\u043a\u0430. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0438\u0433\u0440\u043e\u043a \u0443\u0436\u0435 \u043e\u0431\u0443\u0447\u0435\u043d \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0441\u0438\u043d\u0438\u0439 &#8212; \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0439 \u0438 \u043f\u0440\u0438\u044f\u0442\u043d\u044b\u0439 \u0446\u0432\u0435\u0442, \u0430 \u043a\u0440\u0430\u0441\u043d\u044b\u0439 &#8212; \u043e\u043f\u0430\u0441\u043d\u044b\u0439 \u0438 \u043d\u0435\u043f\u0440\u0438\u044f\u0442\u043d\u044b\u0439. \u0410 \u0437\u043d\u0430\u0447\u0438\u0442, \u043a\u0440\u0430\u0441\u043d\u044b\u043c \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0437\u043b\u043e\u0441\u0442\u044c ?. \u0421\u0438\u043d\u0438\u043c &#8212; \u0443\u0441\u043f\u043e\u043a\u0430\u0438\u0432\u0430\u0442\u044c ?. \u0415\u0441\u043b\u0438 \u0438\u0433\u0440\u043e\u043a \u0441\u043f\u0440\u0430\u0432\u0438\u043b\u0441\u044f \u043e\u0442\u043b\u0438\u0447\u043d\u043e &#8212; \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u0435\u043c\u0441\u044f \u0435\u0433\u043e \u043f\u043e\u0440\u0430\u0434\u043e\u0432\u0430\u0442\u044c ?.<\/p>\n<figure class=\"float\">\n<div><figcaption>\u0426\u0432\u0435\u0442\u043e\u0432\u0430\u044f \u043f\u0430\u043b\u0438\u0442\u0440\u0430 &#171;\u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u0430\u044f&#187;<\/figcaption><\/div>\n<\/figure>\n<p>\u0411\u0443\u0434\u0435\u043c \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0434\u0432\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f: \u0438\u0433\u0440\u043e\u043a \u0443\u0441\u043f\u0435\u043b \u043d\u0430\u0436\u0430\u0442\u044c \u043d\u0430 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a, \u0438\u043b\u0438 &#8212; \u043d\u0435 \u0443\u0441\u043f\u0435\u043b. \u0415\u0441\u043b\u0438 \u0438\u0433\u0440\u043e\u043a \u0443\u0441\u043f\u0435\u043b &#8212; \u043c\u044b \u043f\u043e\u043e\u0449\u0440\u044f\u0435\u043c \u0435\u0433\u043e \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u044d\u043c\u043e\u0446\u0438\u0435\u0439 \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u0435\u043d\u0438\u044f, \u0435\u0441\u043b\u0438 \u043d\u0435\u0442 &#8212; \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u043e\u0439. \u0412\u043e\u0437\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0437\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0433\u0440\u0430\u0444\u0438\u043a\u0438 (<em>graphica &#8212; \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435<\/em>). \u0427\u0435\u043c \u0434\u043e\u043b\u044c\u0448\u0435 \u0438\u0433\u0440\u043e\u043a \u043d\u0435 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u0442 \u043d\u0430 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a &#8212; \u0442\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0431\u0443\u0434\u0435\u043c \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043a\u0440\u0430\u0441\u043d\u043e\u0433\u043e. \u0415\u0441\u043b\u0438 \u043d\u0430\u0436\u0430\u043b \u043d\u0430 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a &#8212; \u0431\u0443\u0434\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u0438\u043d\u0438\u0439. \u0415\u0441\u043b\u0438 \u043f\u0440\u043e\u044f\u0432\u0438\u043b \u0443\u0441\u043f\u0435\u0445 &#8212; \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0437\u0435\u043b\u0435\u043d\u044b\u0439. \u042d\u0442\u043e\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u0438\u0433\u0440\u043e\u043a \u043d\u0430\u0443\u0447\u0438\u043b\u0441\u044f \u043d\u0430\u0436\u0438\u043c\u0430\u0442\u044c \u043d\u0430 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a. (<em>\u0415\u0441\u043b\u0438 \u0437\u043d\u0430\u0435\u0442\u0435 \u043a\u0430\u043a\u0438\u0435-\u043d\u0438\u0431\u0443\u0434\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0438 &#8212; \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u0435\u0441\u044c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445<\/em>)<\/p>\n<h2>\u0421\u043a\u0440\u044b\u0442\u0430\u044f \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0430<\/h2>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0447\u0442\u043e \u0438\u0433\u0440\u043e\u043a \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0443\u0447\u0438\u043b\u0441\u044f &#8212; \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441\u0447\u0438\u0442\u0430\u0442\u044c, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u043e\u043d \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043b \u0437\u0430\u0434\u0430\u0447\u0443. \u041c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0438\u0433\u0440\u043e\u043a\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0435, \u0442.\u0435. \u044d\u0442\u043e \u0441\u043a\u0440\u044b\u0442\u0430\u044f \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0430. \u0427\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u043f\u044b\u0442\u043e\u043a \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f &#8212; \u0442\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u0443\u043f\u043e\u0440\u0441\u0442\u0432\u043e\u043c \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0431\u043b\u0430\u0434\u0430\u0442\u044c \u0438\u0433\u0440\u043e\u043a. \u0423\u043f\u043e\u0440\u0441\u0442\u0432\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043d\u043d\u043e\u0441\u0442\u0438 \u0438\u0433\u0440\u043e\u043a\u0430. \u0411\u0443\u0434\u0435\u043c \u0441\u0447\u0438\u0442\u0430\u0442\u044c, \u0447\u0442\u043e \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u0443\u043f\u043e\u0440\u0441\u0442\u0432\u043e \u0438\u0433\u0440\u043e\u043a\u0430 &#8212; 1\/10, \u0442.\u0435. \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0435\u0441 \u043a \u043d\u0430\u0448\u0435\u0439 \u0438\u0433\u0440\u0435 10%. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043e\u0436\u0438\u0434\u0430\u0442\u044c, \u0447\u0442\u043e \u0438\u0433\u0440\u043e\u043a \u043f\u0440\u043e\u0432\u0435\u0434\u0435\u0442 \u0432 \u0438\u0433\u0440\u0435 5.4 \u0441\u0435\u043a\u0443\u043d\u0434\u044b.<\/p>\n<blockquote>\n<p>\u0421\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u043e\u0442\u0447\u0435\u0442\u0443 Contentsquare 2021 Digital Experience Benchmark, \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u043f\u043e \u0431\u043e\u043b\u044c\u043d\u0438\u0446\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u00a054 \u0441\u0435\u043a\u0443\u043d\u0434\u044b.<\/p>\n<\/blockquote>\n<p>\u0421\u0447\u0438\u0442\u0430\u0435\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0443\u0441\u043f\u0435\u0445\u043e\u0432 (successes) \u0438 \u043d\u0435\u0443\u0434\u0430\u0447 (fails). \u0415\u0441\u043b\u0438 \u0438\u0433\u0440\u043e\u043a \u0441\u043f\u0440\u0430\u0432\u0438\u043b\u0441\u044f, \u0442.\u0435. \u0434\u043e\u0441\u0442\u0438\u0433 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0443\u0441\u043f\u0435\u0445\u0430 (wins) &#8212; \u0438\u0433\u0440\u043e\u043a \u043e\u0431\u0443\u0447\u0435\u043d, \u0438\u0433\u0440\u0430 \u043e\u043a\u043e\u043d\u0447\u0435\u043d\u0430. \u0415\u0441\u043b\u0438 \u0436\u0435 \u0438\u0433\u0440\u043e\u043a \u043d\u0435 \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f &#8212; \u0442\u043e \u0435\u043c\u0443 \u043d\u0443\u0436\u043d\u043e <strong>\u043f\u043e\u043c\u043e\u0447\u044c<\/strong>. \u0415\u0441\u043b\u0438 \u0438\u0433\u0440\u043e\u043a \u0434\u043e\u0441\u0442\u0438\u0433 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0447\u0438\u0441\u043b\u0430 \u043d\u0435\u0443\u0434\u0430\u0447 (looses) \u043c\u044b \u043f\u043e\u043c\u043e\u0436\u0435\u043c \u0435\u043c\u0443 \u0438 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u0438\u043c \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u043f\u043e\u0434 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c, \u0447\u0442\u043e\u0431\u044b \u0443 \u043d\u0435\u0433\u043e \u0442\u043e\u0447\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c, \u0438 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c \u0447\u0438\u0441\u043b\u043e \u043d\u0435\u0443\u0434\u0430\u0447. \u042d\u0442\u043e \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0438. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u043c, \u043a\u0430\u043a \u043e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0415\u0441\u0442\u044c \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u044c, \u0447\u0442\u043e \u043c\u044b \u043d\u0435 \u0441\u043c\u043e\u0433\u043b\u0438 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u044d\u043c\u043e\u0446\u0438\u044e &#8212; \u0442\u043e\u0433\u0434\u0430 \u0438 \u0441\u0430\u043c\u0430 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0430 \u0432 \u0446\u0435\u043b\u043e\u043c \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u041f\u043e\u043c\u043d\u0438\u043c \u0437\u0430\u043a\u043e\u043d \u041c\u0435\u0440\u0444\u0438.<\/p>\n<figure class=\"float full-width\"> \u042d\u043c\u043e\u0446\u0438\u044f&#187; title=&#187;\u041f\u043e\u043e\u0449\u0440\u0435\u043d\u0438\u0435 => \u042d\u043c\u043e\u0446\u0438\u044f&#187; width=&#187;612&#8243; height=&#187;660&#8243; data-src=&#187;https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/519\/308\/837\/51930883735e719893e0de5df82687c4.jpg&#187; data-blurred=&#187;true&#187;\/><\/p>\n<div><figcaption>\u041f\u043e\u043e\u0449\u0440\u0435\u043d\u0438\u0435 => \u042d\u043c\u043e\u0446\u0438\u044f<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043a\u0440\u0435\u043f\u0438\u0442\u044c \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 &#8212; \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0443 \u043f\u043e\u043e\u0449\u0440\u0435\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 \u0438\u0433\u0440\u043e\u043a \u043d\u0430\u0443\u0447\u0438\u043b\u0441\u044f \u0438 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0443\u0441\u043f\u0435\u0448\u043d\u044b\u0445 \u043f\u043e\u043f\u044b\u0442\u043e\u043a \u0434\u043e\u0441\u0442\u0438\u0433\u043b\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c\u0430 (wins), \u043c\u044b \u043d\u0430\u0433\u0440\u0430\u0434\u0438\u043c \u0438\u0433\u0440\u043e\u043a\u0430 \u043d\u043e\u0432\u043e\u0439 \u043f\u0440\u0438\u044f\u0442\u043d\u043e\u0439 \u044d\u043c\u043e\u0446\u0438\u0435\u0439 &#8212; \u0443\u0434\u0438\u0432\u043b\u0435\u043d\u0438\u0435\u043c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u0435\u043b\u0435\u043d\u044b\u0439. \u0421\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f\u043c &#8212; \u0447\u0435\u043b\u043e\u0432\u0435\u0447\u0435\u0441\u043a\u0438\u0439 \u0433\u043b\u0430\u0437 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0432\u043e\u0441\u043f\u0440\u0438\u0438\u043c\u0447\u0438\u0432 \u043a <a href=\"https:\/\/hypertextbook.com\/facts\/2007\/SusanZhao.shtml\" rel=\"noopener noreferrer nofollow\">\u0437\u0435\u043b\u0451\u043d\u043e\u043c\u0443 \u0443\u0447\u0430\u0441\u0442\u043a\u0443 \u0441\u043f\u0435\u043a\u0442\u0440\u0430<\/a>, \u0446\u0432\u0435\u0442 \u043f\u0440\u0438\u044f\u0442\u043d\u044b\u0439. \u042d\u0442\u043e\u0442 \u0446\u0432\u0435\u0442 \u0438\u0433\u0440\u043e\u043a \u043d\u0435 \u043e\u0436\u0438\u0434\u0430\u0435\u0442 \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u0442.\u043a. \u043c\u044b \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0438 \u0435\u043c\u0443 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0438 \u0441\u0438\u043d\u0438\u0439.<\/p>\n<h2>\u042f\u0432\u043d\u0430\u044f \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0430<\/h2>\n<p>\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043d\u0430 \u044d\u043a\u0440\u0430\u043d. \u0421\u043e\u0431\u044b\u0442\u0438\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435\u043c  (<em>pointwerdown<\/em>) \u043d\u0430 \u0442\u0435\u043b\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430. \u0421\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f (\u0441\u0438\u043c\u0432\u043e\u043b \u21d2) \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u043a\u0443\u0434\u0430 \u0438\u0433\u0440\u043e\u043a \u043f\u043e\u043f\u0430\u043b. \u0423 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f \u0442\u043e\u0436\u0435 \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 x \u0438 \u0443, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0447\u0442\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c (\u0442\u043e\u0447\u043a\u0430) \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430. \u0415\u0441\u0442\u044c <a href=\"https:\/\/dzen.ru\/a\/XL_gTVaa9gCzO1Yv\" rel=\"noopener noreferrer nofollow\">\u0445\u043e\u0440\u043e\u0448\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f<\/a> \u043d\u0430 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443, \u0440\u0430\u0441\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0443. \u0415\u0441\u043b\u0438 \u043f\u043e\u043f\u0430\u043b \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435\u043c \u0432 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0432 x,y \u0441 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 \u0438 \u0432\u044b\u0441\u043e\u0442\u043e\u0439 width \u0438 height &#8212; \u043f\u043e\u043f\u044b\u0442\u043a\u0430 \u0443\u0441\u043f\u0435\u0448\u043d\u0430\u044f, \u043c\u044b \u043f\u043e\u0434\u043a\u0440\u0435\u043f\u043b\u044f\u0435\u043c \u0441\u0438\u043d\u0438\u043c. \u0415\u0441\u043b\u0438 \u043d\u0435 \u043f\u043e\u043f\u0430\u043b &#8212; \u043a\u0440\u0430\u0441\u043d\u044b\u043c. \u041f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430\u0440\u0438\u0441\u0443\u0435\u043c \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u044f \u0432 \u0442\u043e\u0447\u043a\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f. \u041f\u0440\u0438 \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u0438 &#8212; \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c \u043f\u0440\u043e\u043c\u0430\u0445\u0438 \u0438 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0438\u0433\u0440\u043e\u043a \u0447\u0443\u0432\u0441\u0442\u0432\u043e\u0432\u0430\u043b <strong>\u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 <\/strong>(<em>progress,<\/em> <em>pro &#8212; \u0432\u043f\u0435\u0440\u0435\u0434, gradi &#8212; \u0438\u0434\u0442\u0438<\/em>), \u0447\u0442\u043e \u043e\u043d \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u043d\u0430 \u043c\u0435\u0441\u0442\u0435 \u0432 \u0441\u0432\u043e\u0435\u043c \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0438 &#8212; \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430 \u0432 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0443. \u0426\u0438\u0444\u0440 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0443\u0441\u043f\u0435\u0445\u043e\u0432 (successes) \u0438 \u043d\u0435\u0443\u0434\u0430\u0447 (fails) \u0438\u0433\u0440\u043e\u043a \u043d\u0435 \u0432\u0438\u0434\u0438\u0442, \u043d\u043e \u043d\u0443\u0436\u043d\u043e \u0435\u043c\u0443 \u0434\u0430\u0442\u044c \u043e\u0431 \u044d\u0442\u043e\u043c \u0437\u043d\u0430\u0442\u044c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u043c \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 successes \u0438 fails \u043f\u043e\u0434\u0440\u044f\u0434. \u0415\u0441\u043b\u0438 \u0438\u0433\u0440\u043e\u043a \u043f\u0440\u0435\u0432\u044b\u0441\u0438\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0448\u0438\u0431\u043e\u043a &#8212; \u0437\u0430\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u043a\u0440\u0430\u0441\u043d\u044b\u043c \u0438 \u0440\u0438\u0441\u0443\u0435\u043c \u043d\u043e\u0432\u044b\u0439, \u043f\u043e\u0434 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435\u043c.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0438\u0433\u0440\u043e\u043a \u0441\u043f\u0440\u0430\u0432\u0438\u043b\u0441\u044f \u0441 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435\u043c &#8212; \u0440\u0438\u0441\u0443\u0435\u043c \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u0435 \u0437\u0435\u043b\u0435\u043d\u044b\u043c. \u041d\u0430 \u044d\u0442\u043e\u043c \u0431\u0430\u0437\u043e\u0432\u043e \u043e\u0431\u0443\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u0438\u0433\u0440\u043e\u043a\u0430 \u0443\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u044d\u043a\u0437\u0430\u043c\u0435\u043d. \u0411\u0443\u0434\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0432 \u043d\u043e\u0432\u0443\u044e \u0442\u043e\u0447\u043a\u0443, \u043e\u0436\u0438\u0434\u0430\u044f \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u044f \u0441 \u043f\u0435\u0440\u0432\u043e\u0439 \u043f\u043e\u043f\u044b\u0442\u043a\u0438. \u041f\u043e\u0432\u0442\u043e\u0440\u0438\u043c \u044d\u0442\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u0438 \u0432 \u043a\u043e\u043d\u0446\u0435 \u0434\u0430\u0434\u0438\u043c \u043e\u0446\u0435\u043d\u043a\u0443 \u0437\u0430 \u043f\u0440\u043e\u0436\u0430\u0442\u0443\u044e \u0446\u0435\u043f\u043e\u0447\u043a\u0443 \u0446\u0435\u043b\u0435\u0439. \u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0435\u043c \u043e\u0446\u0435\u043d\u043a\u0443 \u043a\u0430\u043a \u0432\u0440\u0435\u043c\u044f, \u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0438\u0433\u0440\u043e\u043a \u043f\u0440\u043e\u0436\u0430\u043b \u0432\u0441\u0435 \u0446\u0435\u043b\u0438, \u0447\u0435\u043c \u0431\u044b\u0441\u0442\u0440\u0435\u0435 &#8212; \u0442\u0435\u043c \u043b\u0443\u0447\u0448\u0435. \u0415\u0441\u043b\u0438 \u0443\u0441\u043f\u0435\u0448\u043d\u043e &#8212; \u0432\u044b\u0432\u0435\u0434\u0435\u043c \u043e\u0446\u0435\u043d\u043a\u0443 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d. \u0415\u0441\u043b\u0438 \u0438\u0433\u0440\u043e\u043a \u0441\u0434\u0430\u043b \u043d\u0430 \u043e\u0442\u043b\u0438\u0447\u043d\u043e, \u0442.\u0435. \u043e\u0446\u0435\u043d\u043a\u0430 \u043f\u0440\u0435\u0432\u044b\u0448\u0430\u0435\u0442 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u043e\u0433\u043e &#8212; \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0435\u0449\u0435 \u043e\u0434\u043d\u0443 \u0446\u0435\u043b\u044c \u0432 \u0446\u0435\u043f\u043e\u0447\u043a\u0443 \u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u043d\u043e\u0432\u043e, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u044d\u0442\u0443 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0443 \u0432\u044b\u0432\u043e\u0434\u043e\u043c \u0442\u0435\u043a\u0441\u0442\u0430 \u0441 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c. \u0414\u0430\u043b\u0435\u0435 &#8212; \u043e\u0442\u043b\u0438\u0447\u043d\u0438\u043a\u0443 \u0443\u0436\u0435 \u043d\u0435\u0447\u0435\u043c\u0443 \u0443\u0447\u0438\u0442\u044c\u0441\u044f, \u043b\u0438\u0448\u044c \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0432\u044b\u043a.<\/p>\n<figure class=\"float full-width\"><\/figure>\n<p>\u0414\u043b\u044f \u043e\u0449\u0443\u0449\u0435\u043d\u0438\u044f \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0438 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430 &#8212; \u0431\u0443\u0434\u0435\u043c \u0437\u0430\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u0445\u043e\u043b\u0441\u0442 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c \u0431\u0435\u043b\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u0435, \u0438\u0437-\u0437\u0430 \u0447\u0435\u0433\u043e \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0435 \u043f\u043e\u043f\u044b\u0442\u043a\u0438 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0441\u0442\u0432\u043e\u0440\u044f\u0442\u044c\u0441\u044f. \u0414\u043b\u044f \u043e\u0442\u043b\u0438\u0447\u043d\u0438\u043a\u0430 &#8212; \u0431\u0443\u0434\u0435\u043c \u0437\u0430\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043f\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u0412 \u0441\u0440\u0435\u0434\u043d\u0435\u043c, \u0432 \u0438\u0433\u0440\u0430\u0445 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u043e\u043a\u043e\u043b\u043e 60 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0439 (\u043a\u0430\u0434\u0440\u043e\u0432) \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443 (<em>FPS,<\/em> <em>frames per secord)<\/em>. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043f\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438: \u043a\u0430\u0436\u0434\u044b\u0435 1000\/60, \u0433\u0434\u0435 1000 &#8212; \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0435 (<em>\u043c\u0438\u043b\u043b\u0438-, milli-, \u043e\u0434\u043d\u0430 \u0442\u044b\u0441\u044f\u0447\u043d\u0430\u044f<\/em>), 60 &#8212; FPS. \u0422.\u0435. \u043a\u0430\u0436\u0434\u044b\u0435 16.66.. \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0437\u0430\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u043d\u0438\u0435 \u044d\u043a\u0440\u0430\u043d\u0430 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c \u0431\u0435\u043b\u044b\u043c.<\/p>\n<p>\u0414\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u044f\u0440\u043a\u0438\u0445 \u044d\u043c\u043e\u0446\u0438\u0439 &#8212;<\/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-349841","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/349841","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=349841"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/349841\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=349841"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=349841"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=349841"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}