{"id":453964,"date":"2025-04-01T15:07:40","date_gmt":"2025-04-01T15:07:40","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=453964"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=453964","title":{"rendered":"<span>\u041f\u0438\u043b\u0438\u043c \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u043c\u0443\u043b\u044c\u0442\u0438\u043f\u043b\u0435\u0435\u0440\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0430 \u0431\u0430\u0437\u0435 esp32: \u043d\u0430\u0447\u0430\u043b\u043e<\/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-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"><a href=\"https:\/\/habr.com\/ru\/companies\/ruvds\/articles\/893484\/\"><\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/fx\/eu\/oj\/fxeuojjthmn8ij9-knasqrzbwea.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/fx\/eu\/oj\/fxeuojjthmn8ij9-knasqrzbwea.jpeg\" data-blurred=\"true\"\/><\/div>\n<p><\/a><br \/> \u041e\u0434\u043d\u043e \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043f\u0440\u0438\u044f\u0442\u043d\u044b\u0445 \u043f\u0440\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0439 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u2014 \u044d\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438\u0433\u0440. \u041f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u0438 \u043d\u0430\u043c \u043d\u0435 \u0437\u0430\u043f\u0438\u043b\u0438\u0442\u044c \u0441\u0432\u043e\u044e? <\/p>\n<p> \u0422\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u043d\u0435 \u0442\u0430\u043a \u0434\u0430\u0432\u043d\u043e \u0443 \u043c\u0435\u043d\u044f \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0441\u0442\u0440\u0430\u043d\u043d\u0430\u044f \u043c\u044b\u0441\u043b\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0443\u0436\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0435\u043d\u044c \u043d\u0435 \u043e\u0442\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043c\u0435\u043d\u044f \u2014 \u0430 \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043c\u043d\u043e\u0433\u043e\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0430 \u0431\u0430\u0437\u0435 ESP32? \u041e_\u043e <\/p>\n<p> \u041c\u043e\u0436\u043d\u043e \u0438 \u043d\u0430 \u0431\u0430\u0437\u0435 \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e \u0432\u0435\u0431\u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u0445\u043e\u0441\u0442\u0438\u043d\u0433\u0430, \u043d\u043e \u044d\u0442\u043e \u043a\u0430\u043a-\u0442\u043e \u0443\u043d\u044b\u043b\u043e, \u043a\u0430\u043a \u0443 \u0432\u0441\u0435\u0445, \u00ab\u0430 \u0434\u0443\u0448\u0430 \u0445\u043e\u0447\u0435\u0442 \u0433\u0443\u0441\u0430\u0440\u0441\u0442\u0432\u0430\u00bb :-))) \u041f\u043e\u043d\u044f\u0442\u043d\u043e, \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0430\u043b\u043e\u0436\u0438\u0442 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0436\u0451\u0441\u0442\u043a\u0438\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u043d\u0430 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u0433\u0440\u043e\u043a\u043e\u0432 \u0438 \u043e\u0431\u044a\u0451\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0445 \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437-\u0437\u0430 \u0441\u043b\u0430\u0431\u043e\u0441\u0442\u0438 \u0430\u043f\u043f\u0430\u0440\u0430\u0442\u043d\u043e\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b, \u043d\u043e \u043c\u044b\u0441\u043b\u044c \u0432\u0441\u0451 \u0436\u0435 \u0437\u0430\u043d\u044f\u0442\u043d\u0430\u044f.<\/p>\n<p> \u041f\u0440\u043e\u0449\u0435 \u0433\u043e\u0432\u043e\u0440\u044f: \u0438\u0433\u0440\u0430 \u0445\u043e\u0441\u0442\u0438\u0442\u0441\u044f \u043d\u0430 ESP32, \u043a\u043b\u0438\u0435\u043d\u0442\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044e\u0442\u0441\u044f \u043a \u043d\u0435\u0439, \u0438 ESP32 \u043e\u0442\u0434\u0430\u0451\u0442 \u0438\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 \u0438\u0433\u0440\u043e\u0439. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441: \u043a\u043b\u0438\u0435\u043d\u0442\u044b \u043e\u0431\u043c\u0435\u043d\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0447\u0435\u0440\u0435\u0437 ESP32, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u0432 \u0440\u043e\u043b\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u0430 \u0432\u0441\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0451\u043c\u043a\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u043f\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c\u0443 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432. \u0422\u0435\u043e\u0440\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u043f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u043c\u043e\u0436\u0435\u0442 \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c..<a name=\"habracut\"><\/a><\/p>\n<blockquote><p>\u0421\u0440\u0430\u0437\u0443 \u0441\u043f\u043e\u0439\u043b\u0435\u0440: \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u0438\u0433\u0440\u044b \u0435\u0441\u0442\u044c \u0432 \u0441\u0430\u043c\u043e\u043c \u043a\u043e\u043d\u0446\u0435 \u0441\u0442\u0430\u0442\u044c\u0438.<\/p><\/blockquote>\n<p> \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0438\u0434\u0435\u0438 \u0434\u043b\u044f \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u0432\u043e\u0437\u044c\u043c\u0451\u043c \u0438\u0433\u0440\u0443 \u0441 \u0432\u0438\u0434\u043e\u043c \u0441\u0432\u0435\u0440\u0445\u0443, \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0448\u0443\u0442\u0435\u0440, \u0433\u0434\u0435 \u0431\u0443\u0434\u0435\u0442 \u0435\u0437\u0434\u0438\u0442\u044c \u043d\u0435\u043a\u043e\u0435 \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u043d\u043e\u0435 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043e\u0436\u0435\u0442 \u0441\u0442\u0440\u0435\u043b\u044f\u0442\u044c \u0438 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0430\u043c\u0438 \u0440\u0430\u0437\u0440\u0443\u0448\u0430\u0442\u044c \u0441\u0442\u0435\u043d\u044b (\u0447\u0442\u043e-\u0442\u043e \u044d\u0442\u043e \u0432\u0441\u0451 \u043c\u043d\u0435 \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442, \u0430 \u0432\u043f\u0440\u043e\u0447\u0435\u043c \u2014 \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \ud83d\ude42 ). \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u0440\u0438\u043a\u0440\u0443\u0442\u0438\u0442\u044c \u043c\u0443\u043b\u044c\u0442\u0438\u043f\u043b\u0435\u0435\u0440 (\u0442\u043e \u0431\u0438\u0448\u044c, \u043c\u043d\u043e\u0433\u043e\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0440\u0435\u0436\u0438\u043c).<\/p>\n<p> \u041f\u0440\u043e\u0441\u0442\u043e \u0435\u0437\u0434\u0438\u0442\u044c \u043f\u043e \u0438\u0433\u0440\u043e\u0432\u043e\u043c\u0443 \u043f\u043e\u043b\u044e \u043d\u0435\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u044e\u0449\u0438\u0445 \u0441\u0442\u0435\u043d \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u0441\u0442\u0435\u043d\u044b \u043b\u0430\u0431\u0438\u0440\u0438\u043d\u0442\u0430, \u0430 \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0435\u0439, \u043f\u0443\u0441\u043a\u0430\u0439 \u043b\u0430\u0431\u0438\u0440\u0438\u043d\u0442 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u043c, \u0438 \u0435\u0433\u043e \u0441\u0442\u0435\u043d\u044b \u0431\u0443\u0434\u0443\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043f\u0440\u0438 \u043d\u043e\u0432\u043e\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u0438\u0433\u0440\u044b.<\/p>\n<p> \u0427\u0435\u043c \u0445\u043e\u0440\u043e\u0448 \u043b\u0430\u0431\u0438\u0440\u0438\u043d\u0442, \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u0442\u0435\u043c, \u0447\u0442\u043e \u043e\u043d \u0434\u0430\u0451\u0442 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044e \u2014 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0442\u0440\u0435\u043b\u044f\u0442\u044c, \u043d\u043e \u0438 \u0434\u0443\u043c\u0430\u0442\u044c, \u043a\u0430\u043a \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u0432 \u043b\u0430\u0431\u0438\u0440\u0438\u043d\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0437\u0430\u0441\u0442\u0440\u044f\u0442\u044c.<\/p>\n<p> \u0427\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u0434\u0430\u0442\u044c \u043b\u0430\u0431\u0438\u0440\u0438\u043d\u0442\u0443 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0440\u0438\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0430 \u0435\u0433\u043e \u0441\u0442\u0435\u043d\u043a\u0438 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443, \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u00ab\u0448\u0443\u043c\u043e\u0432\u044b\u0435\u00bb \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0438\u043a\u0438, \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0449\u0438\u0445\u0441\u044f \u043f\u043e \u0446\u0432\u0435\u0442\u0443.<\/p>\n<p> \u041c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u043b\u0430\u0431\u0438\u0440\u0438\u043d\u0442\u043e\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c: \u0441\u043c\u043e\u0436\u0435\u043c \u0441\u0442\u0440\u0435\u043b\u044f\u0442\u044c, \u0438 \u043f\u0443\u043b\u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u043f\u0430\u0434\u0430\u0442\u044c \u0432 \u0441\u0442\u0435\u043d\u044b; \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435: \u043e\u0442 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u044f \u043f\u0443\u043b\u0438 \u0432 \u0441\u0442\u0435\u043d\u0443 \u2014 \u0441\u0442\u0435\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e \u0440\u0430\u0437\u0440\u0443\u0448\u0430\u0442\u044c\u0441\u044f, \u0438 \u043e\u0442 \u043d\u0435\u0451 \u0431\u0443\u0434\u0443\u0442 \u043b\u0435\u0442\u0430\u0442\u044c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0438\u043a\u0438-\u043e\u0441\u043a\u043e\u043b\u043a\u0438, \u043a\u0430\u043a \u0431\u0443\u0434\u0442\u043e \u0441\u0442\u0435\u043d\u0430 \u043a\u0440\u043e\u0448\u0438\u0442\u0441\u044f \u043e\u0442 \u0443\u0434\u0430\u0440\u0430.<\/p>\n<p> \u041f\u043e\u043c\u0438\u043c\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0440\u0438\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0442\u043d\u0443\u044e \u0441\u0432\u044f\u0437\u044c \u0438\u0433\u0440\u043e\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0432\u0438\u0434\u0435\u0442\u044c, \u0447\u0442\u043e \u0435\u0433\u043e \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u044b \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u044e\u0442 \u0446\u0435\u043b\u0438.<\/p>\n<p> \u041f\u043e\u043a\u0430 \u043d\u0430 \u044d\u0442\u043e\u043c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u043c\u0441\u044f, \u0442\u0430\u043a \u043a\u0430\u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u0430\u0436\u0435 \u044d\u0442\u0438\u0445 \u043c\u043e\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0443\u0441\u043b\u043e\u0432\u043d\u043e \u043e\u0431\u044a\u0451\u043c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430.<\/p>\n<p> \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u0443\u043c\u0430\u0442\u044c \u0438 \u043d\u0430\u0434 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0432 \u0438\u0433\u0440\u0443 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u0438\u043a\u043e\u0432, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u0440\u0443\u0433\u0438\u0445 \u00ab\u0444\u0438\u0448\u0435\u043a\u00bb.<\/p>\n<h2><font color=\"#3AC1EF\">\u258d \u041f\u043e\u0447\u0435\u043c\u0443 JavaScript<\/font><\/h2>\n<p> \u041e\u0434\u0438\u043d \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0438\u0433\u0440\u0443 (\u0445\u043e\u0442\u044f, \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u044d\u0442\u043e \u043a\u043e\u043c\u0443 \u043a\u0430\u043a \u2014 \u00ab\u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u0443\u043b\u0438\u043a \u0441\u0432\u043e\u0451 \u0431\u043e\u043b\u043e\u0442\u043e \u0445\u0432\u0430\u043b\u0438\u0442\u00bb :-), \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u0443\u044e \u0438\u0433\u0440\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0438 \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c JavaScript.<\/p>\n<p> \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, JavaScript \u0445\u043e\u0440\u043e\u0448\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441 HTML \u0438 CSS, \u0447\u0442\u043e \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0438\u0433\u0440\u044b.<\/p>\n<p> \u0418\u0442\u0430\u043a, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u0438\u043a\u0438\u043d\u0435\u043c, \u043a\u0430\u043a\u0438\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u0433\u0440\u044b \u0443 \u043d\u0430\u0441 \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435:<\/p>\n<p> <b><font color=\"#3AC1EF\"> \u0418\u0433\u0440\u043e\u0432\u043e\u0435 \u043f\u043e\u043b\u0435:<\/font><\/b> \u043f\u0443\u0441\u043a\u0430\u0439 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043a\u0432\u0430\u0434\u0440\u0430\u0442 400 \u043d\u0430 400 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439.<\/p>\n<p> <b><font color=\"#3AC1EF\"> \u041c\u0430\u0448\u0438\u043d\u043a\u0430:<\/font><\/b> \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0438\u0433\u0440\u044b. \u0423 \u043d\u0435\u0451 \u0431\u0443\u0434\u0435\u0442 \u0441\u0442\u0432\u043e\u043b, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043e\u043d\u0430 \u0441\u043c\u043e\u0436\u0435\u0442 \u0441\u0442\u0440\u0435\u043b\u044f\u0442\u044c \u0438 \u0441\u043c\u043e\u0436\u0435\u0442 \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u0432 \u0447\u0435\u0442\u044b\u0440\u0451\u0445 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f\u0445.<\/p>\n<p> <b><font color=\"#3AC1EF\"> \u041b\u0430\u0431\u0438\u0440\u0438\u043d\u0442:<\/font><\/b> \u0441\u0442\u0435\u043d\u044b \u0441 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0440\u0430\u0437\u0440\u0443\u0448\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u0439. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0437\u0430\u0434\u0430\u0434\u0438\u043c \u0438\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u00ab\u0437\u0434\u043e\u0440\u043e\u0432\u044c\u0435\u00bb.<\/p>\n<p> <b><font color=\"#3AC1EF\"> \u041f\u0443\u043b\u0438\/\u0441\u043d\u0430\u0440\u044f\u0434\u044b:<\/font><\/b> \u044d\u0442\u043e \u0442\u043e, \u0447\u0435\u043c \u0441\u0442\u0440\u0435\u043b\u044f\u0435\u0442 \u043c\u0430\u0448\u0438\u043d\u043a\u0430. \u0411\u0443\u0434\u0443\u0442 \u043b\u0435\u0442\u0435\u0442\u044c \u043f\u043e \u043f\u0440\u044f\u043c\u043e\u0439 \u0438 \u043f\u043e\u0432\u0440\u0435\u0436\u0434\u0430\u0442\u044c \u0441\u0442\u0435\u043d\u044b \u043f\u0440\u0438 \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u0438.<\/p>\n<p> <b><font color=\"#3AC1EF\"> \u0412\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b:<\/font><\/b> \u043f\u0440\u0438 \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u0438 \u043f\u0443\u043b\u044c \u0432 \u0441\u0442\u0435\u043d\u044b, \u0441\u0442\u0435\u043d\u044b \u0431\u0443\u0434\u0443\u0442 \u00ab\u043f\u043e\u0432\u0440\u0435\u0436\u0434\u0430\u0442\u044c\u0441\u044f\u00bb, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0432\u043e \u0432\u043d\u0435\u0448\u043d\u0435\u043c \u0432\u0438\u0434\u0435 \u0438\u0445 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043e\u0442 \u0441\u0442\u0435\u043d \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043b\u0435\u0442\u0430\u0442\u044c \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0438\u043a\u0438, \u0441\u0438\u043c\u0432\u043e\u043b\u0438\u0437\u0438\u0440\u0443\u044e\u0449\u0438\u0435 \u043e\u0441\u043a\u043e\u043b\u043a\u0438.<\/p>\n<p> \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438\u0441\u044c \u0441 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0438\u0433\u0440\u044b, \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432\u0441\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0438\u0433\u0440\u043e\u0432\u044b\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b.<\/p>\n<h2><font color=\"#3AC1EF\">\u258d \u041e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435<\/font><\/h2>\n<p> \u041e\u0434\u0438\u043d \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0438 \u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 \u0438\u0433\u0440\u043e\u0432\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u044d\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0435\u0439, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u0433\u0440\u043e\u0432\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435: \u0446\u0432\u0435\u0442, \u0440\u0430\u0437\u043c\u0435\u0440\u044b, \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b.<\/p>\n<p> \u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043e \u0432 \u0432\u0438\u0434\u0435 \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0445 \u00ab\u043a\u043b\u0430\u0441\u0441\u043e\u0432\u00bb, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u043a\u0430\u043a \u043d\u0435\u043a\u043e\u0435 \u0441\u043b\u043e\u0432\u043e \u0441 \u0442\u043e\u0447\u043a\u043e\u0439 \u0441\u043f\u0435\u0440\u0435\u0434\u0438, \u043f\u043e\u0441\u043b\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0438\u0434\u0443\u0442 \u0444\u0438\u0433\u0443\u0440\u043d\u044b\u0435 \u0441\u043a\u043e\u0431\u043a\u0438, \u0433\u0434\u0435 \u0438 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b.<\/p>\n<p> \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: <b><font color=\"#3AC1EF\">.battle-machine { ( \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b) }<\/font><\/b>.<\/p>\n<p> \u041e\u0434\u043d\u0430\u043a\u043e, \u043f\u043e\u0447\u0435\u043c\u0443 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c CSS, \u0430 \u043d\u0435 \u0437\u0430\u0434\u0430\u0451\u043c \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 \u0432 \u043a\u043e\u0434\u0435 JavaScript? <\/p>\n<p> \u041c\u044b \u0442\u0430\u043a \u0434\u0435\u043b\u0430\u0435\u043c \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e CSS \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0432\u0441\u0435\u043c \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435\u043c, \u0438 \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u043f\u0440\u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u0438 \u0432\u043d\u0435\u0441\u0435\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439\/\u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0439, \u2014 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043e\u0434\u043d\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 CSS. \u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0434\u0435\u043b\u0430\u0435\u0442 \u043a\u043e\u0434 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u0435\u0435 \u0447\u0438\u0441\u0442\u044b\u043c \u0438 \u0443\u0434\u043e\u0431\u043d\u044b\u043c \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438.<\/p>\n<p> \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 <b><font color=\"#3AC1EF\">machine.style.backgroundColor = &#8216;green&#8217;;<\/font><\/b> \u2014 \u043d\u043e \u044d\u0442\u043e \u0432\u0435\u0441\u044c\u043c\u0430 \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u0438\u043b\u044c\u043d\u043e \u043f\u0435\u0440\u0435\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043a\u043e\u0434, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0435\u0441\u043b\u0438 \u0441\u0442\u0438\u043b\u0435\u0439 \u043c\u043d\u043e\u0433\u043e.<\/p>\n<h2><font color=\"#3AC1EF\">\u258d \u0417\u0430\u0445\u0432\u0430\u0442 \u043d\u0430\u0436\u0430\u0442\u0438\u0439 \u043a\u043b\u0430\u0432\u0438\u0448<\/font><\/h2>\n<p> \u0418\u0433\u0440\u0430 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d\u0430 \u043d\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u043d\u043e\u0439 \u043f\u043e\u043b\u043d\u043e\u0440\u0430\u0437\u043c\u0435\u0440\u043d\u043e\u0439 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b (\u0443 \u043c\u0435\u043d\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a\u0430\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u043d\u0435 \u043c\u043e\u0433\u0443 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 \u043d\u043e\u0443\u0442\u0431\u0443\u043a\u0430\u0445) \u0438 \u0437\u0430\u0445\u0432\u0430\u0442 \u043d\u0430\u0436\u0430\u0442\u0438\u0439 \u043a\u043b\u0430\u0432\u0438\u0448 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e JavaScript-\u0441\u043e\u0431\u044b\u0442\u0438\u044f <b><font color=\"#3AC1EF\">keydown<\/font><\/b>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0436\u0430\u0442\u0430 \u043b\u044e\u0431\u0430\u044f \u043a\u043b\u0430\u0432\u0438\u0448\u0430 \u043d\u0430 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0435.<\/p>\n<p> \u041f\u043e\u0447\u0435\u043c\u0443 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0438\u043c\u0435\u043d\u043d\u043e <b><font color=\"#3AC1EF\">keydown<\/font><\/b>? \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u044d\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043b\u0430\u0432\u0438\u0448\u0438 \u0438 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0438\u0433\u0440, \u0433\u0434\u0435 \u043d\u0443\u0436\u043d\u0430 \u0431\u044b\u0441\u0442\u0440\u0430\u044f \u0440\u0435\u0430\u043a\u0446\u0438\u044f.<\/p>\n<p> \u041a\u0440\u043e\u043c\u0435 \u043d\u0435\u0433\u043e, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0435\u0449\u0451 \u0442\u0430\u043a\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043a\u0430\u043a <b><font color=\"#3AC1EF\">keyup <\/font><\/b>(\u043e\u0442\u0436\u0430\u0442\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0448\u0438), <b><font color=\"#3AC1EF\">keypress<\/font><\/b> (\u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0435\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435, \u043d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043d\u043e \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e).<\/p>\n<p> \u0417\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u0432\u0448\u0438\u0435\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u043e\u0439 \u0441 \u043a\u043b\u0430\u0432\u0438\u0448\u0430\u043c\u0438, \u043c\u043e\u0433\u0443\u0442 \u043d\u0430\u0439\u0442\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u043f\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u043c \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u0434\u043b\u044f JavaScript <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/KeyboardEvent\">\u0432\u043e\u0442 \u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p> \u041f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u043c\u044b \u00ab\u043b\u043e\u0432\u0438\u043c\u00bb \u044d\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435, \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u043a\u0430\u043a\u0430\u044f \u043a\u043b\u0430\u0432\u0438\u0448\u0430 \u0431\u044b\u043b\u0430 \u043d\u0430\u0436\u0430\u0442\u0430, \u0430 \u0434\u0430\u043b\u0435\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u2014 \u043f\u0435\u0440\u0435\u0434\u0432\u0438\u0433\u0430\u0435\u043c \u043c\u0430\u0448\u0438\u043d\u043a\u0443 \u0438\u043b\u0438 \u0441\u0442\u0440\u0435\u043b\u044f\u0435\u043c (\u0437\u0434\u0435\u0441\u044c \u0438 \u0434\u0430\u043b\u0435\u0435 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u043a\u043e\u0434\u0430, \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u0432 \u043a\u043e\u043d\u0446\u0435 \u0441\u0442\u0430\u0442\u044c\u0438):<\/p>\n<pre><code class=\"javascript\">document.addEventListener('keydown', (event) =&gt; {     if (event.key === 'ArrowLeft') {         navigateBattleMachine('west');     } else if (event.key === 'ArrowRight') {         navigateBattleMachine('east');     } else if (event.key === 'ArrowUp') {         navigateBattleMachine('north');     } else if (event.key === 'ArrowDown') {         navigateBattleMachine('south');     } else if (event.key === ' ') {         fireProjectile(); \/\/ \u0412\u044b\u0441\u0442\u0440\u0435\u043b     } }); <\/code><\/pre>\n<p> \u041a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0432\u0438\u0434\u0435\u0442\u044c \u0432 \u043a\u043e\u0434\u0435 \u0432\u044b\u0448\u0435, \u0437\u0430 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u0438 \u0441\u0442\u0440\u0435\u043b\u044c\u0431\u0443 \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0448\u0438 \u043d\u0430 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0435:<\/p>\n<p> <b><font color=\"#3AC1EF\">ArrowLeft<\/font><\/b> \u2014 \u0421\u0442\u0440\u0435\u043b\u043a\u0430 \u0432\u043b\u0435\u0432\u043e;<br \/> <b><font color=\"#3AC1EF\">ArrowRight<\/font><\/b> \u2014 \u0421\u0442\u0440\u0435\u043b\u043a\u0430 \u0432\u043f\u0440\u0430\u0432\u043e;<br \/> <b><font color=\"#3AC1EF\">ArrowUp<\/font><\/b> \u2014 \u0421\u0442\u0440\u0435\u043b\u043a\u0430 \u0432\u0432\u0435\u0440\u0445;<br \/> <b><font color=\"#3AC1EF\">ArrowDown<\/font><\/b> \u2014 \u0421\u0442\u0440\u0435\u043b\u043a\u0430 \u0432\u043d\u0438\u0437;<br \/> <b><font color=\"#3AC1EF\">\u041f\u0440\u043e\u0431\u0435\u043b<\/font><\/b> \u2014 \u0412\u044b\u0441\u0442\u0440\u0435\u043b.<\/p>\n<p> (\u041f\u0440\u0438\u0432\u0435\u0442, \u043f\u043e\u043a\u043b\u043e\u043d\u043d\u0438\u043a\u0430\u043c WASD, \u043d\u043e \u044f, \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043d\u0435 \u043f\u043e\u043a\u043b\u043e\u043d\u043d\u0438\u043a \u044d\u0442\u043e\u0439 \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u043a\u0438, \u0438\u0437\u0432\u0438\u043d\u0438\u0442\u0435 \ud83d\ude42 ).<br \/> \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0432\u0438\u0434\u0435\u0442\u044c, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043b\u0430\u0432\u0438\u0448, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u0432\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438: <b><font color=\"#3AC1EF\">navigateBattleMachine<\/font><\/b> (\u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0439) \u0438 <b><font color=\"#3AC1EF\">fireProjectile<\/font><\/b> (\u0434\u043b\u044f \u0441\u0442\u0440\u0435\u043b\u044c\u0431\u044b).<\/p>\n<p> \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0439 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435:<\/p>\n<pre><code class=\"javascript\">function navigateBattleMachine(direction) {     let newX = machineX;     let newY = machineY;      if (direction === 'north') {         newY -= machineVelocity;     } else if (direction === 'south') {         newY += machineVelocity;     } else if (direction === 'west') {         newX -= machineVelocity;     } else if (direction === 'east') {         newX += machineVelocity;     }      if (!checkObstacleCollision(newX, newY)) {         machineX = newX;         machineY = newY;         machineOrientation = direction;         refreshBattleMachinePosition();     } } <\/code><\/pre>\n<p> \u041a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0432\u0438\u0434\u0435\u0442\u044c, \u043e\u043d\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f (<b><font color=\"#3AC1EF\">north<\/font><\/b>, <b><font color=\"#3AC1EF\">south<\/font><\/b>, <b><font color=\"#3AC1EF\">west<\/font><\/b>, <b><font color=\"#3AC1EF\">east<\/font><\/b>), \u0434\u0430\u043b\u0435\u0435, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442 \u043d\u043e\u0432\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b (<b><font color=\"#3AC1EF\">newX<\/font><\/b>, <b><font color=\"#3AC1EF\">newY<\/font><\/b>), \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442, \u043d\u0435 \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043b\u0438 \u043c\u0430\u0448\u0438\u043d\u043a\u0430 \u0441\u043e \u0441\u0442\u0435\u043d\u0430\u043c\u0438; \u0435\u0441\u043b\u0438 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u043d\u0435\u0442, \u0442\u043e \u043c\u0430\u0448\u0438\u043d\u043a\u0430 \u043c\u043e\u0436\u0435\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u043e\u0432\u0443\u044e \u043f\u043e\u0437\u0438\u0446\u0438\u044e.<\/p>\n<p> \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 <b><font color=\"#3AC1EF\">newX<\/font><\/b>, <b><font color=\"#3AC1EF\">newY<\/font><\/b> \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0432\u043d\u044b \u0442\u0435\u043a\u0443\u0449\u0438\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c \u043c\u0430\u0448\u0438\u043d\u043a\u0438 (<b><font color=\"#3AC1EF\">machineX<\/font><\/b>, <b><font color=\"#3AC1EF\">machineY<\/font><\/b>).<\/p>\n<p> \u0412 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u043c\u044b \u043b\u0438\u0431\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u043c \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435, \u043b\u0438\u0431\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435 \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u044d\u0442\u0438\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043d\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <b><font color=\"#3AC1EF\">machineVelocity<\/font><\/b> (\u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043c\u0430\u0448\u0438\u043d\u043a\u0438).<\/p>\n<h2><font color=\"#3AC1EF\">\u258d \u0414\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u043c\u0430\u0448\u0438\u043d\u043a\u0438<\/font><\/h2>\n<p> \u0414\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u043c\u0430\u0448\u0438\u043d\u043a\u0438 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442, \u0433\u0434\u0435 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u0432\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 <b><font color=\"#3AC1EF\">machineX<\/font><\/b> \u0438 <b><font color=\"#3AC1EF\">machineY<\/font><\/b>, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0443\u0434\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u0430\u0448\u0438\u043d\u043a\u0438 \u043f\u043e \u043e\u0441\u044f\u043c X \u0438 Y.<\/p>\n<p> \u041a\u043e\u0433\u0434\u0430 \u0438\u0433\u0440\u043e\u043a \u043d\u0430\u0436\u043c\u0451\u0442 \u043d\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0448\u0438 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b, \u044d\u0442\u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f, \u0438 \u043a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u0430\u0448\u0438\u043d\u043a\u0438.<\/p>\n<p> \u0418 \u0442\u0443\u0442 \u0435\u0441\u0442\u044c \u043e\u0434\u0438\u043d \u043d\u044e\u0430\u043d\u0441: \u043c\u0430\u0448\u0438\u043d\u043a\u0430 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0435\u0437\u0434\u0438\u0442\u044c \u0433\u0434\u0435 \u0443\u0433\u043e\u0434\u043d\u043e, \u0442\u0430\u043a \u043a\u0430\u043a \u0443 \u043d\u0430\u0441 \u0435\u0449\u0451 \u0435\u0441\u0442\u044c \u0441\u0442\u0435\u043d\u043a\u0438 \u043b\u0430\u0431\u0438\u0440\u0438\u043d\u0442\u0430, \u0442\u043e \u0435\u0441\u0442\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c, \u043d\u0435 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0430\u0441\u044c \u043b\u0438 \u043c\u0430\u0448\u0438\u043d\u043a\u0430 \u0441\u043e \u0441\u0442\u0435\u043d\u043a\u0430\u043c\u0438.<\/p>\n<p> \u0414\u043b\u044f \u044d\u0442\u0438\u0445 \u0446\u0435\u043b\u0435\u0439 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044f <b><font color=\"#3AC1EF\">checkObstacleCollision<\/font><\/b>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443, \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043b\u0438 \u043c\u0430\u0448\u0438\u043d\u043a\u0430 \u043d\u0430 \u0442\u043e\u043c \u0436\u0435 \u043c\u0435\u0441\u0442\u0435, \u0447\u0442\u043e \u0438 \u0441\u0442\u0435\u043d\u0430, \u0438 \u0435\u0441\u043b\u0438 \u0434\u0430, \u0442\u043e \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0438 \u043c\u0430\u0448\u0438\u043d\u043a\u0430 \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u043d\u0430 \u043c\u0435\u0441\u0442\u0435 (\u043e\u0431 \u044d\u0442\u043e\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043d\u0438\u0436\u0435).<\/p>\n<h2><font color=\"#3AC1EF\">\u258d \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u0439<\/font><\/h2>\n<p> \u0418\u0442\u0430\u043a, \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u044b\u0445 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442, \u043c\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <b><font color=\"#3AC1EF\">checkObstacleCollision<\/font><\/b>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443, \u043d\u0435 \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043b\u0438 \u043c\u0430\u0448\u0438\u043d\u043a\u0430 \u0441\u043e \u0441\u0442\u0435\u043d\u0430\u043c\u0438. \u0415\u0441\u043b\u0438 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u043d\u0435\u0442, \u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u044b\u0437\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <b><font color=\"#3AC1EF\">refreshBattleMachinePosition<\/font><\/b>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u0442 \u043c\u0430\u0448\u0438\u043d\u043a\u0443 \u043d\u0430 \u043d\u043e\u0432\u043e\u0435 \u043c\u0435\u0441\u0442\u043e.<\/p>\n<p> \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u043e\u0434\u043d\u0430\u043a\u043e \u044d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u043c\u0435\u043d\u0435\u0435 \u0433\u0438\u0431\u043a\u0438\u0439, \u0438 \u0435\u0441\u043b\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u044b \u0437\u0430\u0445\u043e\u0442\u0438\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0435\u043a\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u0439, \u0442\u043e \u043d\u0430\u043c \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">machine.style.left = `${newX}px`; machine.style.top = `${newY}px`; <\/code><\/pre>\n<p> \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0435\u0441\u043b\u0438 \u043f\u043e\u0434\u0432\u0435\u0441\u0442\u0438 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0439 \u0438\u0442\u043e\u0433, \u0442\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u0438\u0433\u0440\u043e\u043a \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u0442 \u043a\u043b\u0430\u0432\u0438\u0448\u0443 \u0434\u043b\u044f \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <b><font color=\"#3AC1EF\">navigateBattleMachine<\/font><\/b>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442 \u043d\u043e\u0432\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043c\u0430\u0448\u0438\u043d\u043a\u0438, \u0438, \u0435\u0441\u043b\u0438 \u043d\u0435\u0442 \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u0439, \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 <b><font color=\"#3AC1EF\">machineX<\/font><\/b> \u0438 <b><font color=\"#3AC1EF\">machineY<\/font><\/b>, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u044b\u0437\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <b><font color=\"#3AC1EF\">refreshBattleMachinePosition<\/font><\/b>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u0442 \u043c\u0430\u0448\u0438\u043d\u043a\u0443 \u043d\u0430 \u043d\u043e\u0432\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435:<\/p>\n<pre><code class=\"javascript\">function refreshBattleMachinePosition() {     battleMachine.style.left = `${machineX}px`;     battleMachine.style.top = `${machineY}px`;     battleMachine.style.transform = `rotate(${         machineOrientation === 'north' ? 0 :         machineOrientation === 'east' ? 90 :         machineOrientation === 'south' ? 180 :         machineOrientation === 'west' ? 270 : 0     }deg)`; } <\/code><\/pre>\n<p> \u041a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0432\u0438\u0434\u0435\u0442\u044c, \u043c\u044b \u0437\u0434\u0435\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <b><font color=\"#3AC1EF\">left<\/font><\/b> \u0438 <b><font color=\"#3AC1EF\">top<\/font><\/b> \u0434\u043b\u044f \u0437\u0430\u0434\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u044b\u0445 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u043c\u0430\u0448\u0438\u043d\u043a\u0438. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <b><font color=\"#3AC1EF\">transform<\/font><\/b>, \u0447\u0442\u043e\u0431\u044b \u043c\u0430\u0448\u0438\u043d\u043a\u0430 \u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0430 \u0432 \u043d\u0443\u0436\u043d\u0443\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u0443.<\/p>\n<p> \u0415\u0441\u043b\u0438 \u0432\u0437\u0433\u043b\u044f\u043d\u0443\u0442\u044c \u043d\u0430 \u0432\u0441\u0451 \u044d\u0442\u043e \u043a\u043e\u043d\u0446\u0435\u043f\u0442\u0443\u0430\u043b\u044c\u043d\u043e, \u0441\u0432\u0435\u0440\u0445\u0443, \u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430, \u0433\u0434\u0435 \u0432\u0441\u0451 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043c\u0430\u0448\u0438\u043d\u043a\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0447\u0435\u0440\u0435\u0437 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 <b><font color=\"#3AC1EF\">machineX<\/font><\/b> \u0438 <b><font color=\"#3AC1EF\">machineY<\/font><\/b> \u0434\u0430\u0451\u0442 \u043d\u0430\u043c \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c \u0438 \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435. <\/p>\n<p> \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u043c\u044b \u0437\u0430\u0445\u043e\u0442\u0438\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u0430\u043a\u0443\u044e-\u0442\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f, \u0442\u043e \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u044e \u043b\u043e\u0433\u0438\u043a\u0443, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u043d\u0435\u0441\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <b><font color=\"#3AC1EF\">refreshBattleMachinePosition<\/font><\/b>.<\/p>\n<p> \u0422\u0430\u043a\u0436\u0435, \u0435\u0441\u043b\u0438 \u043c\u044b \u0440\u0435\u0448\u0438\u043c \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u043c\u0430\u0448\u0438\u043d\u043a\u0438 \u0438\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u043d\u0430 \u043f\u043e\u043b\u0435, \u0442\u043e \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u0439, \u0430 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <b><font color=\"#3AC1EF\">checkObstacleCollision<\/font><\/b>.<\/p>\n<p> \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432 (<b><font color=\"#3AC1EF\">left<\/font><\/b>, <b><font color=\"#3AC1EF\">top<\/font><\/b>, <b><font color=\"#3AC1EF\">transform<\/font><\/b>) \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432\u0435\u0441\u044c\u043c\u0430 \u0431\u044b\u0441\u0442\u0440\u043e, \u0447\u0442\u043e \u0434\u0430\u0441\u0442 \u043d\u0430\u043c \u0431\u044b\u0441\u0442\u0440\u0443\u044e \u0440\u0435\u0430\u043a\u0446\u0438\u044e \u043d\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0438\u0433\u0440\u043e\u043a\u0430.<\/p>\n<p> \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/Canvas_API\">Canvas<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0438 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u0433\u0440, \u043e\u0434\u043d\u0430\u043a\u043e \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043e\u0431\u044b\u0447\u043d\u044b\u0435 html-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b <b><font color=\"#3AC1EF\">div<\/font><\/b> (\u0437\u0434\u0435\u0441\u044c \u0438 \u0434\u0430\u043b\u0435\u0435 \u2014 \u0431\u0435\u0437 \u0444\u0438\u0433\u0443\u0440\u043d\u044b\u0445 \u0441\u043a\u043e\u0431\u043e\u043a, \u0442.\u043a. \u0438\u043d\u0430\u0447\u0435 \u0425\u0430\u0431\u0440 \u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442), \u0447\u0442\u043e \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u0440\u043e\u0449\u0435 \u0434\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u043a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CSS (\u0430 \u0435\u0441\u043b\u0438 \u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 Canvas, \u0442\u043e \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0431\u044b \u0432\u0441\u0451, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0443 \u043d\u0430\u0441 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS \u2014 \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 \u0447\u0438\u0441\u0442\u043e\u0433\u043e JavaScript, \u0447\u0442\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u043b\u043e \u0431\u044b \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u0434\u0430).<\/p>\n<p> \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, Canvas \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0438\u0433\u0440, \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a \u043d\u0430\u0448\u0430 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0430\u044f \u0438\u0433\u0440\u0430 \u0432\u043f\u043e\u043b\u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u0438 \u0431\u043e\u043b\u0435\u0435 \u0441\u043a\u0440\u043e\u043c\u043d\u044b\u043c\u0438 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438.<\/p>\n<h2><font color=\"#3AC1EF\">\u258d \u0421\u0442\u0440\u0435\u043b\u044c\u0431\u0430<\/font><\/h2>\n<p> \u041a\u043e\u0433\u0434\u0430 \u0438\u0433\u0440\u043e\u043a \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u0442 \u043d\u0430 \u043a\u043b\u0430\u0432\u0438\u0448\u0443 <b><font color=\"#3AC1EF\">\u041f\u0440\u043e\u0431\u0435\u043b<\/font><\/b>, \u0442\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <b><font color=\"#3AC1EF\">fireProjectile<\/font><\/b>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u043d\u043e\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u2014 \u043f\u0443\u043b\u044e (\u0438\u043b\u0438, \u0435\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435, \u0441\u043d\u0430\u0440\u044f\u0434), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043d\u043e\u0432\u044b\u0439 \u0431\u043b\u043e\u043a <b><font color=\"#3AC1EF\">div<\/font><\/b>, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c\u044b\u0439 CSS-\u043a\u043b\u0430\u0441\u0441\u043e\u043c <b><font color=\"#3AC1EF\">.projectile<\/font><\/b>.<\/p>\n<p> \u041d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043f\u0443\u043b\u0438 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043e\u0442 \u0442\u043e\u0433\u043e, \u043a\u0443\u0434\u0430 \u043f\u043e\u0432\u0451\u0440\u043d\u0443\u0442\u0430 \u043c\u0430\u0448\u0438\u043d\u043a\u0430:<\/p>\n<ul>\n<li>\u0415\u0441\u043b\u0438 \u043c\u0430\u0448\u0438\u043d\u043a\u0430 \u0441\u043c\u043e\u0442\u0440\u0438\u0442 \u0432\u0432\u0435\u0440\u0445, \u0442\u043e \u043f\u0443\u043b\u044f \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0443\u0442\u044c \u0432\u044b\u0448\u0435 \u043c\u0430\u0448\u0438\u043d\u043a\u0438.<\/li>\n<li>\u0415\u0441\u043b\u0438 \u043c\u0430\u0448\u0438\u043d\u043a\u0430 \u0441\u043c\u043e\u0442\u0440\u0438\u0442 \u0432\u043f\u0440\u0430\u0432\u043e \u2014 \u043e\u043d\u0430 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0430\u0432\u0435\u0435 \u043c\u0430\u0448\u0438\u043d\u043a\u0438.<\/li>\n<li>\u0438 \u0442.\u0434.<\/li>\n<\/ul>\n<p> \u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0443\u043b\u0438, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u0441\u0447\u0451\u0442 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b\u0430, \u0433\u0434\u0435 \u0447\u0435\u0440\u0435\u0437 \u043a\u0430\u0436\u0434\u044b\u0435 50 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0435\u0451 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b, \u0438 \u043e\u0434\u0438\u043d \u0448\u0430\u0433 \u043f\u0443\u043b\u0438 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 5 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439.<\/p>\n<p> \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043f\u0443\u043b\u044f \u0432\u044b\u043b\u0435\u0442\u0430\u0435\u0442 \u0432 \u0442\u043e\u043c \u0436\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438, \u043a\u0443\u0434\u0430 \u00ab\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u00bb \u043c\u0430\u0448\u0438\u043d\u043a\u0430 \u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u0442 \u0441\u0432\u043e\u0451 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u043d\u0435 \u0432\u044b\u0439\u0434\u0435\u0442 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u0438\u043b\u0438 \u043d\u0435 \u0441\u0442\u043e\u043b\u043a\u043d\u0451\u0442\u0441\u044f \u0441\u043e \u0441\u0442\u0435\u043d\u043e\u0439: <\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">function fireProjectile()<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">function fireProjectile() {     let projectileStartX, projectileStartY;     let projectileDirection = machineOrientation;      \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043f\u0443\u043b\u0438 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0442\u0430\u043d\u043a\u0430     if (projectileDirection === 'north') {         projectileStartX = machineX + 10; \/\/ \u0426\u0435\u043d\u0442\u0440 \u0442\u0430\u043d\u043a\u0430 \u043f\u043e X         projectileStartY = machineY - 3;  \/\/ \u041d\u0430\u0434 \u0442\u0430\u043d\u043a\u043e\u043c     } else if (projectileDirection === 'south') {         projectileStartX = machineX + 10; \/\/ \u0426\u0435\u043d\u0442\u0440 \u0442\u0430\u043d\u043a\u0430 \u043f\u043e X         projectileStartY = machineY + 23; \/\/ \u041f\u043e\u0434 \u0442\u0430\u043d\u043a\u043e\u043c     } else if (projectileDirection === 'west') {         projectileStartX = machineX - 3;  \/\/ \u0421\u043b\u0435\u0432\u0430 \u043e\u0442 \u0442\u0430\u043d\u043a\u0430         projectileStartY = machineY + 10; \/\/ \u0426\u0435\u043d\u0442\u0440 \u0442\u0430\u043d\u043a\u0430 \u043f\u043e Y     } else if (projectileDirection === 'east') {         projectileStartX = machineX + 23; \/\/ \u0421\u043f\u0440\u0430\u0432\u0430 \u043e\u0442 \u0442\u0430\u043d\u043a\u0430         projectileStartY = machineY + 10; \/\/ \u0426\u0435\u043d\u0442\u0440 \u0442\u0430\u043d\u043a\u0430 \u043f\u043e Y     }      \/\/ \u0421\u043e\u0437\u0434\u0430\u0451\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u0443\u043b\u0438     const projectile = document.createElement('div');     projectile.classList.add('projectile');     projectile.style.left = `${projectileStartX}px`;     projectile.style.top = `${projectileStartY}px`;     battleArena.appendChild(projectile);      let projectileX = projectileStartX;     let projectileY = projectileStartY;      \/\/ \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b \u0434\u043b\u044f \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043f\u0443\u043b\u0438     const projectileInterval = setInterval(() =&gt; {         \/\/ \u0414\u0432\u0438\u0433\u0430\u0435\u043c \u043f\u0443\u043b\u044e \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f         if (projectileDirection === 'north') {             projectileY -= 5;         } else if (projectileDirection === 'south') {             projectileY += 5;         } else if (projectileDirection === 'west') {             projectileX -= 5;         } else if (projectileDirection === 'east') {             projectileX += 5;         }          \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0443\u043b\u0438         projectile.style.left = `${projectileX}px`;         projectile.style.top = `${projectileY}px`;          \/\/ \u0415\u0441\u043b\u0438 \u043f\u0443\u043b\u044f \u0432\u044b\u0448\u043b\u0430 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u043f\u043e\u043b\u044f, \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u0435\u0451         if (projectileX &lt; 0 || projectileX &gt; 400 || projectileY &lt; 0 || projectileY &gt; 400) {             clearInterval(projectileInterval);             projectile.remove();         }          \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0435 \u043f\u0443\u043b\u0438 \u0441\u043e \u0441\u0442\u0435\u043d\u0430\u043c\u0438         barriers.forEach(barrier =&gt; {             const barrierX = barrier.x * 20;             const barrierY = barrier.y * 20;             if (projectileX &gt;= barrierX &amp;&amp; projectileX &lt;= barrierX + 20 &amp;&amp; projectileY &gt;= barrierY &amp;&amp; projectileY &lt;= barrierY + 20) {                 const barrierElement = barrierElements.get(`${barrier.x}-${barrier.y}`);                 if (barrierElement) {                     let durability = parseInt(barrierElement.dataset.durability);                     durability -= 1;                     barrierElement.dataset.durability = durability;                      \/\/ \u0423\u0434\u0430\u043b\u044f\u0435\u043c \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0438\u043a\u0438 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b                     const textureColors = Array.from(barrierElement.querySelectorAll('.barrier-texture'))                         .map(pixel =&gt; pixel.style.backgroundColor);                     const numFragments = Math.min(10, Math.floor(Math.random() * 10) + 1);                     removeTexturePixels(barrierElement, projectileX - barrierX, projectileY - barrierY, numFragments);                      \/\/ \u0421\u043e\u0437\u0434\u0430\u0451\u043c \u043e\u0442\u043b\u0435\u0442\u0430\u044e\u0449\u0438\u0435 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0438\u043a\u0438-\u0431\u0440\u044b\u0437\u0433\u0438                     for (let i = 0; i &lt; numFragments; i++) {                         const color = textureColors[Math.floor(Math.random() * textureColors.length)];                         createFragments(projectileX, projectileY, color);                     }                      \/\/ \u0415\u0441\u043b\u0438 \u0437\u0434\u043e\u0440\u043e\u0432\u044c\u0435 \u0441\u0442\u0435\u043d\u044b \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u043e\u0441\u044c, \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u0435\u0451                     if (durability &lt;= 0) {                         barrierElement.remove();                         barriers.splice(barriers.indexOf(barrier), 1);                     }                 }                 clearInterval(projectileInterval);                 projectile.remove();             }         });     }, 50); } <\/code><\/pre>\n<\/div><\/div>\n<p> <\/p>\n<h2><font color=\"#3AC1EF\">\u258d \u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043f\u0443\u043b\u0438 \u0438 \u0441\u0442\u0435\u043d<\/font><\/h2>\n<p> \u041a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0432\u0438\u0434\u0435\u0442\u044c \u0432 \u043a\u043e\u0434\u0435 \u0432\u044b\u0448\u0435, \u0442\u0430\u043c \u0436\u0435 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043f\u0443\u043b\u0438 \u0441\u043e \u0441\u0442\u0435\u043d\u0430\u043c\u0438.<\/p>\n<p> \u041d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0448\u0430\u0433\u0435 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043f\u0443\u043b\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430, \u043d\u0435 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0430\u0441\u044c \u043b\u0438 \u043e\u043d\u0430 \u0441\u043e \u0441\u0442\u0435\u043d\u043e\u0439, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u0430 \u0436\u0435 \u0441\u0430\u043c\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430, \u0447\u0442\u043e \u0438 \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u0439 \u0442\u0430\u043d\u043a\u0430:<\/p>\n<ul>\n<li>\u0415\u0441\u043b\u0438 \u043f\u0443\u043b\u044f \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u0432 \u0441\u0442\u0435\u043d\u0443, \u0442\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442\u0441\u044f \u00ab\u0437\u0434\u043e\u0440\u043e\u0432\u044c\u0435\u00bb \u0441\u0442\u0435\u043d\u044b (durability);<\/li>\n<li>\u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0434\u043e\u0440\u043e\u0432\u044c\u0435 \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442 \u043d\u0443\u043b\u044f, \u0442\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442* \u0441\u0442\u0435\u043d\u044b \u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f:<\/li>\n<\/ul>\n<p> <\/p>\n<pre><code class=\"javascript\">if (durability &lt;= 0) {     barrierElement.remove(); \/\/ \u0423\u0434\u0430\u043b\u044f\u0435\u043c \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u0441\u0442\u0435\u043d\u044b     barriers.splice(barriers.indexOf(barrier), 1); \/\/ \u0423\u0434\u0430\u043b\u044f\u0435\u043c \u0435\u0433\u043e \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0441\u0442\u0435\u043d } <\/code><\/pre>\n<p> <\/p>\n<ul>\n<li>\u041f\u0440\u0438 \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u0438 \u0432 \u0441\u0442\u0435\u043d\u0443 \u0442\u0430\u043a\u0436\u0435 \u0443\u0434\u0430\u043b\u044f\u044e\u0442\u0441\u044f \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0438\u043a\u0438 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b \u0438 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u043e\u0442\u043b\u0435\u0442\u0430\u044e\u0449\u0438\u0435 \u043e\u0441\u043a\u043e\u043b\u043a\u0438.<\/li>\n<\/ul>\n<p> *\u0417\u0434\u0435\u0441\u044c \u043f\u043e\u0434 \u00ab\u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u043c\u00bb \u0441\u0442\u0435\u043d\u044b \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u043a\u0432\u0430\u0434\u0440\u0430\u0442 20\u044520 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043a\u0430\u043a <b><font color=\"#3AC1EF\">div<\/font><\/b>, \u0441\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c\u044b\u0439 CSS-\u043a\u043b\u0430\u0441\u0441\u043e\u043c <b><font color=\"#3AC1EF\">.barrier<\/font><\/b>.<\/p>\n<pre><code class=\"javascript\">const barrierElement = document.createElement('div'); barrierElement.classList.add('barrier'); barrierElement.style.left = `${barrier.x * 20}px`; barrierElement.style.top = `${barrier.y * 20}px`; barrierElement.dataset.durability = 3; \/\/ \u0417\u0434\u043e\u0440\u043e\u0432\u044c\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 <\/code><\/pre>\n<p> \u0410 \u0443\u0436\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 <b><font color=\"#3AC1EF\">div<\/font><\/b>, \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c <b><font color=\"#3AC1EF\">.barrier-texture<\/font><\/b>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438 \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u044d\u0444\u0444\u0435\u043a\u0442 \u00ab\u0448\u0443\u043c\u0430\u00bb \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b.<\/p>\n<p> \u041f\u0440\u0438 \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u0438 \u043f\u0443\u043b\u0438 \u0432 \u0441\u0442\u0435\u043d\u0443 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <b><font color=\"#3AC1EF\">createFragments<\/font><\/b>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0438\u043a\u043e\u0432, \u0440\u0430\u0437\u043b\u0435\u0442\u0430\u044e\u0449\u0438\u0445\u0441\u044f \u0432 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0445 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f\u0445 \u0438 \u0434\u0432\u0438\u0436\u0443\u0449\u0438\u0445\u0441\u044f \u043f\u043e \u0441\u0432\u043e\u0438\u043c \u0442\u0440\u0430\u0435\u043a\u0442\u043e\u0440\u0438\u044f\u043c, \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0437\u0430\u043c\u0435\u0434\u043b\u044f\u044f\u0441\u044c \u0438 \u043f\u0440\u043e\u043f\u0430\u0434\u0430\u044f \u0432 \u0441\u0430\u043c\u043e\u043c \u043a\u043e\u043d\u0446\u0435.<\/p>\n<p> \u041a\u0441\u0442\u0430\u0442\u0438 \u0433\u043e\u0432\u043e\u0440\u044f, \u0432\u043e\u0442 \u043c\u044b \u0432\u044b\u0448\u0435 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u043c \u0431\u043b\u043e\u043a\u0438 <b><font color=\"#3AC1EF\">div<\/font><\/b>, \u0430 \u043f\u043e\u0447\u0435\u043c\u0443 \u0432\u043e\u043e\u0431\u0449\u0435 \u043c\u044b \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c? \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0438\u0445 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS, \u0430 \u0438\u0445 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e JavaScript \u0438 \u043a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, <b><font color=\"#3AC1EF\">div<\/font><\/b>-\u044b \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u044e\u0442\u0441\u044f \u0432\u043e \u0432\u0441\u0435\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0431\u0435\u0437 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u00ab\u0442\u0430\u043d\u0446\u0435\u0432 \u0441 \u0431\u0443\u0431\u043d\u043e\u043c\u00bb.<\/p>\n<p> \u0412 \u0438\u0442\u043e\u0433\u0435, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0432\u0441\u0435 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u0438\u0433\u0440\u043e\u0432\u043e\u043c \u043f\u043e\u043b\u0435 \u2014 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u044b \u0432 \u0432\u0438\u0434\u0435 \u0442\u0430\u043a\u0438\u0445 \u0431\u043b\u043e\u043a\u043e\u0432\u2026<\/p>\n<h2><font color=\"#3AC1EF\">\u258d \u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043b\u0430\u0431\u0438\u0440\u0438\u043d\u0442\u0430<\/font><\/h2>\n<p> \u041b\u0430\u0431\u0438\u0440\u0438\u043d\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 createChaoticTerrain, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u0442 \u0441\u0442\u0435\u043d\u044b \u043d\u0430 \u0438\u0433\u0440\u043e\u0432\u043e\u043c \u043f\u043e\u043b\u0435, \u0432 \u0442\u043e \u0436\u0435 \u0432\u0440\u0435\u043c\u044f \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0434\u043b\u044f \u043c\u0430\u0448\u0438\u043d\u043a\u0438 \u0432 \u0446\u0435\u043d\u0442\u0440\u0435:<\/p>\n<pre><code class=\"javascript\">function createChaoticTerrain(width, height) {     const terrain = [];     for (let i = 0; i &lt; width; i++) {         for (let j = 0; j &lt; height; j++) {             if (Math.random() &lt; 0.3 &amp;&amp; !(i === Math.floor(width \/ 2) &amp;&amp; j === Math.floor(height \/ 2))) {                 terrain.push({ x: i, y: j });             }         }     }     return terrain; } <\/code><\/pre>\n<p> \u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u044d\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c: \u043c\u044b \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043c \u043f\u043e \u0432\u0441\u0435\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044f (20\u044520 \u0431\u043b\u043e\u043a\u043e\u0432) \u0438 \u0441 \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u044c\u044e \u0432 30% (Math.random() &lt; 0.3) \u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0441\u0442\u0435\u043d\u0443 \u2014 \u044d\u0442\u0438\u043c \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0435 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u0435\u043d.<\/p>\n<p> \u041a\u0441\u0442\u0430\u0442\u0438 \u0433\u043e\u0432\u043e\u0440\u044f, \u0435\u0441\u043b\u0438 \u0431\u044b \u043c\u044b \u0437\u0430\u0445\u043e\u0442\u0435\u043b\u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u043f\u043b\u043e\u0442\u043d\u043e\u0441\u0442\u044c \u043b\u0430\u0431\u0438\u0440\u0438\u043d\u0442\u0430, \u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 random, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0430\u043a: (Math.random() &lt; 0.5.<\/p>\n<p> \u041a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0432\u0438\u0434\u0435\u0442\u044c \u0432 \u043a\u043e\u0434\u0435 \u0432\u044b\u0448\u0435, \u043c\u044b \u043d\u0435 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u043c \u0441\u0442\u0435\u043d\u044b \u0432 \u0446\u0435\u043d\u0442\u0440\u0435 \u043f\u043e\u043b\u044f <b><font color=\"#3AC1EF\">i === Math.floor(width \/ 2) &amp;&amp; j === Math.floor(height \/ 2)<\/font><\/b>.<\/p>\n<p> \u0422\u0430\u043a\u0430\u044f \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u0430\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043b\u0430\u0431\u0438\u0440\u0438\u043d\u0442\u0430 \u0434\u0435\u043b\u0430\u0435\u0442 \u043b\u0430\u0431\u0438\u0440\u0438\u043d\u0442 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u0438\u0433\u0440\u043e\u043a \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0438\u0433\u0440\u0443, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u043d\u043e\u0441\u0438\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u043e\u0441\u0442\u0438 \u0438 \u0434\u0435\u043b\u0430\u0435\u0442 \u0438\u0433\u0440\u0443 \u0431\u043e\u043b\u0435\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439.<\/p>\n<p> \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0441\u0442\u0435\u043d\u044b \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u043c\u0438 \u0437\u0430 \u0441\u0447\u0451\u0442 \u0443\u043a\u0440\u0430\u0448\u0435\u043d\u0438\u044f \u0438\u0445 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e\u043c \u0440\u0430\u0437\u043b\u0438\u0447\u0430\u044e\u0449\u0438\u0445\u0441\u044f \u043f\u043e \u0446\u0432\u0435\u0442\u0443 \u00ab\u0448\u0443\u043c\u043e\u0432\u044b\u0445\u00bb \u0431\u043b\u043e\u043a\u043e\u0432, \u043e \u0447\u0451\u043c \u0443\u0436\u0435 \u0431\u044b\u043b\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0432\u044b\u0448\u0435.<\/p>\n<p> \u041e\u0434\u043d\u0430\u043a\u043e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0438\u0445 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435. \u0412\u043e\u0442 \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a\u0430\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u0432 \u043a\u043e\u0434\u0435:<\/p>\n<pre><code class=\"javascript\">for (let i = 0; i &lt; 20; i += 3) {     for (let j = 0; j &lt; 20; j += 3) {         const texturePixel = document.createElement('div');         texturePixel.classList.add('barrier-texture');         texturePixel.style.left = `${i}px`;         texturePixel.style.top = `${j}px`;         texturePixel.style.backgroundColor = `rgba(0, ${100 + Math.floor(Math.random() * 155)}, 0, 0.8)`;         barrierElement.appendChild(texturePixel);     } } <\/code><\/pre>\n<p> \u041a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0432\u0438\u0434\u0435\u0442\u044c, \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0438\u043a\u0438 <b><font color=\"#3AC1EF\">div<\/font><\/b>, \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c 3\u04453 \u043f\u0438\u043a\u0441\u0435\u043b\u044f, \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0435 CSS-\u043a\u043b\u0430\u0441\u0441\u043e\u043c <b><font color=\"#3AC1EF\">.barrier-texture<\/font><\/b>, \u0433\u0434\u0435 \u0446\u0432\u0435\u0442 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0438\u043a\u0430 \u043d\u0435\u043c\u043d\u043e\u0436\u043a\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f.<\/p>\n<h2><font color=\"#3AC1EF\">\u258d \u0420\u0430\u0437\u0440\u0443\u0448\u0435\u043d\u0438\u0435 \u0441\u0442\u0435\u043d<\/font><\/h2>\n<p> \u041a\u0430\u043a \u0432\u044b\u0448\u0435 \u0443\u0436\u0435 \u0431\u044b\u043b\u043e \u043c\u0435\u043b\u044c\u043a\u043e\u043c \u0441\u043a\u0430\u0437\u0430\u043d\u043e, \u043a\u0430\u0436\u0434\u044b\u0439 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u0441\u0442\u0435\u043d\u044b (20\u044520 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439) \u0438\u043c\u0435\u0435\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u00ab\u0437\u0434\u043e\u0440\u043e\u0432\u044c\u0435\u00bb (durability).<\/p>\n<p> \u041a\u0430\u0436\u0434\u043e\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u0435 \u043f\u0443\u043b\u0438 \u0432 \u0441\u0442\u0435\u043d\u0443 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u0437\u0434\u043e\u0440\u043e\u0432\u044c\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0441\u0442\u0435\u043d\u044b:<\/p>\n<pre><code class=\"javascript\">let durability = parseInt(barrierElement.dataset.durability); durability -= 1; barrierElement.dataset.durability = durability; <\/code><\/pre>\n<p> \u0415\u0441\u043b\u0438 \u0437\u0434\u043e\u0440\u043e\u0432\u044c\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0441\u0442\u0435\u043d\u044b \u0435\u0449\u0451 \u043d\u0435 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u043b\u043e\u0441\u044c \u0434\u043e \u043f\u0440\u0435\u0434\u0435\u043b\u0430, \u0442\u043e \u043c\u044b \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u0447\u0430\u0441\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <b><font color=\"#3AC1EF\">div<\/font><\/b> removeTexturePixels:<\/p>\n<pre><code class=\"javascript\">removeTexturePixels(barrierElement, projectileX - barrierX, projectileY - barrierY, numFragments);<\/code><\/pre>\n<p> \u0415\u0441\u043b\u0438 \u0437\u0434\u043e\u0440\u043e\u0432\u044c\u0435 \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442 \u043d\u0443\u043b\u044f \u2014 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f:<\/p>\n<pre><code class=\"javascript\">if (durability &lt;= 0) {     barrierElement.remove();     barriers.splice(barriers.indexOf(barrier), 1); } <\/code><\/pre>\n<p> \u041a\u0430\u043a \u0443\u0436\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u043e\u0441\u044c, \u043b\u044e\u0431\u043e\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u0435 \u043f\u0443\u043b\u0438 \u0432 \u0441\u0442\u0435\u043d\u0443 \u2014 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0435 \u043e\u0442\u043b\u0435\u0442\u0430\u044e\u0449\u0438\u0445 \u043e\u0442 \u043d\u0435\u0451 \u043e\u0441\u043a\u043e\u043b\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u044b\u0437\u043e\u0432\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 createFragments:<\/p>\n<pre><code class=\"javascript\">for (let i = 0; i &lt; numFragments; i++) {     const color = textureColors[Math.floor(Math.random() * textureColors.length)];     createFragments(projectileX, projectileY, color); } <\/code><\/pre>\n<p> \u0420\u0430\u0437\u0440\u0443\u0448\u0435\u043d\u0438\u0435 \u0441\u0442\u0435\u043d \u043f\u0440\u0438\u0432\u043d\u043e\u0441\u0438\u0442 \u0432 \u0438\u0433\u0440\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u0430, \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u043e\u0434\u0430 \u00ab\u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430\u00bb \u0438\u0433\u0440\u044b. \u041d\u0443 \u0438 \u043e\u043f\u044f\u0442\u044c \u0436\u0435 \u00ab\u043b\u043e\u043c\u0430\u0442\u044c \u2014 \u043d\u0435 \u0441\u0442\u0440\u043e\u0438\u0442\u044c\u00bb, \u0432 \u044d\u0442\u043e\u043c \u0435\u0441\u0442\u044c \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0441\u0432\u043e\u0451 \u043e\u0441\u043e\u0431\u043e\u0435 \u0443\u0434\u043e\u0432\u043e\u043b\u044c\u0441\u0442\u0432\u0438\u0435 \ud83d\ude42<\/p>\n<p> \u041a\u0430\u043a \u0443\u0436\u0435 \u0431\u044b\u043b\u043e \u0432\u044b\u0448\u0435 \u0441\u043a\u0430\u0437\u0430\u043d\u043e, \u043e\u0442\u043b\u0435\u0442\u0430\u044e\u0449\u0438\u0435 \u043e\u0441\u043a\u043e\u043b\u043a\u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <b><font color=\"#3AC1EF\">createFragments<\/font><\/b>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 <b><font color=\"#3AC1EF\">div<\/font><\/b>-\u044b, \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c <b><font color=\"#3AC1EF\">.fragments<\/font><\/b>, \u0433\u0434\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0438\u043a \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f, \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0437\u0430\u043c\u0435\u0434\u043b\u044f\u0435\u0442\u0441\u044f \u0438 \u043f\u043e\u0442\u043e\u043c \u0432\u043e\u0432\u0441\u0435 \u0438\u0441\u0447\u0435\u0437\u0430\u0435\u0442. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0435\u0451 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435:<\/p>\n<pre><code class=\"javascript\">function createFragments(x, y, color) {     const fragment = document.createElement('div');     fragment.classList.add('fragments');     fragment.style.left = `${x}px`;     fragment.style.top = `${y}px`;     fragment.style.backgroundColor = color;     battleArena.appendChild(fragment);      let fragmentX = x;     let fragmentY = y;     let dx = (Math.random() - 0.5) * 4; \/\/ \u0421\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e X     let dy = (Math.random() - 0.5) * 4; \/\/ \u0421\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e Y     let bounceCount = 0;      const fragmentInterval = setInterval(() =&gt; {         fragmentX += dx;         fragmentY += dy;          \/\/ \u0415\u0441\u043b\u0438 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0438\u043a \u0443\u043b\u0435\u0442\u0435\u043b \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0434\u0430\u043b\u0435\u043a\u043e, \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u0435\u0433\u043e         if (Math.abs(fragmentX - x) &gt; 30 || Math.abs(fragmentY - y) &gt; 30) {             clearInterval(fragmentInterval);             fragment.remove();             return;         }          \/\/ \u0415\u0441\u043b\u0438 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0438\u043a \u0443\u0434\u0430\u0440\u0438\u043b\u0441\u044f \u043e \u043a\u0440\u0430\u0439 \u043f\u043e\u043b\u044f, \u043e\u043d \u043e\u0442\u0441\u043a\u0430\u043a\u0438\u0432\u0430\u0435\u0442         if (fragmentX &lt; 0 || fragmentX &gt; 400 || fragmentY &lt; 0 || fragmentY &gt; 400) {             dx *= -0.8;             dy *= -0.8;             bounceCount++;         }          \/\/ \u0415\u0441\u043b\u0438 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0438\u043a \u043e\u0442\u0441\u043a\u043e\u0447\u0438\u043b 5 \u0440\u0430\u0437, \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u0435\u0433\u043e         if (bounceCount &gt;= 5) {             clearInterval(fragmentInterval);             fragment.remove();             return;         }          \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0438\u043a\u0430         fragment.style.left = `${fragmentX}px`;         fragment.style.top = `${fragmentY}px`;     }, 50); } <\/code><\/pre>\n<p> \u0418 \u043d\u0430\u043f\u043e\u0441\u043b\u0435\u0434\u043e\u043a, \u043f\u043e \u043f\u043e\u0432\u043e\u0434\u0443 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043c\u0430\u0448\u0438\u043d\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0435\u0449\u0451 \u0432\u043e\u0442 \u0447\u0442\u043e: \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e \u0432 \u043f\u043e\u0448\u0430\u0433\u043e\u0432\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435, \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u0440\u043e\u0449\u0435, \u0447\u0435\u043c \u043f\u043b\u0430\u0432\u043d\u043e\u0435, \u0438 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0432\u0430\u0436\u043d\u043e \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0439 \u0438\u0433\u0440\u044b, \u0433\u0434\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0430.<\/p>\n<p> \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0435\u0441\u0442\u044c \u043c\u044b\u0441\u043b\u0438 \u0443\u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0443 \u0438\u0433\u0440\u0443: \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u043d\u044b\u0445 \u00ab\u0432\u0440\u0430\u0433\u043e\u0432\u00bb, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0440\u0435\u0436\u0438\u043c \u043c\u043d\u043e\u0433\u043e\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0439 \u0438\u0433\u0440\u044b \u2014 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0435\u0439\u0441\u044f \u0434\u043b\u044f \u043e\u0431\u043c\u0435\u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043c\u0435\u0436\u0434\u0443 \u0438\u0433\u0440\u043e\u043a\u0430\u043c\u0438. \u0414\u0443\u043c\u0430\u044e, \u0448\u0442\u0443\u043a 10 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 websocket-\u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0439 esp32 \u043f\u043e\u0442\u044f\u043d\u0435\u0442 (\u0442.\u0435. 10 \u0438\u0433\u0440\u043e\u043a\u043e\u0432 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e). \u041d\u0430\u0434\u043e \u0431\u0443\u0434\u0435\u0442 \u0435\u0449\u0451 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0436\u0434\u0443 \u0438\u0433\u0440\u043e\u043a\u0430\u043c\u0438, \u0447\u0442\u043e\u0431\u044b esp32 \u044d\u0442\u043e \u0432\u0441\u0451 \u0432\u044b\u0442\u044f\u043d\u0443\u043b\u0430:<\/p>\n<ul>\n<li>\u041f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 (\u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b, \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435, \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u044b).<\/li>\n<li>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0438 \u0444\u0438\u0437\u0438\u043a\u0430 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430, \u0447\u0442\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440.<\/li>\n<\/ul>\n<p> \u0414\u0443\u043c\u0430\u044e, \u0447\u0442\u043e \u0432 \u0446\u0435\u043b\u043e\u043c \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0437\u0430\u043d\u044f\u0442\u043d\u043e, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0435\u0441\u043b\u0438 \u0440\u044f\u0434\u043e\u043c \u0441 \u0438\u0433\u0440\u043e\u0432\u044b\u043c \u043f\u043e\u043b\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0435\u0449\u0451 \u0438 \u0447\u0430\u0442, \u0447\u0442\u043e\u0431\u044b \u0438\u0433\u0440\u043e\u043a\u0430\u043c \u0431\u044b\u043b\u043e \u0443\u0434\u043e\u0431\u043d\u0435\u0435 \u043e\u0431\u0449\u0430\u0442\u044c\u0441\u044f \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c.<\/p>\n<p> \u041a\u0441\u0442\u0430\u0442\u0438, \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0438\u0433\u0440\u043e\u0432\u043e\u0435 \u043f\u043e\u043b\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n<p> <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/wo\/y6\/te\/woy6te9ujczcqotqbd9tyylk9by.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/wo\/y6\/te\/woy6te9ujczcqotqbd9tyylk9by.jpeg\" data-blurred=\"true\"\/><\/p>\n<blockquote><p>\u0422\u0430\u043a \u0447\u0442\u043e, \u043a\u0430\u043a \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u0441\u044f \u2014 \u00abTo be continued! Stay tuned\u2026\u00bb<br \/> \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u0430\u0442\u0440\u0430\u0432\u043a\u0438 \u0441\u043a\u0430\u0436\u0443 \u0442\u043e\u043b\u044c\u043a\u043e \u2014 \u0447\u0442\u043e \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 (\u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u044b\u0445\u043e\u0434\u0430 \u0441\u0442\u0430\u0442\u044c\u0438) \u0432\u0442\u043e\u0440\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0438\u0433\u0440\u044b \u0441 \u043c\u0443\u043b\u044c\u0442\u0438\u043f\u043b\u0435\u0435\u0440\u043e\u043c \u0443\u0436\u0435 \u043f\u043e\u0447\u0442\u0438 \u0433\u043e\u0442\u043e\u0432\u0430 \u2014 \u0442\u0430\u043a \u0447\u0442\u043e \u0436\u0434\u0451\u043c \ud83d\ude42<\/p><\/blockquote>\n<p> \u041d\u0430 \u044d\u0442\u043e\u043c \u044f \u043d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u0437\u0430\u043a\u0440\u0443\u0433\u043b\u044f\u044e\u0441\u044c, \u0430 \u0436\u0435\u043b\u0430\u044e\u0449\u0438\u0435 \u043c\u043e\u0433\u0443\u0442 \u0432\u0437\u044f\u0442\u044c \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u043d\u0438\u0436\u0435, \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043a \u0441\u0435\u0431\u0435, \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432 \u0431\u043b\u043e\u043a\u043d\u043e\u0442, \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0441 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c .html \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b.<\/p>\n<blockquote><p>\u0421\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043d\u0435 \u0432\u044b\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e \u0432 \u0432\u0438\u0434\u0435 \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430, \u0447\u0442\u043e\u0431\u044b \u0432\u044b \u043d\u0435 \u0441\u0442\u0430\u043b\u0438 \u0441\u043e\u043c\u043d\u0435\u0432\u0430\u0442\u044c\u0441\u044f \u2014 \u00ab\u0430 \u0432\u0434\u0440\u0443\u0433 \u0442\u0430\u043c \u0441\u0442\u0440\u0430\u0448\u043d\u044b\u0439 \u0432\u0438\u0440\u0443\u0441\u00bb? \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0444\u0430\u0439\u043b \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e, \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0432 \u043a\u043e\u0434.<\/p><\/blockquote>\n<p> \u0414\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f \u00ab\u043c\u043e\u0434\u043d\u044b\u0439\u00bb \u0441\u043f\u043e\u0441\u043e\u0431 \u0441 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c DeepSeek (\u0431\u044b\u043b\u043e \u043b\u044e\u0431\u043e\u043f\u044b\u0442\u043d\u043e \u0433\u043b\u044f\u043d\u0443\u0442\u044c, \u043a\u0430\u043a \u043e\u043d \u0432 \u044d\u0442\u043e\u043c \u0434\u0435\u043b\u0435), \u043f\u0440\u0430\u0432\u0434\u0430 \u044d\u0442\u043e \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0442\u044f\u0436\u043a\u043e \u0438 \u0437\u0430\u043d\u044f\u043b\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u2014 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0442\u0440\u0443\u0434\u043d\u043e \u0431\u044b\u043b\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u043c\u043d\u043e\u0433\u0438\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b. \u041f\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0437\u0430\u043d\u044f\u043b\u043e 2 \u0432\u0435\u0447\u0435\u0440\u0430 (8-9 \u0447\u0430\u0441\u043e\u0432). \u041f\u0440\u0438\u0447\u0451\u043c, \u0447\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u2014 \u044d\u0442\u0438 \u0432\u0435\u0447\u0435\u0440\u0430 \u0431\u044b\u043b\u0438 \u0440\u0430\u0437\u043d\u0435\u0441\u0435\u043d\u044b \u0432\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043d\u0430 \u043d\u0435\u0434\u0435\u043b\u044e \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e. \u0418 \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0432\u0435\u0447\u0435\u0440 \u043e\u043d \u0441\u043c\u043e\u0433 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u043e, \u0447\u0435\u0433\u043e \u043d\u0435 \u0441\u043c\u043e\u0433 \u0432 \u043f\u0435\u0440\u0432\u044b\u0439, \u043f\u0440\u0438\u0447\u0451\u043c \u0441 \u0442\u0435\u043c\u0438 \u0436\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438! \u0423\u043c\u043d\u0435\u0435\u0442 \u043d\u0430 \u0433\u043b\u0430\u0437\u0430\u0445, \u043e\u0434\u043d\u0430\u043a\u043e\u2026 \ud83d\ude42<\/p>\n<p> \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0442\u043e\u0436\u0435 \u0445\u0432\u0430\u0442\u0430\u043b\u043e: \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u043d\u0430\u0434\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c 3 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438: a, b, c. \u041d\u0430 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438 b \u043c\u044b \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u043b\u0438 \u043d\u0430 a; \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043d\u0430 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438 c \u2014 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u043f\u0440\u043e a, b. \u0418 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u044e d (\u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c), \u0447\u0442\u043e\u0431\u044b \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043a\u0430\u043a \u0431\u044b\u043b\u043e. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u043c\u0430\u0441\u0441\u0443 \u043f\u043e\u043f\u044b\u0442\u043e\u043a, \u043e\u043d \u0442\u0430\u043a \u0438 \u043d\u0435 \u0441\u043c\u043e\u0433 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043f\u0443\u043b\u0438 \u043b\u0435\u0442\u0435\u043b\u0438 \u0438\u0437 \u0446\u0435\u043d\u0442\u0440\u0430 \u0441\u0442\u0432\u043e\u043b\u0430 \u2014 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0438\u0436\u0435 \u0438\u043b\u0438 \u0432\u044b\u0448\u0435. \u041c\u043e\u0439 \u043f\u0435\u0434\u0430\u0433\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0442\u0430\u043b\u0430\u043d\u0442 \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u0431\u0435\u0441\u0441\u0438\u043b\u0435\u043d \u0435\u043c\u0443 \u044d\u0442\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \ud83d\ude42<\/p>\n<p> \u0412 \u0446\u0435\u043b\u043e\u043c, \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u044f \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u0432 \u0442\u0435\u043e\u0440\u0438\u0438 \u2014 \u043c\u043e\u0436\u043d\u043e, \u043d\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e-\u0442\u0430\u043a\u0438 \u0441 \u043e\u0433\u043b\u044f\u0434\u043a\u043e\u0439 \u0438 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u044f\u0441\u043d\u044f\u0442\u044c \u043c\u043d\u043e\u0433\u0438\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u044f\u0437\u044b\u043a\u0435. \u041d\u043e \u043e\u0431\u0449\u0430\u044f \u0442\u0435\u043d\u0434\u0435\u043d\u0446\u0438\u044f \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043f\u043e\u043d\u044f\u0442\u043d\u0430 \u2014 \u0432\u0441\u0451 \u0438\u0434\u0451\u0442 \u00ab\u0432 \u0442\u0443 \u0441\u0442\u043e\u0440\u043e\u043d\u0443\u00bb\u2026<\/p>\n<p> \u0422\u0430\u043a \u0447\u0442\u043e \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u043d\u0430 \u0431\u0443\u0434\u0443\u0449\u0435\u0435 \u0440\u0435\u0448\u0438\u043b, \u0447\u0442\u043e \u0431\u0443\u0434\u0443 \u043f\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u044d\u0442\u0438\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u044b \u0438 \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u043f\u0440\u0438\u0439\u0442\u0438 \u043a \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c\u0443 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0443, \u043a \u0442\u043e\u043c\u0443 \u0436\u0435 (\u0447\u0442\u043e \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u043b\u044e\u0431\u043e\u043f\u044b\u0442\u043d\u044b\u043c) \u2014 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043d \u043f\u0438\u0448\u0435\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e, \u043a\u0430\u043a \u043c\u043d\u043e\u0433\u0438\u0435 \u043e\u0442\u043c\u0435\u0447\u0430\u044e\u0442, \u043e\u043d \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d \u0438 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u043d\u043e\u0432\u044b\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0430\u043c. \u0422\u0435\u043c \u0431\u043e\u043b\u0435\u0435, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u044b \u0437\u043d\u0430\u0435\u043c, \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f \u0447\u0443\u0436\u043e\u0433\u043e \u043a\u043e\u0434\u0430. \u041d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0430\u043a \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043d\u0443\u0434\u043d\u043e, \u0430 \u0432\u043e\u0442 \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0432\u043e\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u2014 \u0442\u0430\u043a \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0435\u0435! \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430\u044f \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f: \u043e\u0431\u044b\u0447\u043d\u043e \u043c\u044b \u0443\u0447\u0438\u043c\u0441\u044f, \u0438\u0437\u0443\u0447\u0430\u044f \u043a\u0443\u0447\u0443 \u0432\u0441\u0435\u0433\u043e, \u0447\u0442\u043e \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043c\u043e\u0447\u044c \u0432 \u0440\u0435\u0448\u0435\u043d\u0438\u0438 \u0442\u0432\u043e\u0435\u0439 \u0437\u0430\u0434\u0430\u0447\u0438. \u0410 \u0442\u0443\u0442 \u0432\u0441\u0451 \u043f\u0435\u0440\u0435\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441 \u043d\u043e\u0433 \u043d\u0430 \u0433\u043e\u043b\u043e\u0432\u0443: \u043c\u044b \u0443\u0436\u0435 \u0438\u043c\u0435\u0435\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0438 \u0438\u0437\u0443\u0447\u0430\u0435\u043c, \u043a\u0430\u043a \u043d\u0430\u0434\u043e \u0431\u044b\u043b\u043e. \u041a\u0441\u0442\u0430\u0442\u0438, \u043f\u043e \u043e\u043f\u044b\u0442\u0443, \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u043f\u0443\u0442\u044c \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f. \u0412\u0435\u043a \u0436\u0438\u0432\u0438 \u2014 \u0432\u0435\u043a \u0443\u0447\u0438\u0441\u044c\u2026 <\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">\u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">&lt;!DOCTYPE html&gt; &lt;html lang=\"ru\"&gt; &lt;head&gt;     &lt;meta charset=\"UTF-8\"&gt;     &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;     &lt;title&gt;Chaos Machines&lt;\/title&gt;     &lt;!-- \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043e \u0441 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c DeepSeek --&gt;     &lt;style&gt;         body {             margin: 0;             overflow: hidden;             display: flex;             justify-content: center;             align-items: center;             height: 100vh;             background-color: #000;         }         #battleArena {             position: relative;             width: 400px;             height: 400px;             background-color: #333;             border: 2px solid #fff;         }         .battle-machine {             position: absolute;             width: 20px;             height: 20px;             background-color: green;             display: flex;             justify-content: center;             align-items: center;         }         .battle-machine::after {             content: '';             position: absolute;             width: 6px;             height: 6px;             background-color: black;             top: -3px;             left: 50%;             transform: translateX(-50%);         }         .projectile {             position: absolute;             width: 5px;             height: 5px;             background-color: yellow;         }         .barrier {             position: absolute;             width: 20px;             height: 20px;             background-color: green;         }         .barrier-texture {             position: absolute;             width: 3px;             height: 3px;             background-color: rgba(0, 255, 0, 0.5);         }         .fragments {             position: absolute;             width: 3px;             height: 3px;             background-color: red;         }     &lt;\/style&gt; &lt;\/head&gt; &lt;body&gt;     &lt;div id=\"battleArena\"&gt;&lt;\/div&gt;     &lt;script&gt;         const battleArena = document.getElementById('battleArena');         const battleMachine = document.createElement('div');         battleMachine.classList.add('battle-machine');         battleArena.appendChild(battleMachine);          let machineX = 200;         let machineY = 200;         let machineOrientation = 'north';         const machineVelocity = 5;          const barriers = createChaoticTerrain(20, 20);         const barrierElements = new Map();          barriers.forEach(barrier =&gt; {             const barrierElement = document.createElement('div');             barrierElement.classList.add('barrier');             barrierElement.style.left = `${barrier.x * 20}px`;             barrierElement.style.top = `${barrier.y * 20}px`;             barrierElement.dataset.durability = 3;              for (let i = 0; i &lt; 20; i += 3) {                 for (let j = 0; j &lt; 20; j += 3) {                     const texturePixel = document.createElement('div');                     texturePixel.classList.add('barrier-texture');                     texturePixel.style.left = `${i}px`;                     texturePixel.style.top = `${j}px`;                     texturePixel.style.backgroundColor = `rgba(0, ${100 + Math.floor(Math.random() * 155)}, 0, 0.8)`;                     barrierElement.appendChild(texturePixel);                 }             }              battleArena.appendChild(barrierElement);             barrierElements.set(`${barrier.x}-${barrier.y}`, barrierElement);         });          function refreshBattleMachinePosition() {             battleMachine.style.left = `${machineX}px`;             battleMachine.style.top = `${machineY}px`;             battleMachine.style.transform = `rotate(${                 machineOrientation === 'north' ? 0 :                 machineOrientation === 'east' ? 90 :                 machineOrientation === 'south' ? 180 :                 machineOrientation === 'west' ? 270 : 0             }deg)`;         }          function navigateBattleMachine(direction) {             let newX = machineX;             let newY = machineY;              if (direction === 'north') {                 newY -= machineVelocity;             } else if (direction === 'south') {                 newY += machineVelocity;             } else if (direction === 'west') {                 newX -= machineVelocity;             } else if (direction === 'east') {                 newX += machineVelocity;             }              if (!checkObstacleCollision(newX, newY)) {                 machineX = newX;                 machineY = newY;                 machineOrientation = direction;                 refreshBattleMachinePosition();             }         }          function checkObstacleCollision(x, y) {             return barriers.some(barrier =&gt; {                 const barrierX = barrier.x * 20;                 const barrierY = barrier.y * 20;                 return x &lt; barrierX + 20 &amp;&amp; x + 20 &gt; barrierX &amp;&amp; \/\/ \u041f\u043e X                        y &lt; barrierY + 20 &amp;&amp; y + 20 &gt; barrierY;   \/\/ \u041f\u043e Y             });         }          function removeTexturePixels(barrierElement, x, y, numPixels) {             const texturePixels = Array.from(barrierElement.querySelectorAll('.barrier-texture'));             const pixelsToRemove = texturePixels.filter(pixel =&gt; {                 const pixelX = parseFloat(pixel.style.left);                 const pixelY = parseFloat(pixel.style.top);                 const distance = Math.sqrt((pixelX - x) ** 2 + (pixelY - y) ** 2);                 return distance &lt;= 30; \/\/ \u0420\u0430\u0434\u0438\u0443\u0441 30 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439             });              for (let i = 0; i &lt; Math.min(numPixels, pixelsToRemove.length); i++) {                 const pixel = pixelsToRemove[Math.floor(Math.random() * pixelsToRemove.length)];                 pixel.remove();             }         }          function createFragments(x, y, color) {             const fragment = document.createElement('div');             fragment.classList.add('fragments');             fragment.style.left = `${x}px`;             fragment.style.top = `${y}px`;             fragment.style.backgroundColor = color;             battleArena.appendChild(fragment);              let fragmentX = x;             let fragmentY = y;             let dx = (Math.random() - 0.5) * 4; \/\/ \u0421\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e X             let dy = (Math.random() - 0.5) * 4; \/\/ \u0421\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e Y             let bounceCount = 0;              const fragmentInterval = setInterval(() =&gt; {                 fragmentX += dx;                 fragmentY += dy;                  if (Math.abs(fragmentX - x) &gt; 30 || Math.abs(fragmentY - y) &gt; 30) {                     clearInterval(fragmentInterval);                     fragment.remove();                     return;                 }                  if (fragmentX &lt; 0 || fragmentX &gt; 400 || fragmentY &lt; 0 || fragmentY &gt; 400) {                     dx *= -0.8;                     dy *= -0.8;                     bounceCount++;                 }                  if (bounceCount &gt;= 5) {                     clearInterval(fragmentInterval);                     fragment.remove();                     return;                 }                  fragment.style.left = `${fragmentX}px`;                 fragment.style.top = `${fragmentY}px`;             }, 50);         }          function fireProjectile() {             let projectileStartX, projectileStartY;             let projectileDirection = machineOrientation;              if (projectileDirection === 'north') {                 projectileStartX = machineX + 10;                 projectileStartY = machineY - 3;             } else if (projectileDirection === 'south') {                 projectileStartX = machineX + 10;                 projectileStartY = machineY + 23;             } else if (projectileDirection === 'west') {                 projectileStartX = machineX - 3;                 projectileStartY = machineY + 10;             } else if (projectileDirection === 'east') {                 projectileStartX = machineX + 23;                 projectileStartY = machineY + 10;             }              const projectile = document.createElement('div');             projectile.classList.add('projectile');             projectile.style.left = `${projectileStartX}px`;             projectile.style.top = `${projectileStartY}px`;             battleArena.appendChild(projectile);              let projectileX = projectileStartX;             let projectileY = projectileStartY;              const projectileInterval = setInterval(() =&gt; {                 if (projectileDirection === 'north') {                     projectileY -= 5;                 } else if (projectileDirection === 'south') {                     projectileY += 5;                 } else if (projectileDirection === 'west') {                     projectileX -= 5;                 } else if (projectileDirection === 'east') {                     projectileX += 5;                 }                  projectile.style.left = `${projectileX}px`;                 projectile.style.top = `${projectileY}px`;                  if (projectileX &lt; 0 || projectileX &gt; 400 || projectileY &lt; 0 || projectileY &gt; 400) {                     clearInterval(projectileInterval);                     projectile.remove();                 }                  barriers.forEach(barrier =&gt; {                     const barrierX = barrier.x * 20;                     const barrierY = barrier.y * 20;                     if (projectileX &gt;= barrierX &amp;&amp; projectileX &lt;= barrierX + 20 &amp;&amp; projectileY &gt;= barrierY &amp;&amp; projectileY &lt;= barrierY + 20) {                         const barrierElement = barrierElements.get(`${barrier.x}-${barrier.y}`);                         if (barrierElement) {                             let durability = parseInt(barrierElement.dataset.durability);                             durability -= 1;                             barrierElement.dataset.durability = durability;                              const textureColors = Array.from(barrierElement.querySelectorAll('.barrier-texture'))                                 .map(pixel =&gt; pixel.style.backgroundColor);                             const numFragments = Math.min(10, Math.floor(Math.random() * 10) + 1);                             removeTexturePixels(barrierElement, projectileX - barrierX, projectileY - barrierY, numFragments);                              for (let i = 0; i &lt; numFragments; i++) {                                 const color = textureColors[Math.floor(Math.random() * textureColors.length)];                                 createFragments(projectileX, projectileY, color);                             }                              if (durability &lt;= 0) {                                 barrierElement.remove();                                 barriers.splice(barriers.indexOf(barrier), 1);                             }                         }                         clearInterval(projectileInterval);                         projectile.remove();                     }                 });             }, 50);         }          document.addEventListener('keydown', (event) =&gt; {             if (event.key === 'ArrowLeft') {                 navigateBattleMachine('west');             } else if (event.key === 'ArrowRight') {                 navigateBattleMachine('east');             } else if (event.key === 'ArrowUp') {                 navigateBattleMachine('north');             } else if (event.key === 'ArrowDown') {                 navigateBattleMachine('south');             } else if (event.key === ' ') {                 fireProjectile();             }         });          function createChaoticTerrain(width, height) {             const terrain = [];             for (let i = 0; i &lt; width; i++) {                 for (let j = 0; j &lt; height; j++) {                     if (Math.random() &lt; 0.3 &amp;&amp; !(i === Math.floor(width \/ 2) &amp;&amp; j === Math.floor(height \/ 2))) {                         terrain.push({ x: i, y: j });                     }                 }             }             return terrain;         }          refreshBattleMachinePosition();     &lt;\/script&gt; &lt;\/body&gt; &lt;\/html&gt;<\/code><\/pre>\n<p> <\/div>\n<\/p><\/div>\n<p> \u00a9 2025 \u041e\u041e\u041e \u00ab\u041c\u0422 \u0424\u0418\u041d\u0410\u041d\u0421\u00bb<\/p>\n<blockquote><p><b><font color=\"#3AC1EF\"><a href=\"https:\/\/t.me\/ruvds_community\">Telegram-\u043a\u0430\u043d\u0430\u043b \u0441\u043e \u0441\u043a\u0438\u0434\u043a\u0430\u043c\u0438, \u0440\u043e\u0437\u044b\u0433\u0440\u044b\u0448\u0430\u043c\u0438 \u043f\u0440\u0438\u0437\u043e\u0432 \u0438 \u043d\u043e\u0432\u043e\u0441\u0442\u044f\u043c\u0438 IT \ud83d\udcbb<\/a><\/font><\/b><\/p><\/blockquote>\n<p><a href=\"https:\/\/ruvds.com\/ru-rub?utm_source=habr&amp;utm_medium=article&amp;utm_campaign=DAN_SEA%0A&amp;utm_content=pilim_igrovoj_multipleernyj_server_na_baze_esp32_nachalo\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/yo\/se\/km\/yosekm4h_f7y7oia-ghbbpc0phi.png\" data-src=\"https:\/\/habrastorage.org\/webt\/yo\/se\/km\/yosekm4h_f7y7oia-ghbbpc0phi.png\"\/><\/a><\/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\/893484\/\"> https:\/\/habr.com\/ru\/articles\/893484\/<\/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-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"><a href=\"https:\/\/habr.com\/ru\/companies\/ruvds\/articles\/893484\/\"><\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/fx\/eu\/oj\/fxeuojjthmn8ij9-knasqrzbwea.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/fx\/eu\/oj\/fxeuojjthmn8ij9-knasqrzbwea.jpeg\" data-blurred=\"true\"\/><\/div>\n<p><\/a><br \/> \u041e\u0434\u043d\u043e \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043f\u0440\u0438\u044f\u0442\u043d\u044b\u0445 \u043f\u0440\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0439 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u2014 \u044d\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438\u0433\u0440. \u041f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u0438 \u043d\u0430\u043c \u043d\u0435 \u0437\u0430\u043f\u0438\u043b\u0438\u0442\u044c \u0441\u0432\u043e\u044e? <\/p>\n<p> \u0422\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u043d\u0435 \u0442\u0430\u043a \u0434\u0430\u0432\u043d\u043e \u0443 \u043c\u0435\u043d\u044f \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0441\u0442\u0440\u0430\u043d\u043d\u0430\u044f \u043c\u044b\u0441\u043b\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0443\u0436\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0435\u043d\u044c \u043d\u0435 \u043e\u0442\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043c\u0435\u043d\u044f \u2014 \u0430 \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043c\u043d\u043e\u0433\u043e\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0430 \u0431\u0430\u0437\u0435 ESP32? \u041e_\u043e <\/p>\n<p> \u041c\u043e\u0436\u043d\u043e \u0438 \u043d\u0430 \u0431\u0430\u0437\u0435 \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e \u0432\u0435\u0431\u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u0445\u043e\u0441\u0442\u0438\u043d\u0433\u0430, \u043d\u043e \u044d\u0442\u043e \u043a\u0430\u043a-\u0442\u043e \u0443\u043d\u044b\u043b\u043e, \u043a\u0430\u043a \u0443 \u0432\u0441\u0435\u0445, \u00ab\u0430 \u0434\u0443\u0448\u0430 \u0445\u043e\u0447\u0435\u0442 \u0433\u0443\u0441\u0430\u0440\u0441\u0442\u0432\u0430\u00bb :-))) \u041f\u043e\u043d\u044f\u0442\u043d\u043e, \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0430\u043b\u043e\u0436\u0438\u0442 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0436\u0451\u0441\u0442\u043a\u0438\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u043d\u0430 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u0433\u0440\u043e\u043a\u043e\u0432 \u0438 \u043e\u0431\u044a\u0451\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0445 \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437-\u0437\u0430 \u0441\u043b\u0430\u0431\u043e\u0441\u0442\u0438 \u0430\u043f\u043f\u0430\u0440\u0430\u0442\u043d\u043e\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b, \u043d\u043e \u043c\u044b\u0441\u043b\u044c \u0432\u0441\u0451 \u0436\u0435 \u0437\u0430\u043d\u044f\u0442\u043d\u0430\u044f.<\/p>\n<p> \u041f\u0440\u043e\u0449\u0435 \u0433\u043e\u0432\u043e\u0440\u044f: \u0438\u0433\u0440\u0430 \u0445\u043e\u0441\u0442\u0438\u0442\u0441\u044f \u043d\u0430 ESP32, \u043a\u043b\u0438\u0435\u043d\u0442\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044e\u0442\u0441\u044f \u043a \u043d\u0435\u0439, \u0438 ESP32 \u043e\u0442\u0434\u0430\u0451\u0442 \u0438\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 \u0438\u0433\u0440\u043e\u0439. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441: \u043a\u043b\u0438\u0435\u043d\u0442\u044b \u043e\u0431\u043c\u0435\u043d\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0447\u0435\u0440\u0435\u0437 ESP32, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u0432 \u0440\u043e\u043b\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u0430 \u0432\u0441\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0451\u043c\u043a\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u043f\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c\u0443 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432. \u0422\u0435\u043e\u0440\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u043f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u043c\u043e\u0436\u0435\u0442 \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c..<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-453964","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/453964","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=453964"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/453964\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=453964"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=453964"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=453964"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}