{"id":358164,"date":"2024-05-21T00:05:53","date_gmt":"2024-05-21T00:05:53","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=358164"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2024-05-21T00:05:53","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=358164","title":{"rendered":"<span>\u041f\u0438\u0448\u0435\u043c 2D \u0438\u0433\u0440\u0443 \u043d\u0430 JavaScript \u0438 Canvas. \u0427\u0430\u0441\u0442\u044c 2. \u0413\u0440\u0430\u0444\u0438\u043a\u0430<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041f\u0440\u0438\u0432\u0435\u0442 \u0432\u0441\u0435\u043c!<\/p>\n<p>\u0412 <a href=\"https:\/\/habr.com\/ru\/articles\/762132\/\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435<\/a> \u043c\u044b \u043d\u0430\u0447\u0430\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u0443\u044e 2D \u0438\u0433\u0440\u0443 \u043d\u0430 \u044f\u0437\u044b\u043a\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f JavaScript \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 Canvas. \u0411\u044b\u043b \u0441\u043e\u0437\u0434\u0430\u043d \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f \u0438\u0433\u0440\u044b, \u0433\u0434\u0435 \u0432\u043c\u0435\u0441\u0442\u043e \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u0433\u0435\u0440\u043e\u044f \u0443 \u043d\u0430\u0441 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u043d\u044b\u0439 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a, \u0441\u0442\u0440\u0435\u043b\u044f\u044e\u0449\u0438\u0439 \u0436\u0435\u043b\u0442\u044b\u043c\u0438 &#171;\u043f\u0443\u043b\u044f\u043c\u0438&#187;, \u0430 \u0432\u0440\u0430\u0433\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0438\u0437 \u0441\u0435\u0431\u044f \u0434\u0432\u0438\u0436\u0443\u0449\u0438\u0435\u0441\u044f \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438 \u043a\u0440\u0430\u0441\u043d\u043e\u0433\u043e \u0438 \u0437\u0435\u043b\u0435\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430. \u0414\u043b\u044f \u043f\u043e\u0431\u0435\u0434\u044b \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u0433\u0435\u0440\u043e\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0438\u0442\u044c n-\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u0438\u043a\u043e\u0432 \u0437\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f. \u0412\u043e\u0442 \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u043e:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1da\/dd7\/8be\/1dadd78be471b6194b60cd3c81662dd3.gif\" alt=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 1. \u041f\u0440\u043e\u0442\u043e\u0442\u0438\u043f \u0438\u0433\u0440\u044b\" title=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 1. \u041f\u0440\u043e\u0442\u043e\u0442\u0438\u043f \u0438\u0433\u0440\u044b\" width=\"800\" height=\"271\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1da\/dd7\/8be\/1dadd78be471b6194b60cd3c81662dd3.gif\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 1. \u041f\u0440\u043e\u0442\u043e\u0442\u0438\u043f \u0438\u0433\u0440\u044b<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u043c \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0443 \u0438\u0433\u0440\u0443.<\/p>\n<p>\u0412 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \u043a \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0431\u044b\u043b\u0438 \u0434\u0430\u043d\u044b \u0446\u0435\u043d\u043d\u044b\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044e \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0430. \u041e \u043d\u0438\u0445 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u0432 \u043a\u043e\u043d\u0446\u0435 \u0441\u0442\u0430\u0442\u044c\u0438.<\/p>\n<p>\u041f\u043e\u0438\u0433\u0440\u0430\u0442\u044c \u0432 \u043f\u043e\u043b\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/greendev7.github.io\/JavaScript-Game.-Full-Version\/\" rel=\"noopener noreferrer nofollow\">\u0442\u0443\u0442<\/a>. \u041f\u0440\u043e\u0435\u043a\u0442 \u043b\u0435\u0436\u0438\u0442 <a href=\"https:\/\/github.com\/greenDev7\/JavaScript-Game.-Full-Version\" rel=\"noopener noreferrer nofollow\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<h2>\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/h2>\n<ul>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/articles\/769150\/#background\" rel=\"noopener noreferrer nofollow\">\u0411\u044d\u043a\u0433\u0440\u0430\u0443\u043d\u0434<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/articles\/769150\/#sprites\" rel=\"noopener noreferrer nofollow\">\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0435\u0439. \u0421\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442\u044b<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/articles\/769150\/#enemy_animation\" rel=\"noopener noreferrer nofollow\">\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0432\u0440\u0430\u0433\u043e\u0432<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/articles\/769150\/#lucky_fish_and_power_up_mode\" rel=\"noopener noreferrer nofollow\">\u0420\u044b\u0431\u043a\u0430-\u0443\u0434\u0430\u0447\u0430 \u0438 Power-up \u0440\u0435\u0436\u0438\u043c<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/articles\/769150\/#projectiles_and_font\" rel=\"noopener noreferrer nofollow\">\u041f\u0443\u043b\u0438 \u0438 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/articles\/769150\/#particles_rotation_and_gravitation\" rel=\"noopener noreferrer nofollow\">\u041e\u0442\u043b\u0435\u0442\u0430\u044e\u0449\u0438\u0435 \u0448\u0435\u0441\u0442\u0435\u0440\u0435\u043d\u043a\u0438. \u0412\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u0438 \u0433\u0440\u0430\u0432\u0438\u0442\u0430\u0446\u0438\u044f<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/articles\/769150\/#hive_whale_drones_and_explosions\" rel=\"noopener noreferrer nofollow\">Hive Whale \u043a\u043b\u0430\u0441\u0441, \u0434\u0440\u043e\u043d\u044b \u0438 \u0432\u0437\u0440\u044b\u0432\u044b<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/articles\/769150\/#adapt_to_mobile_devices\" rel=\"noopener noreferrer nofollow\">\u0410\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/articles\/769150\/#conclusion\" rel=\"noopener noreferrer nofollow\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/a><\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"background\" id=\"background\"><\/a><\/p>\n<h2>\u0411\u044d\u043a\u0433\u0440\u0430\u0443\u043d\u0434<\/h2>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 index.html \u0443\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 .png-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0432 \u043d\u0430\u0448\u0435\u0439 \u0438\u0433\u0440\u0435. \u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u043e\u043d\u0438 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u044b \u043d\u0430 \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0435 \u0431\u043b\u043e\u043a\u0438 (\u043e\u0442\u0434\u0435\u043b\u0435\u043d\u044b \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u043c\u0438).  \u0412 \u0431\u043b\u043e\u043a\u0435 &#171;Environment&#187; \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u0444\u043e\u043d\u0430:<\/p>\n<details class=\"spoiler\">\n<summary>\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0432 index.html<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/564\/c88\/f6e\/564c88f6ee62a23b35bb5b08546c77bf.png\" alt=\"\u041a\u043e\u0434 1. \u0412 \u0431\u043b\u043e\u043a\u0435 Environment \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u0431\u044d\u043a\u0433\u0440\u0430\u0443\u043d\u0434\u0430\" title=\"\u041a\u043e\u0434 1. \u0412 \u0431\u043b\u043e\u043a\u0435 Environment \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u0431\u044d\u043a\u0433\u0440\u0430\u0443\u043d\u0434\u0430\" width=\"877\" height=\"614\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/564\/c88\/f6e\/564c88f6ee62a23b35bb5b08546c77bf.png\"\/><\/p>\n<div><figcaption>\u041a\u043e\u0434 1. \u0412 \u0431\u043b\u043e\u043a\u0435 Environment \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u0431\u044d\u043a\u0433\u0440\u0430\u0443\u043d\u0434\u0430<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 style.css \u0432\u0441\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0443\u0436\u043d\u043e &#171;\u0441\u043a\u0440\u044b\u0442\u044c&#187;, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b\u0438\u0441\u044c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0431\u044d\u043a\u0433\u0440\u0430\u0443\u043d\u0434\u0430 \u043e\u043a\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0441\u043c. \u043a\u043e\u0434 2.<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 style.css<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0d6\/3bf\/dfb\/0d63bfdfbf86b9211347f7014528d3b5.png\" alt=\"\u041a\u043e\u0434 2. \u0421\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.\" title=\"\u041a\u043e\u0434 2. \u0421\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.\" width=\"435\" height=\"885\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0d6\/3bf\/dfb\/0d63bfdfbf86b9211347f7014528d3b5.png\"\/><\/p>\n<div><figcaption>\u041a\u043e\u0434 2. \u0421\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u043d\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u0432\u0441\u0435\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/display#none\" rel=\"noopener noreferrer nofollow\">display \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c none<\/a> \u2014 \u043c\u043e\u0436\u043d\u043e \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u043a\u0430\u043a\u043e\u0435-\u043b\u0438\u0431\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 (\u0442\u043e\u0447\u043d\u0435\u0435 \u0435\u0433\u043e id) \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430, \u0430 \u043b\u0443\u0447\u0448\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e, \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0447\u0442\u043e \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0432\u044b\u0439\u0434\u0435\u0442.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0443\u0436\u0435 \u043d\u0430\u043a\u043e\u043d\u0435\u0446 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0444\u043e\u043d. <\/p>\n<p>\u0412 \u0444\u0430\u0439\u043b Layer.js \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">class Layer {     constructor(game, image, speedModifier) {         this.game = game;         this.image = image;         this.speedModifier = speedModifier;         this.width = 1768;         this.height = 500;         this.x = 0;         this.y = 0;     }     update() {         if (this.x &lt;= -this.width) this.x = 0;         else this.x -= this.game.speed * this.speedModifier;     }     draw(context) {         context.drawImage(this.image, this.x, this.y);         context.drawImage(this.image, this.x + this.width, this.y);     } }<\/code><\/pre>\n<p>\u041a\u0430\u043a \u0432\u044b \u0443\u0436\u0435 \u0434\u043e\u0433\u0430\u0434\u0430\u043b\u0438\u0441\u044c, \u043a\u043b\u0430\u0441\u0441 Layer \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u0437\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u0441\u043b\u043e\u0439 \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u0444\u043e\u043d\u0430 \u0438 \u0442\u0430\u043a\u0438\u0445 \u0441\u043b\u043e\u0435\u0432 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e (\u043f\u043e \u0447\u0438\u0441\u043b\u0443 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a). \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>game<\/code> \u2014 \u044d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442 \u043d\u0430\u0448\u0435\u0439 \u0438\u0433\u0440\u044b; <code>image<\/code> \u2014 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u0434\u043b\u044f \u0444\u043e\u043d\u0430; <code>speedModifier<\/code> \u2014 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f, \u2014 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0435\u0432 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0441\u0430\u043c\u043e\u0439 \u0438\u0433\u0440\u044b, \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0437\u0430\u0434\u043d\u0438\u0439 \u0444\u043e\u043d \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 &#171;\u0434\u0432\u0438\u0433\u0430\u0442\u044c&#187; \u0431\u044b\u0441\u0442\u0440\u0435\u0435\/\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0435\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0438\u0433\u0440\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0441\u043b\u043e\u044e \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u2014 \u044d\u0442\u043e \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0438 \u0435\u0435 &#171;\u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b&#187; \u043d\u0430 \u0438\u0433\u0440\u043e\u0432\u043e\u043c \u043f\u043e\u043b\u0435.<\/p>\n<p>\u041c\u0435\u0442\u043e\u0434 update() \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0441\u043b\u043e\u044f \u0441\u043f\u0440\u0430\u0432\u0430 \u043d\u0430\u043b\u0435\u0432\u043e. \u0410 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0432\u0442\u043e\u0440\u043e\u0439 \u0441\u0442\u0440\u043e\u0447\u043a\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 draw() \u2014 \u043c\u044b \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u0440\u0430\u0437\u0443 \u0440\u0438\u0441\u0443\u0435\u043c \u0432\u0442\u043e\u0440\u043e\u0435, \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u0441\u0435\u0447\u0435\u043d\u0438\u044f \u043b\u0435\u0432\u043e\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u2014 \u0442\u0430 \u0436\u0435 \u0441\u0430\u043c\u0430\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0438\u0437 \u043f\u0440\u0430\u0432\u043e\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u044b, \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u044d\u0444\u0444\u0435\u043a\u0442 &#171;\u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e (\u043d\u0435\u043f\u0440\u0435\u0440\u044b\u0432\u043d\u043e\u0433\u043e) \u0441\u043b\u043e\u044f&#187;.<\/p>\n<p>\u0415\u0449\u0435 \u043e\u0434\u0438\u043d \u043c\u043e\u043c\u0435\u043d\u0442. \u0410\u0432\u0442\u043e\u0440 \u0432\u0438\u0434\u0435\u043e \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u043c &#171;\u043f\u0440\u0435\u0440\u044b\u0432\u0430\u043d\u0438\u0438&#187; (\u0432 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0438\u0434\u0435\u043e <em>stutter<\/em> \u2014 \u0437\u0430\u0438\u043a\u0430\u043d\u0438\u0435\/\u0437\u0430\u043f\u0438\u043d\u0430\u043d\u0438\u0435, \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0432\u0438\u0434\u0435\u043e 1:11:00) \u043f\u0440\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0438 \u0441\u043b\u043e\u0435\u0432. \u0418 \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0435\u0440\u044b\u0432\u0430\u043d\u0438\u044f  \u2014 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0441\u043b\u043e\u0432\u043e <code>else<\/code> \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 update(), \u0447\u0435\u043c\u0443 \u043c\u044b \u0442\u043e\u0436\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u0435\u043c.<\/p>\n<p>\u041f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044e \u0441\u0430\u043c\u043e\u043c\u0443 \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0441\u043b\u043e\u0435\u0432, \u0447\u0442\u043e\u0431\u044b \u0441\u0430\u043c\u043e\u043c\u0443 \u043f\u043e\u043d\u044f\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u0438 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0440\u043e\u0447\u043a\u0438 \u043a\u043e\u0434\u0430.<\/p>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 Background.js \u0431\u0443\u0434\u0435\u0442 \u043e\u0434\u043d\u043e\u0438\u043c\u0435\u043d\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c:<\/p>\n<pre><code class=\"javascript\">class Background {     constructor(game) {         this.game = game;         this.image1 = document.getElementById('layer1');         this.layer1 = new Layer(this.game, this.image1, 3.2);         this.layers = [this.layer1];     }     update() {         this.layers.forEach(layer => layer.update());     }     draw(context) {         this.layers.forEach(layer => layer.draw(context));     } }<\/code><\/pre>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043f\u043e\u043c\u0438\u043c\u043e game, \u0443 \u043d\u0435\u0433\u043e \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 (<code>image1<\/code>), \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u0430\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document\/getElementById\" rel=\"noopener noreferrer nofollow\">getElementById<\/a>; \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>layer1<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043a\u043b\u0430\u0441\u0441\u0430 Layer, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043c\u0430\u0441\u0441\u0438\u0432 layers \u0445\u0440\u0430\u043d\u044f\u0449\u0438\u0439 \u0432 \u0441\u0435\u0431\u0435 \u0432\u0441\u0435 \u0441\u043b\u043e\u0438. \u0412 \u043c\u0435\u0442\u043e\u0434\u0430\u0445 update() \u0438 draw() \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u0430 Layer \u043d\u0430 \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 <code>layers<\/code>. <\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u0432\u0441\u0435 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e, \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 Game \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043a\u043b\u0430\u0441\u0441\u0430 Background:<\/p>\n<pre><code class=\"javascript\">this.background = new Background(this);<\/code><\/pre>\n<p>\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0440\u0430\u0432\u043d\u044b\u0439 \u0435\u0434\u0438\u043d\u0438\u0446\u0435):<\/p>\n<pre><code class=\"javascript\">this.speed = 1;<\/code><\/pre>\n<p>\u0412 \u043c\u0435\u0442\u043e\u0434 update() \u043a\u043b\u0430\u0441\u0441\u0430 Game \u043f\u0440\u043e\u043f\u0438\u0448\u0435\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0431\u044d\u043a\u0433\u0440\u0430\u0443\u043d\u0434\u0430:<\/p>\n<pre><code class=\"javascript\">this.background.update();<\/code><\/pre>\n<p>\u0430 \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 draw() \u0435\u0433\u043e \u043d\u0430\u0440\u0438\u0441\u0443\u0435\u043c (\u043f\u0440\u0438\u0447\u0435\u043c \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u0444\u043e\u043d\u0430 \u043f\u0435\u0440\u0435\u0434 \u0432\u0441\u0435\u043c\u0438 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u0444\u043e\u043d \u0431\u044b\u043b \u043f\u043e\u0437\u0430\u0434\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432):<\/p>\n<pre><code class=\"javascript\">this.background.draw(context);<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432\u043e\u0442 \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e7c\/25a\/33c\/e7c25a33c1bd03f065bd4a83a553739b.gif\" alt=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 2. \u0418\u0433\u0440\u043e\u0432\u043e\u0439 \u0444\u043e\u043d (1 \u0441\u043b\u043e\u0439).\" title=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 2. \u0418\u0433\u0440\u043e\u0432\u043e\u0439 \u0444\u043e\u043d (1 \u0441\u043b\u043e\u0439).\" width=\"800\" height=\"272\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e7c\/25a\/33c\/e7c25a33c1bd03f065bd4a83a553739b.gif\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 2. \u0418\u0433\u0440\u043e\u0432\u043e\u0439 \u0444\u043e\u043d (1 \u0441\u043b\u043e\u0439).<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0449\u0435 \u0441\u043b\u043e\u0435\u0432, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0442\u0440\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f61\/abf\/b80\/f61abfb80ddc3d0a2c28ec0c84a9b056.gif\" alt=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 3. \u041c\u043d\u043e\u0433\u043e\u0441\u043b\u043e\u0439\u043d\u044b\u0439 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0444\u043e\u043d (4 \u0441\u043b\u043e\u044f). \u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 speedModifier \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043b\u043e\u044f \u0438\u043c\u0435\u0435\u0442 \u0441\u0432\u043e\u0435 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435.\" title=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 3. \u041c\u043d\u043e\u0433\u043e\u0441\u043b\u043e\u0439\u043d\u044b\u0439 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0444\u043e\u043d (4 \u0441\u043b\u043e\u044f). \u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 speedModifier \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043b\u043e\u044f \u0438\u043c\u0435\u0435\u0442 \u0441\u0432\u043e\u0435 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435.\" width=\"800\" height=\"274\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f61\/abf\/b80\/f61abfb80ddc3d0a2c28ec0c84a9b056.gif\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 3. \u041c\u043d\u043e\u0433\u043e\u0441\u043b\u043e\u0439\u043d\u044b\u0439 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0444\u043e\u043d (4 \u0441\u043b\u043e\u044f). \u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 <code>speedModifier<\/code> \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043b\u043e\u044f \u0438\u043c\u0435\u0435\u0442 \u0441\u0432\u043e\u0435 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435.<\/figcaption><\/div>\n<\/figure>\n<p>\u041d\u043e \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043a\u0430. \u0413\u043b\u0430\u0432\u043d\u044b\u0439 \u0438\u0433\u0440\u043e\u043a \u0438 \u0432\u0440\u0430\u0433\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f \u0432\u043f\u0435\u0440\u0435\u0434\u0438 \u0432\u0441\u0435\u0445 \u0441\u043b\u043e\u0435\u0432:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/813\/e98\/bbe\/813e98bbea38556f3d3752cf9ab5589f.png\" alt=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 4. \u041d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u043b\u043e\u0435\u0432. \u0412\u0441\u0435 \u043e\u043d\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0437\u0430\u0434\u0438 \u0438\u0433\u0440\u043e\u043a\u0430 \u0438 \u0432\u0440\u0430\u0433\u043e\u0432.\" title=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 4. \u041d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u043b\u043e\u0435\u0432. \u0412\u0441\u0435 \u043e\u043d\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0437\u0430\u0434\u0438 \u0438\u0433\u0440\u043e\u043a\u0430 \u0438 \u0432\u0440\u0430\u0433\u043e\u0432.\" width=\"969\" height=\"279\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/813\/e98\/bbe\/813e98bbea38556f3d3752cf9ab5589f.png\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 4. \u041d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u043b\u043e\u0435\u0432. \u0412\u0441\u0435 \u043e\u043d\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0437\u0430\u0434\u0438 \u0438\u0433\u0440\u043e\u043a\u0430 \u0438 \u0432\u0440\u0430\u0433\u043e\u0432.<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u043e \u0437\u0430\u0434\u0443\u043c\u0430\u043d\u043d\u043e\u043c\u0443, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e, \u0447\u0442\u043e\u0431\u044b \u0447\u0435\u0442\u0432\u0435\u0440\u0442\u044b\u0439 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u0441\u043b\u043e\u0439 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b\u0441\u044f \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u043f\u043b\u0430\u043d\u0435, \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u044d\u0444\u0444\u0435\u043a\u0442, \u043a\u0430\u043a \u0431\u0443\u0434\u0442\u043e \u0438\u0433\u0440\u043e\u043a \u0438 \u0432\u0440\u0430\u0433\u0438 \u0434\u0432\u0438\u0433\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 &#171;\u0434\u043e\u0440\u043e\u0436\u043a\u0435&#187; \u0437\u0430 \u043d\u0438\u043c.<\/p>\n<p>\u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c.<\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u043a\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0435\u0432<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0412 \u043a\u043b\u0430\u0441\u0441\u0435 Background \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0441\u043b\u043e\u0439 \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 layers:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f93\/84a\/0ec\/f9384a0eccfa06287e03b27e729361ef.png\" alt=\"\u041a\u043e\u0434 3. \u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0441\u043b\u043e\u044f \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430.\" title=\"\u041a\u043e\u0434 3. \u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0441\u043b\u043e\u044f \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430.\" width=\"639\" height=\"255\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f93\/84a\/0ec\/f9384a0eccfa06287e03b27e729361ef.png\"\/><\/p>\n<div><figcaption>\u041a\u043e\u0434 3. \u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0441\u043b\u043e\u044f \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430.<\/figcaption><\/div>\n<\/figure>\n<p>\u0432 \u043c\u0435\u0442\u043e\u0434\u0435 update() \u043a\u043b\u0430\u0441\u0441\u0430 Game \u0431\u0443\u0434\u0435\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u044d\u0442\u043e\u0442 \u0441\u043b\u043e\u0439 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/911\/33c\/f52\/91133cf52d911d2686994b41fe31f11c.png\" alt=\"\u041a\u043e\u0434 4. \u041e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0441\u043b\u043e\u044f.\" title=\"\u041a\u043e\u0434 4. \u041e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0441\u043b\u043e\u044f.\" width=\"532\" height=\"125\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/911\/33c\/f52\/91133cf52d911d2686994b41fe31f11c.png\"\/><\/p>\n<div><figcaption>\u041a\u043e\u0434 4. \u041e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0441\u043b\u043e\u044f.<\/figcaption><\/div>\n<\/figure>\n<p>\u0430 \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 draw() \u0440\u0438\u0441\u0443\u0435\u043c \u044d\u0442\u043e\u0442 \u0441\u043b\u043e\u0439 \u0432 &#171;\u0441\u0430\u043c\u043e\u043c \u043a\u043e\u043d\u0446\u0435&#187;, \u0442.\u0435. \u043f\u043e\u0441\u043b\u0435 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0432\u0441\u0435\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/476\/804\/625\/476804625c023e2bb22705d6735d5ca6.png\" alt=\"\u041a\u043e\u0434 5. \u041e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432.\" title=\"\u041a\u043e\u0434 5. \u041e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432.\" width=\"825\" height=\"141\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/476\/804\/625\/476804625c023e2bb22705d6735d5ca6.png\"\/><\/p>\n<div><figcaption>\u041a\u043e\u0434 5. \u041e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432.<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/25b\/847\/47f\/25b84747f37213e7b3ec188900a1fc87.png\" alt=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 5. \u041a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0435 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043f\u043e\u0437\u0430\u0434\u0438 4-\u043e\u0433\u043e \u0441\u043b\u043e\u044f.\" title=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 5. \u041a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0435 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043f\u043e\u0437\u0430\u0434\u0438 4-\u043e\u0433\u043e \u0441\u043b\u043e\u044f.\" width=\"1364\" height=\"215\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/25b\/847\/47f\/25b84747f37213e7b3ec188900a1fc87.png\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 5. \u041a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0435 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043f\u043e\u0437\u0430\u0434\u0438 4-\u043e\u0433\u043e \u0441\u043b\u043e\u044f.<\/figcaption><\/div>\n<\/figure>\n<p><a class=\"anchor\" name=\"sprites\" id=\"sprites\"><\/a><\/p>\n<h2>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0435\u0439. \u0421\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442\u044b<\/h2>\n<p>\u0427\u0435\u0440\u043d\u044b\u0439 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0441\u044f \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u043e. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u043c \u0435\u0433\u043e \u0432 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043c\u043e\u0440\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043d\u044c\u043a\u0430. \u0414\u043b\u044f \u044d\u0442\u043e\u0439 \u0446\u0435\u043b\u0438 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442.\u043d. \u0441\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442\u044b. \u0415\u0441\u043b\u0438 \u0441\u0432\u043e\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438 \u2014 \u0442\u043e \u044d\u0442\u043e \u0441\u043e\u0432\u043e\u043a\u0443\u043f\u043d\u043e\u0441\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a (\u043a\u0430\u0434\u0440\u043e\u0432) \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430, \u0441\u043c. \u0440\u0438\u0441\u0443\u043d\u043e\u043a 6.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/db7\/54f\/133\/db754f133e6338c466ea5f099a63d898.gif\" alt=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 6. \u0421\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0438\u0433\u0440\u043e\u043a\u0430. \u041c\u0435\u043d\u044f\u044f \u043a\u0430\u0434\u0440\u044b - \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430.\" title=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 6. \u0421\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0438\u0433\u0440\u043e\u043a\u0430. \u041c\u0435\u043d\u044f\u044f \u043a\u0430\u0434\u0440\u044b - \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430.\" width=\"904\" height=\"405\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/db7\/54f\/133\/db754f133e6338c466ea5f099a63d898.gif\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 6. \u0421\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0438\u0433\u0440\u043e\u043a\u0430. \u041c\u0435\u043d\u044f\u044f \u043a\u0430\u0434\u0440\u044b &#8212; \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430.<\/figcaption><\/div>\n<\/figure>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043d\u0435 \u0431\u0443\u0434\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442\u044b. \u041f\u043e\u043c\u0438\u043c\u043e \u0432\u0441\u0435\u043c \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0445 Adobe Photoshop \u0438 Illustrator, \u0435\u0441\u0442\u044c \u0438 \u0431\u043e\u043b\u0435\u0435 \u043b\u0435\u0433\u043a\u0438\u0435, \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442\u043e\u0432 \u0434\u043b\u044f 2D \u0438\u0433\u0440. \u0410\u0432\u0442\u043e\u0440 &#171;\u0440\u0435\u043a\u043b\u0430\u043c\u0438\u0440\u0443\u0435\u0442&#187; \u0442\u0430\u043a\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u043a\u0430\u043a <a href=\"https:\/\/dragonbones.github.io\/en\/index.html\" rel=\"noopener noreferrer nofollow\">dragonbones<\/a> \u0438 <a href=\"https:\/\/ru.esotericsoftware.com\/\" rel=\"noopener noreferrer nofollow\">spine<\/a>. \u041f\u0435\u0440\u0432\u044b\u0439 \u0438\u0437 \u043d\u0438\u0445 \u0435\u0449\u0435 \u0438 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439. \u0410 \u0432\u043e\u0442 <a href=\"https:\/\/habr.com\/ru\/articles\/211472\/\" rel=\"noopener noreferrer nofollow\">\u0437\u0434\u0435\u0441\u044c <\/a>\u0435\u0441\u0442\u044c \u043d\u0435\u043f\u043b\u043e\u0445\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u0440\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 2D-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0432 Unity 3D.<\/p>\n<p>\u042f \u0436\u0435 \u0432\u043e\u0437\u044c\u043c\u0443 <a href=\"https:\/\/github.com\/greenDev7\/JavaScript-Game.-Full-Version\/blob\/master\/Assets\/player.png\" rel=\"noopener noreferrer nofollow\">\u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u0441\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043b\u044f \u043d\u0430\u0441 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043b \u0430\u0432\u0442\u043e\u0440 \u0438 \u0431\u0443\u0434\u0443 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043d\u0435\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430.<\/p>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u043c, \u0447\u0442\u043e \u0432 \u0444\u0430\u0439\u043b\u0435 index.html \u0443\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u0441\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442 \u0438\u0433\u0440\u043e\u043a\u0430:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ed0\/1ef\/6f2\/ed01ef6f25d0d36a28ec49b32942a2bd.png\" alt=\"\u041a\u043e\u0434 6. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442 \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0443.\" title=\"\u041a\u043e\u0434 6. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442 \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0443.\" width=\"428\" height=\"103\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ed0\/1ef\/6f2\/ed01ef6f25d0d36a28ec49b32942a2bd.png\"\/><\/p>\n<div><figcaption>\u041a\u043e\u0434 6. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442 \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0443.<\/figcaption><\/div>\n<\/figure>\n<p>\u0430 \u0432 \u0444\u0430\u0439\u043b\u0435 style.css \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e display \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c none, \u043a\u0430\u043a \u0438 \u0432\u0441\u0435\u043c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c \u0432 \u043d\u0430\u0448\u0435\u0439 \u0438\u0433\u0440\u0435 (\u043e\u0431 \u044d\u0442\u043e\u043c \u044f \u043f\u0438\u0441\u0430\u043b \u0432\u044b\u0448\u0435).<\/p>\n<p>\u0412 \u043a\u043b\u0430\u0441\u0441 Player \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/38e\/e02\/a63\/38ee02a632a733e4bdee33711b025c72.png\" alt=\"\u041a\u043e\u0434 7. \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438\u0433\u0440\u043e\u043a\u0430.\" title=\"\u041a\u043e\u0434 7. \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438\u0433\u0440\u043e\u043a\u0430.\" width=\"963\" height=\"859\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/38e\/e02\/a63\/38ee02a632a733e4bdee33711b025c72.png\"\/><\/p>\n<div><figcaption>\u041a\u043e\u0434 7. \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438\u0433\u0440\u043e\u043a\u0430.<\/figcaption><\/div>\n<\/figure>\n<p>\u0412 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c \u043d\u043e\u0432\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430: <code>image<\/code> \u2014 \u0441\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442; <code>frameX<\/code>, <code>frameY<\/code> \u2014 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b &#171;\u043a\u0430\u0434\u0440\u0430&#187; \u0438\u0433\u0440\u043e\u043a\u0430 \u043d\u0430 \u0441\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442\u0435 (\u0441\u043c. \u0440\u0438\u0441\u0443\u043d\u043e\u043a 6). \u041f\u0440\u0438 \u044d\u0442\u043e\u043c <code>frameX<\/code> \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043e\u0442 0 \u0434\u043e <code>maxFrame<\/code> = 38 (\u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u0430\u0434\u0440\u043e\u0432 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438, \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u043d\u0443\u043c\u0435\u0440\u0430\u0446\u0438\u0438 \u043e\u0442 \u043d\u0443\u043b\u044f), \u0430 <code>frameY<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f 0 \u0438\u043b\u0438 1. \u0412 \u043f\u0435\u0440\u0432\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c \u0438\u0433\u0440\u043e\u043a\u0430, \u043f\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u043d \u0441\u0442\u0440\u0435\u043b\u044f\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0437 \u043d\u043e\u0441\u0430, \u0430 \u043f\u0440\u0438 <code>frameY<\/code> = 1 \u2014 \u043d\u0430\u0448 \u043c\u043e\u0440\u0441\u043a\u043e\u0439 \u043a\u043e\u043d\u044c \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0437\u0430\u0440\u044f\u0436\u0435\u043d\u043d\u043e\u0433\u043e \u044d\u043d\u0435\u0440\u0433\u0438\u0435\u0439 \u043c\u043e\u043d\u0441\u0442\u0440\u0430 \u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0435\u043d \u0441\u0442\u0440\u0435\u043b\u044f\u0442\u044c \u0438\u0437 \u043d\u043e\u0441\u0430 \u0438 \u0445\u0432\u043e\u0441\u0442\u0430 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e.<\/p>\n<p>\u0412 \u043c\u0435\u0442\u043e\u0434 update() \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u043a\u0443\u0441\u043e\u043a \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u043a\u0440\u0435\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>frameX<\/code>, \u0430 \u0432 draw() \u2014 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u043c\u0435\u0442\u043e\u0434 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/CanvasRenderingContext2D\/drawImage\" rel=\"noopener noreferrer nofollow\">drawImage()<\/a> \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043a\u0430\u043d\u0432\u0430\u0441 \u0441 9-\u044e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0438\u0437 \u0441\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442\u0430 &#171;\u0432\u044b\u0440\u0435\u0437\u0430\u0442\u044c&#187; \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043a\u0430\u0434\u0440\u044b. \u0415\u0441\u043b\u0438 \u0441\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442 \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u0431\u0435\u0437 \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u043b\u0438\u0448\u043d\u0438\u0445 &#171;\u043f\u0440\u043e\u0431\u0435\u043b\u043e\u0432&#187;, \u0442\u043e \u043c\u0435\u0442\u043e\u0434 drawImage() \u043e\u0442\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0447\u0435\u0442\u043a\u043e \u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0439. <\/p>\n<p>\u0418 \u043a\u0430\u043a \u0438\u0442\u043e\u0433 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u0438\u0433\u0440\u043e\u043a\u0430:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d89\/cc6\/b01\/d89cc6b01bfb5462f7f6081da61508b4.gif\" alt=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 7. \u0410\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u0440\u0441\u043a\u043e\u0439 \u043a\u043e\u043d\u044c. \u041d\u043e \u043f\u043e\u043a\u0430 \u0435\u0449\u0435 \u0432 \u0447\u0435\u0440\u043d\u043e\u043c \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0435.\" title=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 7. \u0410\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u0440\u0441\u043a\u043e\u0439 \u043a\u043e\u043d\u044c. \u041d\u043e \u043f\u043e\u043a\u0430 \u0435\u0449\u0435 \u0432 \u0447\u0435\u0440\u043d\u043e\u043c \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0435.\" width=\"188\" height=\"518\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d89\/cc6\/b01\/d89cc6b01bfb5462f7f6081da61508b4.gif\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 7. \u0410\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u0440\u0441\u043a\u043e\u0439 \u043a\u043e\u043d\u044c. \u041d\u043e \u043f\u043e\u043a\u0430 \u0435\u0449\u0435 \u0432 \u0447\u0435\u0440\u043d\u043e\u043c \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0435.<\/figcaption><\/div>\n<\/figure>\n<p>\u0423\u0431\u0435\u0440\u0435\u043c \u0447\u0435\u0440\u043d\u044b\u0439 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u043c\u0435\u0442\u043e\u0434 draw() \u0442\u043e\u0433\u043e \u0436\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 Player \u0432\u043d\u0435\u0441\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f. \u0423\u0434\u0430\u043b\u0438\u043c \u0441\u0442\u0440\u043e\u043a\u0443:<\/p>\n<pre><code class=\"javascript\">context.fillStyle = 'black';<\/code><\/pre>\n<p>\u0430 \u043c\u0435\u0442\u043e\u0434 <code>context.fillRect()<\/code> \u0437\u0430\u043c\u0435\u043d\u0438\u043c \u043d\u0430 <code>context.strokeRect()<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0447\u0435\u0440\u043d\u0443\u044e \u0440\u0430\u043c\u043a\u0443.<\/p>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c &#171;\u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c\/\u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0442\u044c&#187; \u044d\u0442\u0443 \u0447\u0435\u0440\u043d\u0443\u044e \u0440\u0430\u043c\u043a\u0443 \u0434\u043b\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u043e\u0442\u043b\u0430\u0434\u043a\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u0439 \u043c\u0435\u0436\u0434\u0443 \u0438\u0433\u0440\u043e\u043a\u043e\u043c \u0438 \u0432\u0440\u0430\u0433\u0430\u043c\u0438). \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u043a\u043b\u0430\u0441\u0441 Game \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e debug:<\/p>\n<pre><code class=\"javascript\">this.debug = true<\/code><\/pre>\n<p>\u0430 \u0432 \u043a\u043b\u0430\u0441\u0441 InputHandler \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043b\u0430\u0432\u0438\u0448\u0438 <code>d<\/code> \u0434\u043b\u044f \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f\/\u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0440\u0435\u0436\u0438\u043c\u0430 \u0434\u0435\u0431\u0430\u0433\u0430:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/080\/c88\/b78\/080c88b786018d32ae44155da9dbbfe6.png\" alt=\"\u041a\u043e\u0434 8. \u041f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043a\u043b\u0430\u0432\u0438\u0448\u0438 'd' \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u043c\/\u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0440\u0435\u0436\u0438\u043c \u0434\u0435\u0431\u0430\u0433\u0430.\" title=\"\u041a\u043e\u0434 8. \u041f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043a\u043b\u0430\u0432\u0438\u0448\u0438 'd' \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u043c\/\u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0440\u0435\u0436\u0438\u043c \u0434\u0435\u0431\u0430\u0433\u0430.\" width=\"853\" height=\"243\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/080\/c88\/b78\/080c88b786018d32ae44155da9dbbfe6.png\"\/><\/p>\n<div><figcaption>\u041a\u043e\u0434 8. \u041f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043a\u043b\u0430\u0432\u0438\u0448\u0438 &#8216;d&#8217; \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u043c\/\u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0440\u0435\u0436\u0438\u043c \u0434\u0435\u0431\u0430\u0433\u0430.<\/figcaption><\/div>\n<\/figure>\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0430 \u0438\u0433\u0440\u0430 \u043d\u0430 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0448\u0438 &#8216;d&#8217;:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9c9\/6a7\/813\/9c96a7813c76f8cc5a36159144a549ce.gif\" alt=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 8. \u0412\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\/\u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0440\u0430\u043c\u043a\u0438 \u0432\u043e\u043a\u0440\u0443\u0433 \u0438\u0433\u0440\u043e\u043a\u0430.\" title=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 8. \u0412\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\/\u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0440\u0430\u043c\u043a\u0438 \u0432\u043e\u043a\u0440\u0443\u0433 \u0438\u0433\u0440\u043e\u043a\u0430.\" width=\"176\" height=\"518\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9c9\/6a7\/813\/9c96a7813c76f8cc5a36159144a549ce.gif\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 8. \u0412\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\/\u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0440\u0430\u043c\u043a\u0438 \u0432\u043e\u043a\u0440\u0443\u0433 \u0438\u0433\u0440\u043e\u043a\u0430.<\/figcaption><\/div>\n<\/figure>\n<p><a class=\"anchor\" name=\"enemy_animation\" id=\"enemy_animation\"><\/a><\/p>\n<h2>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0432\u0440\u0430\u0433\u043e\u0432<\/h2>\n<p>\u041f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0440\u0430\u0433\u043e\u0432. \u0412 \u0444\u0430\u0439\u043b\u0435 index.html \u0443 \u043d\u0430\u0441 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1c9\/d43\/2fa\/1c9d432fae0e33bfce56c84d64fe1378.png\" alt=\"\u041a\u043e\u0434 9. \u041f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u0440\u0430\u0433\u043e\u0432.\" title=\"\u041a\u043e\u0434 9. \u041f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u0440\u0430\u0433\u043e\u0432.\" width=\"479\" height=\"165\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1c9\/d43\/2fa\/1c9d432fae0e33bfce56c84d64fe1378.png\"\/><\/p>\n<div><figcaption>\u041a\u043e\u0434 9. \u041f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u0440\u0430\u0433\u043e\u0432.<\/figcaption><\/div>\n<\/figure>\n<p><code>angler1<\/code> \u0438 <code>angler2<\/code> \u2014 \u044d\u0442\u043e \u0432\u0440\u0430\u0433\u0438 \u043e\u0431\u044b\u043a\u043d\u043e\u0432\u0435\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0445\u043e\u0442\u044f\u0442 \u043f\u043e\u043a\u0430\u043b\u0435\u0447\u0438\u0442\u044c \u043d\u0430\u0448\u0435\u0433\u043e \u043c\u043e\u0440\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043d\u044f, \u0430 \u0432\u043e\u0442 <code>lucky<\/code> \u2014 \u044d\u0442\u043e \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0430\u044f \u0440\u044b\u0431\u043a\u0430 \u0432 \u0436\u0435\u043b\u0442\u043e\u043c \u0448\u0430\u0440\u0438\u043a\u0435, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0438 \u0441 \u0433\u043b\u0430\u0432\u043d\u044b\u043c \u0438\u0433\u0440\u043e\u043a\u043e\u043c &#171;\u0434\u0430\u0435\u0442 \u0435\u043c\u0443 \u0441\u0438\u043b \u0438 \u044d\u043d\u0435\u0440\u0433\u0438\u0438&#187; \u2014 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043d\u0430 \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0439 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u043a \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0442\u0440\u0435\u043b\u044f\u0442\u044c \u0441\u0440\u0430\u0437\u0443 \u0438\u0437 \u043d\u043e\u0441\u0430 \u0438 \u0445\u0432\u043e\u0441\u0442\u0430, \u043e\u0434\u043d\u0430\u043a\u043e, \u0435\u0435 \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0438\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0438\u0432 \u0437\u0430 \u043d\u0435\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043e\u0447\u043a\u0438.<\/p>\n<p>\u0412 \u043a\u043b\u0430\u0441\u0441 Angler1 \u0432\u043d\u0435\u0441\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f4a\/7d6\/467\/f4a7d64676448d27f4dcf34e857b015c.png\" alt=\"\u041a\u043e\u0434 10. \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u0440\u0430\u0433\u0430 Angler1.\" title=\"\u041a\u043e\u0434 10. \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u0440\u0430\u0433\u0430 Angler1.\" width=\"1289\" height=\"256\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f4a\/7d6\/467\/f4a7d64676448d27f4dcf34e857b015c.png\"\/><\/p>\n<div><figcaption>\u041a\u043e\u0434 10. \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u0440\u0430\u0433\u0430 Angler1.<\/figcaption><\/div>\n<\/figure>\n<p>\u0437\u0434\u0435\u0441\u044c \u043a\u0430\u043a \u0438 \u0434\u043b\u044f \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u0438\u0433\u0440\u043e\u043a\u0430 \u2014 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0438 \u0440\u0430\u043d\u0434\u043e\u043c\u043d\u043e \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f <code>this.frameY<\/code>, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0448 \u0432\u0440\u0430\u0433 \u0438\u043c\u0435\u043b \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u0438.<\/p>\n<p>\u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432\u043d\u0435\u0441\u0435\u043c \u0438 \u0432 \u043a\u043b\u0430\u0441\u0441 Angler2.<\/p>\n<p>\u0414\u043b\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u0432\u0440\u0430\u0433\u0430 &#8212; Enemy \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u043a\u0438:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b82\/c5c\/954\/b82c5c9543f2f5908e91ea9a72547fd2.png\" alt=\"\u041a\u043e\u0434 11. \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 Enemy.\" title=\"\u041a\u043e\u0434 11. \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 Enemy.\" width=\"1441\" height=\"832\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b82\/c5c\/954\/b82c5c9543f2f5908e91ea9a72547fd2.png\"\/><\/p>\n<div><figcaption>\u041a\u043e\u0434 11. \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 Enemy.<\/figcaption><\/div>\n<\/figure>\n<p>\u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>this.frameX<\/code>,<code>this.frameY<\/code> \u0438 <code>this.maxFrame<\/code>, \u0432 \u043c\u0435\u0442\u043e\u0434 update() \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043b\u043e\u0433\u0438\u043a\u0443 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f this.frameX, \u0430 \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 draw() \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u043c \u043c\u0435\u0442\u043e\u0434\u043e\u043c <code>context.drawImage()<\/code> \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043a\u0430\u043d\u0432\u0430\u0441 \u0441 9-\u044e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0434\u043b\u044f &#171;\u0432\u044b\u0447\u043b\u0435\u043d\u0435\u043d\u0438\u044f&#187; \u043a\u0430\u0434\u0440\u043e\u0432 \u0438\u0437 \u0441\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442\u0430.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 lives \u0438 score \u0438\u0437 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 Enemy \u0432 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435, \u0447\u0442\u043e\u0431\u044b \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0442\u0438\u043f\u0443 \u0432\u0440\u0430\u0433\u0430 \u043d\u0430\u0437\u043d\u0430\u0447\u0438\u0442\u044c \u0441\u0432\u043e\u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0436\u0438\u0437\u043d\u0435\u0439 \u0438 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0447\u043a\u043e\u0432 <code>this.score<\/code><\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0435\u0440\u0435\u043d\u043e\u0441 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0438\u0437 \u043a\u043b\u0430\u0441\u0441\u0430 Enemy<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0423\u0434\u0430\u043b\u044f\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438\u0437 \u043a\u043b\u0430\u0441\u0441\u0430 Enemy:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a11\/555\/38b\/a1155538b1fed3369b8f3170ea7ed0fd.png\" alt=\"\" title=\"\" width=\"456\" height=\"294\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a11\/555\/38b\/a1155538b1fed3369b8f3170ea7ed0fd.png\"\/><\/figure>\n<p>\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432 \u043a\u043b\u0430\u0441\u0441 Angler1:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c2a\/a8f\/120\/c2aa8f120f437053304ab786495e3534.png\" width=\"670\" height=\"241\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c2a\/a8f\/120\/c2aa8f120f437053304ab786495e3534.png\"\/><\/figure>\n<p>\u0438 Angler2:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/fe4\/2ce\/697\/fe42ce69779dafbce7c36e7c05351c98.png\" width=\"622\" height=\"241\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fe4\/2ce\/697\/fe42ce69779dafbce7c36e7c05351c98.png\"\/><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d06\/7a9\/221\/d067a922177e437643b2000e0a69d910.gif\" alt=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 9. \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0432\u0440\u0430\u0433\u043e\u0432.\" title=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 9. \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0432\u0440\u0430\u0433\u043e\u0432.\" width=\"600\" height=\"205\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d06\/7a9\/221\/d067a922177e437643b2000e0a69d910.gif\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 9. \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0432\u0440\u0430\u0433\u043e\u0432.<\/figcaption><\/div>\n<\/figure>\n<p><a class=\"anchor\" name=\"lucky_fish_and_power_up_mode\" id=\"lucky_fish_and_power_up_mode\"><\/a><\/p>\n<h2>\u0420\u044b\u0431\u043a\u0430-\u0443\u0434\u0430\u0447\u0430 \u0438 Power-up \u0440\u0435\u0436\u0438\u043c<\/h2>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u0438\u0433\u0440\u043e\u043a\u0430 \u0441 \u0440\u044b\u0431\u043a\u043e\u0439-\u0443\u0434\u0430\u0447\u0435\u0439 (Lucky Fish) \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043c\u043e\u0440\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043d\u044c\u043a\u0430 \u0432 \u0440\u0435\u0436\u0438\u043c Power-up (\u0447\u0435\u0441\u0442\u043d\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u044f \u043d\u0435 \u0437\u043d\u0430\u044e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0440\u0443\u0441\u0441\u043a\u0438\u0439 \u044f\u0437\u044b\u043a, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0435\u0437\u0434\u0435 \u0434\u0430\u043b\u0435\u0435 \u0431\u0443\u0434\u0443 \u0443\u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u0442\u044c \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435, \u043f\u0440\u043e\u0448\u0443 \u043d\u0435 \u0441\u0443\u0434\u0438\u0442\u044c \u0441\u0442\u0440\u043e\u0433\u043e).<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043b\u0430\u0441\u0441 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0439 &#171;\u0437\u043e\u043b\u043e\u0442\u043e\u0439 \u0440\u044b\u0431\u043a\u0438&#187;. \u0412 \u0444\u0430\u0439\u043b LuckyFish.js \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">class LuckyFish extends Enemy {     constructor(game) {         super(game);         this.width = 99;         this.height = 95;         this.y = Math.random() * (this.game.height * 0.95 - this.height);         this.image = document.getElementById('lucky');         this.frameY = Math.floor(Math.random() * 2);         this.lives = 5;         this.score = 15;         this.type = 'lucky';     } }<\/code><\/pre>\n<p>\u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u044d\u0442\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0412\u0430\u043c \u0443\u0436\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u044b \u0438\u0437 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u0440\u0430\u0437\u0434\u0435\u043b\u043e\u0432, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u0438\u0445 \u043d\u0435 \u0431\u0443\u0434\u0443. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u2014 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>this.type<\/code> \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c &#8216;lucky&#8217;, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u0432\u0440\u0430\u0433, \u0430 \u0434\u0440\u0443\u0436\u0435\u043b\u044e\u0431\u043d\u0430\u044f \u0440\u044b\u0431\u043a\u0430 \u043f\u0440\u0438\u043d\u043e\u0441\u044f\u0449\u0430\u044f \u0443\u0434\u0430\u0447\u0443.<\/p>\n<p>\u041a \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c \u043a\u043b\u0430\u0441\u0441\u0430 Player \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0442\u0440\u0438 \u043d\u043e\u0432\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:<\/p>\n<pre><code class=\"javascript\">this.powerUp = false; \/\/ \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c, \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u043d \u043b\u0438 \u0440\u0435\u0436\u0438\u043c this.powerUpTimer = 0; \/\/ \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u0440\u0435\u0436\u0438\u043c\u0430 this.powerUpLimit = 10000; \/\/ \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0440\u0435\u0436\u0438\u043c\u0430 (10 \u0441\u0435\u043a.)<\/code><\/pre>\n<p>\u0412 \u043c\u0435\u0442\u043e\u0434 update() \u043a\u043b\u0430\u0441\u0441\u0430 Player \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">\/\/ power up if (this.powerUp) {       if (this.powerUpTimer > this.powerUpLimit) {           this.powerUpTimer = 0;           this.powerUp = false;           this.frameY = 0;     } else {           this.powerUpTimer += deltaTime;           this.frameY = 1;           this.game.ammo += 0.1;       }   }<\/code><\/pre>\n<p>\u0434\u0430\u043d\u043d\u044b\u0439 \u0431\u043b\u043e\u043a \u043a\u043e\u0434\u0430 \u043e\u0431\u043d\u0443\u043b\u044f\u0435\u0442 \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u0440\u0435\u0436\u0438\u043c\u0430 Power-up \u043f\u0440\u0438 \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u0438 \u043b\u0438\u043c\u0438\u0442\u0430 (\u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 10 \u0441\u0435\u043a.), \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>this.frameY<\/code>, \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0440\u0441\u043a\u043e\u0439 \u043a\u043e\u043d\u044c \u043c\u0435\u043d\u044f\u043b \u0441\u0432\u043e\u0439 \u043e\u043a\u0440\u0430\u0441, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043f\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0431\u043e\u0435\u043f\u0440\u0438\u043f\u0430\u0441\u043e\u0432 (<code>this.game.ammo += 0.1<\/code>).<\/p>\n<p>\u0412 \u043a\u043b\u0430\u0441\u0441 Player \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b:<\/p>\n<pre><code class=\"javascript\">shootBottom() {     if (this.game.ammo > 0) {         this.projectiles.push(new Projectile(this.game, this.x + 80, this.y + 175));         this.game.ammo--;     } }  enterPowerUp() {     this.powerUpTimer = 0;     this.powerUp = true;     if (this.game.ammo &lt; this.game.maxAmmo) this.game.ammo = this.game.maxAmmo; }<\/code><\/pre>\n<p>\u043c\u0435\u0442\u043e\u0434 <code>shootBottom()<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0441\u0442\u0440\u0435\u043b\u044f\u0442\u044c \u0438\u0433\u0440\u043e\u043a\u0443 \u0438\u0437 \u0445\u0432\u043e\u0441\u0442\u0430, \u0430 <code>enterPowerUp()<\/code> \u0431\u0443\u0434\u0435\u0442 \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0436\u0438\u043c Power-up.<\/p>\n<p>\u0412 \u0442\u0435\u043b\u043e \u043c\u0435\u0442\u043e\u0434\u0430 <code>shootTop()<\/code> \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0442\u0440\u043e\u043a\u0443:<\/p>\n<pre><code class=\"javascript\">\/\/ \u0435\u0441\u043b\u0438 \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u043d \u0440\u0435\u0436\u0438\u043c Power-up, \u0442\u043e \u0441\u0442\u0440\u0435\u043b\u044f\u0435\u043c \u0442\u0430\u043a\u0436\u0435 \u0438 \u0438\u0437 \u0445\u0432\u043e\u0441\u0442\u0430 if (this.powerUp) this.shootBottom();<\/code><\/pre>\n<p>\u0412 \u043c\u0435\u0442\u043e\u0434 update() \u043a\u043b\u0430\u0441\u0441\u0430 Game \u0442\u0435\u043f\u0435\u0440\u044c \u0431\u0443\u0434\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 deltaTime \u043f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438\u0433\u0440\u043e\u043a\u0430:<\/p>\n<pre><code class=\"javascript\">this.player.update(deltaTime);<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0438\u0433\u0440\u043e\u043a \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u0441 \u0440\u044b\u0431\u043a\u043e\u0439 \u0443\u0434\u0430\u0447\u0435\u0439, \u0442\u043e \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u043c \u0440\u0435\u0436\u0438\u043c Power-up  \u2014 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">\/\/ \u0415\u0441\u043b\u0438 \u043d\u0430\u0448 \u0438\u0433\u0440\u043e\u043a \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u0441 \u0420\u044b\u0431\u043a\u043e\u0439-\u0423\u0434\u0430\u0447\u0435\u0439 if (enemy.type === 'lucky')     this.player.enterPowerUp(); \/\/ \u0410\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u043c \u0440\u0435\u0436\u0438\u043c Power-up else if (!this.gameOver) this.score--; \/\/ \u0415\u0441\u043b\u0438 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u0441 \u0434\u0440\u0443\u0433\u0438\u043c \u0432\u0440\u0430\u0433\u043e\u043c - \u043e\u0442\u043d\u0438\u043c\u0430\u0435\u043c \u0438\u0437 \u0436\u0438\u0437\u043d\u0438 \u0438\u0433\u0440\u043e\u043a\u0430 \u043e\u0434\u043d\u0443 \u0436\u0438\u0437\u043d\u044c<\/code><\/pre>\n<p>\u041c\u0435\u0442\u043e\u0434 addEnemy() \u0442\u043e\u0436\u0435 \u043f\u0440\u0435\u0442\u0435\u0440\u043f\u0438\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"javascript\">addEnemy() {     const randomize = Math.random();     if (randomize &lt; 0.3) this.enemies.push(new Angler1(this));     else if (randomize &lt; 0.6) this.enemies.push(new Angler2(this));     else this.enemies.push(new LuckyFish(this)); \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0420\u044b\u0431\u043a\u0443-\u0423\u0434\u0430\u0447\u0443 }<\/code><\/pre>\n<p>\u0412 \u043a\u043b\u0430\u0441\u0441\u0435 UI \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u043c \u0446\u0432\u0435\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0431\u043e\u0435\u043f\u0440\u0438\u043f\u0430\u0441\u043e\u0432 \u043f\u0440\u0438 \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 \u0440\u0435\u0436\u0438\u043c\u0430 Power-up:<\/p>\n<pre><code class=\"javascript\">\/\/ \u0440\u0438\u0441\u0443\u0435\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0430\u0442\u0440\u043e\u043d\u043e\u0432 \u0432 \u043b\u0435\u0432\u043e\u043c \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0443\u0433\u043b\u0443 \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044f if (this.game.player.powerUp) context.fillStyle = '#ffffbd'; \/\/ \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0446\u0432\u0435\u0442<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/23e\/ebc\/a59\/23eebca59fd434e14ded2a0d9d937463.gif\" alt=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 10. \u0420\u044b\u0431\u043a\u0430-\u0423\u0434\u0430\u0447\u0430 \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0432 \u0440\u0435\u0436\u0438\u043c Power-up.\" title=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 10. \u0420\u044b\u0431\u043a\u0430-\u0423\u0434\u0430\u0447\u0430 \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0432 \u0440\u0435\u0436\u0438\u043c Power-up.\" width=\"600\" height=\"204\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/23e\/ebc\/a59\/23eebca59fd434e14ded2a0d9d937463.gif\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 10. \u0420\u044b\u0431\u043a\u0430-\u0423\u0434\u0430\u0447\u0430 \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0432 \u0440\u0435\u0436\u0438\u043c Power-up.<\/figcaption><\/div>\n<\/figure>\n<p><a href=\"https:\/\/github.com\/greenDev7\/JavaScript-Game.-Full-Version\/commit\/ce015c4449b3e57e377cbe48966961ad57e105fd\" rel=\"noopener noreferrer nofollow\">\u0417\u0434\u0435\u0441\u044c<\/a> \u0441\u043f\u0438\u0441\u043e\u043a \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u043f\u043e \u0434\u0430\u043d\u043d\u043e\u043c\u0443 \u0440\u0430\u0437\u0434\u0435\u043b\u0443.<\/p>\n<p><a class=\"anchor\" name=\"projectiles_and_font\" id=\"projectiles_and_font\"><\/a><\/p>\n<h2>\u041f\u0443\u043b\u0438 \u0438 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442<\/h2>\n<p>\u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0443 \u043d\u0430\u0441 \u0432\u043c\u0435\u0441\u0442\u043e \u043f\u0443\u043b\u044c \u0438\u0437 \u043d\u043e\u0441\u0430 \u0438 \u0445\u0432\u043e\u0441\u0442\u0430 \u0438\u0433\u0440\u043e\u043a\u0430 \u0432\u044b\u043b\u0435\u0442\u0430\u044e\u0442 \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u0436\u0435\u043b\u0442\u044b\u0435 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0434\u043f\u0440\u0430\u0432\u0438\u043c \u044d\u0442\u043e.<\/p>\n<p>\u0412 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043b\u0430\u0441\u0441\u0430 Projectile \u0434\u043e\u0431\u0430\u0432\u0438\u043c:<\/p>\n<pre><code class=\"javascript\">this.image = document.getElementById('projectile');<\/code><\/pre>\n<p>\u0430 \u043c\u0435\u0442\u043e\u0434 draw() \u0431\u0443\u0434\u0435\u0442 \u0442\u0435\u043f\u0435\u0440\u044c \u0442\u0430\u043a\u0438\u043c:<\/p>\n<pre><code class=\"javascript\">draw(context) {     context.drawImage(this.image, this.x, this.y); }<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u0433\u0440\u0443\u0437\u043a\u0443 \u043c\u0435\u0442\u043e\u0434\u0430 drawImage() \u0441 9-\u044e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u0442.\u043a. \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u0443\u043b\u0438 \u0432 \u0444\u0430\u0439\u043b\u0435 .png \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432\u0441\u0435\u0433\u043e \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u0430\u0434\u0440\u0430.<\/p>\n<p>\u0413\u043e\u0442\u043e\u0432\u043e.<\/p>\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0448\u0440\u0438\u0444\u0442\u0430\u043c.<\/p>\n<p>\u0425\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432 \u0438\u0433\u0440\u0435 \u0440\u0443\u0441\u0441\u043a\u0438\u0435 \u043d\u0430\u0434\u043f\u0438\u0441\u0438 \u0442\u0438\u043f\u0430 &#171;\u041f\u043e\u0431\u0435\u0434\u0430! \u041e\u0442\u043b\u0438\u0447\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430!&#187;, \u043d\u043e \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u0441\u0434\u0435\u043b\u0430\u044e \u0442\u0430\u043a, \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u043b \u0430\u0432\u0442\u043e\u0440 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0430 \u2014 \u0434\u043e\u0431\u0430\u0432\u043b\u044e Google Fonts \u0441 &#171;\u044d\u043a\u0437\u043e\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c&#187; \u0448\u0440\u0438\u0444\u0442\u043e\u043c Bangers.<\/p>\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043d\u0430 <a href=\"https:\/\/fonts.google.com\/specimen\/Bangers\" rel=\"noopener noreferrer nofollow\">\u0441\u0430\u0439\u0442 \u0441 \u043d\u0443\u0436\u043d\u044b\u043c \u0448\u0440\u0438\u0444\u0442\u043e\u043c<\/a> \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f:<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0448\u0440\u0438\u0444\u0442:<\/summary>\n<div class=\"spoiler__content\">\n<p>\u041a\u043e\u043f\u0438\u0440\u0443\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0438<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/58f\/f50\/24a\/58ff5024a34f872e142cf53aca715445.png\" alt=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 11. \u041a\u043e\u043f\u0438\u0440\u0443\u0435\u043c links.\" title=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 11. \u041a\u043e\u043f\u0438\u0440\u0443\u0435\u043c links.\" width=\"759\" height=\"827\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/58f\/f50\/24a\/58ff5024a34f872e142cf53aca715445.png\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 11. \u041a\u043e\u043f\u0438\u0440\u0443\u0435\u043c links.<\/figcaption><\/div>\n<\/figure>\n<p>\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0438\u0445 \u0432 index.html<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/809\/22a\/5a7\/80922a5a79c1ba29f61aa92494dadc2a.png\" alt=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 12. \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0448\u0440\u0438\u0444\u0442.\" title=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 12. \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0448\u0440\u0438\u0444\u0442.\" width=\"819\" height=\"311\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/809\/22a\/5a7\/80922a5a79c1ba29f61aa92494dadc2a.png\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 12. \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0448\u0440\u0438\u0444\u0442.<\/figcaption><\/div>\n<\/figure>\n<p>\u0417\u0430\u0442\u0435\u043c \u043a\u043e\u043f\u0438\u0440\u0443\u0435\u043c css \u043f\u0440\u0430\u0432\u0438\u043b\u0430:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f2a\/ee9\/ab6\/f2aee9ab60dcdb7a947ebd1a03b8f0b3.png\" alt=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 13. \u041a\u043e\u043f\u0438\u0440\u0443\u0435\u043c css \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0434\u043b\u044f \u0448\u0440\u0438\u0444\u0442\u0430.\" title=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 13. \u041a\u043e\u043f\u0438\u0440\u0443\u0435\u043c css \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0434\u043b\u044f \u0448\u0440\u0438\u0444\u0442\u0430.\" width=\"308\" height=\"142\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f2a\/ee9\/ab6\/f2aee9ab60dcdb7a947ebd1a03b8f0b3.png\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 13. \u041a\u043e\u043f\u0438\u0440\u0443\u0435\u043c css \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0434\u043b\u044f \u0448\u0440\u0438\u0444\u0442\u0430.<\/figcaption><\/div>\n<\/figure>\n<p>\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0438\u0445 \u0432 \u0444\u0430\u0439\u043b style.css \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 canvas:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/cab\/bb0\/285\/cabbb0285a682b50d1f5597276b7c5ef.png\" alt=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 14. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 canvas.\" title=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 14. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 canvas.\" width=\"376\" height=\"253\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/cab\/bb0\/285\/cabbb0285a682b50d1f5597276b7c5ef.png\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 14. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 canvas.<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0412 \u043a\u043b\u0430\u0441\u0441\u0435 UI \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u0441\u0435\u043c\u0435\u0439\u0441\u0442\u0432\u043e \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u043d\u0430 Bangers:<\/p>\n<pre><code class=\"javascript\">this.fontFamily = 'Bangers';<\/code><\/pre>\n<p>\u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"javascript\">if (this.game.isWin()) {     message1 = 'Most Wondrous!';     message2 = 'Well done explorer!'; } else {     message1 = 'Blazes!';     message2 = 'Get my repair kit and try again!'; }<\/code><\/pre>\n<p><a class=\"anchor\" name=\"particles_rotation_and_gravitation\" id=\"particles_rotation_and_gravitation\"><\/a><\/p>\n<h2>\u041e\u0442\u043b\u0435\u0442\u0430\u044e\u0449\u0438\u0435 \u0448\u0435\u0441\u0442\u0435\u0440\u0435\u043d\u043a\u0438. \u0412\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u0438 \u0433\u0440\u0430\u0432\u0438\u0442\u0430\u0446\u0438\u044f<\/h2>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u0432 \u043d\u0430\u0448\u0435\u0439 \u0438\u0433\u0440\u0435 \u0432\u0440\u0430\u0433\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u043e\u0431\u043e\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0440\u044b\u0431, \u0441\u043e\u0441\u0442\u043e\u044f\u0449\u0438\u0445 \u0438\u0437 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u043e\u0432 \u0438 \u0448\u0435\u0441\u0442\u0435\u0440\u0435\u043d\u043e\u043a (\u0447\u0430\u0441\u0442\u0438\u0446), \u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u044d\u0444\u0444\u0435\u043a\u0442\u043d\u044b\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0432\u044b\u043b\u0435\u0442\u0430 \u0438\u0437 \u0432\u0440\u0430\u0433\u043e\u0432 \u044d\u0442\u0438\u0445 \u0448\u0435\u0441\u0442\u0435\u0440\u0435\u043d\u043e\u043a \u043f\u0440\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e:<\/p>\n<ol>\n<li>\n<p>\u043a\u043e\u0433\u0434\u0430 \u0432\u043e \u0432\u0440\u0430\u0433\u0430 \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u043f\u0443\u043b\u044f \u2014 \u0438\u0437 \u0432\u0440\u0430\u0433\u0430 \u0432\u044b\u043b\u0435\u0442\u0430\u0435\u0442 \u043e\u0434\u043d\u0430 \u0448\u0435\u0441\u0442\u0435\u0440\u0435\u043d\u043a\u0430;<\/p>\n<\/li>\n<li>\n<p>\u043a\u043e\u0433\u0434\u0430 \u0432\u0440\u0430\u0433 \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441 \u043c\u043e\u0440\u0441\u043a\u0438\u043c \u043a\u043e\u043d\u044c\u043a\u043e\u043c \u2014 \u0432\u0440\u0430\u0433 \u0440\u0430\u0441\u043f\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0448\u0435\u0441\u0442\u0435\u0440\u0435\u043d\u043e\u043a, \u0440\u0430\u0432\u043d\u043e\u0435 \u043e\u0441\u0442\u0430\u0432\u0448\u0435\u043c\u0443\u0441\u044f \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u0436\u0438\u0437\u043d\u0435\u0439 \u0432\u0440\u0430\u0433\u0430;<\/p>\n<\/li>\n<\/ol>\n<p>\u0418\u0442\u0430\u043a, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043b\u0430\u0441\u0441 Particle (\u0447\u0430\u0441\u0442\u0438\u0446\u0430):<\/p>\n<pre><code class=\"javascript\">class Particle {     constructor(game, x, y) {         this.game = game;         this.x = x;         this.y = y;         this.image = document.getElementById('gears');         this.frameX = Math.floor(Math.random() * 3);         this.frameY = Math.floor(Math.random() * 3);         this.spriteSize = 50;         this.sizeModifier = (Math.random() * 0.5 + 0.5).toFixed(1);         this.size = this.spriteSize * this.sizeModifier;         this.speedX = Math.random() * 6 - 3;         this.speedY = Math.random() * -15;         this.gravity = 0.5; \/\/ \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 (\u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u0435)         this.markedForDeletion = false;         this.angle = 0; \/\/ \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u0443\u0433\u043e\u043b \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 \u0447\u0430\u0441\u0442\u0438\u0446\u044b         this.va = Math.random() * 0.2 - 0.1; \/\/ \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 \u0447\u0430\u0441\u0442\u0438\u0446\u044b         this.bounced = 0; \/\/ \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0443\u0434\u0430\u0440\u043e\u0432 (\u043e\u0442\u0441\u043a\u043e\u043a\u043e\u0432) \u0447\u0430\u0441\u0442\u0438\u0446\u044b \u043e\u0442 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u0438 \"\u0437\u0435\u043c\u043b\u0438\"         this.bottomBounceBoundary = Math.random() * 80 + 60; \/\/ \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0430\u0441\u0430\u043d\u0438\u044f \u0447\u0430\u0441\u0442\u0438\u0446 \u0441 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0435\u043c\u043b\u0438     }     update() {         this.angle += this.va;         this.speedY += this.gravity;         this.x -= this.speedX + this.game.speed;         this.y += this.speedY;         if (this.y > this.game.height + this.size || this.x &lt; 0 - this.size) this.markedForDeletion = true;         if (this.y > this.game.height - this.bottomBounceBoundary &amp;&amp; this.bounced &lt; 2) {             this.bounced++;             this.speedY *= -0.5;         }     }     draw(context) {         context.save();         context.translate(this.x, this.y);         context.rotate(this.angle);         context.drawImage(this.image, this.frameX * this.spriteSize, this.frameY             * this.spriteSize, this.spriteSize, this.spriteSize, this.size * -0.5, this.size * -0.5, this.size, this.size);         context.restore();     } }<\/code><\/pre>\n<p>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0448\u0435\u0441\u0442\u0435\u0440\u0435\u043d\u043e\u043a \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 gears.png. \u0421\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442 gears.png \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0434\u0435\u0432\u044f\u0442\u0438 \u043a\u0430\u0434\u0440\u043e\u0432 (\u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432), \u0441\u043c. \u0440\u0438\u0441\u0443\u043d\u043e\u043a 15.<\/p>\n<figure class=\"float\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/eb3\/c70\/c58\/eb3c70c58738351b498bd4d13b2ed4ee.gif\" alt=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 15. \u0428\u0435\u0441\u0442\u0435\u0440\u0435\u043d\u043a\u0438.\" title=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 15. \u0428\u0435\u0441\u0442\u0435\u0440\u0435\u043d\u043a\u0438.\" width=\"150\" height=\"150\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/eb3\/c70\/c58\/eb3c70c58738351b498bd4d13b2ed4ee.gif\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 15. \u0428\u0435\u0441\u0442\u0435\u0440\u0435\u043d\u043a\u0438.<\/figcaption><\/div>\n<\/figure>\n<p>\u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043a\u043b\u0430\u0441\u0441\u0430 Particle. <code>x<\/code> \u0438 <code>y<\/code> \u2014 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0447\u0430\u0441\u0442\u0438\u0446\u044b \u043d\u0430 \u0438\u0433\u0440\u043e\u0432\u043e\u043c \u043f\u043e\u043b\u043e\u0442\u043d\u0435; <code>spriteSize<\/code> \u2014 \u0440\u0430\u0437\u043c\u0435\u0440 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445 \u043e\u0434\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438\u0446\u044b (\u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u043d\u0438 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0435); <code>sizeModifier<\/code> \u2014 \u0440\u0430\u043d\u0434\u043e\u043c\u043d\u044b\u0439 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0447\u0430\u0441\u0442\u0438\u0446 (\u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u0448\u0435\u0441\u0442\u0435\u0440\u0435\u043d\u043a\u0438 \u043d\u0435 \u0431\u044b\u043b\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430); <code>size<\/code> \u2014 \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0435\u0441\u0442\u0435\u0440\u0435\u043d\u043a\u0438; <code>speedX<\/code>, <code>speedY<\/code> \u2014 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0448\u0435\u0441\u0442\u0435\u0440\u0435\u043d\u043a\u0438 \u043f\u043e \u043e\u0441\u044f\u043c Ox \u0438 Oy, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e; <code>gravity<\/code> \u2014 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442 \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u044f (\u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438) \u0447\u0430\u0441\u0442\u0438\u0446\u044b, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d \u044d\u0444\u0444\u0435\u043a\u0442 \u043f\u0440\u0438\u0442\u044f\u0436\u0435\u043d\u0438\u044f (\u0433\u0440\u0430\u0432\u0438\u0442\u0430\u0446\u0438\u0438). <\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0448\u0438 \u0448\u0435\u0441\u0442\u0435\u0440\u0435\u043d\u043a\u0438 \u0432\u0440\u0430\u0449\u0430\u043b\u0438\u0441\u044c \u043f\u0440\u0438 \u043f\u0430\u0434\u0435\u043d\u0438\u0438, \u2014 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0442\u0430\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043a\u0430\u043a <code>angle<\/code> \u2014 \u0443\u0433\u043e\u043b \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 \u0448\u0435\u0441\u0442\u0435\u0440\u0435\u043d\u043a\u0438 (\u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u043e\u0441\u0438, \u0442.\u0435. \u0446\u0435\u043d\u0442\u0440\u0430); <code>va<\/code> \u2014 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f. \u0427\u0430\u0441\u0442\u0438\u0446\u044b \u043f\u043e\u0441\u043b\u0435 \u0443\u0434\u0430\u0440\u0435\u043d\u0438\u044f \u043e \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u044c \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u0441\u043a\u0430\u043a\u0438\u0432\u0430\u0442\u044c \u043e\u0442 \u043d\u0435\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437, \u2014 \u0437\u0430 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0442\u0441\u043a\u043e\u043a\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>bounced<\/code>, \u0430 \u0447\u0442\u043e\u0431\u044b \u0447\u0430\u0441\u0442\u0438\u0446\u044b \u043d\u0435 \u043f\u0430\u0434\u0430\u043b\u0438 \u0432 \u043e\u0434\u043d\u043e \u0438 \u0442\u043e \u0436\u0435 \u043c\u0435\u0441\u0442\u043e \u2014 \u0432\u0432\u0435\u0434\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>bottomBounceBoundary<\/code>. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0448\u0435\u0441\u0442\u0435\u0440\u0435\u043d\u043a\u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u0430\u0434\u0430\u0442\u044c \u0432 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043c\u0435\u0441\u0442\u0430\u0445 \u043d\u0430\u0448\u0435\u0439 &#171;\u0434\u043e\u0440\u043e\u0436\u043a\u0438&#187;, \u0441\u043c. \u0440\u0438\u0441\u0443\u043d\u043e\u043a 16:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f08\/1fa\/db7\/f081fadb731e538d463f7a64eda36f63.png\" alt=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 16. \u041c\u0435\u0441\u0442\u0430 \u043f\u0430\u0434\u0435\u043d\u0438\u044f \u0448\u0435\u0441\u0442\u0435\u0440\u0435\u043d\u043e\u043a \u0438 \u0438\u0433\u0440\u043e\u0432\u0430\u044f \u0434\u043e\u0440\u043e\u0436\u043a\u0430.\" title=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 16. \u041c\u0435\u0441\u0442\u0430 \u043f\u0430\u0434\u0435\u043d\u0438\u044f \u0448\u0435\u0441\u0442\u0435\u0440\u0435\u043d\u043e\u043a \u0438 \u0438\u0433\u0440\u043e\u0432\u0430\u044f \u0434\u043e\u0440\u043e\u0436\u043a\u0430.\" width=\"970\" height=\"211\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f08\/1fa\/db7\/f081fadb731e538d463f7a64eda36f63.png\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 16. \u041c\u0435\u0441\u0442\u0430 \u043f\u0430\u0434\u0435\u043d\u0438\u044f \u0448\u0435\u0441\u0442\u0435\u0440\u0435\u043d\u043e\u043a \u0438 \u0438\u0433\u0440\u043e\u0432\u0430\u044f \u0434\u043e\u0440\u043e\u0436\u043a\u0430.<\/figcaption><\/div>\n<\/figure>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043a\u043b\u0430\u0441\u0441\u0435, \u043a\u0430\u043a \u0438 \u0432\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u0434\u0440\u0443\u0433\u0438\u0445, \u0431\u0443\u0434\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0432\u0430 \u043c\u0435\u0442\u043e\u0434\u0430 \u2014 update() \u0438 draw(context).<\/p>\n<p>\u0422\u0435\u043b\u043e \u043c\u0435\u0442\u043e\u0434\u0430 update():<\/p>\n<pre><code class=\"javascript\">update() {     this.angle += this.va;     this.speedY += this.gravity;     this.x -= this.speedX + this.game.speed;     this.y += this.speedY;     if (this.y > this.game.height + this.size || this.x &lt; 0 - this.size) this.markedForDeletion = true;     if (this.y > this.game.height - this.bottomBounceBoundary &amp;&amp; this.bounced &lt; 2) {         this.bounced++;         this.speedY *= -0.5;     } }<\/code><\/pre>\n<p>\u0432 \u043d\u0435\u043c \u043c\u044b \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u043c \u0443\u0433\u043e\u043b \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 <code>angle<\/code>, \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043f\u043e\u043b\u0435\u0442\u0430 \u0447\u0430\u0441\u0442\u0438\u0446\u044b, \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u0447\u0430\u0441\u0442\u0438\u0446\u044b \u0438\u0437 \u0438\u0433\u0440\u044b (<code>this.markedForDeletion = true<\/code>), \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u043f\u0435\u0440\u0435\u0441\u0435\u043a\u043b\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u0440\u0435\u0433\u0443\u043b\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0442\u0441\u043a\u043e\u043a\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>bounced<\/code>. \u041f\u0443\u0442\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u044b \u0438 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f <code>speedY<\/code> (<code>this.speedY *= -0.5<\/code>) \u2014 \u043d\u0430\u0448\u0438 \u0447\u0430\u0441\u0442\u0438\u0446\u044b \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u0441\u043a\u0430\u043a\u0438\u0432\u0430\u0442\u044c, \u0434\u0432\u0438\u0433\u0430\u044f\u0441\u044c \u0432\u0432\u0435\u0440\u0445-\u0432\u043d\u0438\u0437 \u0441 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435\u043c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438.<\/p>\n<p>\u0412 \u0442\u0435\u043b\u0435 draw(context):<\/p>\n<pre><code class=\"javascript\">draw(context) {     context.save();     context.translate(this.x, this.y);     context.rotate(this.angle);     context.drawImage(this.image, this.frameX * this.spriteSize, this.frameY         * this.spriteSize, this.spriteSize, this.spriteSize, this.size * -0.5, this.size * -0.5, this.size, this.size);     context.restore(); }<\/code><\/pre>\n<p>\u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438 save() \u0438 store() \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 canvas, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b \u0432 <a href=\"https:\/\/habr.com\/ru\/articles\/762132\/\" rel=\"noopener noreferrer nofollow\">\u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438<\/a> \u0434\u043b\u044f &#171;\u0437\u0430\u043c\u043e\u0440\u043e\u0437\u043a\u0438&#187; \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u0430\u043d\u0432\u0430\u0441\u0430 \u043f\u0435\u0440\u0435\u0434 \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u043e\u043c \u0438 \u043f\u0440\u043e\u0440\u0438\u0441\u043e\u0432\u043a\u043e\u0439 \u0447\u0430\u0441\u0442\u0438\u0446. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/CanvasRenderingContext2D\/translate\" rel=\"noopener noreferrer nofollow\">translate()<\/a> \u043c\u044b \u043a\u0430\u043a \u0431\u044b &#171;\u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u043c&#187; 2D \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043a\u0430\u043d\u0432\u0430\u0441\u0430 (\u0435\u0433\u043e \u043b\u0435\u0432\u044b\u0439 \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u0443\u0433\u043e\u043b) \u0432 \u0446\u0435\u043d\u0442\u0440 \u0448\u0435\u0441\u0442\u0435\u0440\u0435\u043d\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u0448\u0435\u0441\u0442\u0435\u0440\u0435\u043d\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u044b \u0437\u0430\u0442\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/CanvasRenderingContext2D\/rotate\" rel=\"noopener noreferrer nofollow\">rotate()<\/a> \u0431\u044b\u043b\u043e \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0435\u0451 \u0446\u0435\u043d\u0442\u0440\u0430, \u0430 \u043d\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043b\u0435\u0432\u043e\u0433\u043e \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0433\u043b\u0430 \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u043e\u0442\u043d\u0430. \u041d\u0443 \u0430 \u043f\u0440\u043e \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 drawImage() \u0441 9-\u044e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0412\u044b \u0443\u0436\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0437\u043d\u0430\u0442\u044c.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0432\u043d\u0435\u0441\u0435\u043c \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \u0432 \u043a\u043b\u0430\u0441\u0441 Game.<\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0448\u0435\u0441\u0442\u0435\u0440\u0435\u043d\u043e\u043a:<\/p>\n<pre><code class=\"javascript\">this.particles = [];<\/code><\/pre>\n<p>\u0430 \u0442\u0430\u043a\u0436\u0435 \u043c\u0435\u0442\u043e\u0434 <code>addParticles(number, enemy)<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0432 \u044d\u0442\u043e\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 <code>number<\/code> \u0448\u0435\u0441\u0442\u0435\u0440\u0435\u043d\u043e\u043a \u0434\u043b\u044f \u0432\u0440\u0430\u0433\u0430 <code>enemy<\/code>:<\/p>\n<pre><code class=\"javascript\">addParticles(number, enemy) {     for (let i = 0; i &lt; number; i++) {         this.particles.push(new Particle(this, enemy.x + enemy.width * 0.5, enemy.y + enemy.height * 0.5));     }; }<\/code><\/pre>\n<p>\u0432 \u043c\u0435\u0442\u043e\u0434\u0435 update() \u043a\u043b\u0430\u0441\u0441\u0430 Game \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 addParticles() \u043f\u0440\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445, \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0445 \u0432\u044b\u0448\u0435, \u0442.\u0435. \u043a\u043e\u0433\u0434\u0430 \u0432\u0440\u0430\u0433 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u0441 \u043c\u043e\u0440\u0441\u043a\u0438\u043c \u043a\u043e\u043d\u044c\u043a\u043e\u043c \u0438 \u043f\u0440\u0438 \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u0438 \u043f\u0443\u043b\u0438 \u0432\u043e \u0432\u0440\u0430\u0433\u0430.<\/p>\n<p><a class=\"anchor\" name=\"hive_whale_drones_and_explosions\" id=\"hive_whale_drones_and_explosions\"><\/a><\/p>\n<h2>Hive Whale \u043a\u043b\u0430\u0441\u0441, \u0434\u0440\u043e\u043d\u044b \u0438 \u0432\u0437\u0440\u044b\u0432\u044b<\/h2>\n<p>\u0410\u0432\u0442\u043e\u0440 \u0432 \u043a\u043e\u043d\u0446\u0435 \u0432\u0438\u0434\u0435\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0442\u0438\u043f \u0432\u0440\u0430\u0433\u0430 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c Hive Whale, \u043f\u0440\u0438 \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0435\u043d\u0438\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0438\u0437 \u043d\u0435\u0433\u043e \u0432\u044b\u043b\u0435\u0442\u0430\u044e\u0442 (\u0430 \u0442\u043e\u0447\u043d\u0435\u0435 \u0432\u044b\u043f\u043b\u044b\u0432\u0430\u044e\u0442) \u043f\u044f\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0434\u0440\u043e\u043d\u043e\u0432, \u0441\u043c. \u0440\u0438\u0441\u0443\u043d\u043e\u043a 17:<\/p>\n<figure class=\"bordered full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/6c4\/06d\/ec8\/6c406dec829d6e4cc227b3483e3aad6f.png\" alt=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 17. Hive Whale \u043a\u043b\u0430\u0441\u0441, \u0434\u0440\u043e\u043d\u044b \u0438 \u0432\u0437\u0440\u044b\u0432\u044b.\" title=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 17. Hive Whale \u043a\u043b\u0430\u0441\u0441, \u0434\u0440\u043e\u043d\u044b \u0438 \u0432\u0437\u0440\u044b\u0432\u044b.\" width=\"577\" height=\"357\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/6c4\/06d\/ec8\/6c406dec829d6e4cc227b3483e3aad6f.png\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 17. Hive Whale \u043a\u043b\u0430\u0441\u0441, \u0434\u0440\u043e\u043d\u044b \u0438 \u0432\u0437\u0440\u044b\u0432\u044b.<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u0440\u0438 \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0435\u043d\u0438\u0438 \u0432\u0440\u0430\u0433\u0430 \u0438 \u043f\u0440\u0438 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0438 \u0435\u0433\u043e \u0441 \u0433\u043b\u0430\u0432\u043d\u044b\u043c \u0438\u0433\u0440\u043e\u043a\u043e\u043c \u2014 \u043d\u0430 \u043c\u0435\u0441\u0442\u0435 \u0432\u0440\u0430\u0433\u0430 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u044d\u0444\u0444\u0435\u043a\u0442 \u0432\u0437\u0440\u044b\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u0432\u0430\u0435\u0442 \u0434\u0432\u0443\u0445 \u0442\u0438\u043f\u043e\u0432 \u2014 Dust (\u043f\u044b\u043b\u044c) \u0438 Fire (\u043e\u0433\u043e\u043d\u044c). <\/p>\n<p>\u042f \u043d\u0435 \u0431\u0443\u0434\u0443 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 (\u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u0430-\u0432\u0440\u0430\u0433\u0430 Hive Whale, \u0434\u0440\u043e\u043d\u043e\u0432 \u0438 \u0432\u0437\u0440\u044b\u0432\u043e\u0432), \u0430 \u043e\u0441\u0442\u0430\u0432\u043b\u044e \u043b\u0438\u0448\u044c \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435: <a href=\"https:\/\/github.com\/greenDev7\/JavaScript-Game.-Full-Version\/commit\/1a8eae7aa23e1dab0de4c09b3c068463b4351616\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 Hive Whale \u0438 \u0434\u0440\u043e\u043d\u043e\u0432<\/a>, <a href=\"https:\/\/github.com\/greenDev7\/JavaScript-Game.-Full-Version\/commit\/d60f81d5f162526f80bceb44a2d03229fbcb0f39\" rel=\"noopener noreferrer nofollow\">\u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0432\u0437\u0440\u044b\u0432\u043e\u0432<\/a>. <\/p>\n<p>\u041e\u0441\u0442\u0430\u0432\u043b\u044e \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u0430\u043c\u043e\u043c\u0443 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u043a\u0430\u043c\u0438, \u0442\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u0447\u0442\u043e \u043f\u043e\u0447\u0442\u0438 \u0432\u0435\u0441\u044c \u044d\u0442\u043e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043f\u043e\u0434\u043e\u0431\u0435\u043d \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u0432\u044b\u0448\u0435.<\/p>\n<p><a class=\"anchor\" name=\"adapt_to_mobile_devices\" id=\"adapt_to_mobile_devices\"><\/a><\/p>\n<h2>\u0410\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432<\/h2>\n<p>\u041a\u0430\u043a \u0441\u043f\u0440\u0430\u0432\u0435\u0434\u043b\u0438\u0432\u043e <a href=\"https:\/\/habr.com\/ru\/articles\/762132\/#comment_26052362\" rel=\"noopener noreferrer nofollow\">\u0437\u0430\u043c\u0435\u0442\u0438\u043b\u0438<\/a> \u0432 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438, \u0438\u0433\u0440\u0430\u0442\u044c \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u0432 \u044d\u0442\u0443 \u0438\u0433\u0440\u0443 \u043d\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u044d\u0442\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u043c.<\/p>\n<p>\u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u0431\u044b\u043b\u043e \u0431\u044b \u043d\u0435\u043f\u043b\u043e\u0445\u043e \u043a\u0430\u043a-\u0442\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u0438 \u043d\u0430\u0448\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u043c, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u0434\u0435\u043b\u0438\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u0434\u043b\u044f \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u0438. \u0414\u043e\u043b\u0433\u043e \u0434\u0443\u043c\u0430\u0442\u044c \u044f \u043d\u0435 \u0445\u043e\u0442\u0435\u043b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u0448\u0435\u043b \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 <a href=\"https:\/\/stackoverflow.com\/questions\/11381673\/detecting-a-mobile-browser\" rel=\"noopener noreferrer nofollow\">\u043a\u0443\u0441\u043e\u0447\u0435\u043a \u043a\u043e\u0434\u0430<\/a>, \u0430 \u0442\u043e\u0447\u043d\u0435\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0434\u0430\u0441\u0442 \u043d\u0430\u043c \u043f\u043e\u043d\u044f\u0442\u044c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u0438 \u043d\u0430\u0448\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u043c \u0438\u043b\u0438 \u043d\u0435\u0442. <\/p>\n<p>\u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0438\u0433\u0440\u043e\u043a\u0430 (\u0430 \u0438\u043c\u0435\u043d\u043d\u043e, \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0432\u0432\u0435\u0440\u0445\/\u0432\u043d\u0438\u0437 \u0438 \u0441\u0442\u0440\u0435\u043b\u044c\u0431\u0443) \u043a \u0442\u0430\u0447\u043f\u0430\u0434\u0443, \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043b\u0435\u0433\u043a\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u0433\u0440\u043e\u043a\u043e\u043c. \u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0442\u0430\u0447\u043f\u0430\u0434\u043e\u043c \u0432 \u044f\u0437\u044b\u043a\u0435 JavaScript \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u043a\u0430\u043a <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/Touch_events\" rel=\"noopener noreferrer nofollow\">Touch events<\/a>. \u0414\u043b\u044f \u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u044d\u0442\u0438\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0435\u0449\u0435 \u043e\u0434\u043d\u0443 \u0441\u0442\u0430\u0442\u044c\u044e. \u0412\u043e\u0442 <a href=\"https:\/\/www.codeguage.com\/courses\/js\/touch-events-introduction\" rel=\"noopener noreferrer nofollow\">\u0442\u0443\u0442 <\/a>\u0435\u0441\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e, \u043a\u0430\u043a \u0438 \u044f, \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437 \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441 \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u043c\u0438 \u043a\u0430\u0441\u0430\u043d\u0438\u044f.<\/p>\n<p>\u041d\u0443 \u0438 \u0432-\u0442\u0440\u0435\u0442\u044c\u0438\u0445, \u0434\u043b\u044f \u0441\u0442\u0440\u0435\u043b\u044c\u0431\u044b \u044f \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u0440\u0435\u0448\u0438\u043b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443 \u043d\u0430 \u0438\u0433\u0440\u043e\u0432\u043e\u043c \u043f\u043e\u043b\u0435. \u0412\u043e\u0442 \u0442\u0430\u043a \u0432\u043e\u0442! =) \u041c\u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u044d\u0442\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0443\u0434\u043e\u0431\u043d\u044b\u043c \u0438 &#171;\u0438\u0433\u0440\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u043c&#187; \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u043c.<\/p>\n<p>\u0421\u043e\u0431\u0435\u0440\u0435\u043c \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u0435 \u044d\u0442\u043e \u0432\u043c\u0435\u0441\u0442\u0435.<\/p>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 index.html \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u0434\u043b\u044f \u0441\u0442\u0440\u0435\u043b\u044c\u0431\u044b (\u043f\u043e \u0441\u0443\u0442\u0438 \u2014 \u044d\u0442\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435) \u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u043d\u0430\u0448 \u043a\u0430\u043d\u0432\u0430\u0441 \u0438 \u044d\u0442\u0443 \u043a\u043d\u043e\u043f\u043a\u0443 \u0432 div-\u044d\u043b\u0435\u043c\u0435\u043d\u0442:<\/p>\n<pre><code class=\"xml\">&lt;div id=\"container\">     &lt;canvas id=\"canvas1\">&lt;\/canvas>     &lt;img id=\"shoot_btn\" src=\"Assets\/shoot_button.png\">&lt;\/img> &lt;\/div><\/code><\/pre>\n<p>\u0441\u0430\u043c\u0443 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u044f \u043d\u0430\u0448\u0435\u043b \u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u043e\u0440\u0430\u0445 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430 \u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043b \u0432 \u043f\u0430\u043f\u043a\u0443 Assets:<\/p>\n<details class=\"spoiler\">\n<summary>Shoot button<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/52a\/7cf\/4df\/52a7cf4df4bc03b960acd8ca8f5b2f43.png\" alt=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 18. \u041a\u043d\u043e\u043f\u043a\u0430 \u0434\u043b\u044f \u0441\u0442\u0440\u0435\u043b\u044c\u0431\u044b.\" title=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 18. \u041a\u043d\u043e\u043f\u043a\u0430 \u0434\u043b\u044f \u0441\u0442\u0440\u0435\u043b\u044c\u0431\u044b.\" width=\"599\" height=\"604\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/52a\/7cf\/4df\/52a7cf4df4bc03b960acd8ca8f5b2f43.png\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 18. \u041a\u043d\u043e\u043f\u043a\u0430 \u0434\u043b\u044f \u0441\u0442\u0440\u0435\u043b\u044c\u0431\u044b.<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u0430 \u043a\u043d\u043e\u043f\u043a\u0430 \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b\u0430\u0441\u044c \u0432 \u043f\u0440\u0430\u0432\u043e\u043c \u043d\u0438\u0436\u043d\u0435\u043c \u0443\u0433\u043b\u0443 \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044f:<\/p>\n<details class=\"spoiler\">\n<summary>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 style.css<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"css\">#canvas1 {     border: 5px solid black;     position: absolute;     \/* top: 50%; *\/     \/* left: 50%; *\/     \/* transform: translate(-50%, -50%); *\/     background: #4d79bc;     \/* max-width: 100%;     max-height: 100%; *\/     font-family: 'Bangers', cursive; }  #description {     text-align: center;     margin: 20px auto 20px auto;     width: 1500px; }  #container {     position: relative;     margin: auto;     width: 1510px;     height: 510px; }  #shoot_btn {     position: absolute;     display: none;     width: 120px;     height: 120px;     bottom: 15px;     right: 45px; }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041a\u0430\u043a \u0432\u044b \u0437\u0430\u043c\u0435\u0442\u0438\u043b\u0438, \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u044d\u0442\u0430 \u043a\u043d\u043e\u043f\u043a\u0430 \u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f (<code>display: none;<\/code>). \u042d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u044f \u0431\u0443\u0434\u0443 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e \u0432 \u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043e \u043a\u0430\u043a \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0435.<\/p>\n<p>\u041f\u043e\u0434\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b script.js:<\/p>\n<pre><code class=\"javascript\">function isMobileOrTablet() {     let check = false;     (function (a) { if (\/(android|bb\\d+|meego).+mobile|avantgo|bada\\\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\\\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk\/i.test(a) || \/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\\-(n|u)|c55\\\/|capi|ccwa|cdm\\-|cell|chtm|cldc|cmd\\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\\-s|devi|dica|dmob|do(c|p)o|ds(12|\\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\\-|_)|g1 u|g560|gene|gf\\-5|g\\-mo|go(\\.w|od)|gr(ad|un)|haie|hcit|hd\\-(m|p|t)|hei\\-|hi(pt|ta)|hp( i|ip)|hs\\-c|ht(c(\\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\\-(20|go|ma)|i230|iac( |\\-|\\\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\\\/)|klon|kpt |kwc\\-|kyo(c|k)|le(no|xi)|lg( g|\\\/(k|l|u)|50|54|\\-[a-w])|libw|lynx|m1\\-w|m3ga|m50\\\/|ma(te|ui|xo)|mc(01|21|ca)|m\\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\\-2|po(ck|rt|se)|prox|psio|pt\\-g|qa\\-a|qc(07|12|21|32|60|\\-[2-7]|i\\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\\\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\\-|oo|p\\-)|sdk\\\/|se(c(\\-|0|1)|47|mc|nd|ri)|sgh\\-|shar|sie(\\-|m)|sk\\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\\-|v\\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\\-|tdg\\-|tel(i|m)|tim\\-|t\\-mo|to(pl|sh)|ts(70|m\\-|m3|m5)|tx\\-9|up(\\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\\-|your|zeto|zte\\-\/i.test(a.substr(0, 4))) check = true; })(navigator.userAgent || navigator.vendor || window.opera);     return check; }  const game = new Game(canvas.width, canvas.height, isMobileOrTablet());<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0432\u044b\u0448\u0435\u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u043c, \u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u043a\u043b\u0430\u0441\u0441\u0430 Game.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b MobileDeviceAdapter.js \u0441 \u043e\u0434\u043d\u043e\u0438\u043c\u0435\u043d\u043d\u044b\u043c \u043a\u043b\u0430\u0441\u0441\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u0437\u0430 \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u044e \u043d\u0430\u0448\u0435\u0439 \u0438\u0433\u0440\u044b \u043a \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u043c. \u0412\u043e\u0442 \u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435:<\/p>\n<pre><code class=\"javascript\">class MobileDeviceAdapter {      static handleShootButton(game) {         let shootButton = document.getElementById(\"shoot_btn\");         shootButton.addEventListener('click', () => {             game.player.shootTop();         });     }      static handleTouchPad(game) {         let canvas = document.getElementById(\"canvas1\");         let initialY;          canvas.addEventListener('touchstart', (e) => {             e.preventDefault();             initialY = e.touches[0].clientY;         });          canvas.addEventListener('touchmove', (e) => {             let deltaY = e.touches[0].clientY - initialY;             initialY = e.touches[0].clientY;              if (deltaY &lt; 0) {                 game.keys.add('ArrowUp');                 game.keys.delete('ArrowDown');             } else if (deltaY > 0) {                 game.keys.add('ArrowDown');                 game.keys.delete('ArrowUp');             } else \/* if (deltaY === 0) *\/ {                 game.keys.clear();             }         });          canvas.addEventListener('touchend', (e) => {             game.keys.clear();         });     }      static handleUI() {         \/\/ \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \"Shoot\"         document.getElementById(\"shoot_btn\").style.display = \"Block\";         \/\/ \u0438 \u043c\u0435\u043d\u044f\u0435\u043c \u043d\u0430\u0434\u043f\u0438\u0441\u044c \u0441 \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c\u0438 \u0438\u0433\u0440\u044b         document.getElementById(\"description\").innerText = \"\u041f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0439 \u043c\u043e\u0440\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043d\u044c\u043a\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0430\u0447\u043f\u0430\u0434\u0430 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439 \u043a\u043d\u043e\u043f\u043a\u0443 \u0432 \u043f\u0440\u0430\u0432\u043e\u043c \u043d\u0438\u0436\u043d\u0435\u043c \u0443\u0433\u043b\u0443 \u0434\u043b\u044f \u0441\u0442\u0440\u0435\u043b\u044c\u0431\u044b. \\n\" +             \"\u0414\u043b\u044f \u043f\u043e\u0431\u0435\u0434\u044b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u0430 30 \u0441\u0435\u043a\u0443\u043d\u0434 \u043d\u0430\u0431\u0440\u0430\u0442\u044c 100 \u043e\u0447\u043a\u043e\u0432\";     } }<\/code><\/pre>\n<p>\u0432 \u043a\u043b\u0430\u0441\u0441\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0442\u0440\u0438 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0445 \u043c\u0435\u0442\u043e\u0434\u0430. \u0412 \u043c\u0435\u0442\u043e\u0434\u0435 <code>handleShootButton(game)<\/code> \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043d\u043e\u043f\u043a\u0438 &#171;Shoot&#187;; \u043c\u0435\u0442\u043e\u0434 <code>handleUI()<\/code> \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0438\u0433\u0440\u044b \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0438 \u0434\u0435\u043b\u0430\u0435\u0442 \u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0443 \u0434\u043b\u044f \u0441\u0442\u0440\u0435\u043b\u044c\u0431\u044b. \u0410 \u0432\u043e\u0442 \u0441\u0430\u043c\u043e\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435 \u2014 \u044d\u0442\u043e \u0442\u0435\u043b\u043e \u043c\u0435\u0442\u043e\u0434\u0430 <code>handleTouchPad(game)<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043a\u0430\u0441\u0430\u043d\u0438\u044f. <\/p>\n<p>\u0421\u043e\u0431\u044b\u0442\u0438\u044f \u043a\u0430\u0441\u0430\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u044f\u043c\u043e \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 canvas. \u0415\u0441\u043b\u0438 \u043a\u0440\u0430\u0442\u043a\u043e \u2014 \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u043a\u0430\u0441\u0430\u043d\u0438\u044f (<code>touchstart<\/code>) \u043c\u044b \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0443\u044e y-\u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0443 \u0442\u043e\u0447\u043a\u0438 \u043a\u0430\u0441\u0430\u043d\u0438\u044f (<code>initialY<\/code>). \u0437\u0430\u0442\u0435\u043c \u043f\u0440\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0438 \u0432\u0432\u0435\u0440\u0445\/\u0432\u043d\u0438\u0437 (\u0441\u043e\u0431\u044b\u0442\u0438\u0435 <code>touchmove<\/code>), \u043c\u044b \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u0440\u0430\u0437\u043d\u043e\u0441\u0442\u044c \u043c\u0435\u0436\u0434\u0443 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u043e\u0439 \u043a\u0430\u0441\u0430\u043d\u0438\u044f \u0438 <code>initialY<\/code> \u0438 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u044d\u0442\u0443 \u0440\u0430\u0437\u043d\u043e\u0441\u0442\u044c \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <code>deltaY<\/code>, \u0430 \u043f\u043e\u0442\u043e\u043c \u043f\u0435\u0440\u0435\u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u043c <code>initialY<\/code> \u0442\u0435\u043a\u0443\u0449\u0443\u044e y-\u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0443. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043f\u043e \u0437\u043d\u0430\u043a\u0443 <code>deltaY<\/code> \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043d\u044f\u0442\u044c \u043a\u0443\u0434\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043e \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0442\u0430\u0447\u043f\u0430\u0434\u0435 (\u0432\u0432\u0435\u0440\u0445 \u0438\u043b\u0438 \u0432\u043d\u0438\u0437) \u0438 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c\/\u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0438\u0437 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430<code>game.keys<\/code> \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f (ArrowUp \u0438\u043b\u0438 ArrowDown). \u041d\u0443 \u0430 \u0437\u0430\u0442\u0435\u043c \u0432 \u0434\u0435\u043b\u043e \u0432\u0441\u0442\u0443\u043f\u0430\u044e\u0442 \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u0435 \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e \u043d\u0430\u0431\u043e\u0440\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0432 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0435<code>game.keys<\/code> \u0434\u0432\u0438\u0433\u0430\u044e\u0442 \u043c\u043e\u0440\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043d\u044c\u043a\u0430 \u0432\u0432\u0435\u0440\u0445 \u0438\u043b\u0438 \u0432\u043d\u0438\u0437. \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0442\u0430\u0447\u043f\u0430\u0434\u0435 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f (\u0441\u043e\u0431\u044b\u0442\u0438\u0435 <code>touchend<\/code>), \u043c\u044b \u043e\u0447\u0438\u0449\u0430\u0435\u043c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e <code>game.keys<\/code> \u0438 \u0438\u0433\u0440\u043e\u043a \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f.<\/p>\n<p>\u041e\u0434\u043d\u043e\u0439 \u0438\u0437 \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u043d\u043e \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u043e\u0439, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e, \u0447\u0442\u043e \u043c\u043e\u0440\u0441\u043a\u043e\u0439 \u043a\u043e\u043d\u044c \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u0432\u0432\u0435\u0440\u0445\/\u0432\u043d\u0438\u0437 \u0438 \u0441\u0442\u0440\u0435\u043b\u044f\u0442\u044c. \u0425\u043e\u0442\u044f \u044d\u0442\u043e \u043f\u043e\u0447\u0442\u0438 \u043d\u0435 \u043c\u0435\u0448\u0430\u0435\u0442 \u043f\u043e\u0431\u0435\u0436\u0434\u0430\u0442\u044c \u0432 \u0438\u0433\u0440\u0435. \u041f\u043e\u0441\u043b\u0435 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0434\u043e\u043b\u0433\u0438\u0445 \u0443\u0441\u0438\u043b\u0438\u0439 \u0440\u0435\u0448\u0438\u0442\u044c \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u044f \u0440\u0435\u0448\u0438\u043b \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0442\u0430\u043a \u043a\u0430\u043a \u0435\u0441\u0442\u044c. \u0415\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u043c\u044b\u0441\u043b\u0438 \u043a\u0430\u043a \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u2014 \u0431\u0443\u0434\u0443 \u0440\u0430\u0434 \u0443\u0441\u043b\u044b\u0448\u0430\u0442\u044c.<\/p>\n<p>\u041d\u0443 \u0438 \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 Game \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0442\u0440\u0438 \u044d\u0442\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u0430:<\/p>\n<pre><code class=\"javascript\">constructor(width, height, isMobileOrTablet) {     \/\/ ...     if (isMobileOrTablet) {         MobileDeviceAdapter.handleShootButton(this);         MobileDeviceAdapter.handleTouchPad(this);         MobileDeviceAdapter.handleUI();     } else {         this.input = new InputHandler(this);     } }<\/code><\/pre>\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0430 \u043c\u043e\u0435\u043c \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/b57\/bf8\/227\/b57bf82276ffc42ec0b76bfb95b6e22c.jpg\" alt=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 19. \u041c\u043e\u0431\u0438\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0438\u0433\u0440\u044b.\" title=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 19. \u041c\u043e\u0431\u0438\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0438\u0433\u0440\u044b.\" width=\"1280\" height=\"576\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b57\/bf8\/227\/b57bf82276ffc42ec0b76bfb95b6e22c.jpg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 19. \u041c\u043e\u0431\u0438\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0438\u0433\u0440\u044b.<\/figcaption><\/div>\n<\/figure>\n<p>\u0412 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u043e\u0442 \u0442\u0430\u043a\u0443\u044e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443, \u0447\u0442\u043e\u0431\u044b &#171;\u0438\u0433\u0440\u0430 \u043f\u043e\u043d\u044f\u043b\u0430&#187;, \u0447\u0442\u043e \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0438\u043c\u0435\u043d\u043d\u043e \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e. \u0414\u0430\u043d\u043d\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0443 \u043c\u0435\u043d\u044f \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<details class=\"spoiler\">\n<summary>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b70\/6f2\/119\/b706f2119df8de4f7f0ac2fb5ab2aa4d.png\" alt=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 20. \u0423\u0431\u0438\u0440\u0430\u0435\u043c \u0433\u0430\u043b\u043e\u0447\u043a\u0443 \u0432 \u043e\u043f\u0446\u0438\u0438 &quot;\u0412\u0435\u0440\u0441\u0438\u044f \u0434\u043b\u044f \u041f\u041a&quot;.\" title=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 20. \u0423\u0431\u0438\u0440\u0430\u0435\u043c \u0433\u0430\u043b\u043e\u0447\u043a\u0443 \u0432 \u043e\u043f\u0446\u0438\u0438 &quot;\u0412\u0435\u0440\u0441\u0438\u044f \u0434\u043b\u044f \u041f\u041a&quot;.\" width=\"748\" height=\"653\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b70\/6f2\/119\/b706f2119df8de4f7f0ac2fb5ab2aa4d.png\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 20. \u0423\u0431\u0438\u0440\u0430\u0435\u043c \u0433\u0430\u043b\u043e\u0447\u043a\u0443 \u0432 \u043e\u043f\u0446\u0438\u0438 &#171;\u0412\u0435\u0440\u0441\u0438\u044f \u0434\u043b\u044f \u041f\u041a&#187;.<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p><a class=\"anchor\" name=\"conclusion\" id=\"conclusion\"><\/a><\/p>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>\u041a\u0430\u043a \u0438 \u043e\u0431\u0435\u0449\u0430\u043b \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0441\u0442\u0430\u0442\u044c\u0438, \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e\u0431 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u043b\u0438 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u0438 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438.<\/p>\n<p>\u0414\u043b\u044f \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u0438 \u0438\u0433\u0440\u044b \u043a \u0432\u0430\u0448\u0435\u0439 \u0447\u0430\u0441\u0442\u043e\u0442\u0435 \u0441\u043c\u0435\u043d\u044b \u043a\u0430\u0434\u0440\u043e\u0432 \u0431\u044b\u043b\u0438 \u0432\u043d\u0435\u0441\u0435\u043d\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 <a href=\"https:\/\/github.com\/greenDev7\/JavaScript-Game.-Full-Version\/commit\/45424d43916d7fffe444ac581f5de9fa5dff0028\" rel=\"noopener noreferrer nofollow\">\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f<\/a>. \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 deltaTime \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0432\u043e \u0432\u0441\u0435 \u043c\u0435\u0442\u043e\u0434\u044b update() \u0434\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0433\u043e \u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\/\u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0435\u0439\/\u0443\u0433\u043b\u0430 \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432. \u041d\u0430\u0441\u0447\u0435\u0442 \u0441\u043c\u0435\u043d\u044b \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439, \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043b.<\/p>\n<p>\u041c\u0430\u0441\u0441\u0438\u0432 <code>this.keys<\/code> \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 Game <a href=\"https:\/\/github.com\/greenDev7\/JavaScript-Game.-Full-Version\/commit\/b4d4345e188f3362a6b686d1eac167d5db6a384e\" rel=\"noopener noreferrer nofollow\">\u0437\u0430\u043c\u0435\u043d\u0438\u043b<\/a> \u043d\u0430 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e <code>Set()<\/code>.<\/p>\n<p>\u0414\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u0439 (\u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0439) \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0438 \u0441\u0442\u043e\u0438\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u043a\u0430\u043a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Intersection_Observer_API\" rel=\"noopener noreferrer nofollow\">Intersection Observer API<\/a>, \u043d\u043e \u0432 \u0434\u0430\u043d\u043d\u043e\u0439 \u0438\u0433\u0440\u0435 \u044f \u0440\u0435\u0448\u0438\u043b \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e.<\/p>\n<p>\u041d\u0430\u0434\u0435\u044e\u0441\u044c \u0441\u0442\u0430\u0442\u044c\u044f \u0431\u044b\u043b\u0430 \u0434\u043b\u044f \u0412\u0430\u0441 \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439!<\/p>\n<p>\u0412\u0441\u0435\u043c \u0434\u043e\u0431\u0440\u0430 \u0438 \u0447\u0438\u0441\u0442\u043e\u0433\u043e \u043a\u043e\u0434\u0430!<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/769150\/\"> https:\/\/habr.com\/ru\/articles\/769150\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041f\u0440\u0438\u0432\u0435\u0442 \u0432\u0441\u0435\u043c!<\/p>\n<p>\u0412 <a href=\"https:\/\/habr.com\/ru\/articles\/762132\/\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435<\/a> \u043c\u044b \u043d\u0430\u0447\u0430\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u0443\u044e 2D \u0438\u0433\u0440\u0443 \u043d\u0430 \u044f\u0437\u044b\u043a\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f JavaScript \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 Canvas. \u0411\u044b\u043b \u0441\u043e\u0437\u0434\u0430\u043d \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f \u0438\u0433\u0440\u044b, \u0433\u0434\u0435 \u0432\u043c\u0435\u0441\u0442\u043e \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u0433\u0435\u0440\u043e\u044f \u0443 \u043d\u0430\u0441 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u043d\u044b\u0439 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a, \u0441\u0442\u0440\u0435\u043b\u044f\u044e\u0449\u0438\u0439 \u0436\u0435\u043b\u0442\u044b\u043c\u0438 &#171;\u043f\u0443\u043b\u044f\u043c\u0438&#187;, \u0430 \u0432\u0440\u0430\u0433\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0438\u0437 \u0441\u0435\u0431\u044f \u0434\u0432\u0438\u0436\u0443\u0449\u0438\u0435\u0441\u044f \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438 \u043a\u0440\u0430\u0441\u043d\u043e\u0433\u043e \u0438 \u0437\u0435\u043b\u0435\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430. \u0414\u043b\u044f \u043f\u043e\u0431\u0435\u0434\u044b \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u0433\u0435\u0440\u043e\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0438\u0442\u044c n-\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u0438\u043a\u043e\u0432 \u0437\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f. \u0412\u043e\u0442 \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u043e:<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 1. \u041f\u0440\u043e\u0442\u043e\u0442\u0438\u043f \u0438\u0433\u0440\u044b<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u043c \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0443 \u0438\u0433\u0440\u0443.<\/p>\n<p>\u0412 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \u043a \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0431\u044b\u043b\u0438 \u0434\u0430\u043d\u044b \u0446\u0435\u043d\u043d\u044b\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044e \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0430. \u041e \u043d\u0438\u0445 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u0432 \u043a\u043e\u043d\u0446\u0435 \u0441\u0442\u0430\u0442\u044c\u0438.<\/p>\n<p>\u041f\u043e\u0438\u0433\u0440\u0430\u0442\u044c \u0432 \u043f\u043e\u043b\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/greendev7.github.io\/JavaScript-Game.-Full-Version\/\" rel=\"noopener noreferrer nofollow\">\u0442\u0443\u0442<\/a>. \u041f\u0440\u043e\u0435\u043a\u0442 \u043b\u0435\u0436\u0438\u0442 <a href=\"https:\/\/github.com\/greenDev7\/JavaScript-Game.-Full-Version\" rel=\"noopener noreferrer nofollow\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<h2>\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/h2>\n<ul>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/articles\/769150\/#background\" rel=\"noopener noreferrer nofollow\">\u0411\u044d\u043a\u0433\u0440\u0430\u0443\u043d\u0434<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/articles\/769150\/#sprites\" rel=\"noopener noreferrer nofollow\">\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0435\u0439. \u0421\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442\u044b<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/articles\/769150\/#enemy_animation\" rel=\"noopener noreferrer nofollow\">\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0432\u0440\u0430\u0433\u043e\u0432<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/articles\/769150\/#lucky_fish_and_power_up_mode\" rel=\"noopener noreferrer nofollow\">\u0420\u044b\u0431\u043a\u0430-\u0443\u0434\u0430\u0447\u0430 \u0438 Power-up \u0440\u0435\u0436\u0438\u043c<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/articles\/769150\/#projectiles_and_font\" rel=\"noopener noreferrer nofollow\">\u041f\u0443\u043b\u0438 \u0438 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/articles\/769150\/#particles_rotation_and_gravitation\" rel=\"noopener noreferrer nofollow\">\u041e\u0442\u043b\u0435\u0442\u0430\u044e\u0449\u0438\u0435 \u0448\u0435\u0441\u0442\u0435\u0440\u0435\u043d\u043a\u0438. \u0412\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u0438 \u0433\u0440\u0430\u0432\u0438\u0442\u0430\u0446\u0438\u044f<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/articles\/769150\/#hive_whale_drones_and_explosions\" rel=\"noopener noreferrer nofollow\">Hive Whale \u043a\u043b\u0430\u0441\u0441, \u0434\u0440\u043e\u043d\u044b \u0438 \u0432\u0437\u0440\u044b\u0432\u044b<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/articles\/769150\/#adapt_to_mobile_devices\" rel=\"noopener noreferrer nofollow\">\u0410\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/articles\/769150\/#conclusion\" rel=\"noopener noreferrer nofollow\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/a><\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"background\" id=\"background\"><\/a><\/p>\n<h2>\u0411\u044d\u043a\u0433\u0440\u0430\u0443\u043d\u0434<\/h2>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 index.html \u0443\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 .png-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0432 \u043d\u0430\u0448\u0435\u0439 \u0438\u0433\u0440\u0435. \u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u043e\u043d\u0438 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u044b \u043d\u0430 \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0435 \u0431\u043b\u043e\u043a\u0438 (\u043e\u0442\u0434\u0435\u043b\u0435\u043d\u044b \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u043c\u0438).  \u0412 \u0431\u043b\u043e\u043a\u0435 &#171;Environment&#187; \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u0444\u043e\u043d\u0430:<\/p>\n<details class=\"spoiler\">\n<summary>\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0432 index.html<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\">\n<div><figcaption>\u041a\u043e\u0434 1. \u0412 \u0431\u043b\u043e\u043a\u0435 Environment \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u0431\u044d\u043a\u0433\u0440\u0430\u0443\u043d\u0434\u0430<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 style.css \u0432\u0441\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0443\u0436\u043d\u043e &#171;\u0441\u043a\u0440\u044b\u0442\u044c&#187;, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b\u0438\u0441\u044c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0431\u044d\u043a\u0433\u0440\u0430\u0443\u043d\u0434\u0430 \u043e\u043a\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0441\u043c. \u043a\u043e\u0434 2.<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 style.css<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\">\n<div><figcaption>\u041a\u043e\u0434 2. \u0421\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u043d\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u0432\u0441\u0435\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/display#none\" rel=\"noopener noreferrer nofollow\">display \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c none<\/a> \u2014 \u043c\u043e\u0436\u043d\u043e \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u043a\u0430\u043a\u043e\u0435-\u043b\u0438\u0431\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 (\u0442\u043e\u0447\u043d\u0435\u0435 \u0435\u0433\u043e id) \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430, \u0430 \u043b\u0443\u0447\u0448\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e, \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0447\u0442\u043e \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0432\u044b\u0439\u0434\u0435\u0442.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0443\u0436\u0435 \u043d\u0430\u043a\u043e\u043d\u0435\u0446 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0444\u043e\u043d. <\/p>\n<p>\u0412 \u0444\u0430\u0439\u043b Layer.js \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">class Layer {     constructor(game, image, speedModifier) {         this.game = game;         this.image = image;         this.speedModifier = speedModifier;         this.width = 1768;         this.height = 500;         this.x = 0;         this.y = 0;     }     update() {         if (this.x &lt;= -this.width) this.x = 0;         else this.x -= this.game.speed * this.speedModifier;     }     draw(context) {         context.drawImage(this.image, this.x, this.y);         context.drawImage(this.image, this.x + this.width, this.y);     } }<\/code><\/pre>\n<p>\u041a\u0430\u043a \u0432\u044b \u0443\u0436\u0435 \u0434\u043e\u0433\u0430\u0434\u0430\u043b\u0438\u0441\u044c, \u043a\u043b\u0430\u0441\u0441 Layer \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u0437\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u0441\u043b\u043e\u0439 \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u0444\u043e\u043d\u0430 \u0438 \u0442\u0430\u043a\u0438\u0445 \u0441\u043b\u043e\u0435\u0432 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e (\u043f\u043e \u0447\u0438\u0441\u043b\u0443 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a). \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>game<\/code> \u2014 \u044d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442 \u043d\u0430\u0448\u0435\u0439 \u0438\u0433\u0440\u044b; <code>image<\/code> \u2014 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u0434\u043b\u044f \u0444\u043e\u043d\u0430; <code>speedModifier<\/code> \u2014 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f, \u2014 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0435\u0432 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0441\u0430\u043c\u043e\u0439 \u0438\u0433\u0440\u044b, \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0437\u0430\u0434\u043d\u0438\u0439 \u0444\u043e\u043d \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 &#171;\u0434\u0432\u0438\u0433\u0430\u0442\u044c&#187; \u0431\u044b\u0441\u0442\u0440\u0435\u0435\/\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0435\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0438\u0433\u0440\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0441\u043b\u043e\u044e \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u2014 \u044d\u0442\u043e \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0438 \u0435\u0435 &#171;\u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b&#187; \u043d\u0430 \u0438\u0433\u0440\u043e\u0432\u043e\u043c \u043f\u043e\u043b\u0435.<\/p>\n<p>\u041c\u0435\u0442\u043e\u0434 update() \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0441\u043b\u043e\u044f \u0441\u043f\u0440\u0430\u0432\u0430 \u043d\u0430\u043b\u0435\u0432\u043e. \u0410 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0432\u0442\u043e\u0440\u043e\u0439 \u0441\u0442\u0440\u043e\u0447\u043a\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 draw() \u2014 \u043c\u044b \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u0440\u0430\u0437\u0443 \u0440\u0438\u0441\u0443\u0435\u043c \u0432\u0442\u043e\u0440\u043e\u0435, \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u0441\u0435\u0447\u0435\u043d\u0438\u044f \u043b\u0435\u0432\u043e\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u2014 \u0442\u0430 \u0436\u0435 \u0441\u0430\u043c\u0430\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0438\u0437 \u043f\u0440\u0430\u0432\u043e\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u044b, \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u044d\u0444\u0444\u0435\u043a\u0442 &#171;\u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e (\u043d\u0435\u043f\u0440\u0435\u0440\u044b\u0432\u043d\u043e\u0433\u043e) \u0441\u043b\u043e\u044f&#187;.<\/p>\n<p>\u0415\u0449\u0435 \u043e\u0434\u0438\u043d \u043c\u043e\u043c\u0435\u043d\u0442. \u0410\u0432\u0442\u043e\u0440 \u0432\u0438\u0434\u0435\u043e \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u043c &#171;\u043f\u0440\u0435\u0440\u044b\u0432\u0430\u043d\u0438\u0438&#187; (\u0432 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0438\u0434\u0435\u043e <em>stutter<\/em> \u2014 \u0437\u0430\u0438\u043a\u0430\u043d\u0438\u0435\/\u0437\u0430\u043f\u0438\u043d\u0430\u043d\u0438\u0435, \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0432\u0438\u0434\u0435\u043e 1:11:00) \u043f\u0440\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0438 \u0441\u043b\u043e\u0435\u0432. \u0418 \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0435\u0440\u044b\u0432\u0430\u043d\u0438\u044f  \u2014 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0441\u043b\u043e\u0432\u043e <code>else<\/code> \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 update(), \u0447\u0435\u043c\u0443 \u043c\u044b \u0442\u043e\u0436\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u0435\u043c.<\/p>\n<p>\u041f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044e \u0441\u0430\u043c\u043e\u043c\u0443 \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0441\u043b\u043e\u0435\u0432, \u0447\u0442\u043e\u0431\u044b \u0441\u0430\u043c\u043e\u043c\u0443 \u043f\u043e\u043d\u044f\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u0438 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0440\u043e\u0447\u043a\u0438 \u043a\u043e\u0434\u0430.<\/p>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 Background.js \u0431\u0443\u0434\u0435\u0442 \u043e\u0434\u043d\u043e\u0438\u043c\u0435\u043d\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c:<\/p>\n<pre><code class=\"javascript\">class Background {     constructor(game) {         this.game = game;         this.image1 = document.getElementById('layer1');         this.layer1 = new Layer(this.game, this.image1, 3.2);         this.layers = [this.layer1];     }     update() {         this.layers.forEach(layer => layer.update());     }     draw(context) {         this.layers.forEach(layer => layer.draw(context));     } }<\/code><\/pre>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043f\u043e\u043c\u0438\u043c\u043e game, \u0443 \u043d\u0435\u0433\u043e \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 (<code>image1<\/code>), \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u0430\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document\/getElementById\" rel=\"noopener noreferrer nofollow\">getElementById<\/a>; \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>layer1<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043a\u043b\u0430\u0441\u0441\u0430 Layer, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043c\u0430\u0441\u0441\u0438\u0432 layers \u0445\u0440\u0430\u043d\u044f\u0449\u0438\u0439 \u0432 \u0441\u0435\u0431\u0435 \u0432\u0441\u0435 \u0441\u043b\u043e\u0438. \u0412 \u043c\u0435\u0442\u043e\u0434\u0430\u0445 update() \u0438 draw() \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u0430 Layer \u043d\u0430 \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 <code>layers<\/code>. <\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u0432\u0441\u0435 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e, \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 Game \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043a\u043b\u0430\u0441\u0441\u0430 Background:<\/p>\n<pre><code class=\"javascript\">this.background = new Background(this);<\/code><\/pre>\n<p>\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0440\u0430\u0432\u043d\u044b\u0439 \u0435\u0434\u0438\u043d\u0438\u0446\u0435):<\/p>\n<pre><code class=\"javascript\">this.speed = 1;<\/code><\/pre>\n<p>\u0412 \u043c\u0435\u0442\u043e\u0434 update() \u043a\u043b\u0430\u0441\u0441\u0430 Game \u043f\u0440\u043e\u043f\u0438\u0448\u0435\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0431\u044d\u043a\u0433\u0440\u0430\u0443\u043d\u0434\u0430:<\/p>\n<pre><code class=\"javascript\">this.background.update();<\/code><\/pre>\n<p>\u0430 \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 draw() \u0435\u0433\u043e \u043d\u0430\u0440\u0438\u0441\u0443\u0435\u043c (\u043f\u0440\u0438\u0447\u0435\u043c \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u0444\u043e\u043d\u0430 \u043f\u0435\u0440\u0435\u0434 \u0432\u0441\u0435\u043c\u0438 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u0444\u043e\u043d \u0431\u044b\u043b \u043f\u043e\u0437\u0430\u0434\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432):<\/p>\n<pre><code class=\"javascript\">this.background.draw(context);<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432\u043e\u0442 \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f:<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 2. \u0418\u0433\u0440\u043e\u0432\u043e\u0439 \u0444\u043e\u043d (1 \u0441\u043b\u043e\u0439).<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0449\u0435 \u0441\u043b\u043e\u0435\u0432, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0442\u0440\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 3. \u041c\u043d\u043e\u0433\u043e\u0441\u043b\u043e\u0439\u043d\u044b\u0439 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0444\u043e\u043d (4 \u0441\u043b\u043e\u044f). \u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 <code>speedModifier<\/code> \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043b\u043e\u044f \u0438\u043c\u0435\u0435\u0442 \u0441\u0432\u043e\u0435 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435.<\/figcaption><\/div>\n<\/figure>\n<p>\u041d\u043e \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043a\u0430. \u0413\u043b\u0430\u0432\u043d\u044b\u0439 \u0438\u0433\u0440\u043e\u043a \u0438 \u0432\u0440\u0430\u0433\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f \u0432\u043f\u0435\u0440\u0435\u0434\u0438 \u0432\u0441\u0435\u0445 \u0441\u043b\u043e\u0435\u0432:<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 4. \u041d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u043b\u043e\u0435\u0432. \u0412\u0441\u0435 \u043e\u043d\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0437\u0430\u0434\u0438 \u0438\u0433\u0440\u043e\u043a\u0430 \u0438 \u0432\u0440\u0430\u0433\u043e\u0432.<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u043e \u0437\u0430\u0434\u0443\u043c\u0430\u043d\u043d\u043e\u043c\u0443, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e, \u0447\u0442\u043e\u0431\u044b \u0447\u0435\u0442\u0432\u0435\u0440\u0442\u044b\u0439 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u0441\u043b\u043e\u0439 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b\u0441\u044f \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u043f\u043b\u0430\u043d\u0435, \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u044d\u0444\u0444\u0435\u043a\u0442, \u043a\u0430\u043a \u0431\u0443\u0434\u0442\u043e \u0438\u0433\u0440\u043e\u043a \u0438 \u0432\u0440\u0430\u0433\u0438 \u0434\u0432\u0438\u0433\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 &#171;\u0434\u043e\u0440\u043e\u0436\u043a\u0435&#187; \u0437\u0430 \u043d\u0438\u043c.<\/p>\n<p>\u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c.<\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u043a\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0435\u0432<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0412 \u043a\u043b\u0430\u0441\u0441\u0435 Background \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0441\u043b\u043e\u0439 \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 layers:<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u041a\u043e\u0434 3. \u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0441\u043b\u043e\u044f \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430.<\/figcaption><\/div>\n<\/figure>\n<p>\u0432 \u043c\u0435\u0442\u043e\u0434\u0435 update() \u043a\u043b\u0430\u0441\u0441\u0430 Game \u0431\u0443\u0434\u0435\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u044d\u0442\u043e\u0442 \u0441\u043b\u043e\u0439 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e:<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u041a\u043e\u0434 4. \u041e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0441\u043b\u043e\u044f.<\/figcaption><\/div>\n<\/figure>\n<p>\u0430 \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 draw() \u0440\u0438\u0441\u0443\u0435\u043c \u044d\u0442\u043e\u0442 \u0441\u043b\u043e\u0439 \u0432 &#171;\u0441\u0430\u043c\u043e\u043c \u043a\u043e\u043d\u0446\u0435&#187;, \u0442.\u0435. \u043f\u043e\u0441\u043b\u0435 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0432\u0441\u0435\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432:<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u041a\u043e\u0434 5. \u041e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432.<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 5. \u041a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0435 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043f\u043e\u0437\u0430\u0434\u0438 4-\u043e\u0433\u043e \u0441\u043b\u043e\u044f.<\/figcaption><\/div>\n<\/figure>\n<p><a class=\"anchor\" name=\"sprites\" id=\"sprites\"><\/a><\/p>\n<h2>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0435\u0439. \u0421\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442\u044b<\/h2>\n<p>\u0427\u0435\u0440\u043d\u044b\u0439 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0441\u044f \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u043e. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u043c \u0435\u0433\u043e \u0432 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043c\u043e\u0440\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043d\u044c\u043a\u0430. \u0414\u043b\u044f \u044d\u0442\u043e\u0439 \u0446\u0435\u043b\u0438 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442.\u043d. \u0441\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442\u044b. \u0415\u0441\u043b\u0438 \u0441\u0432\u043e\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438 \u2014 \u0442\u043e \u044d\u0442\u043e \u0441\u043e\u0432\u043e\u043a\u0443\u043f\u043d\u043e\u0441\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a (\u043a\u0430\u0434\u0440\u043e\u0432) \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430, \u0441\u043c. \u0440\u0438\u0441\u0443\u043d\u043e\u043a 6.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 6. \u0421\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0438\u0433\u0440\u043e\u043a\u0430. \u041c\u0435\u043d\u044f\u044f \u043a\u0430\u0434\u0440\u044b &#8212; \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430.<\/figcaption><\/div>\n<\/figure>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043d\u0435 \u0431\u0443\u0434\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442\u044b. \u041f\u043e\u043c\u0438\u043c\u043e \u0432\u0441\u0435\u043c \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0445 Adobe Photoshop \u0438 Illustrator, \u0435\u0441\u0442\u044c \u0438 \u0431\u043e\u043b\u0435\u0435 \u043b\u0435\u0433\u043a\u0438\u0435, \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442\u043e\u0432 \u0434\u043b\u044f 2D \u0438\u0433\u0440. \u0410\u0432\u0442\u043e\u0440 &#171;\u0440\u0435\u043a\u043b\u0430\u043c\u0438\u0440\u0443\u0435\u0442&#187; \u0442\u0430\u043a\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u043a\u0430\u043a <a href=\"https:\/\/dragonbones.github.io\/en\/index.html\" rel=\"noopener noreferrer nofollow\">dragonbones<\/a> \u0438 <a href=\"https:\/\/ru.esotericsoftware.com\/\" rel=\"noopener noreferrer nofollow\">spine<\/a>. \u041f\u0435\u0440\u0432\u044b\u0439 \u0438\u0437 \u043d\u0438\u0445 \u0435\u0449\u0435 \u0438 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439. \u0410 \u0432\u043e\u0442 <a href=\"https:\/\/habr.com\/ru\/articles\/211472\/\" rel=\"noopener noreferrer nofollow\">\u0437\u0434\u0435\u0441\u044c <\/a>\u0435\u0441\u0442\u044c \u043d\u0435\u043f\u043b\u043e\u0445\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u0440\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 2D-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0432 Unity 3D.<\/p>\n<p>\u042f \u0436\u0435 \u0432\u043e\u0437\u044c\u043c\u0443 <a href=\"https:\/\/github.com\/greenDev7\/JavaScript-Game.-Full-Version\/blob\/master\/Assets\/player.png\" rel=\"noopener noreferrer nofollow\">\u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u0441\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043b\u044f \u043d\u0430\u0441 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043b \u0430\u0432\u0442\u043e\u0440 \u0438 \u0431\u0443\u0434\u0443 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043d\u0435\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430.<\/p>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u043c, \u0447\u0442\u043e \u0432 \u0444\u0430\u0439\u043b\u0435 index.html \u0443\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u0441\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442 \u0438\u0433\u0440\u043e\u043a\u0430:<\/p>\n<figure class=\"\">\n<div><figcaption>\u041a\u043e\u0434 6. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442 \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0443.<\/figcaption><\/div>\n<\/figure>\n<p>\u0430 \u0432 \u0444\u0430\u0439\u043b\u0435 style.css \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e display \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c none, \u043a\u0430\u043a \u0438 \u0432\u0441\u0435\u043c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c \u0432 \u043d\u0430\u0448\u0435\u0439 \u0438\u0433\u0440\u0435 (\u043e\u0431 \u044d\u0442\u043e\u043c \u044f \u043f\u0438\u0441\u0430\u043b \u0432\u044b\u0448\u0435).<\/p>\n<p>\u0412 \u043a\u043b\u0430\u0441\u0441 Player \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u041a\u043e\u0434 7. \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438\u0433\u0440\u043e\u043a\u0430.<\/figcaption><\/div>\n<\/figure>\n<p>\u0412 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c \u043d\u043e\u0432\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430: <code>image<\/code> \u2014 \u0441\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442; <code>frameX<\/code>, <code>frameY<\/code> \u2014 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b &#171;\u043a\u0430\u0434\u0440\u0430&#187; \u0438\u0433\u0440\u043e\u043a\u0430 \u043d\u0430 \u0441\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442\u0435 (\u0441\u043c. \u0440\u0438\u0441\u0443\u043d\u043e\u043a 6). \u041f\u0440\u0438 \u044d\u0442\u043e\u043c <code>frameX<\/code> \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043e\u0442 0 \u0434\u043e <code>maxFrame<\/code> = 38 (\u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u0430\u0434\u0440\u043e\u0432 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438, \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u043d\u0443\u043c\u0435\u0440\u0430\u0446\u0438\u0438 \u043e\u0442 \u043d\u0443\u043b\u044f), \u0430 <code>frameY<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f 0 \u0438\u043b\u0438 1. \u0412 \u043f\u0435\u0440\u0432\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c \u0438\u0433\u0440\u043e\u043a\u0430, \u043f\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u043d \u0441\u0442\u0440\u0435\u043b\u044f\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0437 \u043d\u043e\u0441\u0430, \u0430 \u043f\u0440\u0438 <code>frameY<\/code> = 1 \u2014 \u043d\u0430\u0448 \u043c\u043e\u0440\u0441\u043a\u043e\u0439 \u043a\u043e\u043d\u044c \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0437\u0430\u0440\u044f\u0436\u0435\u043d\u043d\u043e\u0433\u043e \u044d\u043d\u0435\u0440\u0433\u0438\u0435\u0439 \u043c\u043e\u043d\u0441\u0442\u0440\u0430 \u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0435\u043d \u0441\u0442\u0440\u0435\u043b\u044f\u0442\u044c \u0438\u0437 \u043d\u043e\u0441\u0430 \u0438 \u0445\u0432\u043e\u0441\u0442\u0430 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e.<\/p>\n<p>\u0412 \u043c\u0435\u0442\u043e\u0434 update() \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u043a\u0443\u0441\u043e\u043a \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u043a\u0440\u0435\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>frameX<\/code>, \u0430 \u0432 draw() \u2014 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u043c\u0435\u0442\u043e\u0434 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/CanvasRenderingContext2D\/drawImage\" rel=\"noopener noreferrer nofollow\">drawImage()<\/a> \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043a\u0430\u043d\u0432\u0430\u0441 \u0441 9-\u044e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0438\u0437 \u0441\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442\u0430 &#171;\u0432\u044b\u0440\u0435\u0437\u0430\u0442\u044c&#187; \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043a\u0430\u0434\u0440\u044b. \u0415\u0441\u043b\u0438 \u0441\u043f\u0440\u0430\u0439\u0442\u0448\u0438\u0442 \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u0431\u0435\u0437 \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u043b\u0438\u0448\u043d\u0438\u0445 &#171;\u043f\u0440\u043e\u0431\u0435\u043b\u043e\u0432&#187;, \u0442\u043e \u043c\u0435\u0442\u043e\u0434 drawImage() \u043e\u0442\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0447\u0435\u0442\u043a\u043e \u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0439. <\/p>\n<p>\u0418 \u043a\u0430\u043a \u0438\u0442\u043e\u0433 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u0438\u0433\u0440\u043e\u043a\u0430:<\/p>\n<figure class=\"\">\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 7. \u0410\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u0440\u0441\u043a\u043e\u0439 \u043a\u043e\u043d\u044c. \u041d\u043e \u043f\u043e\u043a\u0430 \u0435\u0449\u0435 \u0432 \u0447\u0435\u0440\u043d\u043e\u043c \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0435.<\/figcaption><\/div>\n<\/figure>\n<p>\u0423\u0431\u0435\u0440\u0435\u043c \u0447\u0435\u0440\u043d\u044b\u0439 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u043c\u0435\u0442\u043e\u0434 draw() \u0442\u043e\u0433\u043e \u0436\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 Player \u0432\u043d\u0435\u0441\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f. \u0423\u0434\u0430\u043b\u0438\u043c \u0441\u0442\u0440\u043e\u043a\u0443:<\/p>\n<pre><code class=\"javascript\">context.fillStyle = 'black';<\/code><\/pre>\n<p>\u0430 \u043c\u0435\u0442\u043e\u0434 <code>context.fillRect()<\/code> \u0437\u0430\u043c\u0435\u043d\u0438\u043c \u043d\u0430 <code>context.strokeRect()<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0447\u0435\u0440\u043d\u0443\u044e \u0440\u0430\u043c\u043a\u0443.<\/p>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c &#171;\u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c\/\u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0442\u044c&#187; \u044d\u0442\u0443 \u0447\u0435\u0440\u043d\u0443\u044e \u0440\u0430\u043c\u043a\u0443 \u0434\u043b\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u043e\u0442\u043b\u0430\u0434\u043a\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u0439 \u043c\u0435\u0436\u0434\u0443 \u0438\u0433\u0440\u043e\u043a\u043e\u043c \u0438 \u0432\u0440\u0430\u0433\u0430\u043c\u0438). \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u043a\u043b\u0430\u0441\u0441 Game \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e debug:<\/p>\n<pre><code class=\"javascript\">this.debug = true<\/code><\/pre>\n<p>\u0430 \u0432 \u043a\u043b\u0430\u0441\u0441 InputHandler \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043b\u0430\u0432\u0438\u0448\u0438 <code>d<\/code> \u0434\u043b\u044f \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f\/\u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0440\u0435\u0436\u0438\u043c\u0430 \u0434\u0435\u0431\u0430\u0433\u0430:<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u041a\u043e\u0434 8. \u041f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043a\u043b\u0430\u0432\u0438\u0448\u0438 &#8216;d&#8217; \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u043c\/\u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0440\u0435\u0436\u0438\u043c \u0434\u0435\u0431\u0430\u0433\u0430.<\/figcaption><\/div>\n<\/figure>\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0430 \u0438\u0433\u0440\u0430 \u043d\u0430 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0448\u0438 &#8216;d&#8217;:<\/p>\n<figure class=\"\">\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 8. \u0412\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\/\u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0440\u0430\u043c\u043a\u0438 \u0432\u043e\u043a\u0440\u0443\u0433 \u0438\u0433\u0440\u043e\u043a\u0430.<\/figcaption><\/div>\n<\/figure>\n<p><a class=\"anchor\" name=\"enemy_animation\" id=\"enemy_animation\"><\/a><\/p>\n<h2>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0432\u0440\u0430\u0433\u043e\u0432<\/h2>\n<p>\u041f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0440\u0430\u0433\u043e\u0432. \u0412 \u0444\u0430\u0439\u043b\u0435 index.html \u0443 \u043d\u0430\u0441 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f:<\/p>\n<figure class=\"\">\n<div><figcaption>\u041a\u043e\u0434 9. \u041f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u0440\u0430\u0433\u043e\u0432.<\/figcaption><\/div>\n<\/figure>\n<p><code>angler1<\/code> \u0438 <code>angler2<\/code> \u2014 \u044d\u0442\u043e \u0432\u0440\u0430\u0433\u0438 \u043e\u0431\u044b\u043a\u043d\u043e\u0432\u0435\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0445\u043e\u0442\u044f\u0442 \u043f\u043e\u043a\u0430\u043b\u0435\u0447\u0438\u0442\u044c \u043d\u0430\u0448\u0435\u0433\u043e \u043c\u043e\u0440\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043d\u044f, \u0430 \u0432\u043e\u0442 <code>lucky<\/code> \u2014 \u044d\u0442\u043e \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0430\u044f \u0440\u044b\u0431\u043a\u0430 \u0432 \u0436\u0435\u043b\u0442\u043e\u043c \u0448\u0430\u0440\u0438\u043a\u0435, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0438 \u0441 \u0433\u043b\u0430\u0432\u043d\u044b\u043c \u0438\u0433\u0440\u043e\u043a\u043e\u043c &#171;\u0434\u0430\u0435\u0442 \u0435\u043c\u0443 \u0441\u0438\u043b \u0438 \u044d\u043d\u0435\u0440\u0433\u0438\u0438&#187; \u2014 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043d\u0430 \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0439 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u043a \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0442\u0440\u0435\u043b\u044f\u0442\u044c \u0441\u0440\u0430\u0437\u0443 \u0438\u0437 \u043d\u043e\u0441\u0430 \u0438 \u0445\u0432\u043e\u0441\u0442\u0430, \u043e\u0434\u043d\u0430\u043a\u043e, \u0435\u0435 \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0438\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0438\u0432 \u0437\u0430 \u043d\u0435\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043e\u0447\u043a\u0438.<\/p>\n<p>\u0412 \u043a\u043b\u0430\u0441\u0441 Angler1 \u0432\u043d\u0435\u0441\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f:<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u041a\u043e\u0434 10. \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u0440\u0430\u0433\u0430 Angler1.<\/figcaption><\/div>\n<\/figure>\n<p>\u0437\u0434\u0435\u0441\u044c \u043a\u0430\u043a \u0438 \u0434\u043b\u044f \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u0438\u0433\u0440\u043e\u043a\u0430 \u2014 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0438 \u0440\u0430\u043d\u0434\u043e\u043c\u043d\u043e \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f <code>this.frameY<\/code>, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0448 \u0432\u0440\u0430\u0433 \u0438\u043c\u0435\u043b \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u0438.<\/p>\n<p>\u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432\u043d\u0435\u0441\u0435\u043c \u0438 \u0432 \u043a\u043b\u0430\u0441\u0441 Angler2.<\/p>\n<p>\u0414\u043b\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u0432\u0440\u0430\u0433\u0430 &#8212; Enemy<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-358164","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/358164","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=358164"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/358164\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=358164"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=358164"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=358164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}