{"id":225669,"date":"2014-06-09T10:13:02","date_gmt":"2014-06-09T06:13:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=225669"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=225669","title":{"rendered":"<span class=\"post_title\">\u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0441\u0435\u0442\u0435\u0432\u0430\u044f \u0438\u0433\u0440\u0430 \u043d\u0430 HTML, CSS \u0438 JavaScript<\/span>"},"content":{"rendered":"<div class=\"content html_format\"> \t\t\t\u041a\u0430\u043a-\u0442\u043e \u043f\u043e\u0438\u0433\u0440\u0430\u0432 \u0432 \u043e\u0444\u0444\u0438\u0441\u0435, \u0432 <a href=\"http:\/\/hexbug.ru\/nano\/\">hexbug<\/a>, \u0437\u0430\u0440\u043e\u0434\u0438\u043b\u0430\u0441\u044c \u0438\u0434\u0435\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0438\u0433\u0440\u0443\u0448\u043a\u0443 \u043f\u043e \u0441\u0445\u043e\u0436\u0438\u043c \u043c\u043e\u0442\u0438\u0432\u0430\u043c.<br \/>  \u041f\u043e \u0442\u0435\u043a\u0443\u0449\u0435\u043c\u0443 \u0440\u043e\u0434\u0443 \u0434\u0435\u044f\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u044f \u0432\u0435\u0431 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0438 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0437\u0430\u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0447\u0442\u043e\u0431\u044b \u0432 \u0438\u0433\u0440\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e HTML, JavaScript \u0438 CSS \u2014 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430 \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u0435 \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0432\u0435\u0431\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443. \u041d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0432\u0430\u043c flash \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 canvas. \u0417\u0432\u0443\u0447\u0438\u0442 \u0445\u0430\u0440\u0434\u043a\u043e\u0440\u043d\u043e, \u043d\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 HTML + CSS3 \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043c\u043e\u0449\u043d\u044b\u0435 \u0438 \u0433\u0438\u0431\u043a\u0438\u0435 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u0430 \u043f\u0438\u0441\u0430\u0442\u044c \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u043a\u043e\u0434 \u043d\u0430 JavaScript \u2014 \u043e\u0434\u043d\u043e \u0443\u0434\u043e\u0432\u043e\u043b\u044c\u0441\u0442\u0432\u0438\u0435. \u0412\u0434\u043e\u0431\u0430\u0432\u043e\u043a \u0437\u0430\u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0447\u0442\u043e\u0431\u044b \u0438\u0433\u0440\u0430 \u0431\u044b\u043b\u0430 \u0441 \u0441\u0435\u0442\u0435\u0432\u044b\u043c \u043c\u0443\u043b\u044c\u0442\u0438\u043f\u043b\u0435\u0435\u0440\u043e\u043c, \u043f\u0440\u0438\u0442\u043e\u043c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u2014 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0442\u0430\u043c \u0448\u0430\u0448\u0435\u043a, \u043a\u0430\u0440\u0442\u043e\u0447\u043d\u044b\u0445 \u0438\u0433\u0440, \u043f\u043e\u0448\u0430\u0433\u043e\u0432\u044b\u0445 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0439, \u0432\u0441\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 \u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0438.<\/p>\n<p>  \u0412\u043e\u0442 \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0432 \u0438\u0442\u043e\u0433\u0435:<\/p>\n<p>  <iframe loading=\"lazy\" width=\"560\" height=\"349\" src=\"\/\/www.youtube.com\/embed\/AHYeoVX5d9c?wmode=opaque\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>  \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043e\u0441\u0442\u0430\u0432\u043b\u044e \u043d\u0430\u0431\u043e\u0440 \u0437\u0430\u043c\u0435\u0442\u043e\u043a \u0432\u043e\u0437\u043d\u0438\u043a\u0448\u0438\u0445 \u043f\u0440\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0430 \u0438\u0433\u0440\u0443\u0448\u043a\u0438, \u043d\u0430\u0446\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0430 \u043f\u043e\u0434\u0445\u043e\u0434 \u00ab\u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u043f\u0440\u043e\u0449\u0435 \u0438 \u043f\u043e\u0431\u044b\u0441\u0442\u0440\u0435\u0435\u00bb. \u0414\u0443\u043c\u0430\u044e \u0441\u0442\u0430\u0442\u044c\u044f \u043c\u043e\u0436\u0435\u0442 \u0441\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u043d\u0435\u043a\u043e\u0435 \u043f\u043e\u0434\u0441\u043f\u043e\u0440\u044c\u0435 \u0434\u043b\u044f \u043d\u043e\u0432\u0438\u0447\u043a\u043e\u0432 \u0432 \u044d\u0442\u043e\u043c \u0443\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u043c \u0434\u0435\u043b\u0435.<\/p>\n<p>  <a name=\"habracut\"><\/a><\/p>\n<h2>\u0413\u0435\u0439\u043c\u043f\u043b\u0435\u0439<\/h2>\n<p>  \u0417\u0430\u0434\u0430\u0447\u0430 \u0438\u0433\u0440\u044b \u2014 \u0432\u044b\u0440\u0430\u0441\u0442\u0438\u0442\u044c \u0441\u0432\u043e\u044e \u043a\u043e\u043b\u043e\u043d\u0438\u044e \u0436\u0443\u043a\u043e\u0432 \u0438 \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0438\u0442\u044c \u0432\u0441\u0435\u0445 \u044e\u043d\u0438\u0442\u043e\u0432 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u0438\u043a\u0430. \u0416\u0443\u043a\u0438 \u0445\u0430\u043e\u0442\u0438\u0447\u043d\u043e \u0431\u0435\u0433\u0430\u044e\u0442 \u043f\u043e \u0438\u0433\u0440\u043e\u0432\u043e\u043c\u0443 \u043f\u043e\u043b\u044e, \u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u0438\u0433\u0440\u043e\u043a\u0430 \u2014 \u043f\u043e\u043c\u043e\u0433\u0430\u0442\u044c \u0438\u043c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c \u0431\u043e\u043d\u0443\u0441\u044b \u0432 \u0432\u0438\u0434\u0435 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u043e\u0439 \u0435\u0434\u044b \u0438 \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043f\u043e\u043c\u043e\u0449\u044c \u0441\u0432\u043e\u0438\u043c \u044e\u043d\u0438\u0442\u0430\u043c, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u043e \u043d\u0430\u043f\u0430\u0434\u0435\u043d\u0438\u0435. <\/p>\n<p>   \u0411\u043e\u043d\u0443\u0441\u044b \u0432 \u0438\u0433\u0440\u0435:<br \/>   <b>\u043a\u0435\u043a\u0441<\/b> \u2014 \u0434\u0430\u0435\u0442 5xp, \u043f\u0440\u0438 \u043d\u0430\u0431\u043e\u0440\u0435 15xp \u0436\u0443\u043a \u0440\u0430\u0437\u043c\u043d\u043e\u0436\u0430\u0435\u0442\u0441\u044f<br \/>   <b>\u044f\u0431\u043b\u043e\u043a\u043e<\/b> \u2014 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 50hp, \u0435\u0441\u043b\u0438 \u0436\u0443\u043a \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0434\u043e\u0440\u043e\u0432 \u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 15 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 hp<br \/>   <b>\u043f\u0435\u0440\u0435\u0446<\/b> \u2014 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0430\u0442\u0430\u043a\u0443 \u043d\u0430 5dm<br \/>   <b>\u0436\u0435\u043b\u0443\u0434\u044c<\/b> \u2014 \u0434\u0430\u0435\u0442 2xp \u0438 \u0448\u0432\u044b\u0440\u044f\u0435\u0442\u0441\u044f \u0432 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u0438\u043a\u0430, \u043f\u0440\u0438 \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u0438 \u043d\u0430\u043d\u043e\u0441\u0438\u0442 \u0442\u0440\u043e\u0439\u043d\u043e\u0439 \u0443\u0440\u043e\u043d<br \/>   <b>\u043c\u0443\u0445\u043e\u043c\u043e\u0440<\/b> \u2014 \u0434\u0430\u0435\u0442 1\u0445p \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u044f\u0434\u043e\u0432\u0438\u0442\u044b\u0439 \u0432\u044b\u0441\u0442\u0440\u0435\u043b, \u043f\u0440\u0438 \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u0438 \u043d\u0430\u043d\u043e\u0441\u0438\u0442 1\/2 \u0443\u0440\u043e\u043d\u0430 \u0438 \u0437\u0430\u043c\u0435\u0434\u043b\u044f\u0435\u0442 \u0436\u0435\u0440\u0442\u0432\u0443<\/p>\n<p>  \u0418\u0433\u0440\u0430\u0442\u044c \u043c\u043e\u0433\u0443\u0442 \u043e\u0442 2 \u0434\u043e 4 \u0447\u0435\u043b\u043e\u0432\u0435\u043a. \u041c\u043e\u0436\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c\u0441\u044f \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443 \u0438\u0437 \u0440\u0430\u0437\u043d\u044b\u0445 \u0432\u043a\u043b\u0430\u0434\u043e\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0438 \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c \u043e\u0434\u043d\u043e\u043c\u0443. <br \/>  \u041f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c \u043c\u043e\u0436\u043d\u043e <a href=\"http:\/\/bugsarena.alexclimber.com\">\u0437\u0434\u0435\u0441\u044c<\/a>.<br \/>  \u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u043d\u0430 <a href=\"https:\/\/github.com\/holiber\/bugs-arena\">github<\/a>.<br \/>  <a href=\"https:\/\/www.dropbox.com\/s\/5sgypqc08v0ukqo\/bugs.zip\">\u0410\u0440\u0445\u0438\u0432 \u0441 \u0438\u0433\u0440\u043e\u0439<\/a>.<\/p>\n<h2>\u0413\u0440\u0430\u0444\u0438\u043a\u0430<\/h2>\n<p>  HTML \u0438 CSS \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0432\u0435\u0441\u044c\u043c\u0430 \u043d\u0435 \u0448\u0443\u0441\u0442\u0440\u044b\u0435 \u0432 \u043f\u043b\u0430\u043d\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u043a\u043e\u0433\u0434\u0430 \u0440\u0435\u0447\u044c \u0438\u0434\u0435\u0442 \u043e\u0431 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0435 \u0433\u0440\u0430\u0444\u0438\u043a\u0438, \u0442\u0440\u0435\u0431\u0443\u044e\u0449\u0435\u0439\u0441\u044f \u0432 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0438\u0433\u0440\u0430\u0445. \u041d\u043e \u0435\u0441\u043b\u0438 \u043d\u0430\u0448\u0430 \u0446\u0435\u043b\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f \u0438\u0433\u0440\u0443\u0448\u043a\u0438, \u0442\u043e \u044d\u0442\u043e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0432\u043f\u043e\u043b\u043d\u0435 \u0441\u043e\u0439\u0434\u0435\u0442. \u0412 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435 \u00ab\u0443\u0437\u043a\u0438\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b\u00bb \u0432 \u0432\u0438\u0434\u0435 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u0446\u0435\u043d\u044b \u0438\u0433\u0440\u044b \u043c\u043e\u0436\u043d\u043e \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043f\u043e\u0431\u044b\u0441\u0442\u0440\u043e\u043c\u0443 \u043f\u0435\u0440\u0435\u0431\u0440\u043e\u0441\u0438\u0442\u044c \u043d\u0430 canvas.<\/p>\n<p>  \u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0439 \u0432 2\u0434 \u0438\u0433\u0440\u0435 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f, \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0438 \u043c\u0430\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432.<\/p>\n<p>  \u041f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u043c \u0441\u043f\u0440\u0430\u0439\u0442 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044f \u0443 \u043d\u0435\u0433\u043e position: absolute \u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u044f left \u0438 top <\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/getpro\/habr\/post_images\/401\/175\/610\/40117561062ece0fd77d4deabaf190e0.gif\"\/><\/p>\n<p>  \u0414\u043b\u044f \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f <b>transform: rotate<\/b>. \u0410 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <b>transform: origin<\/b> \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u043e\u0441\u044c \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043e\u043d\u0430 \u0432 \u0446\u0435\u043d\u0442\u0440\u0435 \u0441\u043f\u0440\u0430\u0439\u0442\u0430).<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/getpro\/habr\/post_images\/753\/69c\/54d\/75369c54dd1e6170b341aee7d5244666.gif\"\/><\/p>\n<p>  \u0414\u043b\u044f \u043c\u0430\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c \u0440\u0430\u0437\u043c\u0440\u0435\u0440\u044b \u0441\u043f\u0440\u0430\u0439\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432 width \u0438 height, \u043f\u0435\u0440\u0435\u0434 \u044d\u0442\u0438\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0432 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 background-size:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/getpro\/habr\/post_images\/174\/eb4\/3f9\/174eb43f952ad6b3333896a80afb69f7.gif\"\/><\/p>\n<h3>\u0410\u043f\u043f\u0430\u0440\u0430\u0442\u043d\u043e\u0435 \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u0435<\/h3>\n<p>  \u0414\u043b\u044f \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043f\u043b\u0430\u0432\u043d\u043e\u0441\u0442\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c GPU \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u043e \u0441\u043f\u0440\u0430\u0439\u0442\u0430\u043c\u0438 \u043a\u0430\u043a \u0441 \u0442\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u044b\u043c\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438. \u0422\u0435\u043f\u0435\u0440\u044c \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f, \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0438 \u043c\u0430\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0447\u0435\u0440\u0435\u0437 translate3d, rotate3d \u0438 scale3d:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/getpro\/habr\/post_images\/017\/8a8\/2e9\/0178a82e96ce543736a3fa21c18c0bcb.gif\"\/><\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/getpro\/habr\/post_images\/aeb\/b46\/5ae\/aebb465aeae7bca132d24dc84520f6de.gif\"\/><\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/getpro\/habr\/post_images\/035\/396\/ad6\/035396ad68b58fd2fc33378fe56e5e26.gif\"\/><\/p>\n<p>  \u0412\u0441\u0435\u0445 \u044d\u0442\u0438\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u0432\u043f\u043e\u043b\u043d\u0435 \u0445\u0432\u0430\u0442\u0438\u043b\u043e \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0433\u0440\u0430\u0444\u0438\u043a\u0443 \u0432 \u0438\u0433\u0440\u0435 \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0432 \u00ab\u043f\u044d\u0439\u043d\u0442\u0435\u00bb \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432.<\/p>\n<h2>\u0424\u0438\u0437\u0438\u043a\u0430<\/h2>\n<p>  \u041f\u043e\u043c\u0438\u043c\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0438\u0433\u0440\u043e\u0432\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u043d\u0443\u0436\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u043d\u0430\u043b\u0430\u0434\u0438\u0442\u044c \u0438\u0445 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c.<br \/>  \u0412 bugsarena \u0432\u0441\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0432\u0438\u0435 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0439 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432.<br \/>  \u0422\u0430\u043a \u043a\u0430\u043a \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u0435 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u043c\u0443, \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u043c\u0441\u044f \u0448\u043a\u043e\u043b\u044c\u043d\u043e\u0439 \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u043e\u0439.<br \/>  \u041d\u0430\u0432\u0435\u0440\u043d\u043e \u043e\u0434\u043d\u0430 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0447\u0430\u0441\u0442\u044b\u0445 \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u0432 \u0438\u0433\u0440\u0430\u0445 \u2014 \u043d\u0430\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u0435 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u0442\u043e\u0447\u043a\u0430\u043c\u0438. \u041f\u043e \u0441\u0443\u0442\u0435 \u0437\u0430\u0434\u0430\u0447\u0430 \u0441\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a \u043d\u0430\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044e \u0433\u0438\u043f\u043e\u0442\u0435\u043d\u0443\u0437\u044b \u0432 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0435:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/getpro\/habr\/post_images\/23a\/28b\/071\/23a28b071203e753352e79001f9dcdd2.gif\"\/><\/p>\n<p>  \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0444\u043e\u0440\u043c\u0443\u043b\u0443:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/getpro\/habr\/post_images\/330\/110\/f53\/330110f531070d4ceb92153f9b234fbc.jpg\"\/><\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0444\u043e\u0440\u043c\u0443\u043b\u0435 \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u043d\u0430\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0434\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u043d\u0430\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u0435 \u0441\u0430\u043c\u043e\u0433\u043e \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u0438 \u0441\u0430\u043c\u043e\u0433\u043e \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u043d\u0430\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0432 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u043c \u0440\u0430\u0434\u0438\u0443\u0441\u0435 \u0430 \u0442\u0430\u043a \u0436\u0435 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0432\u0430\u0442\u044c \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0432 \u0444\u043e\u0440\u043c\u0435 \u043a\u0440\u0443\u0433\u0430.<br \/>  \u0412\u0441\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0438\u0433\u0440\u044b \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0441\u043f\u0440\u0430\u0439\u0442\u044b \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c 20\u044520, \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u043d\u0435\u0431\u0440\u0435\u0447\u044c \u0438\u0445 \u0444\u043e\u0440\u043c\u043e\u0439 \u0438 \u0440\u0430\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u043a\u0430\u043a-\u0431\u0443\u0434\u0442\u043e \u043e\u043d\u0438 \u0432\u0441\u0435 \u0432\u043f\u0438\u0441\u0430\u043d\u043d\u044b \u0432 \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u044c \u0441 \u0434\u0438\u0430\u043c\u0435\u0442\u0440\u043e\u043c 20. \u0422\u043e\u0433\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0447\u0442\u043e 2 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c \u043a\u043e\u0433\u0434\u0430 \u0440\u0430\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u0438\u0445 \u0446\u0435\u043d\u0442\u0440\u0430\u043c\u0438 \u043c\u0435\u043d\u044c\u0448\u0435 \u0438\u043b\u0438 \u0440\u0430\u0432\u043d\u043e \u0441\u0443\u043c\u043c\u0435 \u0438\u0445 \u0440\u0430\u0434\u0438\u0443\u0441\u043e\u0432.<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/getpro\/habr\/post_images\/d0a\/29f\/76c\/d0a29f76c0de592673709ad7ec6a8a95.gif\"\/><\/p>\n<p>  \u0418 \u0435\u0449\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u043c\u0435\u0442\u043e\u043a:  <\/p>\n<ul>\n<li>\u0414\u043b\u044f \u0437\u0430\u0434\u0430\u043d\u0438\u044f \u0443\u0433\u043b\u043e\u0432\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0440\u0430\u0434\u0438\u0430\u043d\u044b, \u0430 \u043d\u0435 \u0433\u0440\u0430\u0434\u0443\u0441\u044b. \u0412\u0441\u0435 \u0443\u0433\u043b\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0437 Math \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0442\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u0432 \u043d\u0438\u0445. \u041d\u0430\u043f\u043e\u043c\u043d\u044e \u043f\u043e\u043b\u043d\u044b\u0439 \u043e\u0431\u043e\u0440\u043e\u0442 \u0440\u0430\u0432\u043d\u044f\u0435\u0442\u0441\u044f 2 * PI \u0440\u0430\u0434\u0438\u0430\u043d<\/li>\n<li>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043f\u043e\u043d\u044f\u0442\u0438\u0435 \u0432\u0435\u043a\u0442\u043e\u0440\u0430 \u0434\u043b\u044f \u0437\u0430\u0434\u0430\u043d\u0438\u044f \u0432\u0435\u043b\u0435\u0447\u0438\u043d \u0443 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0435\u0441\u0442\u044c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435. \u0414\u0430\u0436\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432\u0435\u043a\u0442\u043e\u0440\u043e\u043c. \u041c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u043a\u043b\u0430\u0441\u0441 \u0432\u0435\u043a\u0442\u043e\u0440\u0430 \u0438\u043b\u0438 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u043c \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u043c \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043b\u0438\u0431\u043e <a href=\"http:\/\/evanw.github.io\/lightgl.js\/docs\/vector.html\">\u043b\u044e\u0431\u044b\u043c<\/a> <a href=\"http:\/\/www.cgrats.com\/javascript-2d-vector-library.html\"> \u0434\u0440\u0443\u0433\u0438\u043c<\/a>.<br \/>  \u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u0432\u0435\u043a\u0442\u043e\u0440\u043e\u043c \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u0430 \u0438\u043c\u0435\u0435\u0442 \u0432\u0435\u043b\u0435\u0447\u0438\u043d\u0443 \u0438 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0432 \u0434\u0432\u043e\u0435 \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u043c\u043d\u043e\u0436\u0430\u0435\u043c \u0432\u0435\u043a\u0442\u043e\u0440 \u043d\u0430 2, \u0430 \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043c\u044b \u0438\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0432\u0435\u043a\u0442\u043e\u0440 (\u0443\u043c\u043d\u043e\u0436\u0430\u0435\u043c \u043d\u0430 -1).   <\/li>\n<li>\u0415\u0441\u043b\u0438 \u0432 \u0438\u0433\u0440\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0441\u043b\u043e\u0436\u043d\u0430\u044f \u0444\u0438\u0437\u0438\u043a\u0430 \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 <a href=\"http:\/\/box2d-js.sourceforge.net\/\">box2d-js<\/a>. \u042d\u0442\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u043c\u0438\u0440 \u0441 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u043e\u0439 \u0444\u043e\u0440\u043c\u044b, \u0433\u0440\u0430\u0432\u0438\u0442\u0430\u0446\u0438\u0435\u0439, \u043c\u0430\u0441\u0441\u043e\u0439, \u0438\u043d\u0435\u0440\u0446\u0438\u0435\u0439, \u0441\u0438\u043b\u043e\u0439 \u0442\u0440\u0435\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u0447\u0438\u043c\u0438 \u0431\u043b\u0430\u0433\u0430\u043c\u0438 \u043d\u044c\u044e\u0442\u043e\u043d\u043e\u0432\u0441\u043a\u043e\u0439 \u0444\u0438\u0437\u0438\u043a\u0438<\/li>\n<\/ul>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041f\u0440\u0438\u043c\u0435\u0440 \u043a\u043b\u0430\u0441\u0441\u0430 \u0412\u0435\u043a\u0442\u043e\u0440<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">\t\t\/\/ \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \t\tfunction Vec (x_, y_) { \t\t\tif (typeof x_ == 'object') { \t\t\t\tthis.setV(x_); \t\t\t\treturn; \t\t\t} \t\t\tthis.x= typeof x_ == 'number' ? x_ : 0; \t\t\tthis.y= typeof y_ == 'number' ? y_ : 0; \t\t}  \t\tVec.prototype = {  \t\t\t\/\/ \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0432 0 \t\t\tsetZero: function() { \t\t\t\tthis.x = 0.0; \t\t\t\tthis.y = 0.0; \t\t\t},  \t\t\t\/\/ \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 x \u0438 y \t\t\tset: function(x_, y_) {this.x=x_; this.y=y_;},  \t\t\t\/\/ \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0438\u0437 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \t\t\tsetV: function(v) { \t\t\t\tthis.x=v.x; \t\t\t\tthis.y=v.y; \t\t\t},  \t\t\t\/\/ \u0440\u0435\u0432\u0435\u0440\u0441 \u0432\u0435\u043a\u0442\u043e\u0440\u0430 \t\t\tnegative: function(){ \t\t\t\treturn new Vec(-this.x, -this.y); \t\t\t},  \t\t\t\/\/ \u043a\u043e\u043f\u0438\u044f \u0432\u0435\u043a\u0442\u043e\u0440\u0430 \t\t\tcopy: function(){ \t\t\t\treturn new Vec(this.x,this.y); \t\t\t},  \t\t\t\/\/ \u0441\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u0432\u0435\u043a\u0442\u043e\u0440\u043e\u043c \t\t\tadd: function(v) { \t\t\t\tthis.x += v.x; this.y += v.y; \t\t\t\treturn this; \t\t\t},  \t\t\t\/\/ \u0432\u044b\u0447\u0435\u0442\u0430\u043d\u0438\u0435 \u0432\u0435\u043a\u0442\u043e\u0440\u0430 \t\t\tmubtract: function(v) { \t\t\t\tthis.x -= v.x; this.y -= v.y; \t\t\t\treturn this; \t\t\t},  \t\t\t\/\/ \u0443\u043c\u043d\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0447\u0438\u0441\u043b\u043e \t\t\tmultiply: function(a) { \t\t\t\tthis.x *= a; this.y *= a; \t\t\t\treturn this; \t\t\t},  \t\t\t\/\/ \u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 \u0447\u0438\u0441\u043b\u043e \t\t\tdiv: function(a) { \t\t\t\tthis.x \/= a; this.y \/= a; \t\t\t\treturn this; \t\t\t},  \t\t\t\/\/ \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u0438\u043d\u044b \u0432\u0435\u043a\u0442\u043e\u0440\u0430 \t\t\tlength: function() { \t\t\t\treturn Math.sqrt(this.x * this.x + this.y * this.y); \t\t\t},  \t\t\t\/\/ \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0432\u0435\u043a\u0442\u043e\u0440\u0430 (\u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043a \u0432\u0435\u043a\u0442\u043e\u0440\u0443 \u0441 \u0434\u043b\u0438\u043d\u043e\u0439 = 1) \t\t\tnormalize: function() { \t\t\t\tvar length = this.length(); \t\t\t\tif (length &lt; Number.MIN_VALUE) { \t\t\t\t\treturn 0.0; \t\t\t\t} \t\t\t\tvar invLength = 1.0 \/ length; \t\t\t\tthis.x *= invLength; \t\t\t\tthis.y *= invLength;  \t\t\t\treturn length; \t\t\t},  \t\t\t\/\/ \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0443\u0433\u043b\u0430 \u0432\u0435\u043a\u0442\u043e\u0440\u0430 \t\t\tangle: function () { \t\t\t\tvar x = this.x; \t\t\t\tvar y = this.y; \t\t\t\tif (x == 0) { \t\t\t\t\treturn (y &gt; 0) ? (3 * Math.PI) \/ 2 : Math.PI \/ 2; \t\t\t\t} \t\t\t\tvar result = Math.atan(y\/x);  \t\t\t\tresult += Math.PI\/2; \t\t\t\tif (x &lt; 0) result = result - Math.PI; \t\t\t\treturn result; \t\t\t},  \t\t\t\/\/ \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0440\u0430\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0434\u043e \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0432\u0435\u043a\u0442\u043e\u0440\u0430 (\u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0435\u0441\u043b\u0438 \u0432\u0435\u043a\u0442\u043e\u0440\u043e\u043c \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043f\u0440\u0430\u0439\u0442\u0430) \t\t\tdistanceTo: function (v) { \t\t\t\treturn Math.sqrt((v.x - this.x) * (v.x - this.x) + (v.y - this.y) * (v.y - this.y)); \t\t\t},  \t\t\t\/\/ \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0432\u0435\u043a\u0442\u043e\u0440\u0430 \u043f\u0440\u043e\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u0442 \u0432\u0435\u0440\u0448\u0438\u043d\u044b x,y \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0432\u0435\u043a\u0442\u043e\u0440\u0430 \u0434\u043e \u0432\u0435\u0440\u0448\u0438\u043d\u044b x,y \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0432\u0435\u043a\u0442\u043e\u0440\u0430   \t\t\tvectorTo: function (v) { \t\t\t\treturn new Vec(v.x - this.x, v.y - this.y); \t\t\t},  \t\t\t\/\/ \u043f\u043e\u0432\u043e\u0440\u043e\u0442 \u0432\u0435\u043a\u0442\u043e\u0440\u0430 \u043d\u0430 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0439 \u0443\u0433\u043b \t\t\trotate: function (angle) { \t\t\t\tvar length = this.length(); \t\t\t\tthis.x = Math.sin(angle) * length; \t\t\t\tthis.y = Math.cos(angle) * (-length); \t\t\t\treturn this; \t\t\t} \t}; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<h2>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/h2>\n<p>  \u0412 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u043b\u043e\u0432\u0430\u0445 \u0438\u0433\u0440\u043e\u0432\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0430\u043a: \u0415\u0441\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u043a\u043b\u0430\u0441\u0441\u0430 \u00abGame\u00bb \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u043c\u0438\u0440 \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432-\u043d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a\u043e\u0432 \u043e\u0442 \u043a\u043b\u0430\u0441\u0441\u0430 \u00abGameObject\u00bb \u2014 \u044d\u0442\u043e \u0432\u0441\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u043c\u0438\u0440\u0430. \u041a\u0430\u0436\u0434\u044b\u0439 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u043a\u0430\u0434\u0440 Game \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043e \u0432\u0441\u0435\u043c \u0438\u0433\u0440\u043e\u0432\u044b\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434 step. \u0412 \u043c\u0435\u0442\u043e\u0434\u0435 step \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0447\u0442\u043e \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0437\u0430 \u044d\u0442\u043e\u0442 \u043a\u0430\u0434\u0440 (\u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u0442\u044c\u0441\u044f, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044f, \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0438\u0442\u044c\u0441\u044f \u0438 \u0442\u0434.) \u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u041e\u041e\u041f \u0432 \u0438\u0433\u0440\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442 Class \u0438\u0437 <a href=\"http:\/\/ejohn.org\/blog\/simple-javascript-inheritance\/\">Simple JavaScript Inheritance<\/a> \u043e\u0442 John Resig, \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u0439 \u0434\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432 \u0438 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432.<br \/>  \u041d\u0430\u0432\u0435\u0440\u043d\u043e\u0435 \u043e\u0434\u0438\u043d \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0443\u0434\u0430\u0447\u043d\u044b\u0445 \u043f\u0430\u0442\u0435\u0440\u043d\u043e\u0432 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0432 \u0438\u0433\u0440\u0430\u0445 \u044d\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <a href=\"http:\/\/ru.wikipedia.org\/wiki\/%D0%A4%D0%B0%D0%B1%D1%80%D0%B8%D1%87%D0%BD%D1%8B%D0%B9_%D0%BC%D0%B5%D1%82%D0%BE%D0%B4_(%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD_%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F)#JavaScript\">\u0444\u0430\u0431\u0440\u0438\u0447\u043d\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430<\/a>. \u0421\u0443\u0442\u044c \u0432 \u0442\u043e\u043c \u0447\u0442\u043e \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0447\u0435\u0440\u0435\u0437 \u0432\u044b\u0437\u043e\u0432 new \u0421\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442\u044b, \u0430 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u043c\u0435\u0442\u043e\u0434\u043e\u043c \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430 \u043d\u0430\u0441 \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0435\u0442. \u0424\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u0438\u0437\u0431\u0430\u0432\u0438\u0442 \u043d\u0430\u0441 \u043e\u0442 \u0432\u043e\u0437\u043d\u0438 \u0441 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u043d\u043e\u0432\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0432 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u043c\u0438\u0440.<\/p>\n<p>  \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u043a\u043b\u0430\u0441\u0441\u0430 Block \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u043c\u0438\u0440 \u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0432 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435:  <\/p>\n<pre><code class=\"javascript\">\tgame.create('Block', {x: 100, y: 150}); <\/code><\/pre>\n<p>  \u041a\u043e\u0434 \u043c\u0435\u0442\u043e\u0434\u0430 create:  <\/p>\n<pre><code class=\"javascript\">\t\tcreate: function (objectName, params) {  \t\t\t\/\/ \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0432\u0441\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 Game.classes \t\t\t\/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u044f \u0435\u0433\u043e \u043a\u043b\u0430\u0441\u0441 \u0438\u0437 Game.classes \t\t\tvar object = new Game.classes[objectName](params);  \t\t\t\/\/ \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u043c \u0435\u043c\u0443 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u0434\u0435\u043d\u0442\u0435\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \t\t\tobject.id = ++this.idx;  \t\t\t\/\/ \u0437\u0430\u0434\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u0443 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u043c\u0438\u0440 \t\t\tobject.game = this;  \t\t\t\/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0438\u0439\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0433\u0440\u043e\u0432\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \t\t\tthis.objects[object.id] = object;  \t\t\t\/\/ \u0435\u0441\u043b\u0438 \u043e\u0431\u044a\u0435\u043a\u0442 \u043c\u043e\u0436\u0435\u0442 \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438 \u0442\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \t\t\t\/\/ \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043d\u0435\u0433\u043e \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \t\t\tif (object.isColliding) this.collidingObjects[object.id] = object;  \t\t\t\/\/ \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u0443 \u0447\u0442\u043e \u043e\u043d \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d \u043a \u0438\u0433\u0440\u043e\u0432\u043e\u043c\u0443 \u043c\u0438\u0440\u0443 \t\t\t\/\/ \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u044b\u0437\u043e\u0432\u0430 \u043c\u0435\u0442\u043e\u0434\u0430 birth, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u044c \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \t\t\tobject.birth();  \t\t\t\/\/ \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \t\t\treturn object; \t\t}, <\/code><\/pre>\n<h2>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438\u0433\u0440\u043e\u0432\u044b\u0445 \u043a\u0430\u0440\u0442<\/h2>\n<p>  \u0418\u0442\u0430\u043a \u043a\u043e\u0433\u0434\u0430 \u0438\u0433\u0440\u0430 \u0443\u0436\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u0430 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0435\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0438\u0433\u0440\u043e\u0432\u044b\u043c\u0438 \u043a\u0430\u0440\u0442\u0430\u043c\u0438. \u0421\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0438\u0433\u0440\u043e\u0432\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u043a\u043e\u0434\u043e\u043c (\u0432\u044b\u0437\u044b\u0432\u0430\u044f \u043c\u0435\u0442\u043e\u0434 \u0437\u0430 \u043c\u0435\u0442\u043e\u0434\u043e\u043c) \u043e\u0447\u0435\u043d\u044c \u0443\u0442\u043e\u043c\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438 \u043d\u0435\u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e. \u041f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043a\u0430\u0440\u0442 \u0437\u0430\u0439\u043c\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u041d\u043e \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u2014 \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u043e\u043c \u0438\u043b\u0438 \u0441\u0432\u043e\u0435\u0439 ide \u0434\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">\t!function () {  \tvar WIDTH = 20; \tvar HEIGHT = 12;  \tvar B = 'Block'; \tvar P = 'Bonus';  \tvar MAP = [ \t\t,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  , \t\t, B,  , B,  , B, B, B,  , B,  ,  ,  , B,  ,  ,  , B, B, B, \t\t, B,  , B,  , B,  ,  ,  , B,  ,  ,  , B,  ,  ,  , B,  , B, \t\t, B, B, B,  , B, B, B,  , B,  ,  ,  , B,  ,  ,  , B,  , B, \t\t, B,  , B,  , B,  ,  ,  , B,  ,  ,  , B,  ,  ,  , B,  , B, \t\t, B,  , B,  , B, B, B,  , B, B, B,  , B, B, B,  , B, B, B, \t\t,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  , \t\t, B,  , B,  , B, B, B,  , B, B, B,  , B, B, B,  ,  ,  ,  , \t\t, B,  , B,  , B,  , B,  , B,  , B,  , B,  , B,  ,  ,  ,  , \t\t, B, B, B,  , B, B, B,  , B, B,  ,  , B, B,  ,  ,  ,  ,  , \t\t, B,  , B,  , B,  , B,  , B,  , B,  , B,  , B,  ,  ,  ,  , \t\t, B,  , B,  , B,  , B,  , B, B, B,  , B,  , B,  , P,  ,  , \t];  \tGame.maps['Hello'] = Game.Map.extend({  \t\tbuild: function () {  \t\t\tvar blockSize = 20; \t\t\tfor (var i = 0; i &lt; HEIGHT; i++) { \t\t\t\tfor (var j = 0; j &lt; WIDTH; j++) { \t\t\t\t\tvar index = WIDTH * i + j; \t\t\t\t\tif (MAP[index]) this.game.create(MAP[index], {x: blockSize * j, y: blockSize * i}); \t\t\t\t} \t\t\t} \t\t}  \t}) }(); <\/code><\/pre>\n<p>  \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<p>  <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/9ef\/38e\/62a\/9ef38e62ae33451184a0c5060bc95b41.png\"\/><\/p>\n<h2>\u0421\u0435\u0442\u0435\u0432\u043e\u0439 \u043a\u043e\u0434<\/h2>\n<p>  \u0421\u0435\u0442\u0435\u0432\u043e\u0439 \u043a\u043e\u0434 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0432\u0435\u0431\u0441\u043e\u043a\u0435\u0442\u043e\u0432 \u0441\u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 <a href=\"http:\/\/socket.io\/\">socket.io<\/a>, \u0441\u0435\u0440\u0432\u0435\u0440 \u0438\u0433\u0440\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 nodejs.<br \/>  \u0421\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u043c\u0443 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0441\u0435\u0442\u0435\u0432\u043e\u0439 \u0438\u0433\u0440\u044b \u0434\u0430 \u0438 \u0441 \u0443\u0441\u043b\u043e\u0432\u0438\u0435\u043c \u0447\u0442\u043e \u043d\u0430\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b TCP \u0442\u0430 \u0435\u0449\u0435 \u0437\u0430\u0434\u0430\u0447\u043a\u0430.<br \/>  \u0421\u0435\u0439\u0447\u0430\u0441 \u0434\u043b\u044f \u0442\u0430\u043a\u0438\u0445 \u0438\u0433\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b UDP \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0447\u0435\u0440\u0435\u0437 socket.io, \u043f\u0440\u0430\u0432\u0434\u0430 \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0441\u0438\u043b\u044c\u043d\u043e\u0435 \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 WebRTC. \u0412\u0430\u0436\u043d\u043e \u0447\u0442\u043e\u0431\u044b \u0438\u0433\u0440\u0430 \u0448\u043b\u0430 \u043f\u043b\u0430\u0432\u043d\u043e \u0431\u0435\u0437 \u0440\u044b\u0432\u043a\u043e\u0432 \u0438 \u0431\u044b\u043b\u0430 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430 \u043d\u0430 \u0432\u0441\u0435\u0445 \u043a\u043b\u0438\u0435\u043d\u0442\u0430\u0445. \u0421\u0435\u0440\u0432\u0435\u0440 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0438 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435\u0439 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432, \u0442\u0430\u043a \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u0445\u043e\u0434 \u0438\u0433\u0440\u044b. \u041e\u043d \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c\u0441\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430\u0439 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0438\u0433\u0440\u043e\u0432\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u0438 \u0432\u043e\u0431\u0449\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u043d\u0430\u0442\u044c \u043e\u0431 \u0438\u0433\u0440\u043e\u0432\u043e\u043c \u043c\u0438\u0440\u0435, \u043a\u0440\u043e\u043c\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438\u0433\u0440\u044b \u2014 \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u0435 \u0438\u0433\u0440\u043e\u043a\u043e\u0432\/\u0438\u0434\u0435\u0442 \u0438\u0433\u0440\u0430<\/p>\n<p>  \u0412\u0441\u044e \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u043b\u0435\u043d\u0442\u0443 \u0438\u0433\u0440\u044b \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0431\u0438\u0442\u044c \u043d\u0430 \u043a\u0430\u0434\u0440\u044b. \u041a\u043b\u0438\u0435\u043d\u0442\u044b \u043f\u043e\u0441\u044b\u043b\u0430\u044e\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043e \u0441\u0432\u043e\u0438\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f\u0445 \u0441\u0435\u0440\u0432\u0435\u0440\u0443, \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0430\u043a\u0430\u043f\u043b\u0438\u0432\u0430\u0435\u0442 \u044d\u0442\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0438 \u0447\u0435\u0440\u0435\u0437 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u0430\u0434\u0440\u043e\u0432 \u0440\u0430\u0441\u0441\u044b\u043b\u0430\u0435\u0442 \u043d\u0430\u043a\u043e\u043f\u043b\u0435\u043d\u043d\u043e\u0435 \u043a\u043b\u0438\u0435\u0442\u0430\u043c. \u042d\u0442\u043e \u043a\u0430\u043a \u043d\u0435\u043a\u0430\u044f \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u044f \u043e\u0447\u0435\u043d\u044c \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u043d\u043e\u0439 \u043f\u043e\u0448\u0430\u0433\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0438 \u2014 \u0432\u0441\u0435\u043c \u0438\u0433\u0440\u043e\u043a\u0430\u043c \u0434\u0430\u043d\u043e \u0432\u0441\u0435\u0433\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u0430\u0434\u0440\u043e\u0432 \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0445\u043e\u0434 (\u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u0443). \u041f\u043e \u0438\u0441\u0442\u0435\u0447\u0435\u043d\u0438\u0438 \u044d\u0442\u0438\u0445 \u043a\u0430\u0434\u0440\u043e\u0432 \u0441\u0435\u0440\u0432\u0435\u0440 \u0440\u0430\u0441\u0441\u044b\u043b\u0430\u0435\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0430\u043c \u0432\u0441\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0437\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u0445\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0443\u0442-\u0436\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f. \u0412 \u044d\u0442\u043e \u0436\u0435 \u0432\u0440\u0435\u043c\u044f \u0438\u0433\u0440\u043e\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u0445\u043e\u0434.<\/p>\n<p>  <a href=\"http:\/\/habrastorage.org\/files\/9cb\/d5c\/76d\/9cbd5c76d6b74ab3be613f65ca7ddbca.png\"><img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/f33\/c70\/58b\/f33c7058be774027a491e1b8332fab69.gif\"\/><\/a><\/p>\n<p>  \u042d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u0445\u043e\u0440\u043e\u0448 \u0442\u0435\u043c \u0447\u0442\u043e \u043e\u043d \u043f\u0440\u043e\u0441\u0442 \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u0437\u043d\u0430\u044e\u0442 \u0432 \u043a\u0430\u043a\u043e\u0439 \u043f\u043e \u0441\u0447\u0435\u0442\u0443 \u043a\u0430\u0434\u0440 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0442\u0441\u044f \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u043c\u043e\u0433\u0443\u0442 \u0441\u043f\u043e\u043a\u043e\u0439\u043d\u043e \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0442\u044c \u0438\u0433\u0440\u0443 \u0434\u043e \u043d\u0430\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u043a\u0430\u0434\u0440\u0430. \u0421\u0435\u0440\u0432\u0435\u0440 \u0436\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u0438\u0441\u043b\u0430\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432 \u0437\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0434\u043e \u043d\u0430\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u043a\u0430\u0434\u0440\u0430, \u0447\u0442\u043e\u0431\u044b \u043a\u043b\u0438\u0435\u043d\u0442\u044b \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u0430\u0438\u0432\u0430\u043b\u0438. \u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u043a \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u2014 \u043d\u0435 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u044b\u0441\u0442\u0440\u0430\u044f \u0440\u0435\u0430\u043a\u0446\u0438\u044f \u043d\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0438\u0433\u0440\u043e\u043a\u043e\u0432, \u0438 \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0448\u0443\u0442\u0435\u0440 \u0431\u044b\u043b\u043e \u0431\u044b \u0438\u0433\u0440\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u043e\u0432\u0430\u0442\u043e.<\/p>\n<p>  \u041c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c\u0441\u044f \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u043c \u2014 \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432, \u0442\u043e \u043a\u0430\u043a \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u043d\u0430 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0441\u0442\u0438? \u0412\u0435\u0434\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0431\u043e\u043d\u0443\u0441\u044b \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0445 \u043c\u0435\u0441\u0442\u0430\u0445, \u043d\u043e \u0443 \u0432\u0441\u0435\u0445 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432 \u044d\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043e\u0434\u043d\u0438 \u0438 \u0442\u0435\u0436\u0435 \u043c\u0435\u0441\u0442\u0430. \u0416\u0443\u043a\u0438 \u0431\u0435\u0433\u0430\u044e\u0442 \u0432\u0435\u0441\u044c\u043c\u0430 \u0445\u0430\u043e\u0442\u0438\u0447\u043d\u043e, \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043c\u0435\u043d\u044f\u044f \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0435\u0433\u043e \u0431\u0435\u0433\u0430, \u0438 \u043f\u0440\u0438\u044d\u0442\u043e\u043c \u0432\u0435\u0441\u044c \u044d\u0442\u043e\u0442 \u00ab\u0445\u0430\u043e\u0441\u00bb \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c \u0438 \u0438\u0434\u0442\u0438 \u043f\u043e \u043e\u0434\u043d\u043e\u043c\u0443 \u0438 \u0442\u043e\u043c\u0443 \u0436\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044e \u0443 \u0432\u0441\u0435\u0445. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u043c\u0443 \u0441 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0448\u0438\u0442\u044c \u0442\u0435\u043c, \u0447\u0442\u043e\u0431\u044b \u0432\u0435\u0437\u0434\u0435 \u0433\u0434\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0435 \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u044b, \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e Math.random, \u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u043f\u0441\u0435\u0432\u0434\u043e\u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0445 \u0447\u0438\u0441\u0435\u043b (\u0413\u041f\u0421\u0427). \u0421\u0443\u0442\u044c \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u2014 \u043f\u0435\u0440\u0435\u0434 \u0437\u0430\u043f\u0443\u0441\u043a\u043e\u043c \u0438\u0433\u0440\u044b \u0441\u0435\u0440\u0432\u0435\u0440 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 \u0435\u0433\u043e \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0438\u0432\u0448\u0435\u043c\u0443\u0441\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0443. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0433\u043e \u0447\u0438\u0441\u043b\u0430 \u043a\u043b\u0438\u043d\u0435\u0442 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0413\u041f\u0421\u0427 \u043a\u043e\u0442\u0440\u044b\u0439 \u043d\u0430 \u0432\u0441\u0435\u0445 \u043a\u043b\u0438\u0435\u043d\u0442\u0430\u0445 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u0443\u044e \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0441\u0435\u0432\u0434\u043e\u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0445 \u0447\u0438\u0441\u0435\u043b. \u041f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u0413\u041f\u0421\u0427 \u2014 <a href=\"http:\/\/algolist.manual.ru\/maths\/generator\/park_mil.php\">\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u043f\u0430\u0440\u043a\u0430-\u043c\u0438\u043b\u043b\u0435\u0440\u0430<\/a><br \/>  \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0430 js:<\/p>\n<pre><code class=\"javascript\">\tvar ParkMillerGenerator = function (initializer) { \t\tthis.a = 16807; \t\tthis.m = 2147483647; \t\tthis.val = initializer || Math.round(2147483647 \/ 3); \t}  \tParkMillerGenerator.prototype = { \t\tnext: function () { \t\t\tthis.val = (this.a * this.val) % this.m; \t\t\treturn (this.val \/ 1000000) % 1; \t\t} \t} <\/code><\/pre>\n<p>  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435:  <\/p>\n<pre><code class=\"javascript\">\tvar initializer = 333; \/\/ \u0437\u0430\u0434\u0430\u0435\u0435\u043c \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u044e\u0449\u0435\u0435 \u0447\u0438\u0441\u043b\u043e, \u0443 \u0432\u0441\u0435\u0445 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432 \u043e\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0435 \tvar gen = new ParkMillerGenerator(initializer); \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0413\u041f\u0421\u0427 \tgen.next(); \/\/ 0.5967310000000001 \tgen.next(); \/\/ 0.46109599999999773 \tgen.next(); \/\/ 0.07891199999994569; <\/code><\/pre>\n<h2>\u0414\u0435\u043b\u0430\u0435\u043c \u0441\u0435\u0440\u0432\u0438\u0441 \u0438\u0437 nodejs \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h2>\n<p>  \u041c\u043e\u0436\u0435\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043d\u0435 \u0432\u0442\u0435\u043c\u0443 \u043d\u043e \u0442\u043e\u0436\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u0430\u044f \u0437\u0430\u043c\u0435\u0442\u043a\u0430. \u041a\u043e\u0433\u0434\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0430\u043f\u0438\u0441\u0430\u043d, \u043d\u0435\u043f\u043b\u043e\u0445\u043e \u0431\u044b \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0435\u0433\u043e \u043d\u0430 \u0431\u043e\u0435\u0432\u043e\u0439 \u043c\u0430\u0448\u0438\u043d\u0435 \u0432 \u0432\u0438\u0434\u0435 \u0441\u043b\u0443\u0436\u0431\u044b \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b. \u041e\u043f\u0438\u0448\u0443 \u043a\u0430\u043a \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 Ubuntu.<br \/>  \u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 \/etc\/init.d \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0442\u0430\u043c \u0448\u0435\u043b\u043b-\u0441\u043a\u0440\u0438\u043f\u0442 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u043d\u0430\u0448\u0435\u0439 \u0441\u043b\u0443\u0436\u0431\u044b, \u0443 \u043c\u0435\u043d\u044f \u0431\u0443\u0434\u0435\u0442 bugsarena. \u041e\u0431\u0440\u0430\u0449\u0443 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0447\u0442\u043e \u0431\u043b\u043e\u043a \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u0441 \u00abBEGIN INIT INFO\u00bb \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u043e\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439, \u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043d\u0430\u0448\u0435\u0439 \u0441\u043b\u0443\u0436\u0431\u044b \u0438 \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u0435\u0433\u043e \u043d\u0435 \u0441\u0442\u043e\u0438\u0442. <\/p>\n<pre><code class=\"bash\">#!\/bin\/sh  ### BEGIN INIT INFO # Provides:          bugsarena # Required-Start:    $local_fs $remote_fs $network $syslog # Required-Stop:     $local_fs $remote_fs $network $syslog # Default-Start:     2 3 4 5 # Default-Stop:      0 1 6 # Short-Description: starts the bugsarena servers # Description:       starts the bugsarena servers ### END INIT INFO  # \u0437\u0430\u0434\u0430\u0435\u043c \u043f\u0443\u0442\u0438 \u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043a \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u043c \u0444\u0430\u0439\u043b\u0430\u043c (\u043d\u0443\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u0432\u043e\u0438) NODE=\/usr\/bin\/node DAEMON_SERVER=\/home\/me\/projects\/bugs-arena\/server\/server.js SERVER_PARAMS=&quot;name=Arena-Dogfight map=Dogfight port=8090&quot;  NAME=bugsarena DESC=&quot;bugsarena servers&quot;  # \u0441\u0435\u0440\u0432\u0438\u0441 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c 3 \u043a\u043e\u043c\u0430\u043d\u0434\u044b - start, stop \u0438 restart. # \u043e\u043f\u0438\u0448\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u044d\u0442\u0438\u0445 \u043a\u043e\u043c\u043c\u0430\u043d\u0434  start() { \t# \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c nodejs \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0434\u0435\u043c\u043e\u043d\u0430 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0435\u0433\u043e pid \u0432 \u0444\u0430\u0439\u043b \tstart-stop-daemon --start --make-pidfile --background --pidfile \/var\/run\/$NAME-server.pid \\                 --exec $NODE -- $DAEMON_SERVER $SERVER_PARAMS  }  stop() { \t# \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c nodejs \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \techo -n &quot;Stopping $DESC: &quot;     start-stop-daemon --stop --quiet --pidfile \/var\/run\/$NAME-server.pid }  case &quot;$1&quot; in \tstart) \t\tstart \t\t;; \tstop) \t\tstop \t\t;; \trestart) \t\tstop \t\tsleep 1 \t\tstart \t\t;; \t*) \t\techo &quot;Usage: $NAME {start|stop|restart}&quot; &gt;&2 \t\texit 1 \t\t;; esac  exit 0 <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u043c\u0438 <\/p>\n<blockquote><p>service bugsarena start<\/p><\/blockquote>\n<p> \u0438 <\/p>\n<blockquote><p>service bugsarena stop<\/p><\/blockquote>\n<p> \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0438 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0441\u043b\u0443\u0436\u0431\u044b.<br \/>  \u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0442\u043e\u0431\u044b \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u0430\u043b \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0432   <\/p>\n<blockquote><p>update-rc.d bugsarena defaults<\/p><\/blockquote>\n<h2>\u041d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u043e XSS!<\/h2>\n<p>  \u041d\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u043a \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043d\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c \u043e\u0431 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0430\u0442\u0430\u043a\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0445 \u0438\u0433\u0440. \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0438\u0433\u0440\u043e\u043a\u043e\u0432 \u0432 \u043a\u0430\u043a\u043e\u043c-\u043d\u0438\u0431\u0443\u0434\u044c div&#8217;e. \u0418 \u043a \u043d\u0430\u043c \u0432 \u0438\u0433\u0440\u0443 \u0437\u0430\u0445\u043e\u0434\u0438\u0442 \u0438\u0433\u0440\u043e\u043a \u0441 \u0438\u043c\u0435\u043d\u0435\u043c &quot;&lt;script&gt;alert(&#8216;\u0412 \u0438\u0433\u0440\u0443 \u0437\u0430\u0445\u043e\u0434\u0438\u0442 \u0412\u0430\u0441\u044f!&#8217;)&lt;\/script&gt;&quot;. \u0415\u0433\u043e \u0438\u043c\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 div \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0438\u0433\u0440\u043e\u043a\u043e\u0432, \u0438 \u0432\u0441\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u043d\u0430\u0437\u043e\u0439\u043b\u0438\u0432\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 alert&#8217;\u043e\u043c. \u0418 \u044d\u0442\u043e \u0435\u0449\u0435 \u0446\u0432\u0435\u0442\u043e\u0447\u043a\u0438. \u0427\u0435\u0440\u0435\u0437 XSS \u0443\u044f\u0437\u0432\u0438\u043c\u043e\u0441\u0442\u044c \u043c\u043e\u0436\u043d\u043e \u0441\u043f\u043e\u043a\u043e\u0439\u043d\u043e \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u0441\u043a\u0440\u0438\u043f\u0442 \u0441 \u043b\u044e\u0431\u043e\u0433\u043e \u0441\u0430\u0439\u0442\u0430. \u0422\u0430\u043a \u0447\u0442\u043e \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u043e\u0431 \u044d\u043a\u0440\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0445 \u0441 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432 \u0434\u0430\u043d\u043d\u044b\u0445. \t\t\t<\/p>\n<div class=\"clear\"><\/div>\n<\/p><\/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=\"http:\/\/habrahabr.ru\/post\/225669\/\"> http:\/\/habrahabr.ru\/post\/225669\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"content html_format\"> \t\t\t\u041a\u0430\u043a-\u0442\u043e \u043f\u043e\u0438\u0433\u0440\u0430\u0432 \u0432 \u043e\u0444\u0444\u0438\u0441\u0435, \u0432 <a href=\"http:\/\/hexbug.ru\/nano\/\">hexbug<\/a>, \u0437\u0430\u0440\u043e\u0434\u0438\u043b\u0430\u0441\u044c \u0438\u0434\u0435\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0438\u0433\u0440\u0443\u0448\u043a\u0443 \u043f\u043e \u0441\u0445\u043e\u0436\u0438\u043c \u043c\u043e\u0442\u0438\u0432\u0430\u043c.<br \/>  \u041f\u043e \u0442\u0435\u043a\u0443\u0449\u0435\u043c\u0443 \u0440\u043e\u0434\u0443 \u0434\u0435\u044f\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u044f \u0432\u0435\u0431 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0438 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0437\u0430\u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0447\u0442\u043e\u0431\u044b \u0432 \u0438\u0433\u0440\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e HTML, JavaScript \u0438 CSS \u2014 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430 \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u0435 \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0432\u0435\u0431\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443. \u041d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0432\u0430\u043c flash \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 canvas. \u0417\u0432\u0443\u0447\u0438\u0442 \u0445\u0430\u0440\u0434\u043a\u043e\u0440\u043d\u043e, \u043d\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 HTML + CSS3 \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043c\u043e\u0449\u043d\u044b\u0435 \u0438 \u0433\u0438\u0431\u043a\u0438\u0435 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u0430 \u043f\u0438\u0441\u0430\u0442\u044c \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u043a\u043e\u0434 \u043d\u0430 JavaScript \u2014 \u043e\u0434\u043d\u043e \u0443\u0434\u043e\u0432\u043e\u043b\u044c\u0441\u0442\u0432\u0438\u0435. \u0412\u0434\u043e\u0431\u0430\u0432\u043e\u043a \u0437\u0430\u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0447\u0442\u043e\u0431\u044b \u0438\u0433\u0440\u0430 \u0431\u044b\u043b\u0430 \u0441 \u0441\u0435\u0442\u0435\u0432\u044b\u043c \u043c\u0443\u043b\u044c\u0442\u0438\u043f\u043b\u0435\u0435\u0440\u043e\u043c, \u043f\u0440\u0438\u0442\u043e\u043c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u2014 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0442\u0430\u043c \u0448\u0430\u0448\u0435\u043a, \u043a\u0430\u0440\u0442\u043e\u0447\u043d\u044b\u0445 \u0438\u0433\u0440, \u043f\u043e\u0448\u0430\u0433\u043e\u0432\u044b\u0445 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0439, \u0432\u0441\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 \u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0438.<\/p>\n<p>  \u0412\u043e\u0442 \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0432 \u0438\u0442\u043e\u0433\u0435:<\/p>\n<p>  <iframe loading=\"lazy\" width=\"560\" height=\"349\" src=\"\/\/www.youtube.com\/embed\/AHYeoVX5d9c?wmode=opaque\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>  \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043e\u0441\u0442\u0430\u0432\u043b\u044e \u043d\u0430\u0431\u043e\u0440 \u0437\u0430\u043c\u0435\u0442\u043e\u043a \u0432\u043e\u0437\u043d\u0438\u043a\u0448\u0438\u0445 \u043f\u0440\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0430 \u0438\u0433\u0440\u0443\u0448\u043a\u0438, \u043d\u0430\u0446\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0430 \u043f\u043e\u0434\u0445\u043e\u0434 \u00ab\u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u043f\u0440\u043e\u0449\u0435 \u0438 \u043f\u043e\u0431\u044b\u0441\u0442\u0440\u0435\u0435\u00bb. \u0414\u0443\u043c\u0430\u044e \u0441\u0442\u0430\u0442\u044c\u044f \u043c\u043e\u0436\u0435\u0442 \u0441\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u043d\u0435\u043a\u043e\u0435 \u043f\u043e\u0434\u0441\u043f\u043e\u0440\u044c\u0435 \u0434\u043b\u044f \u043d\u043e\u0432\u0438\u0447\u043a\u043e\u0432 \u0432 \u044d\u0442\u043e\u043c \u0443\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u043c \u0434\u0435\u043b\u0435.<\/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-225669","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/225669","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=225669"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/225669\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=225669"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=225669"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=225669"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}