{"id":197416,"date":"2013-10-14T20:16:03","date_gmt":"2013-10-14T16:16:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=197416"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=197416","title":{"rendered":"<span class=\"post_title\">\u041f\u0438\u0448\u0435\u043c HTML5-\u0438\u0433\u0440\u0443 \u0437\u0430 20 \u043c\u0438\u043d\u0443\u0442, \u0438\u043b\u0438 \u0432\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 Phaser framework<\/span>"},"content":{"rendered":"<div class=\"content html_format\"> \t\t\t\u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0441\u0442\u0438\u043b\u044c\u043d\u044b\u0445, \u043c\u043e\u0434\u043d\u044b\u0445 \u0438 \u043c\u043e\u043b\u043e\u0434\u0435\u0436\u043d\u044b\u0445 HTML5 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u043e\u0432\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 <a href=\"http:\/\/phaser.io\">Phaser<\/a>. \u0412 \u043d\u0435\u0439 \u043e\u043f\u0438\u0441\u0430\u043d \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0438\u0433\u0440\u044b Pong.<\/p>\n<h4>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h4>\n<p>  Phaser \u2014 \u044d\u0442\u043e \u0434\u0432\u0438\u0436\u043e\u043a \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0438 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u044b\u0445 HTML5 \u0438\u0433\u0440, \u0431\u0430\u0437\u0438\u0440\u0443\u044e\u0449\u0438\u0439\u0441\u044f \u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 <a href=\"http:\/\/www.pixijs.com\">PIXI.js<\/a>. \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0432 Canvas \u0438 WebGL, \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u043f\u0440\u0430\u0439\u0442\u044b, \u0447\u0430\u0441\u0442\u0438\u0446\u044b, \u0430\u0443\u0434\u0438\u043e, \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0432\u0432\u043e\u0434\u0430 \u0438 \u0444\u0438\u0437\u0438\u043a\u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432. \u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u043a\u0430\u043a \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430, \u0442\u0430\u043a \u0438 \u0434\u043b\u044f \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0439 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438. \u041e\u043d \u0441\u043e\u0437\u0434\u0430\u043d \u0420\u0438\u0447\u0430\u0440\u0434\u043e\u043c \u0414\u0435\u0439\u0432\u0438 (Richard Davey), \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e\u043c\u0443 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u043c\u0443 \u0443\u0447\u0430\u0441\u0442\u0438\u044e \u0432 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u043e\u0432, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0445 <a href=\"http:\/\/flixel.org\">Flixel framework<\/a>. \u0420\u0438\u0447\u0430\u0440\u0434 \u043d\u0435 \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u043b\u044f\u043b\u0441\u044f \u0424\u043b\u0438\u043a\u0441\u0435\u043b\u0435\u043c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0435\u0449\u0438 \u0432 \u0424\u0430\u0437\u0435\u0440\u0435 \u0431\u0443\u0434\u0443\u0442 \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u043e\u043f\u044b\u0442\u043d\u044b\u043c \u0444\u043b\u0435\u0448\u0435\u0440\u0430\u043c. \u041f\u0435\u0440\u0432\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u0434\u0432\u0438\u0436\u043a\u0430 \u0432\u044b\u0448\u043b\u0430 13 \u0441\u0435\u043d\u0442\u044f\u0431\u0440\u044f \u044d\u0442\u043e\u0433\u043e \u0433\u043e\u0434\u0430, \u0441\u0435\u0439\u0447\u0430\u0441 \u0432\u0435\u0434\u0435\u0442\u0441\u044f \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043d\u043e \u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0443\u0440\u043e\u043a\u043e\u0432 \u043f\u043e \u043d\u0435\u0439, \u043c\u044f\u0433\u043a\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u043d\u0435\u043c\u043d\u043e\u0433\u043e. \u0427\u0442\u043e, \u043f\u043e \u043c\u043e\u0435\u043c\u0443 \u0441\u043a\u0440\u043e\u043c\u043d\u043e\u043c\u0443 \u043c\u043d\u0435\u043d\u0438\u044e, \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c, \u0438 \u043f\u0440\u044f\u043c\u043e \u0441\u0435\u0439\u0447\u0430\u0441.<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h4>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440\u0430<\/h4>\n<p>  \u0418\u0442\u0430\u043a, \u043d\u0430\u0447\u043d\u0435\u043c. \u0414\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440. \u0412\u0441\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0437 \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0442\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 PHP, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0443\u0436\u0435\u043d \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439. \u042f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b <a href=\"http:\/\/www.mamp.info\/en\/index.html\">MAMP<\/a> \u0434\u043b\u044f MacOS, \u0434\u043b\u044f Windows \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442 \u043e\u0442\u0435\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 <a href=\"http:\/\/www.denwer.ru\">Denwer<\/a> \u0438\u043b\u0438 \u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439 \u0430\u043d\u0430\u043b\u043e\u0433.<\/p>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043a\u0430\u0447\u0430\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044e\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0424\u0430\u0437\u0435\u0440\u0430 c GitHub: <a href=\"https:\/\/github.com\/photonstorm\/phaser\">https:\/\/github.com\/photonstorm\/phaser<\/a>. \u0412 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 (13 \u043e\u043a\u0442\u044f\u0431\u0440\u044f 2013 \u0433\u043e\u0434\u0430) \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043a\u0430\u0447\u0430\u0442\u044c dev \u0432\u0435\u0442\u043a\u0443, \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u0430 \u0432\u0435\u0440\u0441\u0438\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0440\u044f\u0434 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u0439 \u043e\u0431\u044a\u0435\u043c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438. \u0414\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 GitHub, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u043f\u0440\u044f\u043c\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0430\u0440\u0445\u0438\u0432: <a href=\"https:\/\/github.com\/photonstorm\/phaser\/archive\/dev.zip\">https:\/\/github.com\/photonstorm\/phaser\/archive\/dev.zip<\/a>.<\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0432\u0441\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435-\u043f\u0440\u0438\u043c\u0435\u0440 Hello Phaser. \u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043f\u0430\u043f\u043a\u0443 <i>hellophaser<\/i> \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0432\u0430\u0448\u0435\u0433\u043e \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u043e\u0439 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432, \u0438 \u0441\u043a\u043e\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u0442\u0443\u0434\u0430 \u0442\u0440\u0438 \u0444\u0430\u0439\u043b\u0430 \u0438\u0437 \u043f\u0430\u043f\u043a\u0438 <i>Docs\/Hello Phaser<\/i>:<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage3\/42e\/fe1\/7e5\/42efe17e569000f36a87e42d4e59edf2.png\"  alt=\"image\"\/><\/div>\n<p>  \u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u0441\u0432\u043e\u0439 \u043b\u044e\u0431\u0438\u043c\u044b\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438 \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 URL \u0441\u043e \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438 \u0444\u0430\u0439\u043b\u0430\u043c\u0438 (\u0432 \u043c\u043e\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 <a href=\"http:\/\/localhost:8888\/hellophaser\/\">http:\/\/localhost:8888\/hellophaser\/<\/a>). \u0415\u0441\u043b\u0438 \u0432\u0441\u0435 \u0445\u043e\u0440\u043e\u0448\u043e, \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u0441\u0438\u043c\u043f\u0430\u0442\u0438\u0447\u043d\u044b\u0439 \u043b\u043e\u0433\u043e\u0442\u0438\u043f, \u0442\u0430\u043a\u043e\u0439 \u043a\u0430\u043a \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0435 \u043d\u0438\u0436\u0435:<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage3\/c0b\/a81\/454\/c0ba81454fce1f2ce572280b45ffd112.png\"  alt=\"image\"\/><\/div>\n<h4>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0433\u0440\u044b<\/h4>\n<p>  <\/p>\n<h5>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432<\/h5>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043d\u0430\u0448\u0435\u0439 \u043f\u0435\u0440\u0432\u043e\u0439 \u0438\u0433\u0440\u044b. \u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0434\u043b\u044f \u043d\u0435\u0435 \u043f\u0430\u043f\u043a\u0443 <i>phaser-pong<\/i> \u043d\u0430 \u0432\u0430\u0448\u0435\u043c \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0438 \u0441\u043a\u043e\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u0442\u0443\u0434\u0430 \u0444\u0430\u0439\u043b <i>phaser.js<\/i> \u0438\u0437 \u043f\u0430\u043f\u043a\u0438 <i>build<\/i> \u0441 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u043c\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430. \u0422\u0430\u043a\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0432 \u043d\u0435\u0439 \u043f\u0430\u043f\u043a\u0443 <i>assets<\/i>, \u0433\u0434\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432\u0441\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b, \u043e\u0442\u043d\u043e\u0441\u044f\u0449\u0438\u0435\u0441\u044f \u043a \u0438\u0433\u0440\u0435, \u0438 \u0444\u0430\u0439\u043b <i>index.html<\/i> (\u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0437\u0434\u0435\u0441\u044c \u0438 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0448\u0430 \u0438\u0433\u0440\u0430).<\/p>\n<p>  \u0421\u043a\u043e\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u0432 \u043f\u0430\u043f\u043a\u0443 <i>assets<\/i> \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0448\u0430\u0440\u0438\u043a\u0430, \u0440\u0430\u043a\u0435\u0442\u043a\u0438 \u0438 \u0444\u043e\u043d\u0430. \u041c\u043e\u0436\u043d\u043e \u0432\u0437\u044f\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0444\u0430\u0439\u043b\u044b (\u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0444\u043e\u043d\u0430 \u044f \u0432\u0437\u044f\u043b \u0437\u0432\u0435\u0437\u0434\u043d\u043e\u0435 \u043d\u0435\u0431\u043e \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0424\u0430\u0437\u0435\u0440\u0430), \u0430 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0441\u0432\u043e\u0435. \u0413\u043b\u0430\u0432\u043d\u043e\u0435 \u2014 \u044d\u0442\u043e \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0432\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0435 \u0432 \u0438\u0433\u0440\u0443 \u043d\u0443\u0436\u043d\u044b\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0441 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u044b\u043c\u0438 \u0438\u043c\u0435\u043d\u0430\u043c\u0438 \u0438 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u043c\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438. \u0422\u0430\u043a\u0436\u0435 \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0441 \u0438\u0445 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u043e\u0439 \u043c\u043e\u0433\u0443\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0435\u0440\u0435\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0438 \u0441\u0432\u043e\u0435\u0433\u043e \u043a\u043e\u0442\u0430 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u0435 \u0435\u0435 \u0434\u043e, \u0441\u043a\u0430\u0436\u0435\u043c, 480\u0445640 (\u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0430\u0448\u0435\u0439 \u0438\u0433\u0440\u044b), \u0438 \u0432\u0441\u0435 \u0431\u0443\u0434\u0435\u0442 \u0445\u043e\u0440\u043e\u0448\u043e. <br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage3\/24c\/ead\/de1\/24ceadde178b198b454de2fb71ebbf43.png\" alt=\"image\"\/><br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage3\/431\/4e2\/c21\/4314e2c2198b4bff5689d7dbdd3c1274.png\" alt=\"image\"\/><br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage3\/c06\/e75\/f5f\/c06e75f5f7c9de0cdcbd6d802d042fc0.jpg\" alt=\"image\"\/><\/p>\n<p>  \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043f\u0430\u043f\u043a\u0438 <i>phaser-pong<\/i> \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u0438\u043c:<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage3\/75c\/f03\/9e0\/75cf039e00f601cff949fa81d20c825a.png\"  alt=\"image\"\/><\/div>\n<p>  \u0410 \u0432 \u043f\u0430\u043f\u043a\u0435 <i>assets<\/i> \u0431\u0443\u0434\u0435\u0442 \u0442\u0440\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438:<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage3\/e89\/00d\/3e1\/e8900d3e1e6c9af3a1615ac0f8ad82d9.png\"  alt=\"image\"\/><\/div>\n<h5>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0438\u0433\u0440\u044b, \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432<\/h5>\n<p>  \u041d\u0430\u043a\u043e\u043d\u0435\u0446-\u0442\u043e \u0432\u0441\u0435 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u044d\u0442\u0430\u043f\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u044b, \u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430. \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 <i>index.html<\/i> \u0438 \u0432\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0442\u0443\u0434\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"html\">&lt;script src=&quot;phaser.js&quot;&gt;&lt;\/script&gt; &lt;script type=&quot;text\/javascript&quot;&gt;     var game = new Phaser.Game(480, 640, Phaser.AUTO, '', { preload: preload, create: create, update: update });     function preload() {         game.load.image('bet', 'assets\/bet.png');         game.load.image('ball', 'assets\/ball.png');         game.load.image('background', 'assets\/starfield.jpg');     }     function create() {         game.add.tileSprite(0, 0, 480, 640, 'background');     }      function update () {     } &lt;\/script&gt; <\/code><\/pre>\n<p>  \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0430\u0434\u0440\u0435\u0441 \u043d\u043e\u0432\u043e\u0439 \u0438\u0433\u0440\u044b (\u0443 \u043c\u0435\u043d\u044f \u044d\u0442\u043e <a href=\"http:\/\/localhost:8888\/phaser-pong\/\">http:\/\/localhost:8888\/phaser-pong\/<\/a>) \u0438 \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u0435\u0435 \u043e\u043a\u043d\u043e \u0441 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u0444\u043e\u043d\u043e\u043c<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage3\/4c9\/3e4\/c08\/4c93e4c089a8b5e199d9eb955fd1aa15.png\" alt=\"image\" \/><\/div>\n<p>  \u0427\u0442\u043e \u0436\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u043c \u043a\u043e\u0434\u0435? \u0412\u043d\u0430\u0447\u0430\u043b\u0435 \u043c\u044b \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443. \u041f\u043e\u0442\u043e\u043c \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u0442\u0438\u043f\u0430 <code>Game<\/code>, \u0437\u0430\u0434\u0430\u0432\u0430\u044f \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0448\u0438\u0440\u0438\u043d\u0443 480 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 640 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439. <code>Phaser.AUTO<\/code> \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0442\u0438\u043f \u0440\u0435\u043d\u0434\u0435\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438. \u041f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c Canvas \u0438\u043b\u0438 WebGL. \u0427\u0435\u0442\u0432\u0435\u0440\u0442\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0437\u0430\u0434\u0430\u0435\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 DOM-\u043e\u0431\u044a\u0435\u043a\u0442 \u0434\u043b\u044f \u0438\u0433\u0440\u044b, \u0435\u0433\u043e \u043c\u044b \u043d\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c.<br \/>  \u0412 \u043f\u044f\u0442\u043e\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0435 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u044b \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u0433\u0440\u044b. <code>preload() <\/code>\u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043a\u043e\u0434 \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432, <code>create()<\/code> \u2014 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0438\u0433\u0440\u044b, \u0430 <code>update() <\/code> \u2014 \u043a\u043e\u043c\u0430\u043d\u0434\u044b, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0435 \u043f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041d\u0430 \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u043e\u043c \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0435 <code>update() <\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e 60 \u0440\u0430\u0437 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443. \u0418\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432 \u0441\u0435\u0431\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0438\u0433\u0440\u043e\u0432\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443.<\/p>\n<p>  \u0412 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>create()<\/code> \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u043f\u0440\u0430\u0439\u0442 \u0441 \u0444\u043e\u043d\u043e\u043c \u043d\u0430\u0448\u0435\u0439 \u0438\u0433\u0440\u044b. \u0421\u043f\u0440\u0430\u0439\u0442 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0435 \u0432 \u043f\u0435\u0440\u0432\u044b\u0445 \u0447\u0435\u0442\u044b\u0440\u0435\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u0445 <code>tileSprite<\/code>.<\/p>\n<h5>\u0418\u0433\u0440\u043e\u0432\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b<\/h5>\n<p>  \u0421\u0435\u0439\u0447\u0430\u0441 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0441\u0430\u043c\u043e\u043c\u0443 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u043c\u0443 \u2014 \u043d\u0430\u043f\u043e\u043b\u043d\u0438\u043c \u043d\u0430\u0448\u0443 \u0438\u0433\u0440\u0443 \u043b\u043e\u0433\u0438\u043a\u043e\u0439. \u041f\u043e\u0441\u043b\u0435 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <code>game<\/code> \u0438 \u043f\u0435\u0440\u0435\u0434 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 <code>preload()<\/code> \u043e\u0431\u044a\u044f\u0432\u0438\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0441 \u0440\u0430\u043a\u0435\u0442\u043a\u0430\u043c\u0438 \u0438\u0433\u0440\u043e\u043a\u0430 \u0438 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430, \u043c\u044f\u0447\u0438\u043a\u043e\u043c, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0443\u043a\u0430\u0436\u0435\u043c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0438\u0445 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"html\">    var playerBet;     var computerBet;     var ball;      var computerBetSpeed = 190;     var ballSpeed = 300; <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0440\u0430\u043a\u0435\u0442\u043e\u043a \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>createBet(x, y)<\/code>:<\/p>\n<pre><code class=\"html\">function createBet(x, y) {         var bet = game.add.sprite(x, y, 'bet');         bet.anchor.setTo(0.5, 0.5);         bet.body.collideWorldBounds = true;         bet.body.bounce.setTo(1, 1);         bet.body.immovable = true;          return bet;     } <\/code><\/pre>\n<p>  \u041c\u0435\u0442\u043e\u0434 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0441\u043f\u0440\u0430\u0439\u0442 \u0441 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u043c\u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c\u0438 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0435\u0433\u043e \u0432 \u0438\u0433\u0440\u0443. \u041f\u043e\u043b\u0435 <code>anchor<\/code> \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0442\u043e\u0447\u043a\u0443 \u043e\u0442\u0441\u0447\u0435\u0442\u0430 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0441\u043f\u0440\u0430\u0439\u0442\u0430, \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0435\u0433\u043e \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0440\u0430\u043a\u0435\u0442\u043a\u0438. <code>body<\/code> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0444\u0438\u0437\u0438\u043a\u043e\u0439. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u043c \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u043a\u0435\u0442\u043a\u0438 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430, \u0437\u0430\u0434\u0430\u0435\u043c \u0441\u0438\u043b\u0443 \u00ab\u043e\u0442\u0441\u043a\u043e\u043a\u0430\u00bb \u0438 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u0447\u0442\u043e \u043f\u0440\u0438 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0438 \u0441 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438 \u0440\u0430\u043a\u0435\u0442\u043a\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043b\u0435\u0442\u0430\u0442\u044c \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443.<\/p>\n<p>  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0434\u0432\u0430 \u0432\u044b\u0437\u043e\u0432\u0430 \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 <i>create()<\/i>, \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0444\u043e\u043d\u0430. \u0420\u0430\u043a\u0435\u0442\u043a\u0438 \u0431\u0443\u0434\u0443\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u0432 \u0438\u0433\u0440\u0443 \u043f\u043e\u0441\u043b\u0435 \u0444\u043e\u043d\u043e\u0432\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0445 \u0432\u0438\u0434\u0435\u0442\u044c \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435:<\/p>\n<pre><code class=\"html\">        playerBet = createBet(game.world.centerX, 600);         computerBet = createBet(game.world.centerX, 20); <\/code><\/pre>\n<p>  \u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0448\u0430\u0440\u0438\u043a, \u0434\u043e\u043f\u0438\u0441\u0430\u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u0437\u043e\u0432\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>createBet()<\/code> \u0432 <code>create()<\/code>:<\/p>\n<pre><code class=\"html\">        ball = game.add.sprite(game.world.centerX, game.world.centerY, 'ball');         ball.anchor.setTo(0.5, 0.5);         ball.body.collideWorldBounds = true;         ball.body.bounce.setTo(1, 1); <\/code><\/pre>\n<p>  \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0443\u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0432 \u043d\u0430\u0448\u0435\u0439 \u0438\u0433\u0440\u0435 \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c \u0434\u0432\u0435 \u0440\u0430\u043a\u0435\u0442\u043a\u0438 \u0438 \u043c\u044f\u0447\u0438\u043a, \u043f\u043e\u043a\u0430 \u043d\u0435\u043f\u043e\u0434\u0432\u0438\u0436\u043d\u044b\u0435:<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage3\/699\/6fd\/371\/6996fd371e2d75a2ff1152bb43852d33.png\" alt=\"image\" \/><\/div>\n<p>  <\/p>\n<h5>\u041b\u043e\u0433\u0438\u043a\u0430<\/h5>\n<p>  \u041a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u0441\u0438\u043c\u043f\u0430\u0442\u0438\u0447\u043d\u043e\u0439, \u043d\u043e \u0434\u0443\u043c\u0430\u044e, \u0441\u0442\u043e\u0438\u0442 \u0435\u0435 \u0441\u043b\u0435\u0433\u043a\u0430 \u043e\u0436\u0438\u0432\u0438\u0442\u044c.<br \/>  \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0443\u044e \u0437\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0448\u0430\u0440\u0438\u043a\u0430 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0435\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c:<\/p>\n<pre><code class=\"html\">    var ballReleased = false;          function releaseBall() {         if (!ballReleased) {             ball.body.velocity.x = ballSpeed;             ball.body.velocity.y = -ballSpeed;             ballReleased = true;         }     } <\/code><\/pre>\n<p>  \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442, \u0447\u0442\u043e \u0448\u0430\u0440\u0438\u043a \u0435\u0449\u0435 \u043d\u0435 \u0437\u0430\u043f\u0443\u0449\u0435\u043d, \u0438 \u0432 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0437\u0430\u0434\u0430\u0435\u0442 \u0435\u043c\u0443 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043e\u043b\u044f <i>velocity<\/i>.<br \/>  \u0412\u044b\u0437\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u043e\u0432\u0435\u0441\u0438\u043c \u043d\u0430 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u043c\u044b\u0448\u043a\u0438, \u043d\u0430\u043f\u0438\u0441\u0430\u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u0432 <i>create()<\/i>:<\/p>\n<pre><code class=\"html\">        game.input.onDown.add(releaseBall, this); <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043a\u043b\u0438\u043a \u043c\u044b\u0448\u043a\u043e\u0439 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0448\u0430\u0440\u0438\u043a, \u0438 \u043e\u043d \u043e\u0442\u0441\u043a\u0430\u043a\u0438\u0432\u0430\u0435\u0442 \u043e\u0442 \u0433\u0440\u0430\u043d\u0438\u0446 \u0438\u0433\u0440\u044b. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0438 \u0440\u0430\u043a\u0435\u0442\u043a\u0430\u043c, \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>update()<\/code>:<\/p>\n<pre><code class=\"html\">function update () {         \/\/\u0423\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0440\u0430\u043a\u0435\u0442\u043a\u043e\u0439 \u0438\u0433\u0440\u043e\u043a\u0430         playerBet.x = game.input.x;          var playerBetHalfWidth = playerBet.width \/ 2;          if (playerBet.x &lt; playerBetHalfWidth) {             playerBet.x = playerBetHalfWidth;         }         else if (playerBet.x &gt; game.width - playerBetHalfWidth) {             playerBet.x = game.width - playerBetHalfWidth;         }          \/\/\u0423\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0440\u0430\u043a\u0435\u0442\u043a\u043e\u0439 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u043d\u043e\u0433\u043e \u0441\u043e\u043f\u0435\u0440\u043d\u0438\u043a\u0430         if(computerBet.x - ball.x &lt; -15) {             computerBet.body.velocity.x = computerBetSpeed;         }         else if(computerBet.x - ball.x &gt; 15) {             computerBet.body.velocity.x = -computerBetSpeed;         }         else {             computerBet.body.velocity.x = 0;         }     } <\/code><\/pre>\n<p>  \u0420\u0430\u043a\u0435\u0442\u043a\u0430 \u0438\u0433\u0440\u043e\u043a\u0430 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0437\u0430 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435\u043c \u043c\u044b\u0448\u0438, \u0440\u0430\u043a\u0435\u0442\u043a\u0430 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430 \u2014 \u0437\u0430 \u0448\u0430\u0440\u0438\u043a\u043e\u043c. \u0414\u043b\u044f \u0440\u0430\u043a\u0435\u0442\u043a\u0438 \u0438\u0433\u0440\u043e\u043a\u0430 \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u043d\u0430 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0438 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b <code>x<\/code>, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0430 \u043d\u0435 \u043f\u044b\u0442\u0430\u043b\u0430\u0441\u044c \u0432\u044b\u0441\u043a\u043e\u0447\u0438\u0442\u044c \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044f.<\/p>\n<p>  \u0412\u0441\u044f \u0441\u0443\u0442\u044c \u0438\u0433\u0440\u044b \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u043e\u0442\u0431\u0438\u0432\u0430\u043d\u0438\u0438 \u0448\u0430\u0440\u0438\u043a\u0430 \u0440\u0430\u043a\u0435\u0442\u043a\u0430\u043c\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0443\u0436\u043d\u043e \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0439 \u0448\u0430\u0440\u0438\u043a\u0430 \u0441 \u0440\u0430\u043a\u0435\u0442\u043a\u0430\u043c\u0438. \u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u0432 \u0424\u0430\u0437\u0435\u0440\u0435 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c.<br \/>  \u0414\u043e\u043f\u0438\u0448\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0442\u0440\u0438 \u0441\u0442\u0440\u043e\u043a\u0438 \u0432 \u043a\u043e\u043d\u0435\u0446 <code>update()<\/code>:<\/p>\n<pre><code class=\"html\">        \/\/\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0438 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u043c\u044f\u0447\u0438\u043a\u0430 \u0438 \u0440\u0430\u043a\u0435\u0442\u043e\u043a         game.physics.collide(ball, playerBet, ballHitsBet, null, this);         game.physics.collide(ball, computerBet, ballHitsBet, null, this); <\/code><\/pre>\n<p>  \u041c\u0435\u0442\u043e\u0434 <code>collide<\/code> \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0435 \u0434\u0432\u0443\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 (\u043f\u0435\u0440\u0432\u044b\u0435 \u0434\u0432\u0430 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430) \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u0443\u044e \u0432 \u0442\u0440\u0435\u0442\u044c\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043d\u0430\u0434 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u0432\u0448\u0438\u043c\u0438\u0441\u044f \u0441\u043f\u0440\u0430\u0439\u0442\u0430\u043c\u0438. \u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"html\">    function ballHitsBet (_ball, _bet) {         var diff = 0;          if (_ball.x &lt; _bet.x) {             \/\/  \u0428\u0430\u0440\u0438\u043a \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441 \u043b\u0435\u0432\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0440\u0430\u043a\u0435\u0442\u043a\u0438             diff = _bet.x - _ball.x;             _ball.body.velocity.x = (-10 * diff);         }         else if (_ball.x &gt; _bet.x) {             \/\/  \u0428\u0430\u0440\u0438\u043a \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441 \u043f\u0440\u0430\u0432\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0440\u0430\u043a\u0435\u0442\u043a\u0438             diff = _ball.x -_bet.x;             _ball.body.velocity.x = (10 * diff);         }         else {             \/\/  \u0428\u0430\u0440\u0438\u043a \u043f\u043e\u043f\u0430\u043b \u0432 \u0446\u0435\u043d\u0442\u0440 \u0440\u0430\u043a\u0435\u0442\u043a\u0438, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0435\u043c\u043d\u043e\u0436\u043a\u043e \u0442\u0440\u0430\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0441\u0442\u0438 \u0435\u0433\u043e \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044e             _ball.body.velocity.x = 2 + Math.random() * 8;         }     } <\/code><\/pre>\n<p>  \u041f\u0440\u0438 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0438 \u0448\u0430\u0440\u0438\u043a \u043c\u0435\u043d\u044f\u0435\u0442 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0435\u0433\u043e \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u043d\u0430 \u043a\u0430\u043a\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0440\u0430\u043a\u0435\u0442\u043a\u0438 \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442.<\/p>\n<p>  \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u043d\u0430 \u043f\u0440\u043e\u043f\u0443\u0449\u0435\u043d\u043d\u044b\u0439 \u0433\u043e\u043b. \u0415\u0441\u043b\u0438 \u043a\u0442\u043e-\u0442\u043e \u0435\u0433\u043e \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u043b, \u0441\u0442\u0430\u0432\u0438\u043c \u0448\u0430\u0440\u0438\u043a \u0432 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u043f\u043e\u043b\u044f.<\/p>\n<pre><code class=\"html\">    function checkGoal() {         if (ball.y &lt; 15) {             setBall();         } else if (ball.y &gt; 625) {             setBall();         }     }      function setBall() {         if (ballReleased) {             ball.x = game.world.centerX;             ball.y = game.world.centerY;             ball.body.velocity.x = 0;             ball.body.velocity.y = 0;             ballReleased = false;         }              } <\/code><\/pre>\n<p>  <code>checkGoal()<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u043e\u043f\u0438\u0440\u0443\u0435\u043c \u0435\u0435 \u0432 \u043a\u043e\u043d\u0435\u0446 <code>update()<\/code>:<\/p>\n<pre><code class=\"html\">        \/\/\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u043d\u0435 \u0437\u0430\u0431\u0438\u043b \u043b\u0438 \u043a\u0442\u043e-\u0442\u043e \u0433\u043e\u043b         checkGoal(); <\/code><\/pre>\n<p>  \u0412\u0441\u0435! \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440, \u043d\u0430\u0441\u043b\u0430\u0436\u0434\u0430\u0435\u043c\u0441\u044f \u0444\u0430\u043d\u0442\u0430\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c \u0433\u0435\u0439\u043c\u043f\u043b\u0435\u0435\u043c \u043d\u0430\u0448\u0435\u0439 \u0438\u0433\u0440\u044b, \u0440\u0430\u0434\u0443\u0435\u043c\u0441\u044f \u0436\u0438\u0437\u043d\u0438 \u0438 \u0441\u0432\u0435\u0436\u0435\u043f\u0440\u0438\u043e\u0431\u0440\u0435\u0442\u0435\u043d\u043d\u044b\u043c \u043d\u0430\u0432\u044b\u043a\u0430\u043c\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<h4>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h4>\n<p>  \u0415\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0438\u0433\u0440\u0435 \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u0435\u0449\u0435 \u043c\u043d\u043e\u0433\u043e\u0433\u043e, \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u043f\u043e\u0434\u0441\u0447\u0435\u0442\u0430 \u043e\u0447\u043a\u043e\u0432 \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u0431\u0435\u0434\u0438\u0442\u0435\u043b\u0435\u0439. \u041d\u043e \u043c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0434\u043b\u044f \u0432\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0441 Phaser \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0445 \u0432\u0435\u0449\u0435\u0439. \u0414\u0432\u0438\u0436\u043e\u043a \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043a\u043b\u0430\u0441\u0441\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0441\u044c \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043d\u043e\u0432\u043e\u0439 \u0438\u0433\u0440\u044b, \u0447\u0443\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0438 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043e\u0442\u043d\u043e\u0441\u044f\u0449\u0435\u0439\u0441\u044f \u043a \u0425\u0430\u0431\u0440\u0443, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0435\u0435.<br \/>  \u0421\u0442\u0435\u0439 \u0442\u044c\u044e\u043d\u0435\u0434.<\/p>\n<p>  \u0412 \u0445\u043e\u0434\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u044f \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u043a\u043e\u0434 \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 <i>breakout.php<\/i>. \u041a\u0440\u043e\u043c\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u0432 \u043f\u0430\u043f\u043a\u0435 \u0441 \u0424\u0430\u0437\u0435\u0440\u043e\u043c \u0435\u0441\u0442\u044c \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0438\u0433\u0440\u044b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0442\u0435\u043c, \u043a\u043e\u043c\u0443 \u043d\u0435 \u0442\u0435\u0440\u043f\u0438\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043f\u0430\u043f\u043a\u0438 <i>examples<\/i>.<\/p>\n<p>  \u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0441\u0441\u044b\u043b\u043a\u0438:<br \/>  1. <a href=\"http:\/\/phaser.io\/getting-started-js.php\">\u0410\u043d\u0433\u043b\u043e\u044f\u0437\u044b\u0447\u043d\u043e\u0435 \u0432\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 \u0424\u0430\u0437\u0435\u0440<\/a><br \/>  2. <a href=\"http:\/\/www.html5gamedevs.com\/forum\/14-phaser\/\">\u0424\u043e\u0440\u0443\u043c, \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u043d\u044b\u0439 \u0434\u0432\u0438\u0436\u043a\u0443<\/a><br \/>  3. <a href=\"https:\/\/twitter.com\/photonstorm\">\u0422\u0432\u0438\u0442\u0442\u0435\u0440 \u0420\u0438\u0447\u0430\u0440\u0434\u0430 \u0414\u0435\u0439\u0432\u0438<\/a><\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0418, \u043d\u0430 \u0432\u0441\u044f\u043a\u0438\u0439 \u0441\u043b\u0443\u0447\u0430\u0439, \u043f\u043e\u043b\u043d\u044b\u0439 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 index.html:<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"html\">&lt;script src=&quot;phaser.js&quot;&gt;&lt;\/script&gt; &lt;script type=&quot;text\/javascript&quot;&gt;      var game = new Phaser.Game(480, 640, Phaser.AUTO, '', { preload: preload, create: create, update: update });      var playerBet;     var computerBet;     var ball;      var computerBetSpeed = 190;     var ballSpeed = 300;     var ballReleased = false;      function preload() {          game.load.image('bet', 'assets\/bet.png');         game.load.image('ball', 'assets\/ball.png');         game.load.image('background', 'assets\/starfield.jpg');      }       function create() {          game.add.tileSprite(0, 0, 480, 640, 'background');          playerBet = createBet(game.world.centerX, 600);         computerBet = createBet(game.world.centerX, 20);           ball = game.add.sprite(game.world.centerX, game.world.centerY, 'ball');         ball.anchor.setTo(0.5, 0.5);         ball.body.collideWorldBounds = true;         ball.body.bounce.setTo(1, 1);          game.input.onDown.add(releaseBall, this);     }      function createBet(x, y) {         var bet = game.add.sprite(x, y, 'bet');         bet.anchor.setTo(0.5, 0.5);         bet.body.collideWorldBounds = true;         bet.body.bounce.setTo(1, 1);         bet.body.immovable = true;          return bet;     }      function update () {         \/\/\u0423\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0440\u0430\u043a\u0435\u0442\u043a\u043e\u0439 \u0438\u0433\u0440\u043e\u043a\u0430         playerBet.x = game.input.x;          var playerBetHalfWidth = playerBet.width \/ 2;          if (playerBet.x &lt; playerBetHalfWidth) {             playerBet.x = playerBetHalfWidth;         }         else if (playerBet.x &gt; game.width - playerBetHalfWidth) {             playerBet.x = game.width - playerBetHalfWidth;         }          \/\/\u0423\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0440\u0430\u043a\u0435\u0442\u043a\u043e\u0439 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u043d\u043e\u0433\u043e \u0441\u043e\u043f\u0435\u0440\u043d\u0438\u043a\u0430         if(computerBet.x - ball.x &lt; -15) {             computerBet.body.velocity.x = computerBetSpeed;         }         else if(computerBet.x - ball.x &gt; 15) {             computerBet.body.velocity.x = -computerBetSpeed;         }         else {             computerBet.body.velocity.x = 0;         }          \/\/\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0438 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u043c\u044f\u0447\u0438\u043a\u0430 \u0438 \u0440\u0430\u043a\u0435\u0442\u043e\u043a         game.physics.collide(ball, playerBet, ballHitsBet, null, this);         game.physics.collide(ball, computerBet, ballHitsBet, null, this);          \/\/\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u043d\u0435 \u0437\u0430\u0431\u0438\u043b \u043b\u0438 \u043a\u0442\u043e-\u0442\u043e \u0433\u043e\u043b         checkGoal();     }      function ballHitsBet (_ball, _bet) {          var diff = 0;          if (_ball.x &lt; _bet.x) {             \/\/  \u0428\u0430\u0440\u0438\u043a \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441 \u043b\u0435\u0432\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0440\u0430\u043a\u0435\u0442\u043a\u0438             diff = _bet.x - _ball.x;             _ball.body.velocity.x = (-10 * diff);         }         else if (_ball.x &gt; _bet.x) {             \/\/  \u0428\u0430\u0440\u0438\u043a \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441 \u043f\u0440\u0430\u0432\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0440\u0430\u043a\u0435\u0442\u043a\u0438             diff = _ball.x -_bet.x;             _ball.body.velocity.x = (10 * diff);         }         else {             \/\/  \u0428\u0430\u0440\u0438\u043a \u043f\u043e\u043f\u0430\u043b \u0432 \u0446\u0435\u043d\u0442\u0440 \u0440\u0430\u043a\u0435\u0442\u043a\u0438, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0435\u043c\u043d\u043e\u0436\u043a\u043e \u0442\u0440\u0430\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0441\u0442\u0438 \u0435\u0433\u043e \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044e             _ball.body.velocity.x = 2 + Math.random() * 8;         }      }      function checkGoal() {         if (ball.y &lt; 15) {             setBall();         } else if (ball.y &gt; 625) {             setBall();         }     }      function setBall() {         if (ballReleased) {             ball.x = game.world.centerX;             ball.y = game.world.centerY;             ball.body.velocity.x = 0;             ball.body.velocity.y = 0;             ballReleased = false;         }              }      function releaseBall() {         if (!ballReleased) {             ball.body.velocity.x = ballSpeed;             ball.body.velocity.y = -ballSpeed;             ballReleased = true;         }     }  &lt;\/script&gt; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<div class=\"clear\"><\/div>\n<\/p><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/habrahabr.ru\/post\/197416\/\"> http:\/\/habrahabr.ru\/post\/197416\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"content html_format\"> \t\t\t\u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0441\u0442\u0438\u043b\u044c\u043d\u044b\u0445, \u043c\u043e\u0434\u043d\u044b\u0445 \u0438 \u043c\u043e\u043b\u043e\u0434\u0435\u0436\u043d\u044b\u0445 HTML5 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u043e\u0432\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 <a href=\"http:\/\/phaser.io\">Phaser<\/a>. \u0412 \u043d\u0435\u0439 \u043e\u043f\u0438\u0441\u0430\u043d \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0438\u0433\u0440\u044b Pong.<\/p>\n<h4>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h4>\n<p>  Phaser \u2014 \u044d\u0442\u043e \u0434\u0432\u0438\u0436\u043e\u043a \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0438 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u044b\u0445 HTML5 \u0438\u0433\u0440, \u0431\u0430\u0437\u0438\u0440\u0443\u044e\u0449\u0438\u0439\u0441\u044f \u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 <a href=\"http:\/\/www.pixijs.com\">PIXI.js<\/a>. \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0432 Canvas \u0438 WebGL, \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u043f\u0440\u0430\u0439\u0442\u044b, \u0447\u0430\u0441\u0442\u0438\u0446\u044b, \u0430\u0443\u0434\u0438\u043e, \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0432\u0432\u043e\u0434\u0430 \u0438 \u0444\u0438\u0437\u0438\u043a\u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432. \u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u043a\u0430\u043a \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430, \u0442\u0430\u043a \u0438 \u0434\u043b\u044f \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0439 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438. \u041e\u043d \u0441\u043e\u0437\u0434\u0430\u043d \u0420\u0438\u0447\u0430\u0440\u0434\u043e\u043c \u0414\u0435\u0439\u0432\u0438 (Richard Davey), \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e\u043c\u0443 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u043c\u0443 \u0443\u0447\u0430\u0441\u0442\u0438\u044e \u0432 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u043e\u0432, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0445 <a href=\"http:\/\/flixel.org\">Flixel framework<\/a>. \u0420\u0438\u0447\u0430\u0440\u0434 \u043d\u0435 \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u043b\u044f\u043b\u0441\u044f \u0424\u043b\u0438\u043a\u0441\u0435\u043b\u0435\u043c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0435\u0449\u0438 \u0432 \u0424\u0430\u0437\u0435\u0440\u0435 \u0431\u0443\u0434\u0443\u0442 \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u043e\u043f\u044b\u0442\u043d\u044b\u043c \u0444\u043b\u0435\u0448\u0435\u0440\u0430\u043c. \u041f\u0435\u0440\u0432\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u0434\u0432\u0438\u0436\u043a\u0430 \u0432\u044b\u0448\u043b\u0430 13 \u0441\u0435\u043d\u0442\u044f\u0431\u0440\u044f \u044d\u0442\u043e\u0433\u043e \u0433\u043e\u0434\u0430, \u0441\u0435\u0439\u0447\u0430\u0441 \u0432\u0435\u0434\u0435\u0442\u0441\u044f \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043d\u043e \u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0443\u0440\u043e\u043a\u043e\u0432 \u043f\u043e \u043d\u0435\u0439, \u043c\u044f\u0433\u043a\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u043d\u0435\u043c\u043d\u043e\u0433\u043e. \u0427\u0442\u043e, \u043f\u043e \u043c\u043e\u0435\u043c\u0443 \u0441\u043a\u0440\u043e\u043c\u043d\u043e\u043c\u0443 \u043c\u043d\u0435\u043d\u0438\u044e, \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c, \u0438 \u043f\u0440\u044f\u043c\u043e \u0441\u0435\u0439\u0447\u0430\u0441.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-197416","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/197416","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=197416"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/197416\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=197416"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=197416"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=197416"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}