{"id":348161,"date":"2023-05-31T09:04:48","date_gmt":"2023-05-31T09:04:48","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=348161"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=348161","title":{"rendered":"\u041f\u0438\u0448\u0435\u043c \u0422\u0435\u0442\u0440\u0438\u0441 \u043d\u0430 Svelte<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n

\u041f\u0440\u0435\u0434\u0438\u0441\u043b\u043e\u0432\u0438\u0435<\/h3>\n

\u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u0431\u044b\u043b\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u0431\u0435\u0437 \u043c\u0430\u043b\u043e\u0433\u043e \u0433\u043e\u0434 \u043d\u0430\u0437\u0430\u0434, \u0447\u0443\u0442\u044c \u043f\u043e\u0434\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0441\u044f\u0446\u0435\u0432 \u043d\u0430\u0437\u0430\u0434, \u043d\u043e \u0431\u044b\u043b\u0430 \u043e\u0442\u043b\u043e\u0436\u0435\u043d\u0430 \u0432 \u0434\u043e\u043b\u0433\u0438\u0439 \u044f\u0449\u0438\u043a. \u0421 \u0442\u0435\u0445 \u043f\u043e\u0440 \u043c\u043d\u043e\u0433\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0440\u0443\u0441\u0441\u043a\u043e\u044f\u0437\u044b\u0447\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u0432 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0440\u043e\u0434\u0435 \u0431\u044b \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438. \u0411\u044b\u043b \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043d \u043d\u043e\u0432\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0443\u0447\u0435\u0431\u043d\u0438\u043a<\/a> \u0441\u0440\u0430\u0437\u0443 \u043f\u043e Svelte \u0438 SvelteKit \u0432\u043c\u0435\u0441\u0442\u0435 \u0432\u0437\u044f\u0442\u044b\u043c. \u0422\u0435\u043a\u0443\u0449\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f SvelteKit \u0443\u0436\u0435 \u0434\u043e\u0441\u0442\u0438\u0433\u043b\u0430 1.20, \u043d\u043e \u0432 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u043c, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044f \u0437\u043d\u0430\u044e, \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 \u0432\u0441\u0435 \u0435\u0449\u0435 \u0430\u043a\u0442\u0443\u0430\u043b\u0435\u043d.<\/p>\n

\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h3>\n

\u0421\u0442\u0430\u0442\u044c\u044f \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d\u0430 \u043d\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u043e\u0432, \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u0445 \u0441 git, html\/css, typescript \u0438 nodejs. \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0431\u0443\u0434\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0438 \u043c\u0430\u043b\u043e \u0442\u0435\u043a\u0441\u0442\u0430 — \u0432\u0441\u0435, \u043a\u0430\u043a \u0432\u044b \u043b\u044e\u0431\u0438\u0442\u0435 — \u0442\u0430\u043a \u0447\u0442\u043e \u043f\u0440\u0438\u0433\u043e\u0442\u043e\u0432\u044c\u0442\u0435\u0441\u044c \u043f\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u0435\u0441\u0442\u0430 \u0432 \u043a\u043e\u0434\u0435 \u044f \u043f\u0440\u043e\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u044e, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u043b\u0435\u0433\u0447\u0438\u0442\u044c \u0432\u0430\u043c \u0435\u0433\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u0433\u0440 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0438 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u043d\u0435\u0436\u0435\u043b\u0438 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043e\u0431\u0449\u0435\u0433\u043e \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f Svelte, \u043d\u043e, \u0432 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e-\u0443\u0447\u0435\u0431\u043d\u044b\u0445 \u0446\u0435\u043b\u044f\u0445, \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u0438 \u043d\u0435\u0442?..<\/p>\n

\u041d\u0435 \u0442\u0430\u043a \u0434\u0430\u0432\u043d\u043e, \u0437\u0430\u0446\u0435\u043f\u0438\u0432 \u0433\u0434\u0435-\u0442\u043e \u043a\u0440\u0430\u0435\u043c \u0443\u0445\u0430 \u0441\u043b\u043e\u0432\u043e «\u0422\u0435\u0442\u0440\u0438\u0441»<\/a>, \u044f \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e \u043f\u043e\u0434\u0432\u0435\u0440\u0433\u0441\u044f \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0443 \u043d\u043e\u0441\u0442\u0430\u043b\u044c\u0433\u0438\u0438, \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u0432 \u0441\u0432\u043e\u0438 \u043f\u0435\u0440\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u043d\u044b\u0435 \u0438\u0433\u0440\u044b, \u0441\u0440\u0435\u0434\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u044b\u043b \u0438 «\u0422\u0435\u0442\u0440\u0438\u0441». \u042d\u0442\u043e \u0431\u044b\u043b\u0438 \u0443\u0434\u0438\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0430, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430 \u0438\u0433\u0440\u0430\u0445 \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043c\u043e\u0433\u043b\u0438 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0431\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e \u043c\u0438\u043b\u043b\u0438\u043e\u043d\u044b \u0434\u043e\u043b\u043b\u0430\u0440\u043e\u0432, \u0430 \u0438\u0433\u0440\u043e\u043a\u0438 — \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043d\u0435\u0432\u043e\u0437\u0431\u0440\u0430\u043d\u043d\u043e \u043f\u0440\u043e\u0436\u0438\u0433\u0430\u0442\u044c \u0441\u0432\u043e\u0435 \u0434\u0440\u0430\u0433\u043e\u0446\u0435\u043d\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f. \u0421\u0430\u043c \u044f \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0431\u044b\u043b \u0437\u0430\u044f\u0434\u043b\u044b\u043c \u0438\u0433\u0440\u043e\u043a\u043e\u043c, \u043d\u043e \u0438\u0437\u0440\u0435\u0434\u043a\u0430 — \u0432 \u0433\u043e\u0434\u044b \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u0435\u0437\u0437\u0430\u0431\u043e\u0442\u043d\u043e\u0439 \u044e\u043d\u043e\u0441\u0442\u0438 — \u0432\u0441\u0435 \u0436\u0435 \u043c\u043e\u0433 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u044c \u0441\u0435\u0431\u0435 «\u043f\u043e\u0437\u0430\u0432\u0438\u0441\u0430\u0442\u044c». \u041e\u0434\u043d\u0430\u043a\u043e \u043b\u0438\u0440\u0438\u043a\u0443 \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0441\u0432\u043e\u0439 \u0422\u0435\u0442\u0440\u0438\u0441, \u0438 \u043d\u0435 \u043d\u0430 \u0447\u0435\u043c \u043f\u043e\u043f\u0430\u043b\u043e, \u0430 \u043d\u0430 \u0432\u0435\u043b\u0438\u043a\u043e\u043b\u0435\u043f\u043d\u043e\u043c Svelte<\/a>. \u0415\u0441\u043b\u0438 \u0432\u044b \u0435\u0449\u0435 \u043d\u0435 \u0441\u043b\u044b\u0448\u0430\u043b\u0438 \u043e\u0431 \u044d\u0442\u043e\u043c \u0431\u043b\u0438\u0441\u0442\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u043c \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 (\u0434\u0430, \u044f \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044e \u0432 \u044d\u0442\u043e \u0432\u0435\u0440\u0438\u0442\u044c), \u0442\u043e \u043f\u043e\u0441\u043f\u0435\u0448\u0438\u0442\u0435 \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e\u043c \u043d\u0430 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c<\/a>, \u043b\u0438\u0431\u043e \u043d\u0430 \u0440\u0443\u0441\u0441\u043a\u043e\u043c<\/a> \u044f\u0437\u044b\u043a\u0435. \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u044f \u0431\u0443\u0434\u0443 \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0430\u043d\u0433\u043b\u043e\u044f\u0437\u044b\u0447\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0440\u0443\u0441\u0441\u043a\u043e\u044f\u0437\u044b\u0447\u043d\u0430\u044f, \u0432 \u0441\u0438\u043b\u0443 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u0431\u043e\u043b\u0435\u0435 \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044f \u0437\u043d\u0430\u044e. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u043d\u043e\u0433\u0438\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0442\u0430\u043a\u0430\u044f \u043e\u0442\u0441\u044b\u043b\u043a\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u043e\u0432 \u043a \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043c\u043e\u0433\u043b\u0430 \u0431\u044b \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0444\u043e\u0440\u043c\u0435\u043d\u043d\u044b\u043c \u0438\u0437\u0434\u0435\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u043e\u043c, \u043d\u043e, \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 Svelte, \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a. \u0414\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u0432\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u0435\u0433\u043b\u043e\u0433\u043e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u0441 \u043f\u0435\u0440\u0432\u044b\u043c\u0438 \u0432\u043e\u0441\u0435\u043c\u044c\u044e \u0433\u043b\u0430\u0432\u0430\u043c\u0438. \u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f Svelte, \u043a\u0430\u043a \u0438 \u043e\u043d \u0441\u0430\u043c, \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u0430, \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u0430, \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u0430. \u041a \u0441\u043b\u043e\u0432\u0443 \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0431\u044b\u043b \u0432\u044b\u043f\u0443\u0449\u0435\u043d 1-\u0439 \u0440\u0435\u043b\u0438\u0437 «\u043c\u0435\u0442\u0430\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430» SvelteKit<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u043e\u043c Next.js \u0438 NuxtJS, \u043d\u043e \u0441\u043e Svelte \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0441\u043d\u043e\u0432\u044b. \u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f SvelteKit \u0442\u043e\u0436\u0435 \u0438\u043c\u0435\u0435\u0442 \u0441\u0432\u043e\u0439 \u0440\u0443\u0441\u0441\u043a\u043e\u044f\u0437\u044b\u0447\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442<\/a>, \u043d\u043e, \u043a\u0430\u043a \u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 Svelte, \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u0441\u0442\u0430\u0432\u0430\u0442\u044c \u043e\u0442 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438.<\/p>\n

\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e «\u0441\u0432\u043e\u0439», \u0432\u044b\u0445\u043e\u043b\u043e\u0449\u0435\u043d\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0422\u0435\u0442\u0440\u0438\u0441\u0430, \u043d\u0435 \u0437\u0430\u043c\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u044f\u0441\u044c \u043d\u0430 \u0441\u043a\u043e\u043b\u044c-\u043d\u0438\u0431\u0443\u0434\u044c \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0440\u043e\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0447\u0435\u0433\u043e-\u0431\u044b \u0442\u043e \u043d\u0438 \u0431\u044b\u043b\u043e, \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u043e\u0442 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438 \u0438 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u044f \u0432\u043d\u0435\u0448\u043d\u0438\u043c \u0432\u0438\u0434\u043e\u043c, \u043b\u0438\u0448\u044c \u0441 \u0446\u0435\u043b\u044c\u044e \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c, «\u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e» \u043d\u0430 Svelte, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u043e\u043f\u0443\u0442\u043d\u043e \u043d\u0435 \u0443\u0442\u043e\u043f\u0438\u0432 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044f \u0432 \u043c\u0430\u043b\u043e\u0437\u043d\u0430\u0447\u0430\u0449\u0438\u0445 \u0434\u0435\u0442\u0430\u043b\u044f\u0445. \u0421\u0440\u0430\u0437\u0443 \u0441\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u044f \u043d\u0435 \u043d\u0430\u0441\u0442\u0430\u0438\u0432\u0430\u044e \u043d\u0430 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432\u0435\u0440\u043d\u044b\u0445 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0430\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Svelte. \u041d\u0430 Svelte, \u043a\u0430\u043a \u0438 \u043d\u0430 \u043c\u043d\u043e\u0433\u0438\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u0445, \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0435\u0449\u0438 \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438. \u0420\u0430\u0437\u043e\u0431\u0440\u0430\u0432\u0448\u0438\u0441\u044c \u0432 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u043c \u043a\u043e\u0434\u0435, \u0432\u044b \u043b\u0435\u0433\u043a\u043e \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043d\u0430 \u0441\u0432\u043e\u0435 \u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u0438\u0435, \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0432 \u0438\u0433\u0440\u0443 \u0434\u043e \u0432\u0430\u0448\u0438\u0445 \u0432\u044b\u0441\u043e\u043a\u0438\u0445 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u0432, \u0438\u043b\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e.<\/p>\n

\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h3>\n

\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0440\u0430\u0431\u043e\u0447\u0435\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u043e\u0434\u0438\u043d \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0434\u0438\u0441\u0442\u0440\u0438\u0431\u0443\u0442\u0438\u0432\u043e\u0432 Linux — Ubuntu. \u0412\u0441\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u044b \u043d\u0438\u0436\u0435, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u044d\u0442\u043e\u0439 \u041e\u0421.<\/p>\n

\u041f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e, \u0441\u043a\u043b\u043e\u043d\u0438\u0440\u0443\u0439\u0442\u0435 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0443\u0436\u0435 \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0432\u043e\u0439 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440:<\/p>\n

git clone git@github.com:nodeperson\/svelte-tetris.git <\/code><\/pre>\n
\u041f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u0441\u043a\u043b\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439<\/p>\n
cd svelte-tetris <\/code><\/pre>\n
\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u043f\u0430\u043a\u0435\u0442\u043e\u0432<\/p>\n
npm install <\/code><\/pre>\n
\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0430, \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439<\/p>\n
npm run dev <\/code><\/pre>\n
\u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0432\u0435\u0434\u0435\u043d \u0430\u0434\u0440\u0435\u0441, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0441\u0432\u043e\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435<\/p>\n
Local:   http:\/\/localhost:5173\/ <\/code><\/pre>\n
\u0412 \u043c\u043e\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e http:\/\/localhost:5137<\/a> \u0423 \u0432\u0430\u0441 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u043e\u0440\u0442, \u044d\u0442\u043e \u043d\u0435 \u0441\u0442\u0440\u0430\u0448\u043d\u043e, \u044d\u0442\u043e \u0431\u044b\u0432\u0430\u0435\u0442. \u041e\u0442\u043a\u0440\u044b\u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440, \u0438 \u0432\u0441\u0442\u0430\u0432\u0438\u0432 \u0432 \u0430\u0434\u0440\u0435\u0441\u043d\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u044d\u0442\u043e\u0442 \u0430\u0434\u0440\u0435\u0441, \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0423 \u043c\u0435\u043d\u044f \u043e\u043d\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n
<\/figure>\n
 \u0427\u0442\u043e\u0431\u044b \u0438\u0433\u0440\u0430 «\u043e\u0436\u0438\u043b\u0430», \u043a\u043b\u0438\u043a\u043d\u0438\u0442\u0435 \u043c\u044b\u0448\u043a\u043e\u0439 \u0432 \u043e\u043a\u043d\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u043d\u0430 \u043d\u0435\u0439 \u0444\u043e\u043a\u0443\u0441, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u043d\u0430\u0436\u043c\u0438\u0442\u0435 \u043a\u043d\u043e\u043f\u043a\u0443 «Pause» \u043d\u0430 \u0432\u0430\u0448\u0435\u0439 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0435. \u0427\u0435\u0440\u0435\u0437 \u043f\u0430\u0440\u0443 \u0441\u0435\u043a\u0443\u043d\u0434 \u043f\u0435\u0440\u0432\u0430\u044f \u0444\u0438\u0433\u0443\u0440\u043a\u0430 \u043d\u0430\u0447\u043d\u0435\u0442 \u0441\u0432\u043e\u0435 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u0432\u043d\u0438\u0437. <\/p>\n
\n\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 Svelte-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f «\u0441 \u043d\u0443\u043b\u044f»<\/summary>\n
\n
 \u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0432\u0441\u044e \u043f\u0440\u043e\u0446\u0435\u0434\u0443\u0440\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f «\u0441 \u043d\u0443\u043b\u044f», \u0442\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c Svelte-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0432\u0430\u0448\u0435\u0439 \u041e\u0421 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <\/p>\n
npm init vite <\/code><\/pre>\n
\u0412 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u043f\u0440\u0438\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u0435 \u043e\u0442 vite …<\/p>\n
? Project name:vite-project <\/code><\/pre>\n
… \u0432\u043c\u0435\u0441\u0442\u043e «vite-project» \u0437\u0430\u0434\u0430\u0439\u0442\u0435 \u0441\u0432\u043e\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 svelte-tetris. \u0417\u0430\u0442\u0435\u043c, \u043a\u043d\u043e\u043f\u043a\u043e\u0439 «\u0441\u0442\u0440\u0435\u043b\u043a\u0430 \u0432\u043d\u0438\u0437», \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0432 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u043c \u0441\u043f\u0438\u0441\u043a\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 svelte, \u0438, \u043d\u0430\u043a\u043e\u043d\u0435\u0446, svelte-ts. \u041f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b<\/p>\n
cd svelte-tetris npm install <\/code><\/pre>\n
\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 \u0441\u0432\u043e\u0435\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043a\u043e\u0434\u0430 — \u0432 \u043c\u043e\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e VS Code \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c «Svelte for VS Code»- \u0438 \u0443\u0434\u0430\u043b\u0438\u0442\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043f\u0430\u043f\u043e\u043a srs\/lib \u0438 src\/assets, \u0444\u0430\u0439\u043b src\/app.css \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0443\u0434\u0430\u043b\u0438\u0442\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0444\u0430\u0439\u043b\u0430 src\/App.svelte. \u0412 \u0444\u0430\u0439\u043b\u0435 src\/main.ts \u0443\u0434\u0430\u043b\u0438\u0442\u0435 \u0441\u0442\u0440\u043e\u043a\u0443 import ‘.\/app.css’, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0443\u044e \u0438\u043c\u043f\u043e\u0440\u0442 \u0431\u043e\u043b\u0435\u0435  \u043d\u0435\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u0444\u0430\u0439\u043b\u0430 src\/app.css. \u0412 \u0444\u0430\u0439\u043b\u0435 index.html, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0442\u044d\u0433\u0430 title \u043d\u0430 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 — Tetris. \u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u0434\u0435\u0432\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0447\u0438\u0441\u0442 \u0438 \u0433\u043e\u0442\u043e\u0432 \u043a \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u0435.<\/p>\n<\/div>\n<\/details>\n
\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0438\u0433\u0440\u043e\u0432\u044b\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438<\/h3>\n
\u041f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0438\u0433\u0440\u044b. \u041f\u043e\u043b\u0430\u0433\u0430\u044e, \u0447\u0442\u043e \u043a \u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u043c\u0435\u043d\u0442\u0443 \u0432\u044b \u0443\u0436\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u0441\u0442\u0430\u0442\u044c\u044e \u043e \u0422\u0435\u0442\u0440\u0438\u0441\u0435 \u043d\u0430 \u0412\u0438\u043a\u0438\u043f\u0435\u0434\u0438\u0438<\/a>, \u0438, \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0438\u0433\u0440\u044b, \u0438 \u0442\u043e, \u043a\u0430\u043a \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043e\u043d\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c. \u0415\u0449\u0435 \u0440\u0430\u0437 \u043e\u0442\u043c\u0435\u0447\u0443, \u0447\u0442\u043e \u0438\u0433\u0440\u0443 \u044f \u0431\u0443\u0434\u0443 «\u043a\u043e\u043d\u0441\u0442\u0440\u0443\u0438\u0440\u043e\u0432\u0430\u0442\u044c», \u043e\u043f\u0438\u0440\u0430\u044f\u0441\u044c \u043d\u0430 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0432\u043e\u0441\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u044f, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u043f\u0430\u0440\u0443 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u0441 \u0438\u0433\u0440\u043e\u0432\u044b\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0432 Youtube \u0438\u043b\u0438 \u043d\u0430\u0439\u0442\u0438 \u0432 Google. \u041e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0445\u043e\u0436\u0430 \u043d\u0430 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0422\u0435\u0442\u0440\u0438\u0441, \u043d\u043e \u0441 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044f\u043c\u0438, \u043e\u0431\u0443\u0441\u043b\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u0441\u0442\u0440\u0435\u043c\u043b\u0435\u043d\u0438\u0435\u043c \u043a \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044e.<\/p>\n
\u0418\u0442\u0430\u043a, \u0443 \u043d\u0430\u0441 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0444\u0438\u0433\u0443\u0440\u043a\u0430, \u043f\u0430\u0434\u0430\u044e\u0449\u0430\u044f \u043f\u043e \u0442\u0438\u043a\u0443 \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u0442\u0430\u0439\u043c\u0435\u0440\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e «\u0441\u0442\u0430\u043a\u0430\u043d\u0430» \u0438\u043b\u0438 «\u043a\u043e\u0440\u043e\u0431\u043a\u0438», \u043a\u0430\u043a \u0432\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f. \u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0442\u0438\u043a\u0430 \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u0442\u0430\u0439\u043c\u0435\u0440\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0435\u043a\u0443\u0449\u0438\u043c \u0443\u0440\u043e\u0432\u043d\u0435\u043c \u0438\u0433\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439, \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0438\u0441\u043b\u043e\u043c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0445 \u043b\u0438\u043d\u0438\u0439. \u041f\u0430\u0434\u0430\u044e\u0449\u0438\u0435 \u0444\u0438\u0433\u0443\u0440\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u043a\u0440\u0443\u0442\u0438\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u043e\u0439 «\u0441\u0442\u0440\u0435\u043b\u043a\u0430 \u0432\u0432\u0435\u0440\u0445». \u041c\u043e\u0436\u043d\u043e \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u043f\u0430\u0434\u0435\u043d\u0438\u0435 \u0444\u0438\u0433\u0443\u0440\u043a\u0438, \u043d\u0430\u0436\u0438\u043c\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0443 «\u0441\u0442\u0440\u0435\u043b\u043a\u0430 \u0432\u043d\u0438\u0437», \u043b\u0438\u0431\u043e \u0432\u043e\u043e\u0431\u0449\u0435 «\u0443\u0440\u043e\u043d\u0438\u0442\u044c» \u0444\u0438\u0433\u0443\u0440\u043a\u0443 \u043d\u0430 \u0434\u043d\u043e, \u043d\u0430\u0436\u0430\u0432 «\u043f\u0440\u043e\u0431\u0435\u043b». \u0417\u0430\u0434\u0430\u0447\u0430 \u0438\u0433\u0440\u043e\u043a\u0430 — \u0443\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u0444\u0438\u0433\u0443\u0440\u043a\u0438 \u043d\u0430 \u0434\u043d\u0435 \u0441\u0442\u0430\u043a\u0430\u043d\u0430 \u0431\u0435\u0437 \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u043e\u0432. \u0417\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0435 \u0431\u0435\u0437 \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u043e\u0432 \u043b\u0438\u043d\u0438\u0438 \u0441\u0442\u0438\u0440\u0430\u044e\u0442\u0441\u044f, \u043e\u0441\u0432\u043e\u0431\u043e\u0436\u0434\u0430\u044f \u043c\u0435\u0441\u0442\u043e \u0432 \u0441\u0442\u0430\u043a\u0430\u043d\u0435. \u0427\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043b\u0438\u043d\u0438\u0439 \u0431\u0435\u0437 \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430 \u0432\u044b \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u043b\u0438, \u0442\u0435\u043c \u0432\u044b\u0448\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u0430\u0448 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c, \u0438, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043f\u0430\u0434\u0435\u043d\u0438\u044f \u0444\u0438\u0433\u0443\u0440\u043e\u043a \u043f\u043e \u0442\u0430\u0439\u043c\u0435\u0440\u0443. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043c\u0435\u0440\u0438\u043b\u0430 \u0443\u0441\u043f\u0435\u0445\u0430 \u0438\u0433\u0440\u043e\u043a\u0430 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0447\u0438\u0441\u043b\u043e \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0445 \u043b\u0438\u043d\u0438\u0439, \u043e\u0434\u043d\u0430\u043a\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c<\/a> \u0438 \u0432\u0435\u0441\u0442\u0438 \u0443\u0447\u0435\u0442 \u0442\u0430\u043a, \u043a\u0430\u043a \u0432\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f.<\/p>\n
\u041f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c\u0441\u044f \u0441 \u043e\u0431\u0449\u0438\u043c\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u0438\u0433\u0440\u044b. \u042f \u043e\u0442\u043d\u0435\u0441 \u043a \u043d\u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0440 \u0441\u0442\u0430\u043a\u0430\u043d\u0430\/\u043a\u043e\u0440\u043e\u0431\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u0443 \u043d\u0430\u0441 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u043c \u0441 \u0432\u044b\u0441\u043e\u0442\u043e\u0439 BoxHeight<\/strong> \u0438 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 BoxWidth<\/strong>. \u0415\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f — \u044d\u0442\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e «\u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0438\u043a\u043e\u0432», \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d \u0421\u0442\u0430\u043a\u0430\u043d, \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0438.<\/p>\n
\u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u044f \u0431\u0443\u0434\u0443 \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0441\u0442\u0430\u043a\u0430\u043d\/\u043a\u043e\u0440\u043e\u0431\u043a\u0443 «\u0441\u0442\u0430\u043a\u0430\u043d\u043e\u043c», \u0445\u043e\u0442\u044f \u0432 \u043a\u043e\u0434\u0435 \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0443 \u043c\u0435\u043d\u044f Box. \u041c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043f\u043e-\u0440\u0443\u0441\u0441\u043a\u0438 «\u0441\u0442\u0430\u043a\u0430\u043d» \u0437\u0432\u0443\u0447\u0438\u0442 \u043b\u0443\u0447\u0448\u0435, \u0430 \u043f\u043e-\u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442 — \u043b\u0443\u0447\u0448\u0435 \u043f\u0438\u0441\u0430\u0442\u044c «Box».<\/em><\/p>\n
\u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u0430\u0443\u0437 \u0432 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445 \u043c\u0435\u0436\u0434\u0443 \u0442\u0438\u043a\u0430\u043c\u0438 \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u0442\u0430\u0439\u043c\u0435\u0440\u0430 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u0438\u0433\u0440\u044b — MinHeartbeat<\/strong> \u0438 MaxHeartbeat<\/strong>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0443\u0440\u043e\u0432\u043d\u0438 MinLevel<\/strong> \u0438 MaxLevel<\/strong>. \u041a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430 CompletedLinesToAdvanceLevel<\/strong> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0447\u0438\u0441\u043b\u043e \u043b\u0438\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c, \u0434\u0430\u0431\u044b \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c.<\/p>\n
\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0438\u0433\u0440\u044b \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 src\/lib\/settings.ts<\/p>\n
\nsrc\/lib\/settings.ts<\/summary>\n
\n
export const BoxWidth = 10 export const BoxHeight = 20  export const MaxHeartbeat = 2000 export const MinHeartbeat = 500  export const MinLevel = 1 export const MaxLevel = 10  export const CompletedLinesToAdvanceLevel = 3 <\/code><\/pre>\n<\/div>\n<\/details>\n
\u0412 \u0444\u0430\u0439\u043b\u0435 src\/lib\/entities.ts \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0442\u0438\u043f\u044b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.<\/p>\n
\nsrc\/lib\/entities.ts<\/summary>\n
\n
export enum BoxCellState {     empty,     figure,     frozen }  type Vector<T> = Array<T>  export type Matrix<T> = Array<Vector<T>>  export type FigureView = Matrix<number>  export type GameView = Matrix<BoxCellState> <\/code><\/pre>\n<\/div>\n<\/details>\n
\u041f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 BoxCellState<\/strong> \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u044f\u0447\u0435\u0435\u043a \u0432 \u0421\u0442\u0430\u043a\u0430\u043d\u0435, Vector<\/strong> — \u044d\u0442\u043e \u0441\u0442\u0440\u043e\u043a\u0430 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435, Matrix<\/strong> — \u0442\u0430\u0431\u043b\u0438\u0446\u0430\/\u043c\u0430\u0442\u0440\u0438\u0446\u0430\/\u0434\u0432\u0443\u043c\u0435\u0440\u043d\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432.<\/p>\n
\u0424\u0430\u0439\u043b src\/lib\/figures.ts \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0432\u0441\u0435, \u0447\u0442\u043e \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 Figure<\/strong>. \u0417\u0434\u0435\u0441\u044c \u0436\u0435 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0432\u0438\u0434\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u0444\u0438\u0433\u0443\u0440\u043e\u043a \u0432 \u0432\u0438\u0434\u0435 \u0434\u0432\u0443\u043c\u0435\u0440\u043d\u044b\u0445 \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u0432, \u0438 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0424\u0438\u0433\u0443\u0440\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u0433\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c.<\/p>\n
\nsrc\/lib\/figures.ts<\/summary>\n
\n
 import type { FigureView } from '.\/entities';  interface IFigures {     [key: string]: FigureView } export const Figures: IFigures = {     i: [         [1, 1, 1, 1],     ],     j: [         [1, 0, 0],         [1, 1, 1],     ],     l: [         [0, 0, 1],         [1, 1, 1],     ],     o: [         [1, 1],         [1, 1]     ],     s: [         [0, 1, 1],         [1, 1, 0]     ],     t: [         [0, 1, 0],         [1, 1, 1]     ],     z: [         [1, 1, 0],         [0, 1, 1]     ] }  export function figureCellIsSolid(cell: number){     return cell === 1; }  export function figureCellIsEmpty(cell: number){     return !figureCellIsSolid(cell); }  export function figureWidth(figure: FigureView): number {     return figure[0].length; }  export function figureHeight(figure: FigureView): number {     return figure.length; }  export function randomFigure(): FigureView {     const names = Object.keys(Figures);     const randomIndex = Math.round(Math.random() * (names.length - 1));     const randomName = names[randomIndex];     return Figures[randomName]; }  <\/code><\/pre>\n<\/div>\n<\/details>\n
\u0412\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u043c\u0435\u0442\u0438\u043b, \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435, \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u0443\u044e «\u043d\u0435\u0441\u043f\u0440\u0430\u0432\u0435\u0434\u043b\u0438\u0432\u043e\u0441\u0442\u044c» \u0438\u043b\u0438, \u0435\u0441\u043b\u0438 \u0443\u0433\u043e\u0434\u043d\u043e, «\u043d\u0435\u043b\u043e\u0433\u0438\u0447\u043d\u043e\u0441\u0442\u044c» \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u044f\u0447\u0435\u0435\u043a \u0421\u0442\u0430\u043a\u0430\u043d\u0430 \u0443 \u043c\u0435\u043d\u044f \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u044b \u0438 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u044b \u0432 BoxCellState<\/strong>, \u0430 \u0432\u043e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u044f\u0447\u0435\u0435\u043a \u0424\u0438\u0433\u0443\u0440\u044b \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u043a\u0430\u043a 1 \u0438 0. \u0425\u043e\u0442\u044f, \u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b, \u0442\u0430\u043a \u0438 \u043d\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 enum FigureCellState = { solid, empty }. \u041f\u043e\u0447\u0435\u043c\u0443 \u0436\u0435 \u044f \u043f\u043e\u0441\u0442\u0443\u043f\u0438\u043b \u043f\u043e-\u0440\u0430\u0437\u043d\u043e\u043c\u0443 \u0432 \u0434\u0432\u0443\u0445 \u0441\u0442\u043e\u043b\u044c \u043f\u043e\u0445\u043e\u0436\u0438\u0445 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f\u0445? \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0432\u0441\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442\u0441\u044f \u043c\u043e\u0438\u043c \u043b\u0438\u0447\u043d\u044b\u043c \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0435\u043d\u0438\u0435\u043c. \u041f\u0440\u043e\u0441\u0442\u043e \u043c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0438 \u043d\u0443\u043b\u0438 \u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u044b \u0438 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u044b \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0444\u0438\u0433\u0443\u0440. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u0432 \u0444\u0430\u0439\u043b\u0435 srs\/lib\/figures.ts, \u043a\u0430\u043a \u0437\u0430\u0434\u0430\u043d\u044b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0444\u0438\u0433\u0443\u0440 \u0432 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0435 Figures<\/strong> \u0432 \u0432\u0438\u0434\u0435 \u0434\u0432\u0443\u043c\u0435\u0440\u043d\u044b\u0445 \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u0432 . \u0421\u0435\u0439\u0447\u0430\u0441 \u0432 \u044f\u0447\u0435\u0439\u043a\u0430\u0445 \u044d\u0442\u0438\u0445 \u0442\u0430\u0431\u043b\u0438\u0447\u0435\u043a — \u0434\u0432\u0443\u043c\u0435\u0440\u043d\u044b\u0445 \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u0432 — \u043e\u043b\u0438\u0446\u0435\u0442\u0432\u043e\u0440\u044f\u044e\u0449\u0438\u0445 \u0441\u043e\u0431\u043e\u0439 \u0444\u0438\u0433\u0443\u0440\u043a\u0438, \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0438 \u043d\u0443\u043b\u0438, \u0430 \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0432\u043c\u0435\u0441\u0442\u043e \u043d\u0438\u0445 \u0431\u044b\u0442\u044c FigureCellState.solid \u0438 FigureCellState.empty \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e. \u0421\u043e\u0433\u043b\u0430\u0441\u0438\u0442\u0435\u0441\u044c, \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0431\u044b \u043d\u0435 \u0441\u0442\u043e\u043b\u044c \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e.<\/p>\n
\u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0438\u0433\u0440\u044b \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0444\u0438\u0433\u0443\u0440\u044b \u043d\u0430 90 \u043f\u043e \u0447\u0430\u0441\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0435\u043b\u043a\u0435, \u043d\u0430\u0436\u0438\u043c\u0430\u044f \u043a\u043b\u0430\u0432\u0438\u0448\u0443 «\u0441\u0442\u0440\u0435\u043b\u043a\u0430 \u0432\u0432\u0435\u0440\u0445». \u041d\u0435 \u043c\u0443\u0434\u0440\u0441\u0442\u0432\u0443\u044f \u043b\u0443\u043a\u0430\u0432\u043e, \u044f \u043d\u0430\u0437\u0432\u0430\u043b \u044d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e turn90<\/strong> \u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043b \u0435\u0435 \u0432 \u0444\u0430\u0439\u043b\u0435 src\/lib\/linalg.ts<\/p>\n
\nsrc\/lib\/linalg.ts<\/summary>\n
\n
import type { Matrix } from '.\/entities';  \/\/ \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435: \u0441\u0442\u043e\u043b\u0431\u0446\u044b \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438, \u0430 \u0441\u0442\u0440\u043e\u043a\u0438 - \u0441\u0442\u043e\u043b\u0431\u0446\u0430\u043c\u0438 function transpose<T>(m: Matrix<T>) {     let transposed: Matrix<T> = [];     m[0].forEach((_, j) => {         transposed.push([])         m.forEach((_, i) => {             transposed[j].push(m[i][j])         })     })     return transposed; }  \/\/ \u043f\u043e\u0432\u043e\u0440\u043e\u0442 \u043d\u0430 90 \u0433\u0440\u0430\u0434\u0443\u0441\u043e\u0432 <--> reverseColumns(transpose(view)) export function turn90<T>(m: Matrix<T>): Matrix<T> {     return transpose(m).map(line => line.reverse()); } <\/code><\/pre>\n<\/div>\n<\/details>\n
\n\u041f\u043e\u0447\u0435\u043c\u0443 \u0443 \u0444\u0430\u0439\u043b\u0430 \u0442\u0430\u043a\u043e\u0435 \u0441\u0442\u0440\u0430\u043d\u043d\u043e\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 linalg?..<\/summary>\n
\n
\u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u043b\u043e\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 «\u043b\u0438\u043d\u0435\u0439\u043d\u043e\u0439 \u0430\u043b\u0433\u0435\u0431\u0440\u044b», «\u043c\u0430\u0442\u0440\u0438\u0446\u044b \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430» \u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u043e\u0440\u0438\u0446\u0430\u0435\u043c\u044b\u0445 \u0432 \u043f\u0440\u0438\u043b\u0438\u0447\u043d\u043e\u043c \u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0435 \u0431\u0440\u0430\u043d\u043d\u044b\u0445 \u0441\u043b\u043e\u0432\u043e\u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0439. \u041e\u0434\u043d\u0430\u043a\u043e, \u0435\u0449\u0435 \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0440\u0430\u043d\u043d\u0435\u043c \u044d\u0442\u0430\u043f\u0435 \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u043f\u043e\u0432\u0435\u0440\u043d\u0443\u0442\u044b\u0435 \u0444\u0438\u0433\u0443\u0440\u043a\u0438 \u0432 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0422\u0435\u0442\u0440\u0438\u0441\u0435 \u044f \u0437\u0430\u043c\u0435\u0442\u0438\u043b, \u0447\u0442\u043e \u043f\u043e\u0432\u043e\u0440\u043e\u0442 \u0444\u0438\u0433\u0443\u0440\u044b \u0432 \u0422\u0435\u0442\u0440\u0438\u0441\u0435 \u0440\u0430\u0432\u043d\u043e\u0441\u0438\u043b\u0435\u043d \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u043c\u0430\u0442\u0440\u0438\u0446\u044b \u0441 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0430 \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u043d\u0430 \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u0439. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u043f\u0440\u0435\u043f\u0438\u0440\u0430\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0430 \u0441 \u043b\u0438\u043d\u0430\u043b\u0433\u0435\u0431\u0440\u043e\u0439 \u0431\u044b\u043b\u0438 \u043e\u0442\u043b\u043e\u0436\u0435\u043d\u044b \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443, \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u0442\u0430\u043a, \u043a\u0430\u043a \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430, \u0430 \u0435\u0435 \u0434\u0443\u0440\u043d\u0430\u044f \u043d\u0430\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u043b\u0430\u0441\u044c \u0432 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0438 \u0444\u0430\u0439\u043b\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0431\u044b\u043b\u043e \u043f\u043e\u0440\u0443\u0447\u0435\u043d\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u044d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0438 \u0432 src\/lib\/figures.ts, \u0445\u0443\u0436\u0435 \u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0441\u0442\u0430\u043b\u043e \u0431\u044b, \u043d\u043e \u0447\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e, \u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e.<\/p>\n<\/div>\n<\/details>\n
\u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043f\u0430\u0440\u0430 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0438\u0437 src\/lib\/utils.ts<\/p>\n
\nsrc\/lib\/utils.ts<\/summary>\n
\n
import type { FigureView } from \".\/entities\"; import { figureWidth } from \".\/figures\"; import { BoxWidth } from \".\/settings\";  export function initialColumn(figure: FigureView) {     return Math.floor((BoxWidth - figureWidth(figure)) \/ 2); }  export function deepClone<T>(any:T) {     return <T>JSON.parse(JSON.stringify(any)); } <\/code><\/pre>\n<\/div>\n<\/details>\n
\u0424\u0443\u043d\u043a\u0446\u0438\u044f initialColumn<\/strong> \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442, \u0432 \u043a\u0430\u043a\u043e\u0439 \u0438\u043c\u0435\u043d\u043d\u043e \u043a\u043e\u043b\u043e\u043d\u043a\u0435 \u043c\u0430\u0442\u0440\u0438\u0446\u044b, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0435\u0439 \u0421\u0442\u0430\u043a\u0430\u043d, \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0444\u0438\u0433\u0443\u0440\u043a\u0430 \u043f\u0440\u0438 \u0432\u0432\u043e\u0434\u0435 \u0435\u0435 \u0432 \u0438\u0433\u0440\u0443, \u0430 deepClone<\/strong> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0433\u043b\u0443\u0431\u043e\u043a\u0443\u044e \u043a\u043e\u043f\u0438\u044e \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 — \u043c\u0430\u0442\u0440\u0438\u0446\u044b. \u0412\u043e\u043e\u0431\u0449\u0435-\u0442\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 deepClone<\/strong> \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0448\u0438\u0440\u0435, \u043d\u0435\u0436\u0435\u043b\u0438 \u0431\u044b\u043b\u043e \u0437\u0430\u044f\u0432\u043b\u0435\u043d\u043e \u0432\u044b\u0448\u0435, \u043d\u043e \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u0430 \u0435\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c. \u0427\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u043e\u0442 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0443 \u0441\u0442\u0440\u043e\u0433\u0438\u0445 \u0430\u0434\u0435\u043f\u0442\u043e\u0432 \u0431\u0435\u0441\u043a\u043e\u043c\u043f\u0440\u043e\u043c\u0438\u0441\u0441\u043d\u043e\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u043f\u043e\u043b\u0435\u0437\u0443\u0442 \u0433\u043b\u0430\u0437\u0430 \u043d\u0430 \u043b\u043e\u0431 \u043e\u0442 \u0432\u043e\u0437\u043c\u0443\u0449\u0435\u043d\u0438\u044f, \u043c\u043e\u0433\u0443 \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u044f \u043f\u043e\u0448\u0435\u043b \u043f\u043e \u0441\u0430\u043c\u043e\u043c\u0443 \u043b\u0435\u0433\u043a\u043e\u043c\u0443 \u043f\u0443\u0442\u0438, \u0431\u043b\u0430\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442, \u0445\u043e\u0442\u044f \u043c\u043e\u0433 \u0431\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043c\u0435\u0442\u043e\u0434\u043e\u043c cloneDeep<\/a> \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 lodash<\/a> \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u043c\u0435\u0442\u043e\u0434\u043e\u043c structuredClone<\/a>, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043b\u0438\u0447\u043d\u043e \u044f \u0443\u0437\u043d\u0430\u043b \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u044d\u0442\u0438\u0445 \u0441\u0442\u0440\u043e\u043a. \u0422\u0435\u043f\u0435\u0440\u044c \u0432\u044b \u0442\u043e\u0436\u0435 \u0443\u0437\u043d\u0430\u043b\u0438). \u0427\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f initialColumn<\/strong> — \u0442\u043e \u043e\u043d\u0430 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0424\u0438\u0433\u0443\u0440\u044b, \u0438\u0441\u0445\u043e\u0434\u044f \u0438\u0437 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u043e\u0436\u0435\u043b\u0430\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c \u0424\u0438\u0433\u0443\u0440\u0443 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0432 \u0446\u0435\u043d\u0442\u0440\u0435 \u0441\u0442\u0430\u043a\u0430\u043d\u0430.<\/p>\n
\u0425\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430<\/h3>\n
\u0414\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043d\u0435 \u0431\u044b\u043b\u043e \u043d\u0438\u0447\u0435\u0433\u043e Svelte-\u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0433\u043e, \u0435\u0441\u043b\u0438 \u043d\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0432\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0441\u0430\u043c \u043f\u0443\u0441\u0442\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435. \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u0438 \u0434\u043b\u044f Svelte. \u0410 \u0433\u043e\u0432\u043e\u0440\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u0435\u0435 — \u0434\u043b\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u0432\u0430\u0436\u043d\u043e\u0433\u043e \u043f\u043e\u043d\u044f\u0442\u0438\u044f, \u043a\u0430\u043a «\u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430» («stores»)<\/a>. \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u043a \u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u043c\u0435\u043d\u0442\u0443 \u0432\u044b \u0443\u0436\u0435 \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u043b\u0438\u0441\u044c \u0441 \u043f\u0435\u0440\u0432\u044b\u043c\u0438 8-\u044e \u0433\u043b\u0430\u0432\u0430\u043c\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 Svelte, \u0435\u0441\u043b\u0438 \u043d\u0435\u0442 — \u0442\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u0441\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e… \u0418\u0442\u0430\u043a, \u0432\u044b \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u043b\u0438\u0441\u044c \u0441 \u043f\u043e\u043d\u044f\u0442\u0438\u0435\u043c «\u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449a», \u0438 \u0433\u043e\u0442\u043e\u0432\u044b \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0442\u044c. \u0425\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0443 \u043d\u0430\u0441 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u044b \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 src\/store.<\/p>\n
\u0425\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 Box<\/h4>\n
\u0425\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 Box<\/strong>, \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0437\u0430 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0421\u0442\u0430\u043a\u0430\u043d, \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 src\/store\/box.ts<\/p>\n
\nsrc\/store\/box.ts<\/summary>\n
\n
import type { Writable } from \"svelte\/store\"; import { writable, get } from \"svelte\/store\"; import { BoxHeight, BoxWidth } from \"..\/..\/src\/lib\/settings\"; import { BoxCellState } from \"..\/..\/src\/lib\/entities\"; import type { GameView } from '..\/..\/src\/lib\/entities';  export const Box: Writable<GameView> = writable(Array(BoxHeight)     .fill([])     .map((_) => Array(BoxWidth).fill(BoxCellState.empty)))  export function clean() {     Box.set(get(Box).map(line => line.map(cell => cell = BoxCellState.empty))) } <\/code><\/pre>\n<\/div>\n<\/details>\n
\u042d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432 \u0441\u0435\u0431\u0435 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0421\u0442\u0430\u043a\u0430\u043d \u0432 \u0444\u043e\u0440\u043c\u0435 \u0434\u0432\u0443\u043c\u0435\u0440\u043d\u043e\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430, \u043a\u0430\u0436\u0434\u0430\u044f \u044f\u0447\u0435\u0439\u043a\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043e\u0436\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u043e\u0434\u043d\u043e \u0438\u0437 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439, \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0445 \u0432 BoxCellState<\/strong>.<\/p>\n
\u0412 \u043d\u0430\u0447\u0430\u043b\u0435 \u0438\u0433\u0440\u044b \u0421\u0442\u0430\u043a\u0430\u043d \u043f\u0443\u0441\u0442, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438 \u0435\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043c\u044b \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0435\u0433\u043e \u044f\u0447\u0435\u0439\u043a\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c BoxCellState.empty<\/strong>.<\/p>\n
\u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043f\u043e \u043e\u0447\u0438\u0441\u0442\u043a\u0435 \u0421\u0442\u0430\u043a\u0430\u043d\u0430, \u044f \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b \u0435\u0433\u043e \u0437\u0434\u0435\u0441\u044c \u0436\u0435, \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 clean<\/strong>.<\/p>\n
\u0425\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 Figure<\/h4>\n
\u0425\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 Figure<\/strong>, \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0437\u0430 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0444\u0438\u0433\u0443\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u0440\u0435\u0434\u0441\u0442\u043e\u0438\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u0433\u0440\u043e\u043a\u0443, \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 src\/store\/figure.ts<\/p>\n
\nsrc\/store\/figure.ts<\/summary>\n
\n
 import { writable } from 'svelte\/store'; import { randomFigure } from '..\/lib\/figures'; import { initialColumn } from '..\/..\/src\/lib\/utils';  const view = randomFigure()  export const Figure = writable({     view,     location: {         row: 0,         column: initialColumn(view)     } })  <\/code><\/pre>\n<\/div>\n<\/details>\n
\u0425\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 Figure<\/strong> \u0445\u0440\u0430\u043d\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0432\u0438\u0434 — «view<\/strong>» — \u0444\u0438\u0433\u0443\u0440\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0435\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0421\u0442\u0430\u043a\u0430\u043d\u0435: \u0438\u043d\u0434\u0435\u043a\u0441 \u0441\u0442\u0440\u043e\u043a\u0438 row<\/strong> \u0438 \u043d\u043e\u043c\u0435\u0440 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 column<\/strong>. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0434\u043b\u044f \u043d\u0430\u0441 \u043d\u0435\u0432\u0430\u0436\u043d\u043e, \u043a\u0430\u043a\u0430\u044f \u0424\u0438\u0433\u0443\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0438\u0433\u0440\u044b, \u0442\u043e \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0435\u0435 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c.<\/p>\n
\u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0438\u0433\u0440\u044b \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0438 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0444\u0438\u0433\u0443\u0440\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439. \u0414\u043b\u044f \u0442\u0430\u043a\u043e\u0439 \u0444\u0438\u0433\u0443\u0440\u044b \u043c\u044b \u043e\u0442\u0432\u0435\u0434\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c Next<\/strong>.<\/p>\n
\u0425\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 Next<\/h4>\n
\nsrc\/store\/next.ts<\/summary>\n
\n
import { writable } from 'svelte\/store'; import { randomFigure } from '..\/..\/src\/lib\/figures';  export const Next = writable(randomFigure()) <\/code><\/pre>\n<\/div>\n<\/details>\n
\u0410 \u0447\u0442\u043e\u0431\u044b \u0432\u0435\u0441\u0442\u0438 \u0443\u0447\u0435\u0442 \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u0439 \u0438\u0433\u0440\u043e\u043a\u0430, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 Stats<\/strong>.<\/p>\n
\u0425\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 Stats<\/h4>\n
\nsrc\/store\/stats.ts<\/summary>\n
\n
import { writable } from 'svelte\/store'; import { MinLevel } from '..\/..\/src\/lib\/settings';  const zero = {     level: MinLevel, lines: 0 }  export const Stats = writable({ ...zero })  export function reset() {     Stats.set(zero); } <\/code><\/pre>\n<\/div>\n<\/details>\n
\u0417\u0434\u0435\u0441\u044c \u0436\u0435 \u044f \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e reset<\/strong>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0431\u043d\u0443\u043b\u044f\u0435\u0442 \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0443. \u041e\u043d\u0430 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043d\u0430\u043c \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u0438\u0433\u0440\u044b.<\/p>\n
\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b Svelte<\/h3>\n
\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Controller<\/h4>\n
\u041f\u0435\u0440\u0432\u044b\u0439 Svelte-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c, \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f Controller<\/strong> \u0438 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0439 \u043a\u043b\u0430\u0432\u0438\u0448 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b. \u041a\u0440\u043e\u043c\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0439, \u043e\u043d \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043a\u043d\u043e\u043f\u043a\u0430\u0445 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u0438\u0433\u0440\u0435.<\/p>\n
\u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u0425\u0430\u0431\u0440\u0430 \u043d\u0435\u0442 \u043e\u043f\u0446\u0438\u0438 \u0434\u043b\u044f \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0438 \u043a\u043e\u0434\u0430 Svelte-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 svelte-\u043a\u043e\u0434 \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0431\u0443\u0434\u0435\u0442 «\u043d\u0435\u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0435\u043d», \u043e\u0434\u043d\u0430\u043a\u043e \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 VS Code \u0441 \u044d\u0442\u0438\u043c \u0432\u0441\u0435 \u0432 \u043f\u043e\u0440\u044f\u0434\u043a\u0435, \u0438\u043c\u0435\u0439\u0442\u0435 \u0432 \u0432\u0438\u0434\u0443.<\/em><\/p>\n
\nsrc\/components\/Controller.svelte<\/summary>\n
\n
<script lang=\"ts\">     import { createEventDispatcher } from \"svelte\";        const dispatch = createEventDispatcher();        const Action: { [key: string]: [string[], string] } = {       left: [[\"ArrowLeft\", \"a\", \"A\"], \"Left \u2190, a, A\"],       right: [[\"ArrowRight\", \"d\", \"D\"], \"Right \u2192, d, D\"],       down: [[\"ArrowDown\", \"s\", \"S\"], \"Down \u2193, s, S\"],       turn: [[\"ArrowUp\", \"w\", \"W\"], \"Turn \u2191, w, W\"],       drop: [[\" \"], \"Drop [Space]\"],       pause: [[\"Pause\", \"p\", \"P\"], \"Pause [Pause]\"],     };        function label(actionName: string) {       const [_, hint] = Action[actionName];       return hint;     }        function handleKeyDown(event: KeyboardEvent) {       for (let action in Action) {         const [codes, _] = Action[action];         if (codes.includes(event.key)) {           dispatch(action);           break;         }       }     }   <\/script>      <div>     {#each Object.keys(Action) as actionName}       <p>{label(actionName)}<\/p>     {\/each}   <\/div>      <svelte:window on:keydown={handleKeyDown} \/>      <style>     p {       margin: 0px;       font-size: 0.7rem;     }   <\/style> <\/code><\/pre>\n<\/div>\n<\/details>\n
\u0414\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c, \u0432\u044b \u043e\u0431\u0440\u0430\u0442\u0438\u043b\u0438 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043a\u043e\u0434 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 handleKeyDown<\/strong> \u0443 \u043d\u0430\u0441 \u0442\u0430\u043a \u0441\u0435\u0431\u0435. \u0414\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u043f\u0440\u0438 \u0432\u0441\u044f\u043a\u043e\u043c \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043a\u043b\u0430\u0432\u0438\u0448\u0438 \u0438\u0441\u043a\u0430\u0442\u044c \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u044e\u0449\u0435\u0435 \u043d\u0430\u0441 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 — \u0437\u0430\u0442\u0435\u044f \u0443\u0440\u043e\u0432\u043d\u044f O(n). \u041e\u0431\u044b\u0447\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e, \u0430 \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043a\u043e\u0433\u0434\u0430 \u0440\u0435\u0447\u044c \u0438\u0434\u0435\u0442 \u043e \u043f\u043e\u0438\u0441\u043a\u0435 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u043c\u043e\u043c \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443 — \u0442\u0430\u043a \u0438 \u0432\u043f\u043e\u043b\u043d\u0435 \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u043e. \u041e\u0434\u043d\u0430\u043a\u043e, \u0435\u0441\u043b\u0438 \u0432\u0430\u0441 \u043f\u043e\u0434\u0437\u0430\u0434\u043e\u0440\u0438\u0432\u0430\u0435\u0442 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u043f\u0435\u0440\u0444\u0435\u043a\u0446\u0438\u043e\u043d\u0438\u0441\u0442, \u0442\u043e \u0432 \u044d\u0442\u043e\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0432\u0437\u044f\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u044c \u0441\u0435\u0431\u0435 \u0434\u0430\u0442\u044c \u0441\u043b\u0430\u0431\u0438\u043d\u0443 \u0438 \u0443\u043b\u0443\u0448\u0447\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0434\u043e \u0443\u0440\u043e\u0432\u043d\u044f O(1). \u0411\u043b\u0430\u0433\u043e, \u0440\u0430\u0431\u043e\u0442\u044b \u0442\u0443\u0442 \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435\u043c\u043d\u043e\u0433\u043e. \u041f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0432\u0430\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u044d\u0442\u043e \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0443\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u044f.<\/p>\n
\n\u041f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430<\/summary>\n
\n
\u0427\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u043d\u0430\u0432\u0440\u043e\u0434\u0435 \u044d\u0442\u043e\u0433\u043e. \u041d\u043e \u043c\u043e\u0436\u043d\u043e \u0438 \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u0435\u0435, \u044d\u0442\u043e \u0443\u0436\u0435 \u0441\u0430\u043c\u0438, \u043d\u0430 \u0441\u0432\u043e\u0439 \u0432\u043a\u0443\u0441.<\/p>\n
\/\/...  const L = \"Left \u2190, a, A\"; const R = \"Right \u2192, d, D\"; \/\/...  const Actions = {   'LeftArrow': L,   'a': L,   'A': L,   'RightArrow': R,   'd': R,   'D': R,   \/\/... }  function handleKeyDown(event: KeyboardEvent){   if (event.key in Actions){ dispatch(event.key, {});   } } <\/code><\/pre>\n<\/div>\n<\/details>\n
\u0412 \u043a\u043e\u0434\u0435 Controller<\/strong> \u043e\u0434\u043d\u0430 \u0441\u0442\u0440\u043e\u0447\u043a\u0430 \u043a\u043e\u0434\u0430 \u0441\u0442\u043e\u0438\u0442 \u043e\u0441\u043e\u0431\u043d\u044f\u043a\u043e\u043c, \u0438, \u0435\u0441\u043b\u0438 \u0432\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043b\u0438 \u043c\u043e\u044e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u044e, \u0438, \u0441\u0442\u0440\u043e\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u044f \u043c\u043e\u0435\u0439 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438, \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0432\u044b\u0435 8 \u0433\u043b\u0430\u0432 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430, \u043e\u043d\u0430 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0432\u0430\u043c \u043f\u043e\u0434\u043e\u0437\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439. \u0412\u043e\u0442 \u044d\u0442\u0430 \u0441\u0442\u0440\u043e\u0447\u043a\u0430:<\/p>\n
<svelte:window on:keydown={handleKeyDown} \/> <\/code><\/pre>\n
svelte:window<\/strong> — \u044d\u0442\u043e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439<\/a>, «\u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439» \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Svelte, \u043e\u0434\u0438\u043d \u0438\u0437 \u0434\u0435\u0432\u044f\u0442\u0438 \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0439 \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u043d\u043e\u0439 \u0438 \u0435\u0434\u0438\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 DOM-\u043e\u0431\u044a\u0435\u043a\u0442\u0430 window.<\/p>\n
\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Stats<\/h4>\n
\u0414\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u0439 \u0438\u0433\u0440\u043e\u043a\u0430 \u0432 \u0438\u0433\u0440\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Stats<\/strong>.<\/p>\n
\nsrc\/components\/Stats.svelte<\/summary>\n
\n
 <script lang=\"ts\">     import { Stats } from \"..\/store\/stats\";   <\/script>      <div class=\"stats\">     <div class=\"item\">Level: {$Stats.level}<\/div>     <div class=\"item\">Lines: {$Stats.lines}<\/div>   <\/div>      <style>     .stats {       display: flex;       flex-direction: column;       justify-content: center;       align-items: center;     }     .item {       font-size: 1rem;     }   <\/style> <\/code><\/pre>\n<\/div>\n<\/details>\n
\u042d\u0442\u043e \u0441\u043e\u0432\u0441\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043e\u043d \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0438\u0437 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430, \u043d\u043e\u0441\u044f\u0449\u0435\u0433\u043e \u0442\u0430\u043a\u043e\u0435 \u0436\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 Stats<\/strong>, \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u0435\u0439 Stats.level<\/strong> \u0438 Stats.line<\/strong>. \u0417\u0430\u043c\u0435\u0442\u044c\u0442\u0435, \u0447\u0442\u043e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 Stats<\/strong> \u044f \u043c\u043e\u0433 \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u0443\u0433\u043e\u0434\u043d\u043e. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0435\u0433\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430, \u043d\u043e \u044d\u0442\u043e \u0432\u043e\u0432\u0441\u0435 \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u0435, \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u0443\u0433\u043e\u0434\u043d\u043e.<\/p>\n
\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Next<\/h4>\n
\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c Next<\/strong> \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0441\u043b\u043e\u0436\u043d\u0435\u0435. \u0415\u0433\u043e \u0437\u0430\u0434\u0430\u0447\u0430 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c «\u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0443» \u0432 \u0432\u0438\u0434\u0435 \u0444\u0438\u0433\u0443\u0440\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0434\u0430\u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439, \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0442\u0435\u043a\u0443\u0449\u0430\u044f \u0444\u0438\u0433\u0443\u0440\u043a\u0430 «\u043f\u0440\u0438\u043b\u0438\u043f\u043d\u0435\u0442» \u043a\u043e \u0434\u043d\u0443 \u0421\u0442\u0430\u043a\u0430\u043d\u0430 \u0438\u043b\u0438 \u043a \u0437\u0430\u0441\u0442\u044b\u0432\u0448\u0438\u043c «\u0441\u0442\u0430\u043b\u0430\u0433\u043c\u0438\u0442\u0430\u043c», \u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0432\u0448\u0438\u043c\u0441\u044f \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043d\u0430\u0433\u0440\u043e\u043c\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u0440\u0430\u043d\u0435\u0435 \u0432\u044b\u043f\u0430\u0432\u0448\u0438\u0445 \u0444\u0438\u0433\u0443\u0440.<\/p>\n
\nsrc\/components\/Next.svelte<\/summary>\n
\n
 <script lang=\"ts\">     import type {Readable} from 'svelte\/store';     import { derived } from \"svelte\/store\";     import type { FigureView } from \"..\/lib\/entities\";     import { Next } from \"..\/store\/next\";     import { figureWidth, figureCellIsSolid } from \"..\/lib\/figures\";        const view: Readable<FigureView> = derived(Next, ($Next) => {       const emptyLine = Array(figureWidth($Next) + 2).fill(0);       return [         emptyLine,          ...$Next.map((line) => [0, ...line, 0]),          emptyLine];     });   <\/script>      <div>     <table>       {#each $view as line}         <tr>           {#each line as cell}             {@const figure = figureCellIsSolid(cell)}             <td class:figure \/>           {\/each}         <\/tr>       {\/each}     <\/table>   <\/div>      <style>     div {       margin: 0 auto;     }     td {       width: 10px;       height: 10px;       background-color: #f5f5f5;     }     td.figure {       background-color: lightgray;     }   <\/style>  <\/code><\/pre>\n<\/div>\n<\/details>\n
\u0417\u0434\u0435\u0441\u044c \u0441\u0442\u043e\u0438\u0442 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430 \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c view<\/strong> \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 «\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435»<\/a>. \u0422\u043e \u0435\u0441\u0442\u044c \u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430. \u0418\u043b\u0438 \u0441\u0440\u0430\u0437\u0443 \u043e\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449 — \u043f\u043e \u0432\u0430\u0448\u0438\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u044f\u043c, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0432\u0430\u0448\u0435\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438.<\/p>\n
\u0415\u0449\u0435 \u043e\u0434\u0438\u043d \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f, \u0432 \u043a\u043e\u0434\u0435 \u043d\u0438\u0436\u0435:<\/p>\n
{@const figure = figureCellIsSolid(cell)} <td class:figure \/> <\/code><\/pre>\n
\u0412 \u043f\u0435\u0440\u0432\u043e\u0439 \u0441\u0442\u0440\u043e\u0447\u043a\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b figure<\/strong>, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0434\u0430\u043b\u0435\u0435, \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0441\u0442\u0440\u043e\u0447\u043a\u0435. \u0415\u0441\u043b\u0438 figure<\/strong> \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 true, \u0442\u043e \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 Svelte \u0434\u043e\u0431\u0430\u0432\u0438\u0442 \u0442\u044d\u0433\u0443 td<\/strong> \u043a\u043b\u0430\u0441\u0441 \u0441 \u0438\u043c\u0435\u043d\u0435\u043c «figure<\/strong>«. \u0415\u0441\u043b\u0438 \u0436\u0435 figure<\/strong> \u0431\u0443\u0434\u0435\u0442 false, \u0442\u043e, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u0430 «figure<\/strong>» \u043a \u0442\u044d\u0433\u0443 td<\/strong> \u043d\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442.<\/p>\n
\u0422\u0430\u043a\u043e\u0435 \u0436\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0438 \u043f\u043e-\u0434\u0440\u0443\u0433\u043e\u043c\u0443:<\/p>\n
<td class:figure=\"{figureCellIsSolid(cell)}\" \/> <\/code><\/pre>\n
\u041f\u043e\u0436\u0430\u043b\u0443\u0439, \u0432\u0442\u043e\u0440\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0431\u043e\u043b\u0435\u0435 «\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439», \u043d\u043e \u043b\u0438\u0447\u043d\u043e \u043c\u043d\u0435 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e «\u043a\u0440\u0430\u0441\u0438\u0432\u0435\u0435», \u0438 \u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u044b\u043c \u0434\u043b\u044f \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u044f, \u0447\u0442\u043e-\u043b\u0438. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0431\u043e\u043b\u0435\u0435 \u043e\u043f\u0440\u0430\u0432\u0434\u0430\u043d\u043e, \u0435\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b figure<\/strong> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0437\u0430\u0442\u0435\u043c \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043c\u0435\u0441\u0442\u0430\u0445, \u0430 \u043d\u0435 \u0432 \u043e\u0434\u043d\u043e\u043c, \u043a\u0430\u043a \u0443 \u043d\u0430\u0441 \u0437\u0434\u0435\u0441\u044c.<\/p>\n
\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Game<\/h4>\n
\u0418, \u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u043d\u0430\u0448\u0435\u0439 \u0438\u0433\u0440\u0435 — Game<\/strong>. \u041e\u043d \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0421\u0442\u0430\u043a\u0430\u043d \u0441\u043e \u0432\u0441\u0435\u043c \u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043f\u0430\u0434\u0430\u044e\u0449\u0443\u044e \u0444\u0438\u0433\u0443\u0440\u043a\u0443. \u0412 \u043a\u043e\u0434\u0435 \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u0435 \u043d\u0430\u043c \u043f\u043e \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0435\u0435 \u043a\u043e\u0434\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043d\u0435 \u0441\u0442\u0430\u043d\u0443.<\/p>\n
\nsrc\/components\/Game.svelte<\/summary>\n
\n
<script lang=\"ts\">     import { derived } from \"svelte\/store\";     import { BoxCellState } from \"..\/lib\/entities\";     import { Box } from \"..\/store\/box\";     import { Figure } from \"..\/store\/figure\";     import { figureCellIsSolid } from \"..\/lib\/figures\";     import { deepClone } from \"..\/lib\/utils\";        const view = derived([Box, Figure], ([$Box, $Figure]) => {       const { view, location: { row, column } } = $Figure;       let box = deepClone($Box);       view.forEach((line, y) =>         line.forEach((cell, x) => {           if (figureCellIsSolid(cell)) {             box[row + y][column + x] = BoxCellState.figure;           }         })       );       return box;     });   <\/script>      <table>     {#each $view as line}       <tr>         {#each line as cell}           {@const empty = cell === BoxCellState.empty}           {@const figure = cell === BoxCellState.figure}           {@const frozen = cell === BoxCellState.frozen}           <td class:empty class:figure class:frozen \/>         {\/each}       <\/tr>     {\/each}   <\/table>      <style>     td {       width: 10px;       height: 10px;     }     td.empty {       background-color: #f5f5f5;     }     td.figure {       background-color: lightgray;     }     td.frozen {       background-color: gray;     }   <\/style>    <\/code><\/pre>\n<\/div>\n<\/details>\n
\u041e\u043a\u043e\u043d\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0432\u0438\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h3>\n
\u041a \u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u043c\u0435\u043d\u0442\u0443 \u043c\u044b \u0443\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043b\u0430\u0432\u0438\u0448 \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438\u0433\u0440\u044b, \u043f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u043e\u0436\u0438\u0432\u0438\u0442\u044c \u0438\u0433\u0440\u0443 — \u043f\u0440\u0438\u0434\u0430\u0442\u044c \u0435\u0439 \u0434\u0438\u043d\u0430\u043c\u0438\u043a\u0443. \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0438\u0433\u0440\u043e\u0432\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u043e\u0431\u044b\u0447\u043d\u043e\u043c typescript-\u0444\u0430\u0439\u043b\u0435 src\/game.ts. \u0417\u0430\u043c\u0435\u0442\u044c\u0442\u0435, \u0447\u0442\u043e \u0440\u0430\u043d\u0435\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b Svelte \u043c\u044b \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043b\u0438 \u0432 \u0444\u0430\u0439\u043b\u044b \u0441 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c .svelte. \u041d\u043e \u0444\u0430\u0439\u043b game.ts \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c Svelte<\/p>\n
\nsrc\/game.ts<\/summary>\n
\n
import { get } from 'svelte\/store'; import {     MaxHeartbeat,     MinHeartbeat,     MinLevel,     MaxLevel,     BoxWidth,     BoxHeight,     CompletedLinesToAdvanceLevel } from '.\/lib\/settings'; import type { FigureView } from '.\/lib\/entities'; import { BoxCellState } from '.\/lib\/entities'; import {     figureWidth,     figureHeight,     figureCellIsSolid,     randomFigure } from '.\/lib\/figures'; import { Box, clean as cleanBox } from '.\/store\/box'; import { Figure } from '.\/store\/figure'; import { Next } from '.\/store\/next'; import { Stats, reset as resetStats } from '.\/store\/stats'; import { turn90 } from '.\/lib\/linalg'; import { initialColumn } from '.\/lib\/utils';  let timer; let heartbeat = MaxHeartbeat;  function gameOver() {     stop();     if (confirm('The game is over')) {         cleanBox();         resetStats();         heartbeat = MaxHeartbeat;         run();     }; }  function figureAtTheBottom() {     const box = get(Box);     const { view, location: { row, column } } = get(Figure);     const figureBottom = row + figureHeight(view);     if (figureBottom === BoxHeight) {         return true;     }     return view.some((line, j) =>         line.some((cell, i) => {             return figureCellIsSolid(cell)                 && (box[row + j + 1][column + i] === BoxCellState.frozen)         })) }  function freeze() {     const box = get(Box);     const { view, location: { row, column } } = get(Figure);     view.forEach((line, j) => line.forEach((cell, i) => {         if (figureCellIsSolid(cell)) {             box[row + j][column + i] = BoxCellState.frozen;         }     })) }  function increaseSpeed() {     const oldHeartbeat = heartbeat;     const levels = MaxLevel - MinLevel;     const heartbeats = MaxHeartbeat - MinHeartbeat;     const deltaHeartbeat = heartbeats \/ levels;     const newHeartbeat = Math.floor(heartbeat - deltaHeartbeat);     heartbeat = Math.max(MinHeartbeat, newHeartbeat);     if (heartbeat > oldHeartbeat) {         stop();         run();     } }  function eraseCompletedLines() {     const box = get(Box);      const completedLines = [];     box.forEach((line, j) => {         if (line.every(cell =>             cell === BoxCellState.frozen         )) completedLines.push(j);     })      completedLines.forEach(completedLine => {         for (let j = completedLine; j > 0; j--) {             box[j] = [...box[j - 1]];         }     })      const { level, lines } = get(Stats);     const totalCompletedLines = lines + completedLines.length;     const nextLevel = Math.min(MaxLevel,         Math.floor(totalCompletedLines \/ CompletedLinesToAdvanceLevel));      Stats.set({         lines: totalCompletedLines,         level: nextLevel     });      if (nextLevel > level) {         increaseSpeed();     } }  function figureCrashesIntoFrozenLines(row: number, column: number, view: FigureView) {     return view.some((line, j) =>         line.some((cell, i) =>             figureCellIsSolid(cell)             && get(Box)[row + j][column + i] === BoxCellState.frozen)); }  function enabledPlacement(row: number, column: number, view: FigureView) {      const figureInsideBox = (row >= 0)         && ((row + figureHeight(view)) <= BoxHeight)         && (column >= 0)         && ((column + figureWidth(view)) <= BoxWidth);      return figureInsideBox && !figureCrashesIntoFrozenLines(row, column, view) }  function impossibleMovement(dRow: number, dColumn: number) {     const { view, location: { row, column } } = get(Figure);     return !enabledPlacement(row + dRow, column + dColumn, view); }  function move(dRow: number, dColumn: number) {     if (gameIsPaused()) return;     if (impossibleMovement(dRow, dColumn)) return;     let { view, location: { row, column } } = get(Figure);     row += dRow;     column += dColumn;     Figure.set({ view, location: { row, column } }); }  function run() {     timer = setInterval(() => {         if (figureAtTheBottom()) {             freeze();             eraseCompletedLines();             const next = get(Next);             const row = 0;             const column = initialColumn(next);             if (figureCrashesIntoFrozenLines(row, column, next)) {                 gameOver();             } else {                 Figure.set({ view: next, location: { row, column } });                 Next.set(randomFigure());             }         } else moveDown();     }, heartbeat) } function stop() {     clearInterval(timer);     timer = undefined; }  function moveLeft() { move(0, -1); } function moveRight() { move(0, 1); } function moveDown() { move(1, 0); } function drop() {     while (!figureAtTheBottom()) {         moveDown();     } } function turn() {     if (gameIsPaused()) return;     const { view, location: { row, column } } = get(Figure);     const turned = turn90(view);     if (enabledPlacement(row, column, turned)) {         Figure.set({ view: turned, location: { row, column } });     } }  function gameIsPaused() {     return timer === undefined; }  function pause() {     if (gameIsPaused()) {         run();     } else {         stop();     } }  export const Tetris = {     pause,     moveLeft,     moveRight,     moveDown,     drop,     turn } <\/code><\/pre>\n<\/div>\n<\/details>\n
\u042d\u0442\u0430 \u0447\u0430\u0441\u0442\u044c \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u0430\u043c\u0430\u044f \u0441\u043b\u043e\u0436\u043d\u0430\u044f, \u043e\u043d\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0438\u0433\u0440\u043e\u0432\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443, \u043e\u0434\u043d\u0430\u043a\u043e Svelte-\u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0438 \u0432 \u043d\u0435\u0439 \u043d\u0435\u043c\u043d\u043e\u0433\u043e. \u041f\u043e\u0436\u0430\u043b\u0443\u0439, \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435, \u043d\u0430 \u0447\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u0441\u0442\u043e\u0438\u0442 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u043e\u0441\u043e\u0431\u043e\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Svelte, \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f get()<\/strong>, \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0438\u0437 svelte\/store. \u0415\u0435 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 — \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449. \u0415\u0441\u043b\u0438 \u0432 \u0444\u0430\u0439\u043b\u0435 \u0441 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c .svelte \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043d\u0435\u043a\u043e\u0433\u043e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0441 \u0438\u043c\u0435\u043d\u0435\u043c MyStore \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c $MyStore — \u0442.\u0435. \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u043e\u043a «\u0434\u043e\u043b\u043b\u0430\u0440» \u043f\u0435\u0440\u0435\u0434 \u0438\u043c\u0435\u043d\u0435\u043c \u044d\u0442\u043e\u0433\u043e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 — \u0442\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0432 \u043e\u0431\u044b\u0447\u043d\u043e\u043c javacript- \u0438\u043b\u0438 typescript-\u0444\u0430\u0439\u043b\u0435, \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u0438\u0431\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044e get()<\/strong>, \u043b\u0438\u0431\u043e \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u0430\u043a-\u043d\u0438\u0431\u0443\u0434\u044c \u0442\u0430\u043a:<\/p>\n
import {MyStore} from '.\/my-store'  let myStoreValue  MyStore.subscribe(value => myStoreValue = value)  ... console.log('Actual value of MyStore is ' + myStoreValue) <\/code><\/pre>\n
\u0421\u043e\u0433\u043b\u0430\u0441\u0438\u0442\u0435\u0441\u044c, \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c, \u043a \u0442\u043e\u043c\u0443 \u0436\u0435, \u043f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0438\u043c\u0435\u044e\u0442\u0441\u044f \u0441\u0432\u043e\u0438 \u043d\u044e\u0430\u043d\u0441\u044b<\/a>. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c get()<\/strong>, \u043d\u043e \u043d\u0430\u0434\u043e \u0438\u043c\u0435\u0442\u044c \u0432 \u0432\u0438\u0434\u0443, \u0447\u0442\u043e \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 Svelte \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u043d\u0435 \u0437\u043b\u043e\u0443\u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438<\/a>. \u0423\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0447\u0430\u0441\u0442\u043e\u0435 \u0435\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u0435\u0434\u0435\u0442 \u043a \u043f\u0430\u0434\u0435\u043d\u0438\u044e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u043d\u043e \u044f \u043d\u0435 \u043f\u043e\u043c\u043d\u044e, \u0447\u0442\u043e\u0431\u044b \u043b\u0438\u0447\u043d\u043e \u044f \u043a\u043e\u0433\u0434\u0430-\u0442\u043e \u043f\u043e\u0441\u0442\u0440\u0430\u0434\u0430\u043b \u0438\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e.<\/p>\n
\u0422\u043e\u0447\u043a\u0430 \u0441\u0431\u043e\u0440\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f — \u0444\u0430\u0439\u043b App.svelte<\/h4>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0432\u0441\u0435 \u0433\u043e\u0442\u043e\u0432\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0432\u0441\u0435 \u0447\u0430\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0435\u0434\u0438\u043d\u043e\u0435 \u0446\u0435\u043b\u043e\u0435. \u0422\u043e\u0447\u043a\u043e\u0439 \u0441\u0431\u043e\u0440\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u043b\u0443\u0436\u0438\u0442 \u0444\u0430\u0439\u043b App.svelte. \u042d\u0442\u0430 «\u0442\u043e\u0447\u043a\u0430 \u0441\u0431\u043e\u0440\u0430» \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 src\/main.ts.<\/p>\n
\nsrc\/main.ts<\/summary>\n
\n
import App from '.\/App.svelte'  const app = new App({   target: document.getElementById('app') })  export default app  <\/code><\/pre>\n<\/div>\n<\/details>\n
\nsrc\/App.svelte<\/summary>\n
\n
 <script lang=\"ts\">   import { Tetris } from \".\/game\";   import Game from \".\/components\/Game.svelte\";   import Next from \".\/components\/Next.svelte\";   import Stats from \".\/components\/Stats.svelte\";   import Controller from \".\/components\/Controller.svelte\"; <\/script>  <main>   <div>     <Game \/>   <\/div>   <div class=\"info\">     <Next \/>     <Controller       on:left={() => Tetris.moveLeft()}       on:right={() => Tetris.moveRight()}       on:down={() => Tetris.moveDown()}       on:drop={() => Tetris.drop()}       on:turn={() => Tetris.turn()}       on:pause={() => Tetris.pause()}     \/>     <Stats \/>   <\/div> <\/main>  <style>   main {     display: flex;     flex-direction: row;     padding-top: 1rem;     justify-content: center;   }   .info {     display: flex;     flex-direction: column;     justify-content: space-between;     padding: 1rem;   } <\/style> <\/code><\/pre>\n<\/div>\n<\/details>\n
\u0424\u0430\u0439\u043b App.svelte \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u043a\u0430\u043a \u0431\u044b \u0441\u0432\u044f\u0437\u0443\u044e\u0449\u0438\u043c \u0437\u0432\u0435\u043d\u043e\u043c \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0412 \u043d\u0435\u043c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u0438, \u0433\u043b\u044f\u0434\u044f \u043d\u0430 \u043a\u043e\u0434, \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0431\u0435\u0437 \u0442\u0440\u0443\u0434\u0430 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0442\u0443\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442. \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439<\/p>\n
npm run dev <\/code><\/pre>\n
\u041d\u0430\u043f\u043e\u043c\u043d\u044e, \u0447\u0442\u043e \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u043d\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0443 \u043d\u0430\u0441 \u043d\u0430 \u043f\u0430\u0443\u0437\u0435, \u0442\u0430\u043a\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043c\u044b \u0437\u0430\u0434\u0430\u043b\u0438 \u0432 \u0444\u0430\u0439\u043b\u0435 game.ts. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u0447\u0442\u043e\u0431\u044b \u0438\u0433\u0440\u0430 «\u043e\u0436\u0438\u043b\u0430», \u043e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0444\u043e\u043a\u0443\u0441 \u043d\u0430 \u043e\u043a\u043d\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0441 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u044b\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c, \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043a\u043b\u0438\u043a\u043d\u0443\u0442\u044c \u043c\u044b\u0448\u043a\u043e\u0439 \u043f\u043e \u043e\u043a\u043d\u0443, \u0438 \u043d\u0430\u0436\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 «\u041f\u0430\u0443\u0437\u0430». \u0427\u0435\u0440\u0435\u0437 \u043f\u0430\u0440\u0443 \u0441\u0435\u043a\u0443\u043d\u0434 \u0444\u0438\u0433\u0443\u0440\u043a\u0430 \u043e\u0436\u0438\u0432\u0435\u0442 \u0438 \u043d\u0430\u0447\u043d\u0435\u0442 \u0441\u0432\u043e\u0435 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u043a\u043e \u0434\u043d\u0443 \u0421\u0442\u0430\u043a\u0430\u043d\u0430. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0444\u0438\u0433\u0443\u0440\u0430 \u043f\u0430\u0434\u0430\u0435\u0442 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e, \u0432\u044b \u043c\u043e\u0436\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u044e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043f\u0430\u0434\u0435\u043d\u0438\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 settings.ts \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 MaxHeartbeat<\/strong>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043a\u0430\u043a \u0440\u0430\u0437 \u0442\u0430\u043a\u0438 \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u0430\u0443\u0437\u044b \u043c\u0435\u0436\u0434\u0443 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f\u043c\u0438 \u0444\u0438\u0433\u0443\u0440\u043a\u0438 \u0432\u043d\u0438\u0437.<\/p>\n
\u0412\u043c\u0435\u0441\u0442\u043e \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f<\/h3>\n
\u0418\u0433\u0440\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0430\u0441\u043a\u0435\u0442\u0438\u0447\u043d\u0430\u044f, \u0447\u0435\u0433\u043e \u0443\u0436 \u0442\u0430\u043c. \u041d\u043e \u0443 \u043d\u0435\u0435 \u0438\u043c\u0435\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0432\u043d\u0435\u0448\u043d\u0438\u043c \u0432\u0438\u0434\u043e\u043c. \u0411\u043e\u043b\u0435\u0435 \u043e\u043f\u044b\u0442\u043d\u044b\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u044b, \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u0443\u0436\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u043b\u0438, \u0447\u0442\u043e \u0432\u0441\u0435 \u043d\u0430\u0448\u0438 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0434\u043b\u044f \u0437\u0430\u043f\u0438\u0441\u0438\/\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043b\u044e\u0431\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0438, \u043f\u043e \u0441\u0443\u0442\u0438, \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438, \u0445\u043e\u0442\u044f \u0432 \u044d\u0442\u043e\u043c \u043d\u0435\u0442 \u043e\u0441\u0442\u0440\u043e\u0439 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u0438. \u0421 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0438\u0433\u0440\u0430\u044e\u0442 \u0437\u0434\u0435\u0441\u044c \u0440\u043e\u043b\u044c \u0448\u0438\u043d\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u0430 \u0432\u044b\u043d\u043e\u0441 \u0438\u0445 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b\/\u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0443\u043b\u0443\u0447\u0448\u0430\u0435\u0442, \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u044c. \u041a\u0430\u043a \u0431\u044b \u0442\u043e \u043d\u0438 \u0431\u044b\u043b\u043e, «\u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438» \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u043d\u0435 \u0441\u0442\u0440\u0430\u0448\u043d\u043e \u0435\u0449\u0435 \u0438 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e «\u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0430» \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u0430\u044f, \u0438 \u043d\u0435 \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0433\u043e \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u041e\u0434\u043d\u0430\u043a\u043e, \u0435\u0441\u043b\u0438 \u0440\u0435\u0447\u044c \u0438\u0434\u0435\u0442 \u043e \u0431\u043e\u043b\u0435\u0435 \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445, \u0442\u043e \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0435\u0441\u043b\u0438 \u043d\u0430\u0434 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u0438\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 «\u0432\u0434\u043e\u043b\u0433\u0443\u044e», \u0434\u0430 \u0435\u0449\u0435 \u0438 \u043a\u043e\u043b\u043b\u0435\u043a\u0442\u0438\u0432\u043d\u043e. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0440\u0430\u043d\u043e \u0438\u043b\u0438 \u043f\u043e\u0437\u0434\u043d\u043e \u0443 \u043a\u043e\u0433\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u044f\u0432\u0438\u0442\u044c\u0441\u044f \u0441\u043e\u0431\u043b\u0430\u0437\u043d \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0433\u0434\u0435-\u043d\u0438\u0431\u0443\u0434\u044c \u0435\u0449\u0435, \u0438, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0440\u0430\u043d\u043e \u0438\u043b\u0438 \u043f\u043e\u0437\u0434\u043d\u043e \u044d\u0442\u043e\u043c\u0443 \u0441\u043e\u0431\u043b\u0430\u0437\u043d\u0443 \u0431\u0443\u0434\u0435\u0442 \u0434\u0430\u043d \u0445\u043e\u0434. \u0412 \u043e\u0431\u0449\u0435\u043c, \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c\u0438 \u0434\u043b\u044f \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0431\u0435\u0437 \u043e\u0441\u0442\u0440\u043e\u0439 \u043d\u0430 \u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u0435\u0436\u0435\u043b\u0438 \u044d\u0442\u043e \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043d\u0435 \u0431\u044b\u043b\u043e \u0437\u0430\u043b\u043e\u0436\u0435\u043d\u043e \u0432 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0442\u0430\u043a\u043e\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043d\u0435\u0442, \u0438 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 «\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u0443\u044e» \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430\u043c\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u043d\u0435\u0441\u0442\u0438 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0432 game.ts, \u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f, \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 «\u0437\u0430\u0432\u044f\u0437\u0430\u043d\u044b» \u043d\u0430 \u043d\u0438\u0445, \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u041d\u043e, \u0432\u0441\u0435-\u0442\u0430\u043a\u0438, \u043d\u0430\u0434\u043e \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 «\u043b\u0443\u0447\u0448\u0435», \u0430 \u044d\u0442\u0430 \u0440\u0435\u043c\u0430\u0440\u043a\u0430 \u0437\u0434\u0435\u0441\u044c \u0441\u043a\u043e\u0440\u0435\u0435 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u0442\u0430\u043a \u0442\u043e\u0436\u0435 \u043c\u043e\u0436\u043d\u043e.<\/p>\n
\/\/ game.ts const next = writable(randomFigure()) ...  export const Next = { subscribe: next.subscribe } <\/code><\/pre>\n
\u0417\u0430\u043c\u0435\u0442\u044c\u0442\u0435, \u0447\u0442\u043e \u044f \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 subscribe<\/strong> \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 next<\/strong>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0444\u0430\u0439\u043b\u0430 game.ts, \u0438, \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Next<\/strong> \u043a\u0430\u043a \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 «\u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f» \u0438 \u0438\u043c\u0435\u0442\u044c \u0435\u0433\u043e \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 \u043b\u044e\u0431\u043e\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432 \u043b\u044e\u0431\u043e\u043c Svelte-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442, \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0437\u043d\u0430\u0447\u043a\u0430 \u0434\u043e\u043b\u043b\u0430\u0440\u0430:<\/p>\n
import {Next} from '.\/game.ts'; ... <p> Actual value of Next is {$Next} <\/p> <\/code><\/pre>\n
\u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u0432\u043e\u043e\u0431\u0449\u0435 \u0431\u0435\u0437 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0443\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u044f, \u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u044f, \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u043e\u0442 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449 \u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u043e\u043f\u043e\u0440\u043e\u0439 \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f. \u0418, \u0432\u043f\u043e\u043b\u043d\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0447\u0442\u043e \u0443 \u0432\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 «\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0435» \u0438 \u043a\u0440\u0430\u0441\u0438\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f.<\/p>\n<\/div>\n<\/div>\n
  <\/div>\n
  
 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/articles\/738746\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
<\/div>\n
\n
\n
\n
\u041f\u0440\u0435\u0434\u0438\u0441\u043b\u043e\u0432\u0438\u0435<\/h3>\n
\u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u0431\u044b\u043b\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u0431\u0435\u0437 \u043c\u0430\u043b\u043e\u0433\u043e \u0433\u043e\u0434 \u043d\u0430\u0437\u0430\u0434, \u0447\u0443\u0442\u044c \u043f\u043e\u0434\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0441\u044f\u0446\u0435\u0432 \u043d\u0430\u0437\u0430\u0434, \u043d\u043e \u0431\u044b\u043b\u0430 \u043e\u0442\u043b\u043e\u0436\u0435\u043d\u0430 \u0432 \u0434\u043e\u043b\u0433\u0438\u0439 \u044f\u0449\u0438\u043a. \u0421 \u0442\u0435\u0445 \u043f\u043e\u0440 \u043c\u043d\u043e\u0433\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0440\u0443\u0441\u0441\u043a\u043e\u044f\u0437\u044b\u0447\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u0432 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0440\u043e\u0434\u0435 \u0431\u044b \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438. \u0411\u044b\u043b \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043d \u043d\u043e\u0432\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0443\u0447\u0435\u0431\u043d\u0438\u043a<\/a> \u0441\u0440\u0430\u0437\u0443 \u043f\u043e Svelte \u0438 SvelteKit \u0432\u043c\u0435\u0441\u0442\u0435 \u0432\u0437\u044f\u0442\u044b\u043c. \u0422\u0435\u043a\u0443\u0449\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f SvelteKit \u0443\u0436\u0435 \u0434\u043e\u0441\u0442\u0438\u0433\u043b\u0430 1.20, \u043d\u043e \u0432 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u043c, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044f \u0437\u043d\u0430\u044e, \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 \u0432\u0441\u0435 \u0435\u0449\u0435 \u0430\u043a\u0442\u0443\u0430\u043b\u0435\u043d.<\/p>\n
\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h3>\n
\u0421\u0442\u0430\u0442\u044c\u044f \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d\u0430 \u043d\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u043e\u0432, \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u0445 \u0441 git, html\/css, typescript \u0438 nodejs. \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0431\u0443\u0434\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0438 \u043c\u0430\u043b\u043e \u0442\u0435\u043a\u0441\u0442\u0430 — \u0432\u0441\u0435, \u043a\u0430\u043a \u0432\u044b \u043b\u044e\u0431\u0438\u0442\u0435 — \u0442\u0430\u043a \u0447\u0442\u043e \u043f\u0440\u0438\u0433\u043e\u0442\u043e\u0432\u044c\u0442\u0435\u0441\u044c \u043f\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u0435\u0441\u0442\u0430 \u0432 \u043a\u043e\u0434\u0435 \u044f \u043f\u0440\u043e\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u044e, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u043b\u0435\u0433\u0447\u0438\u0442\u044c \u0432\u0430\u043c \u0435\u0433\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u0433\u0440 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0438 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u043d\u0435\u0436\u0435\u043b\u0438 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043e\u0431\u0449\u0435\u0433\u043e \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f Svelte, \u043d\u043e, \u0432 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e-\u0443\u0447\u0435\u0431\u043d\u044b\u0445 \u0446\u0435\u043b\u044f\u0445, \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u0438 \u043d\u0435\u0442?..<\/p>\n
\u041d\u0435 \u0442\u0430\u043a \u0434\u0430\u0432\u043d\u043e, \u0437\u0430\u0446\u0435\u043f\u0438\u0432 \u0433\u0434\u0435-\u0442\u043e \u043a\u0440\u0430\u0435\u043c \u0443\u0445\u0430 \u0441\u043b\u043e\u0432\u043e «\u0422\u0435\u0442\u0440\u0438\u0441»<\/a>, \u044f \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e \u043f\u043e\u0434\u0432\u0435\u0440\u0433\u0441\u044f \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0443 \u043d\u043e\u0441\u0442\u0430\u043b\u044c\u0433\u0438\u0438, \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u0432 \u0441\u0432\u043e\u0438 \u043f\u0435\u0440\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u043d\u044b\u0435 \u0438\u0433\u0440\u044b, \u0441\u0440\u0435\u0434\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u044b\u043b \u0438 «\u0422\u0435\u0442\u0440\u0438\u0441». \u042d\u0442\u043e \u0431\u044b\u043b\u0438 \u0443\u0434\u0438\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0430, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430 \u0438\u0433\u0440\u0430\u0445 \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043c\u043e\u0433\u043b\u0438 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0431\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e \u043c\u0438\u043b\u043b\u0438\u043e\u043d\u044b \u0434\u043e\u043b\u043b\u0430\u0440\u043e\u0432, \u0430 \u0438\u0433\u0440\u043e\u043a\u0438 — \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043d\u0435\u0432\u043e\u0437\u0431\u0440\u0430\u043d\u043d\u043e \u043f\u0440\u043e\u0436\u0438\u0433\u0430\u0442\u044c \u0441\u0432\u043e\u0435 \u0434\u0440\u0430\u0433\u043e\u0446\u0435\u043d\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f. \u0421\u0430\u043c \u044f \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0431\u044b\u043b \u0437\u0430\u044f\u0434\u043b\u044b\u043c \u0438\u0433\u0440\u043e\u043a\u043e\u043c, \u043d\u043e \u0438\u0437\u0440\u0435\u0434\u043a\u0430 — \u0432 \u0433\u043e\u0434\u044b \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u0435\u0437\u0437\u0430\u0431\u043e\u0442\u043d\u043e\u0439 \u044e\u043d\u043e\u0441\u0442\u0438 — \u0432\u0441\u0435 \u0436\u0435 \u043c\u043e\u0433 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u044c \u0441\u0435\u0431\u0435 «\u043f\u043e\u0437\u0430\u0432\u0438\u0441\u0430\u0442\u044c». \u041e\u0434\u043d\u0430\u043a\u043e \u043b\u0438\u0440\u0438\u043a\u0443 \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0441\u0432\u043e\u0439 \u0422\u0435\u0442\u0440\u0438\u0441, \u0438 \u043d\u0435 \u043d\u0430 \u0447\u0435\u043c \u043f\u043e\u043f\u0430\u043b\u043e, \u0430 \u043d\u0430 \u0432\u0435\u043b\u0438\u043a\u043e\u043b\u0435\u043f\u043d\u043e\u043c Svelte<\/a>. \u0415\u0441\u043b\u0438 \u0432\u044b \u0435\u0449\u0435 \u043d\u0435 \u0441\u043b\u044b\u0448\u0430\u043b\u0438 \u043e\u0431 \u044d\u0442\u043e\u043c \u0431\u043b\u0438\u0441\u0442\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u043c \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 (\u0434\u0430, \u044f \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044e \u0432 \u044d\u0442\u043e \u0432\u0435\u0440\u0438\u0442\u044c), \u0442\u043e \u043f\u043e\u0441\u043f\u0435\u0448\u0438\u0442\u0435 \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e\u043c \u043d\u0430 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c<\/a>, \u043b\u0438\u0431\u043e \u043d\u0430 \u0440\u0443\u0441\u0441\u043a\u043e\u043c<\/a> \u044f\u0437\u044b\u043a\u0435. \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u044f \u0431\u0443\u0434\u0443 \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0430\u043d\u0433\u043b\u043e\u044f\u0437\u044b\u0447\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0440\u0443\u0441\u0441\u043a\u043e\u044f\u0437\u044b\u0447\u043d\u0430\u044f, \u0432 \u0441\u0438\u043b\u0443 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u0431\u043e\u043b\u0435\u0435 \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044f \u0437\u043d\u0430\u044e. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u043d\u043e\u0433\u0438\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0442\u0430\u043a\u0430\u044f \u043e\u0442\u0441\u044b\u043b\u043a\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u043e\u0432 \u043a \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043c\u043e\u0433\u043b\u0430 \u0431\u044b \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0444\u043e\u0440\u043c\u0435\u043d\u043d\u044b\u043c \u0438\u0437\u0434\u0435\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u043e\u043c, \u043d\u043e, \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 Svelte, \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a. \u0414\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u0432\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u0435\u0433\u043b\u043e\u0433\u043e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u0441 \u043f\u0435\u0440\u0432\u044b\u043c\u0438 \u0432\u043e\u0441\u0435\u043c\u044c\u044e \u0433\u043b\u0430\u0432\u0430\u043c\u0438. \u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f Svelte, \u043a\u0430\u043a \u0438 \u043e\u043d \u0441\u0430\u043c, \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u0430, \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u0430, \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u0430. \u041a \u0441\u043b\u043e\u0432\u0443 \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0431\u044b\u043b \u0432\u044b\u043f\u0443\u0449\u0435\u043d 1-\u0439 \u0440\u0435\u043b\u0438\u0437 «\u043c\u0435\u0442\u0430\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430» SvelteKit<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u043e\u043c Next.js \u0438 NuxtJS, \u043d\u043e \u0441\u043e Svelte \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0441\u043d\u043e\u0432\u044b. \u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f SvelteKit \u0442\u043e\u0436\u0435 \u0438\u043c\u0435\u0435\u0442 \u0441\u0432\u043e\u0439 \u0440\u0443\u0441\u0441\u043a\u043e\u044f\u0437\u044b\u0447\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442<\/a>, \u043d\u043e, \u043a\u0430\u043a \u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 Svelte, \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u0441\u0442\u0430\u0432\u0430\u0442\u044c \u043e\u0442 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438.<\/p>\n
\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e «\u0441\u0432\u043e\u0439», \u0432\u044b\u0445\u043e\u043b\u043e\u0449\u0435\u043d\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0422\u0435\u0442\u0440\u0438\u0441\u0430, \u043d\u0435 \u0437\u0430\u043c\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u044f\u0441\u044c \u043d\u0430 \u0441\u043a\u043e\u043b\u044c-\u043d\u0438\u0431\u0443\u0434\u044c \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0440\u043e\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0447\u0435\u0433\u043e-\u0431\u044b \u0442\u043e \u043d\u0438 \u0431\u044b\u043b\u043e, \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u043e\u0442 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438 \u0438 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u044f \u0432\u043d\u0435\u0448\u043d\u0438\u043c \u0432\u0438\u0434\u043e\u043c, \u043b\u0438\u0448\u044c \u0441 \u0446\u0435\u043b\u044c\u044e \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c, «\u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e» \u043d\u0430 Svelte, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u043e\u043f\u0443\u0442\u043d\u043e \u043d\u0435 \u0443\u0442\u043e\u043f\u0438\u0432 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044f \u0432 \u043c\u0430\u043b\u043e\u0437\u043d\u0430\u0447\u0430\u0449\u0438\u0445 \u0434\u0435\u0442\u0430\u043b\u044f\u0445. \u0421\u0440\u0430\u0437\u0443 \u0441\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u044f \u043d\u0435 \u043d\u0430\u0441\u0442\u0430\u0438\u0432\u0430\u044e \u043d\u0430 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432\u0435\u0440\u043d\u044b\u0445 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0430\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Svelte. \u041d\u0430 Svelte, \u043a\u0430\u043a \u0438 \u043d\u0430 \u043c\u043d\u043e\u0433\u0438\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u0445, \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0435\u0449\u0438 \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438. \u0420\u0430\u0437\u043e\u0431\u0440\u0430\u0432\u0448\u0438\u0441\u044c \u0432 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u043c \u043a\u043e\u0434\u0435, \u0432\u044b \u043b\u0435\u0433\u043a\u043e \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043d\u0430 \u0441\u0432\u043e\u0435 \u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u0438\u0435, \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0432 \u0438\u0433\u0440\u0443 \u0434\u043e \u0432\u0430\u0448\u0438\u0445 \u0432\u044b\u0441\u043e\u043a\u0438\u0445 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u0432, \u0438\u043b\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e.<\/p>\n
\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h3>\n
\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0440\u0430\u0431\u043e\u0447\u0435\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u043e\u0434\u0438\u043d \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0434\u0438\u0441\u0442\u0440\u0438\u0431\u0443\u0442\u0438\u0432\u043e\u0432 Linux — Ubuntu. \u0412\u0441\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u044b \u043d\u0438\u0436\u0435, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u044d\u0442\u043e\u0439 \u041e\u0421.<\/p>\n
\u041f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e, \u0441\u043a\u043b\u043e\u043d\u0438\u0440\u0443\u0439\u0442\u0435 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0443\u0436\u0435 \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0432\u043e\u0439 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440:<\/p>\n
git clone git@github.com:nodeperson\/svelte-tetris.git <\/code><\/pre>\n
\u041f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u0441\u043a\u043b\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439<\/p>\n
cd svelte-tetris <\/code><\/pre>\n
\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u043f\u0430\u043a\u0435\u0442\u043e\u0432<\/p>\n
npm install <\/code><\/pre>\n
\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0430, \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439<\/p>\n
npm run dev <\/code><\/pre>\n
\u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0432\u0435\u0434\u0435\u043d \u0430\u0434\u0440\u0435\u0441, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0441\u0432\u043e\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435<\/p>\n
Local:   http:\/\/localhost:5173\/ <\/code><\/pre>\n
\u0412 \u043c\u043e\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e http:\/\/localhost:5137<\/a> \u0423 \u0432\u0430\u0441 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u043e\u0440\u0442, \u044d\u0442\u043e \u043d\u0435 \u0441\u0442\u0440\u0430\u0448\u043d\u043e, \u044d\u0442\u043e \u0431\u044b\u0432\u0430\u0435\u0442. \u041e\u0442\u043a\u0440\u044b\u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440, \u0438 \u0432\u0441\u0442\u0430\u0432\u0438\u0432 \u0432 \u0430\u0434\u0440\u0435\u0441\u043d\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u044d\u0442\u043e\u0442 \u0430\u0434\u0440\u0435\u0441, \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0423 \u043c\u0435\u043d\u044f \u043e\u043d\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n
<\/figure>\n
 \u0427\u0442\u043e\u0431\u044b \u0438\u0433\u0440\u0430 «\u043e\u0436\u0438\u043b\u0430», \u043a\u043b\u0438\u043a\u043d\u0438\u0442\u0435 \u043c\u044b\u0448\u043a\u043e\u0439 \u0432 \u043e\u043a\u043d\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u043d\u0430 \u043d\u0435\u0439 \u0444\u043e\u043a\u0443\u0441, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u043d\u0430\u0436\u043c\u0438\u0442\u0435 \u043a\u043d\u043e\u043f\u043a\u0443 «Pause» \u043d\u0430 \u0432\u0430\u0448\u0435\u0439 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0435. \u0427\u0435\u0440\u0435\u0437 \u043f\u0430\u0440\u0443 \u0441\u0435\u043a\u0443\u043d\u0434 \u043f\u0435\u0440\u0432\u0430\u044f \u0444\u0438\u0433\u0443\u0440\u043a\u0430 \u043d\u0430\u0447\u043d\u0435\u0442 \u0441\u0432\u043e\u0435 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u0432\u043d\u0438\u0437. <\/p>\n
\n\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 Svelte-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f «\u0441 \u043d\u0443\u043b\u044f»<\/summary>\n
\n
 \u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0432\u0441\u044e \u043f\u0440\u043e\u0446\u0435\u0434\u0443\u0440\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f «\u0441 \u043d\u0443\u043b\u044f», \u0442\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c Svelte-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0432\u0430\u0448\u0435\u0439 \u041e\u0421 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <\/p>\n
npm init vite <\/code><\/pre>\n
\u0412 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u043f\u0440\u0438\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u0435 \u043e\u0442 vite …<\/p>\n
? Project name:vite-project <\/code><\/pre>\n
… \u0432\u043c\u0435\u0441\u0442\u043e «vite-project» \u0437\u0430\u0434\u0430\u0439\u0442\u0435 \u0441\u0432\u043e\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 svelte-tetris. \u0417\u0430\u0442\u0435\u043c, \u043a\u043d\u043e\u043f\u043a\u043e\u0439 «\u0441\u0442\u0440\u0435\u043b\u043a\u0430 \u0432\u043d\u0438\u0437», \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0432 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u043c \u0441\u043f\u0438\u0441\u043a\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 svelte, \u0438, \u043d\u0430\u043a\u043e\u043d\u0435\u0446, svelte-ts. \u041f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b<\/p>\n
cd svelte-tetris npm install <\/code><\/pre>\n
\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 \u0441\u0432\u043e\u0435\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043a\u043e\u0434\u0430 — \u0432 \u043c\u043e\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e VS Code \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c «Svelte for VS Code»- \u0438 \u0443\u0434\u0430\u043b\u0438\u0442\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043f\u0430\u043f\u043e\u043a srs\/lib \u0438 src\/assets, \u0444\u0430\u0439\u043b src\/app.css \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0443\u0434\u0430\u043b\u0438\u0442\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0444\u0430\u0439\u043b\u0430 src\/App.svelte. \u0412 \u0444\u0430\u0439\u043b\u0435 src\/main.ts \u0443\u0434\u0430\u043b\u0438\u0442\u0435 \u0441\u0442\u0440\u043e\u043a\u0443 import ‘.\/app.css’, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0443\u044e \u0438\u043c\u043f\u043e\u0440\u0442 \u0431\u043e\u043b\u0435\u0435  \u043d\u0435\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u0444\u0430\u0439\u043b\u0430 src\/app.css. \u0412 \u0444\u0430\u0439\u043b\u0435 index.html, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0442\u044d\u0433\u0430 title \u043d\u0430 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 — Tetris. \u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u0434\u0435\u0432\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0447\u0438\u0441\u0442 \u0438 \u0433\u043e\u0442\u043e\u0432 \u043a \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u0435.<\/p>\n<\/div>\n<\/details>\n
\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0438\u0433\u0440\u043e\u0432\u044b\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438<\/h3>\n
\u041f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0438\u0433\u0440\u044b. \u041f\u043e\u043b\u0430\u0433\u0430\u044e, \u0447\u0442\u043e \u043a \u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u043c\u0435\u043d\u0442\u0443 \u0432\u044b \u0443\u0436\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u0441\u0442\u0430\u0442\u044c\u044e \u043e \u0422\u0435\u0442\u0440\u0438\u0441\u0435 \u043d\u0430 \u0412\u0438\u043a\u0438\u043f\u0435\u0434\u0438\u0438<\/a>, \u0438, \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0438\u0433\u0440\u044b, \u0438 \u0442\u043e, \u043a\u0430\u043a \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043e\u043d\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c. \u0415\u0449\u0435 \u0440\u0430\u0437 \u043e\u0442\u043c\u0435\u0447\u0443, \u0447\u0442\u043e \u0438\u0433\u0440\u0443 \u044f \u0431\u0443\u0434\u0443 «\u043a\u043e\u043d\u0441\u0442\u0440\u0443\u0438\u0440\u043e\u0432\u0430\u0442\u044c», \u043e\u043f\u0438\u0440\u0430\u044f\u0441\u044c \u043d\u0430 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0432\u043e\u0441\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u044f, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u043f\u0430\u0440\u0443 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u0441 \u0438\u0433\u0440\u043e\u0432\u044b\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0432 Youtube \u0438\u043b\u0438 \u043d\u0430\u0439\u0442\u0438 \u0432 Google. \u041e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0445\u043e\u0436\u0430 \u043d\u0430 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0422\u0435\u0442\u0440\u0438\u0441, \u043d\u043e \u0441 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044f\u043c\u0438, \u043e\u0431\u0443\u0441\u043b\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u0441\u0442\u0440\u0435\u043c\u043b\u0435\u043d\u0438\u0435\u043c \u043a \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044e.<\/p>\n
\u0418\u0442\u0430\u043a, \u0443 \u043d\u0430\u0441 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0444\u0438\u0433\u0443\u0440\u043a\u0430, \u043f\u0430\u0434\u0430\u044e\u0449\u0430\u044f \u043f\u043e \u0442\u0438\u043a\u0443 \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u0442\u0430\u0439\u043c\u0435\u0440\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e «\u0441\u0442\u0430\u043a\u0430\u043d\u0430» \u0438\u043b\u0438 «\u043a\u043e\u0440\u043e\u0431\u043a\u0438», \u043a\u0430\u043a \u0432\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f. \u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0442\u0438\u043a\u0430 \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u0442\u0430\u0439\u043c\u0435\u0440\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0435\u043a\u0443\u0449\u0438\u043c \u0443\u0440\u043e\u0432\u043d\u0435\u043c \u0438\u0433\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439, \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0438\u0441\u043b\u043e\u043c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0445 \u043b\u0438\u043d\u0438\u0439. \u041f\u0430\u0434\u0430\u044e\u0449\u0438\u0435 \u0444\u0438\u0433\u0443\u0440\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u043a\u0440\u0443\u0442\u0438\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u043e\u0439 «\u0441\u0442\u0440\u0435\u043b\u043a\u0430 \u0432\u0432\u0435\u0440\u0445». \u041c\u043e\u0436\u043d\u043e \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u043f\u0430\u0434\u0435\u043d\u0438\u0435 \u0444\u0438\u0433\u0443\u0440\u043a\u0438, \u043d\u0430\u0436\u0438\u043c\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0443 «\u0441\u0442\u0440\u0435\u043b\u043a\u0430 \u0432\u043d\u0438\u0437», \u043b\u0438\u0431\u043e \u0432\u043e\u043e\u0431\u0449\u0435 «\u0443\u0440\u043e\u043d\u0438\u0442\u044c» \u0444\u0438\u0433\u0443\u0440\u043a\u0443 \u043d\u0430 \u0434\u043d\u043e, \u043d\u0430\u0436\u0430\u0432 «\u043f\u0440\u043e\u0431\u0435\u043b». \u0417\u0430\u0434\u0430\u0447\u0430 \u0438\u0433\u0440\u043e\u043a\u0430 — \u0443\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u0444\u0438\u0433\u0443\u0440\u043a\u0438 \u043d\u0430 \u0434\u043d\u0435 \u0441\u0442\u0430\u043a\u0430\u043d\u0430 \u0431\u0435\u0437 \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u043e\u0432. \u0417\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0435 \u0431\u0435\u0437 \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u043e\u0432 \u043b\u0438\u043d\u0438\u0438 \u0441\u0442\u0438\u0440\u0430\u044e\u0442\u0441\u044f, \u043e\u0441\u0432\u043e\u0431\u043e\u0436\u0434\u0430\u044f \u043c\u0435\u0441\u0442\u043e \u0432 \u0441\u0442\u0430\u043a\u0430\u043d\u0435. \u0427\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043b\u0438\u043d\u0438\u0439 \u0431\u0435\u0437 \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430 \u0432\u044b \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u043b\u0438, \u0442\u0435\u043c \u0432\u044b\u0448\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u0430\u0448 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c, \u0438, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043f\u0430\u0434\u0435\u043d\u0438\u044f \u0444\u0438\u0433\u0443\u0440\u043e\u043a \u043f\u043e \u0442\u0430\u0439\u043c\u0435\u0440\u0443. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043c\u0435\u0440\u0438\u043b\u0430 \u0443\u0441\u043f\u0435\u0445\u0430 \u0438\u0433\u0440\u043e\u043a\u0430 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0447\u0438\u0441\u043b\u043e \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0445 \u043b\u0438\u043d\u0438\u0439, \u043e\u0434\u043d\u0430\u043a\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c<\/a> \u0438 \u0432\u0435\u0441\u0442\u0438 \u0443\u0447\u0435\u0442 \u0442\u0430\u043a, \u043a\u0430\u043a \u0432\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f.<\/p>\n
\u041f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c\u0441\u044f \u0441 \u043e\u0431\u0449\u0438\u043c\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u0438\u0433\u0440\u044b. \u042f \u043e\u0442\u043d\u0435\u0441 \u043a \u043d\u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0440 \u0441\u0442\u0430\u043a\u0430\u043d\u0430\/\u043a\u043e\u0440\u043e\u0431\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u0443 \u043d\u0430\u0441 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u043c \u0441 \u0432\u044b\u0441\u043e\u0442\u043e\u0439 BoxHeight<\/strong> \u0438 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 BoxWidth<\/strong>. \u0415\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f — \u044d\u0442\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e «\u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0438\u043a\u043e\u0432», \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d \u0421\u0442\u0430\u043a\u0430\u043d, \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0438.<\/p>\n
\u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u044f \u0431\u0443\u0434\u0443 \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0441\u0442\u0430\u043a\u0430\u043d\/\u043a\u043e\u0440\u043e\u0431\u043a\u0443 «\u0441\u0442\u0430\u043a\u0430\u043d\u043e\u043c», \u0445\u043e\u0442\u044f \u0432 \u043a\u043e\u0434\u0435 \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0443 \u043c\u0435\u043d\u044f Box. \u041c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043f\u043e-\u0440\u0443\u0441\u0441\u043a\u0438 «\u0441\u0442\u0430\u043a\u0430\u043d» \u0437\u0432\u0443\u0447\u0438\u0442 \u043b\u0443\u0447\u0448\u0435, \u0430 \u043f\u043e-\u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442 — \u043b\u0443\u0447\u0448\u0435 \u043f\u0438\u0441\u0430\u0442\u044c «Box».<\/em><\/p>\n
\u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u0430\u0443\u0437 \u0432 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445 \u043c\u0435\u0436\u0434\u0443 \u0442\u0438\u043a\u0430\u043c\u0438 \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u0442\u0430\u0439\u043c\u0435\u0440\u0430 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u0438\u0433\u0440\u044b — MinHeartbeat<\/strong> \u0438 MaxHeartbeat<\/strong>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0443\u0440\u043e\u0432\u043d\u0438 MinLevel<\/strong> \u0438 MaxLevel<\/strong>. \u041a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430 CompletedLinesToAdvanceLevel<\/strong> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0447\u0438\u0441\u043b\u043e \u043b\u0438\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c, \u0434\u0430\u0431\u044b \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c.<\/p>\n
\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0438\u0433\u0440\u044b \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 src\/lib\/settings.ts<\/p>\n
\nsrc\/lib\/settings.ts<\/summary>\n
\n
export const BoxWidth = 10 export const BoxHeight = 20  export const MaxHeartbeat = 2000 export const MinHeartbeat = 500  export const MinLevel = 1 export const MaxLevel = 10  export const CompletedLinesToAdvanceLevel = 3 <\/code><\/pre>\n<\/div>\n<\/details>\n
\u0412 \u0444\u0430\u0439\u043b\u0435 src\/lib\/entities.ts \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0442\u0438\u043f\u044b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.<\/p>\n
\nsrc\/lib\/entities.ts<\/summary>\n
\n
export enum BoxCellState {     empty,     figure,     frozen }  type Vector<T> = Array<T>  export type Matrix<T> = Array<Vector<T>>  export type FigureView = Matrix<number>  export type GameView = Matrix<BoxCellState> <\/code><\/pre>\n<\/div>\n<\/details>\n
\u041f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 BoxCellState<\/strong> \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u044f\u0447\u0435\u0435\u043a \u0432 \u0421\u0442\u0430\u043a\u0430\u043d\u0435, Vector<\/strong> — \u044d\u0442\u043e \u0441\u0442\u0440\u043e\u043a\u0430 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435, Matrix<\/strong> — \u0442\u0430\u0431\u043b\u0438\u0446\u0430\/\u043c\u0430\u0442\u0440\u0438\u0446\u0430\/\u0434\u0432\u0443\u043c\u0435\u0440\u043d\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432.<\/p>\n
\u0424\u0430\u0439\u043b src\/lib\/figures.ts \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0432\u0441\u0435, \u0447\u0442\u043e \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 Figure<\/strong>. \u0417\u0434\u0435\u0441\u044c \u0436\u0435 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0432\u0438\u0434\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u0444\u0438\u0433\u0443\u0440\u043e\u043a \u0432 \u0432\u0438\u0434\u0435 \u0434\u0432\u0443\u043c\u0435\u0440\u043d\u044b\u0445 \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u0432, \u0438 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0424\u0438\u0433\u0443\u0440\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u0433\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c.<\/p>\n
\nsrc\/lib\/figures.ts<\/summary>\n
\n
 import type { FigureView } from '.\/entities';  interface IFigures {     [key: string]: FigureView } export const Figures: IFigures = {     i: [         [1, 1, 1, 1],     ],     j: [         [1, 0, 0],         [1, 1, 1],     ],     l: [         [0, 0, 1],         [1, 1, 1],     ],     o: [         [1, 1],         [1, 1]     ],     s: [         [0, 1, 1],         [1, 1, 0]     ],     t: [         [0, 1, 0],         [1, 1, 1]     ],     z: [         [1, 1, 0],         [0, 1, 1]     ] }  export function figureCellIsSolid(cell: number){     return cell === 1; }  export function figureCellIsEmpty(cell: number){     return !figureCellIsSolid(cell); }  export function figureWidth(figure: FigureView): number {     return figure[0].length; }  export function figureHeight(figure: FigureView): number {     return figure.length; }  export function randomFigure(): FigureView {     const names = Object.keys(Figures);     const randomIndex = Math.round(Math.random() * (names.length - 1));     const randomName = names[randomIndex];     return Figures[randomName]; }  <\/code><\/pre>\n<\/div>\n<\/details>\n
\u0412\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u043c\u0435\u0442\u0438\u043b, \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435, \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u0443\u044e «\u043d\u0435\u0441\u043f\u0440\u0430\u0432\u0435\u0434\u043b\u0438\u0432\u043e\u0441\u0442\u044c» \u0438\u043b\u0438, \u0435\u0441\u043b\u0438 \u0443\u0433\u043e\u0434\u043d\u043e, «\u043d\u0435\u043b\u043e\u0433\u0438\u0447\u043d\u043e\u0441\u0442\u044c» \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u044f\u0447\u0435\u0435\u043a \u0421\u0442\u0430\u043a\u0430\u043d\u0430 \u0443 \u043c\u0435\u043d\u044f \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u044b \u0438 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u044b \u0432 BoxCellState<\/strong>, \u0430 \u0432\u043e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u044f\u0447\u0435\u0435\u043a \u0424\u0438\u0433\u0443\u0440\u044b<\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-348161","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/348161","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=348161"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/348161\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=348161"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=348161"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=348161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}