{"id":302798,"date":"2020-04-30T15:00:18","date_gmt":"2020-04-30T15:00:18","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=302798"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=302798","title":{"rendered":"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0441\u0435\u0432\u0434\u043e\u0442\u0440\u0451\u0445\u043c\u0435\u0440\u043d\u043e\u0439 \u0433\u043e\u043d\u043e\u0447\u043d\u043e\u0439 \u0438\u0433\u0440\u044b: \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0445\u043e\u043b\u043c\u043e\u0432 \u0438 \u0433\u043e\u0442\u043e\u0432\u0430\u044f \u0438\u0433\u0440\u0430"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/499442\/\">\n<h2>\u0427\u0430\u0441\u0442\u044c 3. \u0425\u043e\u043b\u043c\u044b<\/h2>\n<p>  <\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/892\/231\/4e8\/8922314e8acebdd3ae14fba511d17294.png\"><\/div>\n<p>  \u0412 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u043f\u0441\u0435\u0432\u0434\u043e\u0442\u0440\u0451\u0445\u043c\u0435\u0440\u043d\u0443\u044e <a href=\"https:\/\/habr.com\/ru\/post\/499252\/\">\u0433\u043e\u043d\u043e\u0447\u043d\u0443\u044e \u0438\u0433\u0440\u0443<\/a>, \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0432 \u0432 \u043d\u0435\u0439 \u043f\u0440\u044f\u043c\u044b\u0435 \u0434\u043e\u0440\u043e\u0433\u0438 \u0438 \u043a\u0440\u0438\u0432\u044b\u0435.<\/p>\n<p>  \u041d\u0430 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u043c\u044b \u0437\u0430\u0439\u043c\u0451\u043c\u0441\u044f \u0445\u043e\u043b\u043c\u0430\u043c\u0438; \u043a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0449\u0435, \u0447\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438\u0441\u043a\u0440\u0438\u0432\u043b\u0451\u043d\u043d\u044b\u0445 \u0434\u043e\u0440\u043e\u0433.<\/p>\n<p>  \u0412 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0437\u0430\u043a\u043e\u043d \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u0440\u0451\u0445\u043c\u0435\u0440\u043d\u043e\u0439 \u043f\u0435\u0440\u0441\u043f\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0446\u0438\u0438:<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/949\/0ab\/47b\/9490ab47bb570b61218e46e5913c18bb.png\"><\/div>\n<p>  \u2026 \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u043b\u043e \u043d\u0430\u0441 \u043a \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044e \u0443\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0439 \u043f\u0440\u043e\u0435\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b 3d-\u043c\u0438\u0440\u0430 \u0432 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0443 2d-\u044d\u043a\u0440\u0430\u043d\u0430.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/edb\/246\/e18\/edb246e187e7fe0eb027b53c58790c34.png\"><\/div>\n<p>  \u2026 \u043d\u043e \u0442\u0430\u043a \u043a\u0430\u043a \u0442\u043e\u0433\u0434\u0430 \u043c\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u043f\u0440\u044f\u043c\u044b\u043c\u0438 \u0434\u043e\u0440\u043e\u0433\u0430\u043c\u0438, \u043c\u0438\u0440\u043e\u0432\u044b\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u0431\u044b\u043b\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <strong>z<\/strong>, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0438 <strong>x<\/strong>, \u0438 <strong>y<\/strong> \u0431\u044b\u043b\u0438 \u0440\u0430\u0432\u043d\u044b \u043d\u0443\u043b\u044e.<\/p>\n<p>  \u042d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u043d\u0430\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0445\u043e\u043b\u043c\u043e\u0432 \u043d\u0430\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u0430\u0442\u044c \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u043c \u0434\u043e\u0440\u043e\u0433\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u043d\u0435\u043d\u0443\u043b\u0435\u0432\u0443\u044e \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0443 <strong>y<\/strong>, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u0443\u0436\u0435 \u0438\u043c\u0435\u044e\u0449\u0430\u044f\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>render()<\/code> \u0432\u043e\u043b\u0448\u0435\u0431\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<a name=\"habracut\"><\/a><\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/ede\/dc6\/295\/ededc629516e6f0d2c7f1ca6b111e17d.png\"><\/div>\n<p>  \u0414\u0430, \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0445\u043e\u043b\u043c\u044b. \u0412\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043c\u0438\u0440\u043e\u0432\u044b\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0434\u043e\u0440\u043e\u0433\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 <strong>y<\/strong>.<\/p>\n<h2>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0438 \u0434\u043e\u0440\u043e\u0433\u0438<\/h2>\n<p>  \u041c\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u0438\u043c\u0435\u044e\u0449\u0438\u0439\u0441\u044f \u043c\u0435\u0442\u043e\u0434 <code>addSegment<\/code> \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0449\u0430\u044f \u0435\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043c\u043e\u0433\u043b\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c <strong>p2.world.y<\/strong>, \u0430 <strong>p1.world.y<\/strong> \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u0430 \u0431\u044b <strong>p2.world.y<\/strong> \u043f\u0440\u0435\u0434\u0448\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430:<\/p>\n<pre><code class=\"javascript\">function addSegment(curve, y) {   var n = segments.length;   segments.push({      index: n,         p1: { world: { y: lastY(), z:  n   *segmentLength }, camera: {}, screen: {} },         p2: { world: { y: y,       z: (n+1)*segmentLength }, camera: {}, screen: {} },      curve: curve,      color: Math.floor(n\/rumbleLength)%2 ? COLORS.DARK : COLORS.LIGHT   }); }  function lastY() {   return (segments.length == 0) ? 0 : segments[segments.length-1].p2.world.y; }<\/code><\/pre>\n<p>  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b \u0434\u043b\u044f \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043d\u0438\u0437\u043a\u0438\u0445 (<code>LOW<\/code>), \u0441\u0440\u0435\u0434\u043d\u0438\u0445 (<code>MEDIUM<\/code>) \u0438 \u0432\u044b\u0441\u043e\u043a\u0438\u0445 (<code>HIGH<\/code>) \u0445\u043e\u043b\u043c\u043e\u0432:<\/p>\n<pre><code class=\"javascript\">var ROAD = {   LENGTH: { NONE: 0, SHORT:  25, MEDIUM:  50, LONG:  100 },   HILL:   { NONE: 0, LOW:    20, MEDIUM:  40, HIGH:   60 },   CURVE:  { NONE: 0, EASY:    2, MEDIUM:   4, HARD:    6 } };<\/code><\/pre>\n<p>  \u0418\u0437\u043c\u0435\u043d\u0438\u043c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043c\u0435\u0442\u043e\u0434 <code>addRoad()<\/code> \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u043f\u043e\u043b\u0443\u0447\u0430\u043b \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 <strong>y<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 \u043f\u043b\u0430\u0432\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u044a\u0451\u043c\u0430 \u0438 \u0441\u043f\u0443\u0441\u043a\u0430 \u0441 \u0445\u043e\u043b\u043c\u0430:<\/p>\n<pre><code class=\"javascript\">function addRoad(enter, hold, leave, curve, y) {   var startY   = lastY();   var endY     = startY + (Util.toInt(y, 0) * segmentLength);   var n, total = enter + hold + leave;   for(n = 0 ; n &lt; enter ; n++)     addSegment(Util.easeIn(0, curve, n\/enter), Util.easeInOut(startY, endY, n\/total));   for(n = 0 ; n &lt; hold  ; n++)     addSegment(curve, Util.easeInOut(startY, endY, (enter+n)\/total));   for(n = 0 ; n &lt; leave ; n++)     addSegment(Util.easeInOut(curve, 0, n\/leave), Util.easeInOut(startY, endY, (enter+hold+n)\/total)); }<\/code><\/pre>\n<p>  \u0414\u0430\u043b\u0435\u0435, \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043c\u044b \u0434\u0435\u043b\u0430\u043b\u0438 \u0432 \u0447\u0430\u0441\u0442\u0438 2 \u0441 <code>addSCurves()<\/code>, \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u043b\u043e\u0436\u0438\u0442\u044c \u043b\u044e\u0431\u044b\u0435 \u043d\u0443\u0436\u043d\u044b\u0435 \u043d\u0430\u043c \u043c\u0435\u0442\u043e\u0434\u044b \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"javascript\">function addLowRollingHills(num, height) {   num    = num    || ROAD.LENGTH.SHORT;   height = height || ROAD.HILL.LOW;   addRoad(num, num, num,  0,  height\/2);   addRoad(num, num, num,  0, -height);   addRoad(num, num, num,  0,  height);   addRoad(num, num, num,  0,  0);   addRoad(num, num, num,  0,  height\/2);   addRoad(num, num, num,  0,  0); }<\/code><\/pre>\n<p>  <\/p>\n<h2>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 update<\/h2>\n<p>  \u0412 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0435\u043c\u043e\u0439 \u043d\u0430\u043c\u0438 \u0430\u0440\u043a\u0430\u0434\u043d\u043e\u0439 \u0438\u0433\u0440\u0435 \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0441\u0442\u0440\u0435\u043c\u0438\u0442\u044c\u0441\u044f \u0441\u0438\u043c\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0445\u043e\u043b\u043c\u044b \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u0438\u0433\u0440\u043e\u043a\u0430 \u0438\u043b\u0438 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u043c\u0438\u0440, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442, \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 <code>update()<\/code> \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f.<\/p>\n<h2>\u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0445\u043e\u043b\u043c\u043e\u0432<\/h2>\n<p>  \u0412 \u043c\u0435\u0442\u043e\u0434\u0435 <code>render()<\/code> \u0442\u043e\u0436\u0435 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f \u043d\u0438\u043a\u0430\u043a\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0443\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0435\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b \u0434\u043e\u0440\u043e\u0433\u0438 \u0441 \u043d\u0435\u043d\u0443\u043b\u0435\u0432\u044b\u043c\u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c\u0438 <strong>y<\/strong>.<\/p>\n<h2>\u0424\u043e\u043d \u0441 \u043f\u0430\u0440\u0430\u043b\u043b\u0430\u043a\u0441\u043d\u044b\u043c \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u043d\u0433\u043e\u043c<\/h2>\n<p>  \u041a\u0440\u043e\u043c\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u043c \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u043c \u0434\u043e\u0440\u043e\u0433\u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 <strong>y<\/strong>, \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0451\u0432 \u0444\u043e\u043d\u0430 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0445\u043e\u043b\u043c\u0430\u043c\u0438 (\u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u043e\u043d\u0438 \u0441\u0434\u0432\u0438\u0433\u0430\u044e\u0442\u0441\u044f \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043a\u0440\u0438\u0432\u044b\u043c\u0438). \u041c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u044d\u0442\u043e \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0435\u0449\u0451 \u043e\u0434\u043d\u043e\u0433\u043e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>Render.background<\/code>.<\/p>\n<p>  \u041f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u043c \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u044b\u0447\u043d\u043e\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0444\u043e\u043d\u0430 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0437\u0438\u0446\u0438\u0438 <code>playerY<\/code> (\u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u0437 \u043c\u0438\u0440\u043e\u0432\u044b\u0445 \u043f\u043e\u0437\u0438\u0446\u0438\u0439 <strong>y<\/strong> \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0438\u0433\u0440\u043e\u043a\u0430).<\/p>\n<p>  \u042d\u0442\u043e \u043d\u0435 \u0441\u0430\u043c\u043e\u0435 \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0441\u0442\u043e\u0438\u0442 \u0443\u0447\u0435\u0441\u0442\u044c \u043d\u0430\u043a\u043b\u043e\u043d \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0434\u043e\u0440\u043e\u0433\u0438 \u0438\u0433\u0440\u043e\u043a\u0430, \u043d\u043e \u044d\u0442\u043e\u0442 \u044d\u0444\u0444\u0435\u043a\u0442 \u043f\u0440\u043e\u0441\u0442 \u0438 \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0434\u0435\u043c\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0445\u043e\u0440\u043e\u0448\u043e.<\/p>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>  \u0412\u043e\u0442 \u0438 \u0432\u0441\u0451, \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0444\u0430\u043b\u044c\u0448\u0438\u0432\u044b\u0435 \u043a\u0440\u0438\u0432\u044b\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0445\u043e\u043b\u043c\u0430\u043c\u0438:<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/892\/231\/4e8\/8922314e8acebdd3ae14fba511d17294.png\"><\/div>\n<p>  \u041f\u0440\u043e\u0434\u0435\u043b\u0430\u043d\u043d\u0430\u044f \u043d\u0430\u043c\u0438 \u0432 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0440\u0430\u0431\u043e\u0442\u0430 \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u043b\u0430 \u0432 \u0441\u0435\u0431\u044f \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0445 \u043f\u0440\u043e\u0435\u0446\u0438\u0440\u0443\u0435\u043c\u044b\u0445 3d-\u0445\u043e\u043b\u043c\u043e\u0432, \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0430\u043d\u044c\u0448\u0435 \u044f \u0432\u0430\u043c \u043e\u0431 \u044d\u0442\u043e\u043c \u043d\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043b.<\/p>\n<p>  \u0412 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u0442\u0430\u0442\u044c\u0438 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043f\u0440\u0430\u0439\u0442\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u0435\u0440\u0435\u0432\u044c\u044f \u0438 \u0431\u0438\u043b\u0431\u043e\u0440\u0434\u044b \u043f\u043e \u043a\u0440\u0430\u044f\u043c \u0434\u043e\u0440\u043e\u0433\u0438. \u0415\u0449\u0451 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u0430\u0448\u0438\u043d\u044b, \u043f\u0440\u043e\u0442\u0438\u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0440\u0435\u0432\u043d\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u0439 \u0438 \u0444\u0438\u043a\u0441\u0430\u0446\u0438\u044e \u00ab\u0440\u0435\u043a\u043e\u0440\u0434\u0430 \u043a\u0440\u0443\u0433\u0430\u00bb \u0438\u0433\u0440\u043e\u043a\u0430.<\/p>\n<h2>\u0427\u0430\u0441\u0442\u044c 4. \u0413\u043e\u0442\u043e\u0432\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f<\/h2>\n<p>  <\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/103\/563\/0d1\/1035630d19106de2f85edebb24d0421f.png\"><\/div>\n<p>  \u0412 \u044d\u0442\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c:<\/p>\n<ul>\n<li>\u0411\u0438\u043b\u0431\u043e\u0440\u0434\u044b \u0438 \u0434\u0435\u0440\u0435\u0432\u044c\u044f<\/li>\n<li>\u0414\u0440\u0443\u0433\u0438\u0435 \u043c\u0430\u0448\u0438\u043d\u044b<\/li>\n<li>\u0420\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u0439<\/li>\n<li>\u0420\u0443\u0434\u0438\u043c\u0435\u043d\u0442\u0430\u0440\u043d\u044b\u0439 \u0418\u0418 \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u0435\u0439<\/li>\n<li>\u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0441 \u0442\u0430\u0439\u043c\u0435\u0440\u043e\u043c \u043a\u0440\u0443\u0433\u0430 \u0438 \u0440\u0435\u043a\u043e\u0440\u0434\u043e\u043c \u043a\u0440\u0443\u0433\u0430<\/li>\n<\/ul>\n<p>  \u2026 \u0438 \u044d\u0442\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442 \u043d\u0430\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u044b\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u043a\u043e\u043d\u0435\u0446 \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u00ab\u0438\u0433\u0440\u043e\u0439\u00bb.<\/p>\n<h2>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435 \u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u043a\u043e\u0434\u0430<\/h2>\n<p>  <\/p>\n<blockquote><p><em>\u041a\u0430\u043a \u044f \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435, \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0434\u0435\u043c\u043e \u0441 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u0438 \u043c\u0430\u043b\u044b\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u043a\u043b\u0430\u0441\u0441\u043e\u0432\/\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0441\u043b\u0443\u0436\u0438\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u043d\u0430 Javascript.<\/em><\/p><\/blockquote>\n<p>  <\/p>\n<blockquote><p><em>\u0412 \u044d\u0442\u043e\u043c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043a\u043e\u0434\u0430 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043e \u0441\u043f\u0440\u0430\u0439\u0442\u0430\u043c\u0438 \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0430\u0448\u0438\u043d. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043c\u044b \u043f\u0435\u0440\u0435\u0441\u0435\u0447\u0451\u043c (\u0441\u0443\u0431\u044a\u0435\u043a\u0442\u0438\u0432\u043d\u0443\u044e) \u0433\u0440\u0430\u043d\u0438\u0446\u0443, \u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043a\u043e\u0434 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u043c \u0438 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0438\u0433\u0440\u0430\u0442\u044c \u043e\u0442 \u043b\u0443\u0447\u0448\u0435\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0441\u0442\u0438&#8230;<\/em><\/p><\/blockquote>\n<p>  <\/p>\n<blockquote><p><em>\u2026 \u043d\u043e \u043e\u043d \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u044d\u0442\u043e \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0434\u0435\u043c\u043e, \u0442\u0430\u043a \u0447\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u0438\u0442\u0435 \u043c\u0435\u043d\u044f \u0437\u0430 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0445\u0430\u043e\u0442\u0438\u0447\u043d\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043a\u043e\u0434\u0430 \u0438\u0437 \u0441\u0442\u0430\u0442\u044c\u0438, \u0438 \u043f\u043e\u0432\u0435\u0440\u044c\u0442\u0435, \u0447\u0442\u043e \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0432\u0430\u043c \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0435\u0433\u043e \u043f\u043e\u0434\u0447\u0438\u0449\u0430\u0442\u044c.<\/em><\/p><\/blockquote>\n<p>  <\/p>\n<h2>\u0421\u043f\u0440\u0430\u0439\u0442\u044b<\/h2>\n<p>  <\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/f6f\/111\/acc\/f6f111accbba448459e25c6fe761ff05.png\"><\/div>\n<p>  \u0412 \u0447\u0430\u0441\u0442\u0438 1 \u043f\u0435\u0440\u0435\u0434 \u043d\u0430\u0447\u0430\u043b\u043e\u043c \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u043c\u044b \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0438 \u0441\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u0432\u0441\u0435 \u043c\u0430\u0448\u0438\u043d\u044b, \u0434\u0435\u0440\u0435\u0432\u044c\u044f \u0438 \u0431\u0438\u043b\u0431\u043e\u0440\u0434\u044b.<\/p>\n<p>  \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442 \u0432 \u043b\u044e\u0431\u043e\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043d\u043e \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u043b\u0443\u0447\u0448\u0435 \u0434\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c\u0443 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0443. \u0412 \u043c\u043e\u0451\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442 \u0431\u044b\u043b \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u043c \u0442\u0430\u0441\u043a\u043e\u043c Rake \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 <a href=\"https:\/\/codeincomplete.com\/articles\/sprite-factory\" rel=\"nofollow\">Ruby Gem sprite-factory<\/a>.<\/p>\n<p>  \u042d\u0442\u043e\u0442 \u0442\u0430\u0441\u043a \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0451\u043d\u043d\u044b\u0435 \u0441\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442\u044b \u0438\u0437 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b x,y,w,h, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u0432 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0435 <code>SPRITES<\/code>:<\/p>\n<pre><code class=\"javascript\">var SPRITES = {   PALM_TREE:   { x:    5, y:    5, w:  215, h:  540 },   BILLBOARD08: { x:  230, y:    5, w:  385, h:  265 },    \/\/ ... etc    CAR04:       { x: 1383, y:  894, w:   80, h:   57 },   CAR01:       { x: 1205, y: 1018, w:   80, h:   56 }, };<\/code><\/pre>\n<p>  <\/p>\n<h2>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0431\u0438\u043b\u0431\u043e\u0440\u0434\u043e\u0432 \u0438 \u0434\u0435\u0440\u0435\u0432\u044c\u0435\u0432<\/h2>\n<p>  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043a \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0443 \u0434\u043e\u0440\u043e\u0433\u0438 \u043c\u0430\u0441\u0441\u0438\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0441\u043f\u0440\u0430\u0439\u0442\u044b \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043f\u043e \u043a\u0440\u0430\u044f\u043c \u0434\u043e\u0440\u043e\u0433\u0438.<\/p>\n<p>  \u041a\u0430\u0436\u0434\u044b\u0439 \u0441\u043f\u0440\u0430\u0439\u0442 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 <code>source<\/code>, \u0432\u0437\u044f\u0442\u043e\u0433\u043e \u0438\u0437 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 <code>SPRITES<\/code>, \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435\u043c <code>offset<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e \u0442\u0430\u043a, \u0447\u0442\u043e -1 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u043b\u0435\u0432\u044b\u0439 \u043a\u0440\u0430\u0439 \u0434\u043e\u0440\u043e\u0433\u0438, \u0430 +1 \u2014 \u043f\u0440\u0430\u0432\u044b\u0439 \u043a\u0440\u0430\u0439, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u043e\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f <code>roadWidth<\/code>.<\/p>\n<p>  \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043f\u0440\u0430\u0439\u0442\u044b \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0432\u043f\u043e\u043b\u043d\u0435 \u043d\u0430\u043c\u0435\u0440\u0435\u043d\u043d\u043e, \u0434\u0440\u0443\u0433\u0438\u0435 \u0440\u0430\u043d\u0434\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u044b.<\/p>\n<pre><code class=\"javascript\">function addSegment() {   segments.push({     ...     sprites: [],     ...   }); }  function addSprite(n, sprite, offset) {   segments[n].sprites.push({ source: sprite, offset: offset }); }  function resetSprites() {    addSprite(20,  SPRITES.BILLBOARD07, -1);   addSprite(40,  SPRITES.BILLBOARD06, -1);   addSprite(60,  SPRITES.BILLBOARD08, -1);   addSprite(80,  SPRITES.BILLBOARD09, -1);   addSprite(100, SPRITES.BILLBOARD01, -1);   addSprite(120, SPRITES.BILLBOARD02, -1);   addSprite(140, SPRITES.BILLBOARD03, -1);   addSprite(160, SPRITES.BILLBOARD04, -1);   addSprite(180, SPRITES.BILLBOARD05, -1);    addSprite(240, SPRITES.BILLBOARD07, -1.2);   addSprite(240, SPRITES.BILLBOARD06,  1.2);       for(n = 250 ; n &lt; 1000 ; n += 5) {     addSprite(n, SPRITES.COLUMN, 1.1);     addSprite(n + Util.randomInt(0,5), SPRITES.TREE1, -1 - (Math.random() * 2));     addSprite(n + Util.randomInt(0,5), SPRITES.TREE2, -1 - (Math.random() * 2));   }    ... }<\/code><\/pre>\n<p>  <em>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435: \u0435\u0441\u043b\u0438 \u0431\u044b \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u0443\u044e \u0438\u0433\u0440\u0443, \u0442\u043e \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u0434\u043e\u0440\u043e\u0433, \u0447\u0442\u043e\u0431\u044b \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0443 \u0441 \u0445\u043e\u043b\u043c\u0430\u043c\u0438 \u0438 \u043a\u0440\u0438\u0432\u044b\u043c\u0438, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432 \u0432\u0434\u043e\u043b\u044c \u0434\u043e\u0440\u043e\u0433\u0438\u2026 \u043d\u043e \u0434\u043b\u044f \u043d\u0430\u0448\u0438\u0445 \u0437\u0430\u0434\u0430\u0447 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c <code>addSprite()<\/code>.<\/em><\/p>\n<h2>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043c\u0430\u0448\u0438\u043d<\/h2>\n<p>  \u0412 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a \u0441\u043f\u0440\u0430\u0439\u0442\u0430\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043f\u043e \u043a\u0440\u0430\u044f\u043c \u0434\u043e\u0440\u043e\u0433\u0438 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044e \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0435\u0439 <strong>\u0432\u0441\u0435\u0445<\/strong> \u043c\u0430\u0448\u0438\u043d \u043d\u0430 \u0442\u0440\u0430\u0441\u0441\u0435.<\/p>\n<pre><code class=\"javascript\">var cars      = [];  \/\/ array of cars on the road var totalCars = 200; \/\/ total number of cars on the road  function addSegment() {   segments.push({     ...     cars: [], \/\/ array of cars within this segment     ...   }); }<\/code><\/pre>\n<p>  \u0425\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0434\u0432\u0443\u0445 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440 \u0434\u0430\u043d\u043d\u044b\u0445 \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u0435\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u043b\u0435\u0433\u043a\u043e \u0438\u0442\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e \u043e\u0431\u0445\u043e\u0434\u0438\u0442\u044c \u0432\u0441\u0435 \u043c\u0430\u0448\u0438\u043d\u044b \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 <code>update()<\/code>, \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u044f \u0438\u0445 \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0432 \u0434\u0440\u0443\u0433\u043e\u0439; \u0432 \u0442\u043e \u0436\u0435 \u0432\u0440\u0435\u043c\u044f \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c <code>render()<\/code> \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u0430\u0448\u0438\u043d \u043d\u0430 \u0432\u0438\u0434\u0438\u043c\u044b\u0445 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u0445.<\/p>\n<p>  \u041a\u0430\u0436\u0434\u043e\u0439 \u043c\u0430\u0448\u0438\u043d\u0435 \u043f\u0440\u0438\u0434\u0430\u0451\u0442\u0441\u044f \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438, \u043f\u043e\u0437\u0438\u0446\u0438\u044f \u043f\u043e z, \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0441\u043f\u0440\u0430\u0439\u0442\u0430 \u0438 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c:<\/p>\n<pre><code class=\"javascript\">function resetCars() {   cars = [];   var n, car, segment, offset, z, sprite, speed;   for (var n = 0 ; n &lt; totalCars ; n++) {     offset = Math.random() * Util.randomChoice([-0.8, 0.8]);     z      = Math.floor(Math.random() * segments.length) * segmentLength;     sprite = Util.randomChoice(SPRITES.CARS);     speed  = maxSpeed\/4 + Math.random() * maxSpeed\/(sprite == SPRITES.SEMI ? 4 : 2);     car = { offset: offset, z: z, sprite: sprite, speed: speed };     segment = findSegment(car.z);     segment.cars.push(car);     cars.push(car);   } }<\/code><\/pre>\n<p>  <\/p>\n<h2>\u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0445\u043e\u043b\u043c\u043e\u0432 (\u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435)<\/h2>\n<p>  \u0412 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u0447\u0430\u0441\u0442\u044f\u0445 \u044f \u0433\u043e\u0432\u043e\u0440\u0438\u043b \u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043e\u0440\u043e\u0433\u0438, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u043a\u0440\u0438\u0432\u044b\u0445 \u0438 \u0445\u043e\u043b\u043c\u043e\u0432, \u043d\u043e \u0432 \u043d\u0438\u0445 \u0431\u044b\u043b\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u043d\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b. \u041e\u043d\u0438 \u043a\u0430\u0441\u0430\u043b\u0438\u0441\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <code>maxy<\/code>, \u043d\u0430\u0447\u0438\u043d\u0430\u0432\u0448\u0435\u0439\u0441\u044f \u0441 \u043d\u0438\u0437\u0430 \u044d\u043a\u0440\u0430\u043d\u0430, \u043d\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0432\u0448\u0435\u0439\u0441\u044f \u043f\u0440\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0442\u043e\u0433\u043e, \u043a\u0430\u043a\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u044d\u043a\u0440\u0430\u043d\u0430 \u043c\u044b \u0443\u0436\u0435 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043b\u0438:<\/p>\n<pre><code class=\"javascript\">for(n = 0 ; n &lt; drawDistance ; n++) {    ...    if ((segment.p1.camera.z &lt;= cameraDepth) || \/\/ behind us       (segment.p2.screen.y &gt;= maxy))          \/\/ clip by (already rendered) segment     continue;    ...    maxy = segment.p2.screen.y; }<\/code><\/pre>\n<p>  \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043d\u0430\u043c \u043e\u0431\u0440\u0435\u0437\u0430\u0442\u044c \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u043a\u0440\u044b\u0442\u044b \u0443\u0436\u0435 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u043d\u044b\u043c\u0438 \u0445\u043e\u043b\u043c\u0430\u043c\u0438.<\/p>\n<p>  \u0412 \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u043e\u043c <a href=\"http:\/\/en.wikipedia.org\/wiki\/Painter&#39;s_algorithm\" rel=\"nofollow\">\u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0435 \u0445\u0443\u0434\u043e\u0436\u043d\u0438\u043a\u0430<\/a> \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043e\u0431\u044b\u0447\u043d\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441\u0437\u0430\u0434\u0438 \u0432\u043f\u0435\u0440\u0451\u0434, \u0430 \u0431\u043e\u043b\u0435\u0435 \u0431\u043b\u0438\u0437\u043a\u0438\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u044e\u0442 \u0434\u0430\u043b\u044c\u043d\u0438\u0435. \u041e\u0434\u043d\u0430\u043a\u043e \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0442\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043f\u043e\u043b\u0438\u0433\u043e\u043d\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u0430\u043d\u044b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043b\u0435\u0433\u0447\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0441\u043f\u0435\u0440\u0435\u0434\u0438 \u043d\u0430\u0437\u0430\u0434 \u0438 \u043e\u0431\u0440\u0435\u0437\u0430\u0442\u044c \u0434\u0430\u043b\u044c\u043d\u0438\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b, \u0437\u0430\u043a\u0440\u044b\u0442\u044b\u0435 \u0443\u0436\u0435 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u043d\u044b\u043c\u0438 \u0431\u043b\u0438\u0436\u043d\u0438\u043c\u0438 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u0435\u0441\u043b\u0438 \u0438\u0445 \u0441\u043f\u0440\u043e\u0435\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043c\u0435\u043d\u044c\u0448\u0435 <code>maxy<\/code>.<\/p>\n<h2>\u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0431\u0438\u043b\u0431\u043e\u0440\u0434\u043e\u0432, \u0434\u0435\u0440\u0435\u0432\u044c\u0435\u0432 \u0438 \u043c\u0430\u0448\u0438\u043d<\/h2>\n<p>  \u041e\u0434\u043d\u0430\u043a\u043e \u0438\u0442\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043e\u0431\u0445\u043e\u0434 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043e\u0440\u043e\u0433\u0438 \u0441\u043f\u0435\u0440\u0435\u0434\u0438 \u043d\u0430\u0437\u0430\u0434 \u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u0440\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d\u0438 \u0447\u0430\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u044e\u0442 \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0430, \u0430 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043e\u043b\u0436\u043d\u044b \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0430 \u0445\u0443\u0434\u043e\u0436\u043d\u0438\u043a\u0430.<\/p>\n<p>  \u042d\u0442\u043e \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442 \u043d\u0430\u0448 \u043c\u0435\u0442\u043e\u0434 <code>render()<\/code> \u0438 \u0432\u044b\u043d\u0443\u0436\u0434\u0430\u0435\u0442 \u043d\u0430\u0441 \u043e\u0431\u0445\u043e\u0434\u0438\u0442\u044c \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b \u0434\u043e\u0440\u043e\u0433\u0438 \u0432 \u0434\u0432\u0430 \u044d\u0442\u0430\u043f\u0430:<\/p>\n<ol>\n<li>\u0441\u043f\u0435\u0440\u0435\u0434\u0438 \u043d\u0430\u0437\u0430\u0434 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0434\u043e\u0440\u043e\u0433\u0438<\/li>\n<li>\u0441\u0437\u0430\u0434\u0438 \u0432\u043f\u0435\u0440\u0451\u0434 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432<\/li>\n<\/ol>\n<p>  <\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/8db\/7d3\/347\/8db7d3347ac49621e67b7bbe2028fc6e.png\"><\/div>\n<p>  \u041a\u0440\u043e\u043c\u0435 \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u0445 \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0430 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u043c\u0435\u0442\u044c \u0434\u0435\u043b\u043e \u0441\u043e \u0441\u043f\u0440\u0430\u0439\u0442\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u00ab\u0441\u043b\u0435\u0433\u043a\u0430 \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u044e\u0442\u00bb \u0438\u0437-\u0437\u0430 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430 \u0432\u0435\u0440\u0448\u0438\u043d\u044b \u0445\u043e\u043b\u043c\u0430. \u0415\u0441\u043b\u0438 \u0441\u043f\u0440\u0430\u0439\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0432\u044b\u0441\u043e\u043a, \u0442\u043e \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0435\u0433\u043e \u0432\u0435\u0440\u0445\u043d\u044e\u044e \u0447\u0430\u0441\u0442\u044c, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u0434\u043e\u0440\u043e\u0433\u0438, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u043d \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f, \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0445\u043e\u043b\u043c\u0430, \u0430 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f.<\/p>\n<p>  \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u044e\u044e \u0437\u0430\u0434\u0430\u0447\u0443 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0440\u0435\u0448\u0438\u0442\u044c, \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>maxy<\/code> \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u043a\u0430\u043a \u043b\u0438\u043d\u0438\u044e <code>clip<\/code> \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 1. \u0417\u0430\u0442\u0435\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0431\u0440\u0435\u0437\u0430\u0442\u044c \u0441\u043f\u0440\u0430\u0439\u0442\u044b \u044d\u0442\u043e\u0433\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u043f\u043e \u043b\u0438\u043d\u0438\u044e <code>clip<\/code> \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 2.<\/p>\n<p>  \u041e\u0441\u0442\u0430\u0432\u0448\u0430\u044f\u0441\u044f \u0447\u0430\u0441\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u043a\u0430\u043a \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0441\u043f\u0440\u0430\u0439\u0442 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u0430 <code>scale<\/code> \u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 <code>screen<\/code> \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043e\u0440\u043e\u0433\u0438 (\u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0445 \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 1), \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0447\u0435\u043c\u0443 \u043d\u0430 \u0432\u0442\u043e\u0440\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 <code>render()<\/code> \u043d\u0430\u043c \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<pre><code class=\"javascript\">\/\/ back to front painters algorithm for(n = (drawDistance-1) ; n &gt; 0 ; n--) {   segment = segments[(baseSegment.index + n) % segments.length];    \/\/ render roadside sprites   for(i = 0 ; i &lt; segment.sprites.length ; i++) {     sprite      = segment.sprites[i];     spriteScale = segment.p1.screen.scale;     spriteX     = segment.p1.screen.x + (spriteScale * sprite.offset * roadWidth * width\/2);     spriteY     = segment.p1.screen.y;     Render.sprite(ctx, width, height, resolution, roadWidth, sprites, sprite.source, spriteScale, spriteX, spriteY, (sprite.offset &lt; 0 ? -1 : 0), -1, segment.clip);   }    \/\/ render other cars   for(i = 0 ; i &lt; segment.cars.length ; i++) {     car         = segment.cars[i];     sprite      = car.sprite;     spriteScale = Util.interpolate(segment.p1.screen.scale, segment.p2.screen.scale, car.percent);     spriteX     = Util.interpolate(segment.p1.screen.x,     segment.p2.screen.x,     car.percent) + (spriteScale * car.offset * roadWidth * width\/2);     spriteY     = Util.interpolate(segment.p1.screen.y,     segment.p2.screen.y,     car.percent);     Render.sprite(ctx, width, height, resolution, roadWidth, sprites, car.sprite, spriteScale, spriteX, spriteY, -0.5, -1, segment.clip);   }  }<\/code><\/pre>\n<p>  <\/p>\n<h2>\u041a\u043e\u043b\u043b\u0438\u0437\u0438\u0438 \u0441 \u0431\u0438\u043b\u0431\u043e\u0440\u0434\u0430\u043c\u0438 \u0438 \u0434\u0435\u0440\u0435\u0432\u044c\u044f\u043c\u0438<\/h2>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0441\u043f\u0440\u0430\u0439\u0442\u044b \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043f\u043e \u043a\u0440\u0430\u044f\u043c \u0434\u043e\u0440\u043e\u0433\u0438, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043c\u0435\u0442\u043e\u0434 <code>update()<\/code> \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c, \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u043b\u0438 \u0438\u0433\u0440\u043e\u043a \u0441 \u043a\u0430\u043a\u0438\u043c-\u0442\u043e \u0438\u0437 \u044d\u0442\u0438\u0445 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432 \u0432 \u0441\u0432\u043e\u0451\u043c \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0435:<\/p>\n<p>  \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 <code>Util.overlap()<\/code> \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043e\u0431\u043e\u0431\u0449\u0451\u043d\u043d\u043e\u0433\u043e \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0441\u0435\u0447\u0435\u043d\u0438\u044f \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432. \u0415\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u0441\u0435\u0447\u0435\u043d\u0438\u0435 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u043e, \u043c\u044b \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043c\u0430\u0448\u0438\u043d\u0443:<\/p>\n<pre><code class=\"javascript\">if ((playerX &lt; -1) || (playerX &gt; 1)) {   for(n = 0 ; n &lt; playerSegment.sprites.length ; n++) {     sprite  = playerSegment.sprites[n];     spriteW = sprite.source.w * SPRITES.SCALE;     if (Util.overlap(playerX, playerW, sprite.offset + spriteW\/2 * (sprite.offset &gt; 0 ? 1 : -1), spriteW)) {       \/\/ stop the car       break;     }   } }<\/code><\/pre>\n<p>  <em>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435: \u0435\u0441\u043b\u0438 \u0432\u044b \u0438\u0437\u0443\u0447\u0438\u0442\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u0434, \u0442\u043e \u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043c\u044b \u043d\u0435 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043c\u0430\u0448\u0438\u043d\u0443, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0442\u043e\u0433\u0434\u0430 \u043e\u043d\u0430 \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442 \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u044a\u0435\u0445\u0430\u0442\u044c \u043f\u0440\u0435\u043f\u044f\u0442\u0441\u0442\u0432\u0438\u044f; \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0445\u0430\u043a\u0430 \u043c\u044b \u0444\u0438\u043a\u0441\u0438\u0440\u0443\u0435\u043c \u0438\u0445 \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u043c \u043c\u0430\u0448\u0438\u043d\u0435 \u00ab\u043f\u0440\u043e\u0441\u043a\u043e\u043b\u044c\u0437\u043d\u0443\u0442\u044c\u00bb \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0432\u043e\u043a\u0440\u0443\u0433 \u0441\u043f\u0440\u0430\u0439\u0442\u0430.<\/em><\/p>\n<h2>\u041a\u043e\u043b\u043b\u0438\u0437\u0438\u0438 \u0441 \u043c\u0430\u0448\u0438\u043d\u0430\u043c\u0438<\/h2>\n<p>  \u0412 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u044f\u043c \u0441\u043e \u0441\u043f\u0440\u0430\u0439\u0442\u0430\u043c\u0438 \u043f\u043e \u043a\u0440\u0430\u044f\u043c \u0434\u043e\u0440\u043e\u0433\u0438 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u0442\u044c \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u0438 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u043c\u0430\u0448\u0438\u043d\u0430\u043c\u0438, \u0438 \u0435\u0441\u043b\u0438 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u043e \u043f\u0435\u0440\u0435\u0441\u0435\u0447\u0435\u043d\u0438\u0435, \u043c\u044b \u0437\u0430\u043c\u0435\u0434\u043b\u044f\u0435\u043c \u0438\u0433\u0440\u043e\u043a\u0430 \u00ab\u043e\u0442\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u044f\u00bb \u0435\u0433\u043e \u043d\u0430\u0437\u0430\u0434 \u0437\u0430 \u043c\u0430\u0448\u0438\u043d\u043e\u0439, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043e\u0442 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f:<\/p>\n<pre><code class=\"javascript\">for(n = 0 ; n &lt; playerSegment.cars.length ; n++) {   car  = playerSegment.cars[n];   carW = car.sprite.w * SPRITES.SCALE;   if (speed &gt; car.speed) {     if (Util.overlap(playerX, playerW, car.offset, carW, 0.8)) {       \/\/ slow the car       break;     }   } }<\/code><\/pre>\n<p>  <\/p>\n<h2>\u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043c\u0430\u0448\u0438\u043d<\/h2>\n<p>  \u0427\u0442\u043e\u0431\u044b \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u0430\u0448\u0438\u043d\u044b \u0434\u0432\u0438\u0433\u0430\u043b\u0438\u0441\u044c \u043f\u043e \u0434\u043e\u0440\u043e\u0433\u0435, \u043c\u044b \u0434\u0430\u0434\u0438\u043c \u0438\u043c \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0439 \u0418\u0418:<\/p>\n<ul>\n<li>\u0435\u0445\u0430\u0442\u044c \u0441 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e\u0439 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u044e<\/li>\n<li>\u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0431\u044a\u0435\u0437\u0436\u0430\u0442\u044c \u0438\u0433\u0440\u043e\u043a\u0430 \u043f\u0440\u0438 \u043e\u0431\u0433\u043e\u043d\u0435<\/li>\n<li>\u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0431\u044a\u0435\u0437\u0436\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u0430\u0448\u0438\u043d\u044b \u043f\u0440\u0438 \u043e\u0431\u0433\u043e\u043d\u0435<\/li>\n<\/ul>\n<p>  <\/p>\n<blockquote><p><em>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435: \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u043e\u043b\u043d\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043e \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0430\u0448\u0438\u043d \u043f\u043e \u043a\u0440\u0438\u0432\u043e\u0439 \u043d\u0430 \u0434\u043e\u0440\u043e\u0433\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043a\u0440\u0438\u0432\u044b\u0435 \u043d\u0435\u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0435. \u0415\u0441\u043b\u0438 \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043c\u0430\u0448\u0438\u043d\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u0432\u0438\u0433\u0430\u043b\u0438\u0441\u044c \u043f\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u043c \u0434\u043e\u0440\u043e\u0433\u0438, \u0442\u043e \u043e\u043d\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u043e\u0435\u0434\u0443\u0442 \u043f\u043e \u043a\u0440\u0438\u0432\u044b\u043c.<\/em><\/p><\/blockquote>\n<p>  \u0412\u0441\u0451 \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 <code>update()<\/code> \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 <code>updateCars()<\/code>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u044b \u0434\u0432\u0438\u0433\u0430\u0435\u043c \u043a\u0430\u0436\u0434\u0443\u044e \u043c\u0430\u0448\u0438\u043d\u0443 \u0432\u043f\u0435\u0440\u0451\u0434 \u0441 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e\u0439 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u044e \u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u043c\u0441\u044f \u0441 \u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u043a\u0430\u0434\u0440\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u043b\u0438\u0441\u044c \u043d\u0430 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e\u0435 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/p>\n<pre><code class=\"javascript\">function updateCars(dt, playerSegment, playerW) {   var n, car, oldSegment, newSegment;   for(n = 0 ; n &lt; cars.length ; n++) {     car         = cars[n];     oldSegment  = findSegment(car.z);     car.offset  = car.offset + updateCarOffset(car, oldSegment, playerSegment, playerW);     car.z       = Util.increase(car.z, dt * car.speed, trackLength);     car.percent = Util.percentRemaining(car.z, segmentLength); \/\/ useful for interpolation during rendering phase     newSegment  = findSegment(car.z);     if (oldSegment != newSegment) {       index = oldSegment.cars.indexOf(car);       oldSegment.cars.splice(index, 1);       newSegment.cars.push(car);     }   } }<\/code><\/pre>\n<p>  \u041c\u0435\u0442\u043e\u0434 <code>updateCarOffset()<\/code> \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e <em>\u00ab\u0438\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u043b\u043b\u0435\u043a\u0442\u0430\u00bb<\/em>, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0435\u0433\u043e \u043c\u0430\u0448\u0438\u043d\u0435 \u043e\u0431\u044a\u0435\u0437\u0436\u0430\u0442\u044c \u0438\u0433\u0440\u043e\u043a\u0430 \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u0430\u0448\u0438\u043d\u044b. \u042d\u0442\u043e \u043e\u0434\u0438\u043d \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0432 \u043a\u043e\u0434\u043e\u0432\u043e\u0439 \u0431\u0430\u0437\u0435, \u0438 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0439 \u0438\u0433\u0440\u0435 \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u043c, \u0447\u0442\u043e\u0431\u044b \u043c\u0430\u0448\u0438\u043d\u044b \u043a\u0430\u0437\u0430\u043b\u0438\u0441\u044c \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u0435\u0435, \u0447\u0435\u043c \u0432 \u043f\u0440\u043e\u0441\u0442\u043e\u043c \u0434\u0435\u043c\u043e.<\/p>\n<p>  \u0412 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043d\u0430\u0438\u0432\u043d\u044b\u0439 \u0418\u0418 \u0441 \u0433\u0440\u0443\u0431\u044b\u043c \u043f\u0435\u0440\u0435\u0431\u043e\u0440\u043e\u043c, \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0439 \u043a\u0430\u0436\u0434\u0443\u044e \u043c\u0430\u0448\u0438\u043d\u0443:<\/p>\n<ul>\n<li>\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432\u043f\u0435\u0440\u0451\u0434 \u043d\u0430 20 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432<\/li>\n<li>\u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0432\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u0434 \u0441\u043e\u0431\u043e\u0439 \u0431\u043e\u043b\u0435\u0435 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0443\u044e \u043c\u0430\u0448\u0438\u043d\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0435\u0440\u0435\u0441\u0435\u043a\u0430\u0435\u0442 \u0435\u0451 \u043f\u0443\u0442\u044c, \u0442\u043e \u043e\u0431\u044a\u0435\u0437\u0436\u0430\u0442\u044c \u0435\u0451<\/li>\n<li>\u043f\u043e\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0432\u043f\u0440\u0430\u0432\u043e \u043e\u0442 \u043f\u0440\u0435\u043f\u044f\u0442\u0441\u0442\u0432\u0438\u0439, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u043d\u0430 \u043b\u0435\u0432\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0434\u043e\u0440\u043e\u0433\u0438<\/li>\n<li>\u043f\u043e\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0432\u043b\u0435\u0432\u043e \u043e\u0442 \u043f\u0440\u0435\u043f\u044f\u0442\u0441\u0442\u0432\u0438\u0439, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u043d\u0430 \u043f\u0440\u0430\u0432\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0434\u043e\u0440\u043e\u0433\u0438<\/li>\n<li>\u043f\u043e\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043f\u0440\u0435\u043f\u044f\u0442\u0441\u0442\u0432\u0438\u044f \u0432\u043f\u0435\u0440\u0435\u0434\u0438 \u0432 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 \u043e\u0441\u0442\u0430\u0432\u0448\u0435\u0433\u043e\u0441\u044f \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/li>\n<\/ul>\n<p>  \u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0436\u0443\u043b\u044c\u043d\u0438\u0447\u0430\u0442\u044c \u0441 \u0442\u0435\u043c\u0438 \u043c\u0430\u0448\u0438\u043d\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435\u0432\u0438\u0434\u0438\u043c\u044b \u0434\u043b\u044f \u0438\u0433\u0440\u043e\u043a\u0430, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044f \u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u043e\u0431\u044a\u0435\u0437\u0436\u0430\u0442\u044c \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0430 \u0438 \u043f\u0440\u043e\u0435\u0437\u0436\u0430\u0442\u044c \u043d\u0430\u0441\u043a\u0432\u043e\u0437\u044c. \u041e\u043d\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u00ab\u0443\u043c\u043d\u044b\u043c\u0438\u00bb \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0438\u0433\u0440\u043e\u043a\u0430.<\/p>\n<pre><code class=\"javascript\">function updateCarOffset(car, carSegment, playerSegment, playerW) {    var i, j, dir, segment, otherCar, otherCarW, lookahead = 20, carW = car.sprite.w * SPRITES.SCALE;    \/\/ optimization, dont bother steering around other cars when 'out of sight' of the player   if ((carSegment.index - playerSegment.index) &gt; drawDistance)     return 0;    for(i = 1 ; i &lt; lookahead ; i++) {     segment = segments[(carSegment.index+i)%segments.length];      if ((segment === playerSegment) &amp;&amp; (car.speed &gt; speed) &amp;&amp; (Util.overlap(playerX, playerW, car.offset, carW, 1.2))) {       if (playerX &gt; 0.5)         dir = -1;       else if (playerX &lt; -0.5)         dir = 1;       else         dir = (car.offset &gt; playerX) ? 1 : -1;       return dir * 1\/i * (car.speed-speed)\/maxSpeed; \/\/ the closer the cars (smaller i) and the greater the speed ratio, the larger the offset     }      for(j = 0 ; j &lt; segment.cars.length ; j++) {       otherCar  = segment.cars[j];       otherCarW = otherCar.sprite.w * SPRITES.SCALE;       if ((car.speed &gt; otherCar.speed) &amp;&amp; Util.overlap(car.offset, carW, otherCar.offset, otherCarW, 1.2)) {         if (otherCar.offset &gt; 0.5)           dir = -1;         else if (otherCar.offset &lt; -0.5)           dir = 1;         else           dir = (car.offset &gt; otherCar.offset) ? 1 : -1;         return dir * 1\/i * (car.speed-otherCar.speed)\/maxSpeed;       }     }   } }<\/code><\/pre>\n<p>  \u0412 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u044d\u0442\u043e\u0442 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0445\u043e\u0440\u043e\u0448\u043e, \u043d\u043e \u043f\u0440\u0438 \u0431\u043e\u043b\u044c\u0448\u043e\u043c \u0441\u0442\u043e\u043b\u043f\u043e\u0442\u0432\u043e\u0440\u0435\u043d\u0438\u0438 \u043c\u0430\u0448\u0438\u043d \u0432\u043f\u0435\u0440\u0435\u0434\u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043c\u0430\u0448\u0438\u043d\u044b \u0434\u0432\u0438\u0436\u0443\u0442\u0441\u044f \u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043e \u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e, \u043f\u044b\u0442\u0430\u044f\u0441\u044c \u043f\u0440\u043e\u0442\u0438\u0441\u043d\u0443\u0442\u044c\u0441\u044f \u0432 \u0437\u0430\u0437\u043e\u0440 \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u043c\u0430\u0448\u0438\u043d\u0430\u043c\u0438. \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0445 \u043f\u043e\u0432\u044b\u0441\u0438\u0442\u044c \u043d\u0430\u0434\u0451\u0436\u043d\u043e\u0441\u0442\u044c \u0418\u0418, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u044c \u043c\u0430\u0448\u0438\u043d\u0430\u043c \u0437\u0430\u043c\u0435\u0434\u043b\u044f\u0442\u044c\u0441\u044f, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u0432\u0438\u0434\u044f\u0442, \u0447\u0442\u043e \u0434\u043b\u044f \u043e\u0431\u044a\u0435\u0437\u0434\u0430 \u043f\u0440\u0435\u043f\u044f\u0442\u0441\u0442\u0432\u0438\u0439 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u0435\u0441\u0442\u0430.<\/p>\n<h2>\u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441<\/h2>\n<p>  \u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0440\u0443\u0434\u0438\u043c\u0435\u043d\u0442\u0430\u0440\u043d\u044b\u0439 HTML-\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441:<\/p>\n<pre>&lt;div id=&quot;hud&quot;&gt;   &lt;span id=&quot;speed&quot;            class=&quot;hud&quot;&gt;&lt;span id=&quot;speed_value&quot; class=&quot;value&quot;&gt;0&lt;\/span&gt; mph&lt;\/span&gt;   &lt;span id=&quot;current_lap_time&quot; class=&quot;hud&quot;&gt;Time: &lt;span id=&quot;current_lap_time_value&quot; class=&quot;value&quot;&gt;0.0&lt;\/span&gt;&lt;\/span&gt;    &lt;span id=&quot;last_lap_time&quot;    class=&quot;hud&quot;&gt;Last Lap: &lt;span id=&quot;last_lap_time_value&quot; class=&quot;value&quot;&gt;0.0&lt;\/span&gt;&lt;\/span&gt;   &lt;span id=&quot;fast_lap_time&quot;    class=&quot;hud&quot;&gt;Fastest Lap: &lt;span id=&quot;fast_lap_time_value&quot; class=&quot;value&quot;&gt;0.0&lt;\/span&gt;&lt;\/span&gt; &lt;\/div&gt;<\/pre>\n<p>  \u2026 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u043c\u0443 CSS-\u0441\u0442\u0438\u043b\u044c<\/p>\n<pre><code class=\"css\">#hud                   { position: absolute; z-index: 1; width: 640px; padding: 5px 0; font-family: Verdana, Geneva, sans-serif; font-size: 0.8em; background-color: rgba(255,0,0,0.4); color: black; border-bottom: 2px solid black; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } #hud .hud              { background-color: rgba(255,255,255,0.6); padding: 5px; border: 1px solid black; margin: 0 5px; transition-property: background-color; transition-duration: 2s; -webkit-transition-property: background-color; -webkit-transition-duration: 2s; } #hud #speed            { float: right; } #hud #current_lap_time { float: left;  } #hud #last_lap_time    { float: left; display: none;  } #hud #fast_lap_time    { display: block; width: 12em;  margin: 0 auto; text-align: center; transition-property: background-color; transition-duration: 2s; -webkit-transition-property: background-color; -webkit-transition-duration: 2s; } #hud .value            { color: black; font-weight: bold; } #hud .fastest          { background-color: rgba(255,215,0,0.5); }<\/code><\/pre>\n<p>  \u2026 \u0438 \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0435\u0433\u043e update() \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430:<\/p>\n<pre><code class=\"javascript\">if (position &gt; playerZ) {   if (currentLapTime &amp;&amp; (startPosition &lt; playerZ)) {     lastLapTime    = currentLapTime;     currentLapTime = 0;     if (lastLapTime &lt;= Util.toFloat(Dom.storage.fast_lap_time)) {       Dom.storage.fast_lap_time = lastLapTime;       updateHud('fast_lap_time', formatTime(lastLapTime));       Dom.addClassName('fast_lap_time', 'fastest');       Dom.addClassName('last_lap_time', 'fastest');     }     else {       Dom.removeClassName('fast_lap_time', 'fastest');       Dom.removeClassName('last_lap_time', 'fastest');     }     updateHud('last_lap_time', formatTime(lastLapTime));     Dom.show('last_lap_time');   }   else {     currentLapTime += dt;   } }  updateHud('speed',            5 * Math.round(speed\/500)); updateHud('current_lap_time', formatTime(currentLapTime));<\/code><\/pre>\n<p>  \u0412\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 <code>updateHud()<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u043c \u0438 \u043d\u0430\u043c \u043d\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0435\u0433\u043e \u0441 \u0447\u0430\u0441\u0442\u043e\u0442\u043e\u0439 60fps, \u0435\u0441\u043b\u0438 \u0441\u0430\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043d\u0435 \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f.<\/p>\n<pre><code class=\"javascript\">function updateHud(key, value) { \/\/ accessing DOM can be slow, so only do it if value has changed   if (hud[key].value !== value) {     hud[key].value = value;     Dom.set(hud[key].dom, value);   } }<\/code><\/pre>\n<p>  <\/p>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>  <\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/103\/563\/0d1\/1035630d19106de2f85edebb24d0421f.png\"><\/div>\n<p>  \u0424\u0443\u0445! \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0447\u0430\u0441\u0442\u044c \u0431\u044b\u043b\u0438 \u0434\u043b\u0438\u043d\u043d\u043e\u0439, \u043d\u043e \u043c\u044b \u0432\u0441\u0451-\u0442\u0430\u043a\u0438 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0438, \u0430 <a href=\"https:\/\/codeincomplete.com\/games\/racer\" rel=\"nofollow\">\u0433\u043e\u0442\u043e\u0432\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f<\/a> \u0434\u043e\u0441\u0442\u0438\u0433\u043b\u0430 \u044d\u0442\u0430\u043f\u0430, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0435\u0451 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0438\u0433\u0440\u043e\u0439. \u041e\u043d\u0430 \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u0434\u0430\u043b\u0435\u043a\u0430 \u043e\u0442 <a href=\"https:\/\/codeincomplete.com\/articles\/defining-finished\" rel=\"nofollow\">\u0437\u0430\u0432\u0435\u0440\u0448\u0451\u043d\u043d\u043e\u0439<\/a> \u0438\u0433\u0440\u044b, \u043d\u043e \u044d\u0442\u043e \u0432\u0441\u0451-\u0442\u0430\u043a\u0438 \u0438\u0433\u0440\u0430.<\/p>\n<p>  \u041f\u043e\u0442\u0440\u044f\u0441\u0430\u044e\u0449\u0435, \u0447\u0442\u043e \u043d\u0430\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0438\u0433\u0440\u0443, \u043f\u0443\u0441\u0442\u044c \u0438 \u0442\u0430\u043a\u0443\u044e \u043f\u0440\u043e\u0441\u0442\u0443\u044e. \u042f \u043d\u0435 \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u044e \u0434\u043e\u0432\u043e\u0434\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0435\u043a\u0442 \u0434\u043e \u0437\u0430\u0432\u0435\u0440\u0448\u0451\u043d\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u0415\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u0430\u043a <strong>\u0432\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/strong> \u0432 \u0442\u0435\u043c\u0443 \u043f\u0441\u0435\u0432\u0434\u043e\u0442\u0440\u0451\u0445\u043c\u0435\u0440\u043d\u044b\u0445 \u0433\u043e\u043d\u043e\u0447\u043d\u044b\u0445 \u0438\u0433\u0440.<\/p>\n<p>  \u041a\u043e\u0434 <a href=\"https:\/\/github.com\/jakesgordon\/javascript-racer\/\" rel=\"nofollow\">\u0432\u044b\u043b\u043e\u0436\u0435\u043d github<\/a>, \u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u0431\u043e\u043b\u0435\u0435 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u0443\u044e \u0433\u043e\u043d\u043e\u0447\u043d\u0443\u044e \u0438\u0433\u0440\u0443. \u041c\u043e\u0436\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c:<\/p>\n<ul>\n<li>\u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0437\u0432\u0443\u043a\u043e\u0432\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u043c\u0430\u0448\u0438\u043d<\/li>\n<li>\u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044e \u043c\u0443\u0437\u044b\u043a\u0438<\/li>\n<li>\u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u044d\u043a\u0440\u0430\u043d\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c<\/li>\n<li>\u0441\u043e\u0437\u0434\u0430\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 (\u043c\u0435\u0440\u0446\u0430\u043d\u0438\u0435 \u043f\u0440\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u0440\u0435\u043a\u043e\u0440\u0434\u0430, \u043a\u043e\u043d\u0444\u0435\u0442\u0442\u0438, \u0441\u043f\u0438\u0434\u043e\u043c\u0435\u0442\u0440 \u0441 \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0439 \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u043a\u043e\u0439, \u0438 \u0442.\u043f.)<\/li>\n<li>\u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0442\u043e\u0447\u043d\u044b\u0435 \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u0438 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432<\/li>\n<li>\u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u0418\u0418 \u043c\u0430\u0448\u0438\u043d (\u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435, \u0442\u043e\u0440\u043c\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u0442.\u043f.)<\/li>\n<li>\u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0443\u044e \u0430\u0432\u0430\u0440\u0438\u044e \u043f\u0440\u0438 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0438 \u043d\u0430 \u0432\u044b\u0441\u043e\u043a\u043e\u0439 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438<\/li>\n<li>\u0431\u043e\u043b\u044c\u0448\u0435 \u0442\u0440\u044f\u0441\u043a\u0438, \u043a\u043e\u0433\u0434\u0430 \u043c\u0430\u0448\u0438\u043d\u0430 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u0434\u043e\u0440\u043e\u0433\u0438<\/li>\n<li>\u0442\u0440\u044f\u0441\u043a\u0443 \u044d\u043a\u0440\u0430\u043d\u0430, \u043a\u043e\u0433\u0434\u0430 \u043c\u0430\u0448\u0438\u043d\u0430 \u0432\u044b\u0435\u0445\u0430\u043b\u0430 \u0437\u0430 \u043a\u0440\u0430\u044f \u0434\u043e\u0440\u043e\u0433\u0438 \u0438\u043b\u0438 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0430\u0441\u044c \u0441 \u0447\u0435\u043c-\u0442\u043e<\/li>\n<li>\u0440\u0430\u0437\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u043d\u0438\u0435 \u0433\u0440\u044f\u0437\u0438, \u043a\u043e\u0433\u0434\u0430 \u043c\u0430\u0448\u0438\u043d\u0430 \u043d\u0435 \u043d\u0430 \u0434\u043e\u0440\u043e\u0433\u0435<\/li>\n<li>\u0431\u043e\u043b\u0435\u0435 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u0443\u044e \u043a\u0430\u043c\u0435\u0440\u0443 (\u043d\u0438\u0436\u0435 \u043d\u0430 \u0432\u044b\u0441\u043e\u043a\u043e\u0439 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438, \u043f\u0430\u0440\u0435\u043d\u0438\u0435 \u043d\u0430\u0434 \u0445\u043e\u043b\u043c\u0430\u043c\u0438 \u0438 \u0442.\u043f.)<\/li>\n<li>\u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0438 drawDistance<\/li>\n<li>\u0431\u043e\u043b\u0435\u0435 \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u044b\u0435 \u043a\u0440\u0438\u0432\u044b\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u0440\u043e\u0435\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441 \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u043e\u043c \u043f\u043e x,y<\/li>\n<li>\u0443\u0441\u0442\u0440\u0430\u043d\u0438\u0442\u044c \u0441\u0443\u0431\u043f\u0438\u043a\u0441\u0435\u043b\u044c\u043d\u044b\u0435 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u044b \u0430\u043b\u0438\u0430\u0441\u0438\u043d\u0433\u0430 \u043d\u0430 \u043a\u0440\u0438\u0432\u044b\u0445<\/li>\n<li>\u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0434\u0443\u043c\u0430\u043d\u043d\u044b\u0439 \u0442\u0443\u043c\u0430\u043d \u0434\u043b\u044f \u0441\u043e\u043a\u0440\u044b\u0442\u0438\u044f \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432 (\u0441\u0438\u043d\u0438\u0439 \u043d\u0430 \u0444\u043e\u043d\u0435 \u043d\u0435\u0431\u0430, \u0441\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0441\u043f\u0440\u0430\u0439\u0442\u044b)<\/li>\n<li>\u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0443\u0440\u043e\u0432\u043d\u0435\u0439<\/li>\n<li>\u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043a\u0430\u0440\u0442\u044b<\/li>\n<li>\u043a\u0430\u0440\u0442\u0430 \u043a\u0440\u0443\u0433\u0430 \u0441 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/li>\n<li>\u0440\u0430\u0437\u0432\u0438\u043b\u043a\u0438 \u0438 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u0434\u043e\u0440\u043e\u0433<\/li>\n<li>\u0441\u043c\u0435\u043d\u0430 \u0434\u043d\u044f \u0438 \u043d\u043e\u0447\u0438<\/li>\n<li>\u043f\u043e\u0433\u043e\u0434\u043d\u044b\u0435 \u044f\u0432\u043b\u0435\u043d\u0438\u044f<\/li>\n<li>\u0442\u0443\u043d\u043d\u0435\u043b\u0438, \u043c\u043e\u0441\u0442\u044b, \u043e\u0431\u043b\u0430\u043a\u0430, \u0441\u0442\u0435\u043d\u044b, \u0437\u0434\u0430\u043d\u0438\u044f<\/li>\n<li>\u0433\u043e\u0440\u043e\u0434, \u043f\u0443\u0441\u0442\u044b\u043d\u044f, \u043e\u043a\u0435\u0430\u043d<\/li>\n<li>\u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u0444\u043e\u043d\u044b \u0433\u043e\u0440\u043e\u0434 \u0421\u0438\u044d\u0442\u043b \u0438 \u0421\u043f\u0435\u0439\u0441-\u041d\u0438\u0434\u043b<\/li>\n<li>\u00ab\u0437\u043b\u043e\u0434\u0435\u0438\u00bb \u2014 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u043e\u0432, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0440\u0435\u0432\u043d\u043e\u0432\u0430\u0442\u044c\u0441\u044f<\/li>\n<li>\u0438\u0433\u0440\u043e\u0432\u044b\u0435 \u0440\u0435\u0436\u0438\u043c\u044b \u2014 \u0441\u0430\u043c\u044b\u0439 \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u043a\u0440\u0443\u0433, \u0433\u043e\u043d\u043a\u0430 \u043e\u0434\u0438\u043d \u043d\u0430 \u043e\u0434\u0438\u043d (\u0441\u043e\u0431\u0438\u0440\u0430\u043d\u0438\u0435 \u043c\u043e\u043d\u0435\u0442?, \u0441\u0442\u0440\u0435\u043b\u044c\u0431\u0430 \u043f\u043e \u0437\u043b\u043e\u0434\u0435\u044f\u043c?)<\/li>\n<li>\u043a\u0443\u0447\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0433\u0435\u0439\u043c\u043f\u043b\u0435\u044f<\/li>\n<li>\u0438 \u0442.\u0434.<\/li>\n<li>&#8230;<\/li>\n<\/ul>\n<p>  \u0418\u0442\u0430\u043a, \u043c\u044b \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0438. \u0415\u0449\u0451 \u043e\u0434\u0438\u043d \u00ab\u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u043d\u044b\u0435\u00bb, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u043d\u044f\u043b \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u044c\u0448\u0435, \u0447\u0435\u043c \u043e\u0436\u0438\u0434\u0430\u043b\u043e\u0441\u044c, \u043d\u043e \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0445\u043e\u0440\u043e\u0448\u0438\u043c. <\/p>\n<h2>\u0421\u0441\u044b\u043b\u043a\u0438<\/h2>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/habr.com\/ru\/post\/499252\/\">\u041d\u0430\u0447\u0430\u043b\u043e \u0441\u0435\u0440\u0438\u0438 \u0441\u0442\u0430\u0442\u0435\u0439, \u043f\u0440\u044f\u043c\u044b\u0435 \u0434\u043e\u0440\u043e\u0433\u0438 \u0438 \u043a\u0440\u0438\u0432\u044b\u0435<\/a><\/li>\n<li><a href=\"http:\/\/www.extentofthejam.com\/pseudo\/\" rel=\"nofollow\">Lou\u2019s Pseudo 3d Page<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/jakesgordon\/javascript-racer\/\" rel=\"nofollow\">\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434<\/a><\/li>\n<\/ul>\n<p>  \u0421\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0438\u0433\u0440\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u0435 \u0434\u0435\u043c\u043e:<\/p>\n<ul>\n<li><a href=\"https:\/\/codeincomplete.com\/games\/racer\/v1-straight\" rel=\"nofollow\">\u0434\u0435\u043c\u043e \u0441 \u043f\u0440\u044f\u043c\u044b\u043c\u0438 \u0434\u043e\u0440\u043e\u0433\u0430\u043c\u0438<\/a><\/li>\n<li><a href=\"https:\/\/codeincomplete.com\/games\/racer\/v2-curves\" rel=\"nofollow\">\u0434\u0435\u043c\u043e \u0441 \u043a\u0440\u0438\u0432\u044b\u043c\u0438<\/a><\/li>\n<li><a href=\"https:\/\/codeincomplete.com\/games\/racer\/v3-hills\" rel=\"nofollow\">\u0434\u0435\u043c\u043e \u0441 \u0445\u043e\u043b\u043c\u0430\u043c\u0438<\/a><\/li>\n<li><a href=\"https:\/\/codeincomplete.com\/games\/racer\" rel=\"nofollow\">\u0433\u043e\u0442\u043e\u0432\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f<\/a><\/li>\n<\/ul>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/499442\/\"> https:\/\/habr.com\/ru\/post\/499442\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/499442\/\">\n<h2>\u0427\u0430\u0441\u0442\u044c 3. \u0425\u043e\u043b\u043c\u044b<\/h2>\n<p>  <\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/892\/231\/4e8\/8922314e8acebdd3ae14fba511d17294.png\"><\/div>\n<p>  \u0412 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u043f\u0441\u0435\u0432\u0434\u043e\u0442\u0440\u0451\u0445\u043c\u0435\u0440\u043d\u0443\u044e <a href=\"https:\/\/habr.com\/ru\/post\/499252\/\">\u0433\u043e\u043d\u043e\u0447\u043d\u0443\u044e \u0438\u0433\u0440\u0443<\/a>, \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0432 \u0432 \u043d\u0435\u0439 \u043f\u0440\u044f\u043c\u044b\u0435 \u0434\u043e\u0440\u043e\u0433\u0438 \u0438 \u043a\u0440\u0438\u0432\u044b\u0435.<\/p>\n<p>  \u041d\u0430 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u043c\u044b \u0437\u0430\u0439\u043c\u0451\u043c\u0441\u044f \u0445\u043e\u043b\u043c\u0430\u043c\u0438; \u043a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0449\u0435, \u0447\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438\u0441\u043a\u0440\u0438\u0432\u043b\u0451\u043d\u043d\u044b\u0445 \u0434\u043e\u0440\u043e\u0433.<\/p>\n<p>  \u0412 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0437\u0430\u043a\u043e\u043d \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u0440\u0451\u0445\u043c\u0435\u0440\u043d\u043e\u0439 \u043f\u0435\u0440\u0441\u043f\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0446\u0438\u0438:<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/949\/0ab\/47b\/9490ab47bb570b61218e46e5913c18bb.png\"><\/div>\n<p>  \u2026 \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u043b\u043e \u043d\u0430\u0441 \u043a \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044e \u0443\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0439 \u043f\u0440\u043e\u0435\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b 3d-\u043c\u0438\u0440\u0430 \u0432 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0443 2d-\u044d\u043a\u0440\u0430\u043d\u0430.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/edb\/246\/e18\/edb246e187e7fe0eb027b53c58790c34.png\"><\/div>\n<p>  \u2026 \u043d\u043e \u0442\u0430\u043a \u043a\u0430\u043a \u0442\u043e\u0433\u0434\u0430 \u043c\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u043f\u0440\u044f\u043c\u044b\u043c\u0438 \u0434\u043e\u0440\u043e\u0433\u0430\u043c\u0438, \u043c\u0438\u0440\u043e\u0432\u044b\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u0431\u044b\u043b\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <strong>z<\/strong>, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0438 <strong>x<\/strong>, \u0438 <strong>y<\/strong> \u0431\u044b\u043b\u0438 \u0440\u0430\u0432\u043d\u044b \u043d\u0443\u043b\u044e.<\/p>\n<p>  \u042d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u043d\u0430\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0445\u043e\u043b\u043c\u043e\u0432 \u043d\u0430\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u0430\u0442\u044c \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u043c \u0434\u043e\u0440\u043e\u0433\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u043d\u0435\u043d\u0443\u043b\u0435\u0432\u0443\u044e \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0443 <strong>y<\/strong>, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u0443\u0436\u0435 \u0438\u043c\u0435\u044e\u0449\u0430\u044f\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>render()<\/code> \u0432\u043e\u043b\u0448\u0435\u0431\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-302798","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/302798","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=302798"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/302798\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=302798"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=302798"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=302798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}