{"id":16454,"date":"2024-01-25T07:50:22","date_gmt":"2024-01-25T04:20:22","guid":{"rendered":"https:\/\/rasanegar.com\/blog\/%d9%85%d9%82%d8%af%d9%85%d9%87-%d8%a7%db%8c-%d8%a8%d8%b1-%d9%81%d8%a7%d8%b2-3-%d8%aa%d9%88%d8%b3%d8%b9%d9%87-breakoutgame-%d8%b4%d8%a7%d8%ae%d9%87-%d8%a7%db%8c-%d9%85%d9%86%d8%ad%d8%b5%d8%b1-%d8%a8\/"},"modified":"2024-01-25T07:50:22","modified_gmt":"2024-01-25T04:20:22","slug":"%d9%85%d9%82%d8%af%d9%85%d9%87-%d8%a7%db%8c-%d8%a8%d8%b1-%d9%81%d8%a7%d8%b2-3-%d8%aa%d9%88%d8%b3%d8%b9%d9%87-breakoutgame-%d8%b4%d8%a7%d8%ae%d9%87-%d8%a7%db%8c-%d9%85%d9%86%d8%ad%d8%b5%d8%b1-%d8%a8","status":"publish","type":"post","link":"https:\/\/rasanegaar.com\/blog\/%d9%85%d9%82%d8%af%d9%85%d9%87-%d8%a7%db%8c-%d8%a8%d8%b1-%d9%81%d8%a7%d8%b2-3-%d8%aa%d9%88%d8%b3%d8%b9%d9%87-breakoutgame-%d8%b4%d8%a7%d8%ae%d9%87-%d8%a7%db%8c-%d9%85%d9%86%d8%ad%d8%b5%d8%b1-%d8%a8\/","title":{"rendered":"\u0645\u0642\u062f\u0645\u0647 \u0627\u06cc \u0628\u0631 \u0641\u0627\u0632 3: \u062a\u0648\u0633\u0639\u0647 BreakoutGame \u0634\u0627\u062e\u0647 \u0627\u06cc \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u0627\u0632 \u062a\u0648\u0633\u0639\u0647 \u0646\u0631\u0645 \u0627\u0641\u0632\u0627\u0631 \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0647\u0645\u0627\u0646 \u0627\u0646\u062f\u0627\u0632\u0647 \u06a9\u0647 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0627\u0633\u062a \u0645\u0641\u06cc\u062f \u0628\u0627\u0634\u062f.  \u0648\u0642\u062a\u06cc \u0628\u0647 \u0633\u0627\u062e\u062a \u0628\u0627\u0632\u06cc \u0641\u06a9\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u0645\u060c \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u0646\u0635\u0628 \u0648 \u0628\u0627\u0632\u06cc \u0641\u06a9\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0631\u0648\u06cc \u0631\u0627\u06cc\u0627\u0646\u0647 \u0647\u0627 \u06cc\u0627 \u06a9\u0646\u0633\u0648\u0644 \u0647\u0627\u06cc \u0645\u0627  \u0645\u0634\u062e\u0635\u0627\u062a HTML5 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 API \u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 \u062a\u0648\u0633\u0639\u0647 \u0628\u0627\u0632\u06cc \u0645\u0639\u0631\u0641\u06cc \u06a9\u0631\u062f \u0631\u0648\u06cc &#8230;"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0633\u0631\u0641\u0635\u0644\u0647\u0627\u06cc \u0645\u0637\u0644\u0628<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rasanegaar.com\/blog\/%d9%85%d9%82%d8%af%d9%85%d9%87-%d8%a7%db%8c-%d8%a8%d8%b1-%d9%81%d8%a7%d8%b2-3-%d8%aa%d9%88%d8%b3%d8%b9%d9%87-breakoutgame-%d8%b4%d8%a7%d8%ae%d9%87-%d8%a7%db%8c-%d9%85%d9%86%d8%ad%d8%b5%d8%b1-%d8%a8\/#%d9%85%d8%b9%d8%b1%d9%81%db%8c\" >\u0645\u0639\u0631\u0641\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rasanegaar.com\/blog\/%d9%85%d9%82%d8%af%d9%85%d9%87-%d8%a7%db%8c-%d8%a8%d8%b1-%d9%81%d8%a7%d8%b2-3-%d8%aa%d9%88%d8%b3%d8%b9%d9%87-breakoutgame-%d8%b4%d8%a7%d8%ae%d9%87-%d8%a7%db%8c-%d9%85%d9%86%d8%ad%d8%b5%d8%b1-%d8%a8\/#%d8%ad%d9%84%d9%82%d9%87_%d8%a8%d8%a7%d8%b2%db%8c\" >\u062d\u0644\u0642\u0647 \u0628\u0627\u0632\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rasanegaar.com\/blog\/%d9%85%d9%82%d8%af%d9%85%d9%87-%d8%a7%db%8c-%d8%a8%d8%b1-%d9%81%d8%a7%d8%b2-3-%d8%aa%d9%88%d8%b3%d8%b9%d9%87-breakoutgame-%d8%b4%d8%a7%d8%ae%d9%87-%d8%a7%db%8c-%d9%85%d9%86%d8%ad%d8%b5%d8%b1-%d8%a8\/#%d9%81%d8%a7%d8%b2%d8%b1_%da%86%db%8c%d8%b3%d8%aa%d8%9f\" >\u0641\u0627\u0632\u0631 \u0686\u06cc\u0633\u062a\u061f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rasanegaar.com\/blog\/%d9%85%d9%82%d8%af%d9%85%d9%87-%d8%a7%db%8c-%d8%a8%d8%b1-%d9%81%d8%a7%d8%b2-3-%d8%aa%d9%88%d8%b3%d8%b9%d9%87-breakoutgame-%d8%b4%d8%a7%d8%ae%d9%87-%d8%a7%db%8c-%d9%85%d9%86%d8%ad%d8%b5%d8%b1-%d8%a8\/#%d9%82%d9%88%d8%a7%d9%86%db%8c%d9%86_%d8%a8%d8%b1%da%a9_%d8%a2%d9%88%d8%aa\" >\u0642\u0648\u0627\u0646\u06cc\u0646 \u0628\u0631\u06a9 \u0622\u0648\u062a<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rasanegaar.com\/blog\/%d9%85%d9%82%d8%af%d9%85%d9%87-%d8%a7%db%8c-%d8%a8%d8%b1-%d9%81%d8%a7%d8%b2-3-%d8%aa%d9%88%d8%b3%d8%b9%d9%87-breakoutgame-%d8%b4%d8%a7%d8%ae%d9%87-%d8%a7%db%8c-%d9%85%d9%86%d8%ad%d8%b5%d8%b1-%d8%a8\/#%d8%b1%d8%a7%d9%87_%d8%a7%d9%86%d8%af%d8%a7%d8%b2%db%8c_phaser\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc Phaser<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rasanegaar.com\/blog\/%d9%85%d9%82%d8%af%d9%85%d9%87-%d8%a7%db%8c-%d8%a8%d8%b1-%d9%81%d8%a7%d8%b2-3-%d8%aa%d9%88%d8%b3%d8%b9%d9%87-breakoutgame-%d8%b4%d8%a7%d8%ae%d9%87-%d8%a7%db%8c-%d9%85%d9%86%d8%ad%d8%b5%d8%b1-%d8%a8\/#%d8%a7%db%8c%d8%ac%d8%a7%d8%af_%d8%af%d9%86%db%8c%d8%a7%db%8c_%d8%a8%d8%a7%d8%b2%db%8c_%d9%85%d8%a7\" >\u0627\u06cc\u062c\u0627\u062f \u062f\u0646\u06cc\u0627\u06cc \u0628\u0627\u0632\u06cc \u0645\u0627<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rasanegaar.com\/blog\/%d9%85%d9%82%d8%af%d9%85%d9%87-%d8%a7%db%8c-%d8%a8%d8%b1-%d9%81%d8%a7%d8%b2-3-%d8%aa%d9%88%d8%b3%d8%b9%d9%87-breakoutgame-%d8%b4%d8%a7%d8%ae%d9%87-%d8%a7%db%8c-%d9%85%d9%86%d8%ad%d8%b5%d8%b1-%d8%a8\/#%d8%b4%d8%b1%d9%88%d8%b9_%d9%81%d8%a7%d8%b2%d8%b1\" >\u0634\u0631\u0648\u0639 \u0641\u0627\u0632\u0631<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rasanegaar.com\/blog\/%d9%85%d9%82%d8%af%d9%85%d9%87-%d8%a7%db%8c-%d8%a8%d8%b1-%d9%81%d8%a7%d8%b2-3-%d8%aa%d9%88%d8%b3%d8%b9%d9%87-breakoutgame-%d8%b4%d8%a7%d8%ae%d9%87-%d8%a7%db%8c-%d9%85%d9%86%d8%ad%d8%b5%d8%b1-%d8%a8\/#%d8%a8%d8%a7%d8%b1%da%af%db%8c%d8%b1%db%8c_%d8%af%d8%a7%d8%b1%d8%a7%db%8c%db%8c_%d9%87%d8%a7\" >\u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u062f\u0627\u0631\u0627\u06cc\u06cc \u0647\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rasanegaar.com\/blog\/%d9%85%d9%82%d8%af%d9%85%d9%87-%d8%a7%db%8c-%d8%a8%d8%b1-%d9%81%d8%a7%d8%b2-3-%d8%aa%d9%88%d8%b3%d8%b9%d9%87-breakoutgame-%d8%b4%d8%a7%d8%ae%d9%87-%d8%a7%db%8c-%d9%85%d9%86%d8%ad%d8%b5%d8%b1-%d8%a8\/#%d8%a7%d9%81%d8%b2%d9%88%d8%af%d9%86_sprites\" >\u0627\u0641\u0632\u0648\u062f\u0646 Sprites<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rasanegaar.com\/blog\/%d9%85%d9%82%d8%af%d9%85%d9%87-%d8%a7%db%8c-%d8%a8%d8%b1-%d9%81%d8%a7%d8%b2-3-%d8%aa%d9%88%d8%b3%d8%b9%d9%87-breakoutgame-%d8%b4%d8%a7%d8%ae%d9%87-%d8%a7%db%8c-%d9%85%d9%86%d8%ad%d8%b5%d8%b1-%d8%a8\/#%d8%a7%d8%b6%d8%a7%d9%81%d9%87_%da%a9%d8%b1%d8%af%d9%86_sprite_groups\" >\u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 Sprite Groups<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rasanegaar.com\/blog\/%d9%85%d9%82%d8%af%d9%85%d9%87-%d8%a7%db%8c-%d8%a8%d8%b1-%d9%81%d8%a7%d8%b2-3-%d8%aa%d9%88%d8%b3%d8%b9%d9%87-breakoutgame-%d8%b4%d8%a7%d8%ae%d9%87-%d8%a7%db%8c-%d9%85%d9%86%d8%ad%d8%b5%d8%b1-%d8%a8\/#%d8%a8%d8%b1%d8%af_%d9%88_%d8%a8%d8%a7%d8%ae%d8%aa\" >\u0628\u0631\u062f \u0648 \u0628\u0627\u062e\u062a<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rasanegaar.com\/blog\/%d9%85%d9%82%d8%af%d9%85%d9%87-%d8%a7%db%8c-%d8%a8%d8%b1-%d9%81%d8%a7%d8%b2-3-%d8%aa%d9%88%d8%b3%d8%b9%d9%87-breakoutgame-%d8%b4%d8%a7%d8%ae%d9%87-%d8%a7%db%8c-%d9%85%d9%86%d8%ad%d8%b5%d8%b1-%d8%a8\/#%d8%ad%d8%b1%da%a9%d8%aa_%d9%be%d8%ae%d8%b4_%da%a9%d9%86%d9%86%d8%af%d9%87_%d8%a8%d8%a7_%d9%88%d8%b1%d9%88%d8%af%db%8c_%d8%b5%d9%81%d8%ad%d9%87_%da%a9%d9%84%db%8c%d8%af\" >\u062d\u0631\u06a9\u062a \u067e\u062e\u0634 \u06a9\u0646\u0646\u062f\u0647 \u0628\u0627 \u0648\u0631\u0648\u062f\u06cc \u0635\u0641\u062d\u0647 \u06a9\u0644\u06cc\u062f<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/rasanegaar.com\/blog\/%d9%85%d9%82%d8%af%d9%85%d9%87-%d8%a7%db%8c-%d8%a8%d8%b1-%d9%81%d8%a7%d8%b2-3-%d8%aa%d9%88%d8%b3%d8%b9%d9%87-breakoutgame-%d8%b4%d8%a7%d8%ae%d9%87-%d8%a7%db%8c-%d9%85%d9%86%d8%ad%d8%b5%d8%b1-%d8%a8\/#%d8%af%d8%b1_%d8%a7%d9%86%d8%aa%d8%b8%d8%a7%d8%b1_%d8%b4%d8%b1%d9%88%d8%b9\" >\u062f\u0631 \u0627\u0646\u062a\u0638\u0627\u0631 \u0634\u0631\u0648\u0639<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/rasanegaar.com\/blog\/%d9%85%d9%82%d8%af%d9%85%d9%87-%d8%a7%db%8c-%d8%a8%d8%b1-%d9%81%d8%a7%d8%b2-3-%d8%aa%d9%88%d8%b3%d8%b9%d9%87-breakoutgame-%d8%b4%d8%a7%d8%ae%d9%87-%d8%a7%db%8c-%d9%85%d9%86%d8%ad%d8%b5%d8%b1-%d8%a8\/#%d8%b1%d8%b3%db%8c%d8%af%da%af%db%8c_%d8%a8%d9%87_%d8%a8%d8%b1%d8%ae%d9%88%d8%b1%d8%af%d9%87%d8%a7\" >\u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0628\u0631\u062e\u0648\u0631\u062f\u0647\u0627<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/rasanegaar.com\/blog\/%d9%85%d9%82%d8%af%d9%85%d9%87-%d8%a7%db%8c-%d8%a8%d8%b1-%d9%81%d8%a7%d8%b2-3-%d8%aa%d9%88%d8%b3%d8%b9%d9%87-breakoutgame-%d8%b4%d8%a7%d8%ae%d9%87-%d8%a7%db%8c-%d9%85%d9%86%d8%ad%d8%b5%d8%b1-%d8%a8\/#%d8%a8%d8%b1%d8%ae%d9%88%d8%b1%d8%af_%d8%ac%d9%87%d8%a7%d9%86%db%8c\" >\u0628\u0631\u062e\u0648\u0631\u062f \u062c\u0647\u0627\u0646\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/rasanegaar.com\/blog\/%d9%85%d9%82%d8%af%d9%85%d9%87-%d8%a7%db%8c-%d8%a8%d8%b1-%d9%81%d8%a7%d8%b2-3-%d8%aa%d9%88%d8%b3%d8%b9%d9%87-breakoutgame-%d8%b4%d8%a7%d8%ae%d9%87-%d8%a7%db%8c-%d9%85%d9%86%d8%ad%d8%b5%d8%b1-%d8%a8\/#%d8%a8%d8%b1%d8%ae%d9%88%d8%b1%d8%af_%d8%a2%d8%ac%d8%b1\" >\u0628\u0631\u062e\u0648\u0631\u062f \u0622\u062c\u0631<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/rasanegaar.com\/blog\/%d9%85%d9%82%d8%af%d9%85%d9%87-%d8%a7%db%8c-%d8%a8%d8%b1-%d9%81%d8%a7%d8%b2-3-%d8%aa%d9%88%d8%b3%d8%b9%d9%87-breakoutgame-%d8%b4%d8%a7%d8%ae%d9%87-%d8%a7%db%8c-%d9%85%d9%86%d8%ad%d8%b5%d8%b1-%d8%a8\/#%d8%a8%d8%b1%d8%ae%d9%88%d8%b1%d8%af_%d8%a8%d8%a7%d8%b2%db%8c%da%a9%d9%86\" >\u0628\u0631\u062e\u0648\u0631\u062f \u0628\u0627\u0632\u06cc\u06a9\u0646<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/rasanegaar.com\/blog\/%d9%85%d9%82%d8%af%d9%85%d9%87-%d8%a7%db%8c-%d8%a8%d8%b1-%d9%81%d8%a7%d8%b2-3-%d8%aa%d9%88%d8%b3%d8%b9%d9%87-breakoutgame-%d8%b4%d8%a7%d8%ae%d9%87-%d8%a7%db%8c-%d9%85%d9%86%d8%ad%d8%b5%d8%b1-%d8%a8\/#%d8%a7%d8%b6%d8%a7%d9%81%d9%87_%da%a9%d8%b1%d8%af%d9%86_%d9%85%d8%aa%d9%86\" >\u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0645\u062a\u0646<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/rasanegaar.com\/blog\/%d9%85%d9%82%d8%af%d9%85%d9%87-%d8%a7%db%8c-%d8%a8%d8%b1-%d9%81%d8%a7%d8%b2-3-%d8%aa%d9%88%d8%b3%d8%b9%d9%87-breakoutgame-%d8%b4%d8%a7%d8%ae%d9%87-%d8%a7%db%8c-%d9%85%d9%86%d8%ad%d8%b5%d8%b1-%d8%a8\/#%d8%a8%d8%a7%d8%b2_%da%a9%d8%b1%d8%af%d9%86_%d9%85%d8%aa%d9%86\" >\u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u0645\u062a\u0646<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/rasanegaar.com\/blog\/%d9%85%d9%82%d8%af%d9%85%d9%87-%d8%a7%db%8c-%d8%a8%d8%b1-%d9%81%d8%a7%d8%b2-3-%d8%aa%d9%88%d8%b3%d8%b9%d9%87-breakoutgame-%d8%b4%d8%a7%d8%ae%d9%87-%d8%a7%db%8c-%d9%85%d9%86%d8%ad%d8%b5%d8%b1-%d8%a8\/#game_over_%d9%88_game_won_text\" >Game Over \u0648 Game Won Text<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/rasanegaar.com\/blog\/%d9%85%d9%82%d8%af%d9%85%d9%87-%d8%a7%db%8c-%d8%a8%d8%b1-%d9%81%d8%a7%d8%b2-3-%d8%aa%d9%88%d8%b3%d8%b9%d9%87-breakoutgame-%d8%b4%d8%a7%d8%ae%d9%87-%d8%a7%db%8c-%d9%85%d9%86%d8%ad%d8%b5%d8%b1-%d8%a8\/#%d9%86%d8%aa%db%8c%d8%ac%d9%87\" >\u0646\u062a\u06cc\u062c\u0647<\/a><\/li><\/ul><\/nav><\/div>\n<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">\u0632\u0645\u0627\u0646 \u0644\u0627\u0632\u0645 \u0628\u0631\u0627\u06cc \u0645\u0637\u0627\u0644\u0639\u0647: <\/span> <span class=\"rt-time\"> 17<\/span> <span class=\"rt-label rt-postfix\">\u062f\u0642\u06cc\u0642\u0647<\/span><\/span><p> <br \/>\n<\/p>\n<div class=\"content\"><noscript><\/p>\n<style>.lazyload-placeholder { display: none;  }<\/style>\n<p><\/noscript><\/p>\n<h2 id=\"introduction\"><span class=\"ez-toc-section\" id=\"%d9%85%d8%b9%d8%b1%d9%81%db%8c\"><\/span>\u0645\u0639\u0631\u0641\u06cc<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062a\u0648\u0633\u0639\u0647 \u0628\u0627\u0632\u06cc \u06cc\u06a9 \u0634\u0627\u062e\u0647 \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u0627\u0632 \u062a\u0648\u0633\u0639\u0647 \u0646\u0631\u0645 \u0627\u0641\u0632\u0627\u0631 \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0647\u0645\u0627\u0646 \u0627\u0646\u062f\u0627\u0632\u0647 \u06a9\u0647 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0627\u0633\u062a\u060c \u067e\u0627\u062f\u0627\u0634 \u062f\u0647\u0646\u062f\u0647 \u0628\u0627\u0634\u062f.  \u0648\u0642\u062a\u06cc \u0628\u0647 \u0633\u0627\u062e\u062a \u0628\u0627\u0632\u06cc \u0641\u06a9\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u0645\u060c \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u0646\u0635\u0628 \u0648 \u0628\u0627\u0632\u06cc \u0641\u06a9\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0631\u0648\u06cc \u0631\u0627\u06cc\u0627\u0646\u0647 \u0647\u0627 \u06cc\u0627 \u06a9\u0646\u0633\u0648\u0644 \u0647\u0627\u06cc \u0645\u0627  \u0645\u0634\u062e\u0635\u0627\u062a HTML5 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 API \u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 \u062a\u0648\u0633\u0639\u0647 \u0628\u0627\u0632\u06cc \u0645\u0639\u0631\u0641\u06cc \u06a9\u0631\u062f \u0631\u0648\u06cc \u0648\u0628\u060c \u0628\u0647 \u0628\u0627\u0632\u06cc \u0647\u0627\u06cc \u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0632\u06cc\u0627\u062f\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0646\u0646\u062f \u0631\u0648\u06cc \u062f\u0633\u062a\u06af\u0627\u0647 \u0647\u0627\u06cc \u0645\u062d\u0627\u0633\u0628\u0627\u062a\u06cc \u0645\u062a\u0641\u0627\u0648\u062a  Phaser \u06cc\u06a9 \u0686\u0627\u0631\u0686\u0648\u0628 \u0628\u0627\u0632\u06cc \u0645\u062d\u0628\u0648\u0628 \u0627\u0633\u062a \u06a9\u0647 \u0645\u0627 \u0631\u0627 \u0642\u0627\u062f\u0631 \u0645\u06cc \u0633\u0627\u0632\u062f \u062a\u0627 \u0628\u0647 \u0633\u0631\u0639\u062a \u0628\u0627\u0632\u06cc \u0647\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0648\u0628 \u0628\u0633\u0627\u0632\u06cc\u0645.<\/p>\n<p>\u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0627\u0647 \u0628\u0631\u0627\u06cc \u062a\u0633\u0644\u0637 \u0628\u0631 \u062a\u0648\u0633\u0639\u0647 \u0628\u0627\u0632\u06cc\u060c \u0633\u0627\u062e\u062a \u0628\u0627\u0632\u06cc \u0627\u0633\u062a.  \u0645\u0627 \u0627\u0632 Phaser \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 Breakout clone\u060c \u0646\u0633\u062e\u0647 \u0627\u06cc \u0627\u0632 \u0628\u0627\u0632\u06cc \u06a9\u0644\u0627\u0633\u06cc\u06a9 \u0648 \u0647\u0645\u06cc\u0634\u06af\u06cc Atari \u062f\u0631 \u0633\u0627\u0644 1976 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<p>\u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u062d\u0627\u0648\u06cc HTML \u0648 CSS \u0628\u0633\u06cc\u0627\u0631 \u0627\u0628\u062a\u062f\u0627\u06cc\u06cc \u0627\u0633\u062a.  \u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u0628\u0627 \u062a\u0648\u0627\u0628\u0639 \u0648 \u0627\u0634\u06cc\u0627\u0621 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0631\u0627\u062d\u062a \u0628\u0627\u0634\u06cc\u062f.  \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc ES2015 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0633\u0628\u06a9\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<h2 id=\"thegameloop\"><span class=\"ez-toc-section\" id=\"%d8%ad%d9%84%d9%82%d9%87_%d8%a8%d8%a7%d8%b2%db%8c\"><\/span>\u062d\u0644\u0642\u0647 \u0628\u0627\u0632\u06cc<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0647\u0645\u0647 \u0628\u0627\u0632\u06cc \u0647\u0627 \u062f\u0631 \u06cc\u06a9 \u062d\u0644\u0642\u0647 \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u0646\u062f.  \u067e\u0633 \u0627\u0632 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u062f\u0646\u06cc\u0627\u06cc \u0628\u0627\u0632\u06cc \u062e\u0648\u062f\u060c \u0648\u0627\u0631\u062f \u062d\u0644\u0642\u0647 \u0628\u0627\u0632\u06cc \u0645\u06cc \u0634\u0648\u06cc\u0645 \u06a9\u0647 \u0648\u0638\u0627\u06cc\u0641 \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f:<\/p>\n<ol>\n<li>\u0648\u0631\u0648\u062f\u06cc \u0641\u0631\u0622\u06cc\u0646\u062f<\/li>\n<li>\u062f\u0646\u06cc\u0627\u06cc \u0628\u0627\u0632\u06cc \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0631\u0627 \u0631\u0646\u062f\u0631 \u06a9\u0646\u06cc\u062f<\/li>\n<\/ol>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0628\u06cc\u0646\u06cc\u0645 \u06a9\u0647 \u062d\u0644\u0642\u0647 \u0628\u0627\u0632\u06cc \u062f\u0631 \u0628\u0627\u0632\u06cc \u0645\u0627\u0646\u0646\u062f Megaman \u0686\u06af\u0648\u0646\u0647 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f.  \u067e\u0633 \u0627\u0632 \u063a\u0631\u0628\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0645\u0646\u0648 \u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u06cc\u06a9 \u0633\u0637\u062d\u060c \u0628\u0627\u0632\u06cc \u062a\u0635\u0645\u06cc\u0645 \u0645\u06cc \u06af\u06cc\u0631\u062f \u06a9\u0647 \u062f\u0631 \u06a9\u062c\u0627 \u067e\u0644\u062a\u0641\u0631\u0645 \u0647\u0627 \u0631\u0627 \u0642\u0631\u0627\u0631 \u062f\u0647\u062f \u0648 \u0645\u0648\u0633\u06cc\u0642\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u067e\u062e\u0634 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0645\u06cc \u06a9\u0646\u062f.  \u0627\u06cc\u0646 \u062a\u0646\u0638\u06cc\u0645 \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u062f\u0631 \u0647\u0646\u06af\u0627\u0645 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0635\u0641\u062d\u0647 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0628\u0627\u0632\u06cc \u0634\u0631\u0648\u0639 \u0645\u06cc \u0634\u0648\u062f\u060c \u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc\u06cc \u0628\u0627 \u067e\u0644\u062a\u0641\u0631\u0645 \u0647\u0627\u060c \u062f\u0634\u0645\u0646\u0627\u0646 \u0648 \u0622\u0647\u0646\u06af\u06cc \u062e\u0627\u0635 \u0628\u0631\u0627\u06cc \u0622\u0646 \u0633\u0637\u062d\u060c \u06a9\u0646\u062a\u0631\u0644 \u0645\u06af\u0627\u0645\u0646 \u0631\u0627 \u062f\u0631 \u062f\u0633\u062a \u062f\u0627\u0631\u06cc\u062f.  \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u062c\u0648\u06cc \u0627\u0633\u062a\u06cc\u06a9 \u062e\u0648\u062f \u0628\u0631\u0627\u06cc \u062d\u0631\u06a9\u062a \u0645\u06af\u0627\u0645\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u06cc\u06a9 \u062f\u06a9\u0645\u0647 \u0631\u0627 \u0628\u0631\u0627\u06cc \u067e\u0631\u0634 \u06cc\u0627 \u0634\u0644\u06cc\u06a9 \u0641\u0634\u0627\u0631 \u062f\u0647\u06cc\u062f.  \u062d\u0644\u0642\u0647 \u0628\u0627\u0632\u06cc \u0648\u0631\u0648\u062f\u06cc \u0631\u0627 \u067e\u0631\u062f\u0627\u0632\u0634 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0645\u0648\u0642\u0639\u06cc\u062a \u0645\u06af\u0627\u0645\u0646 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0622\u0646 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0631\u0627 \u0686\u0646\u062f\u06cc\u0646 \u0628\u0627\u0631 \u062f\u0631 \u06cc\u06a9 \u062b\u0627\u0646\u06cc\u0647 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h2 id=\"whatisphaser\"><span class=\"ez-toc-section\" id=\"%d9%81%d8%a7%d8%b2%d8%b1_%da%86%db%8c%d8%b3%d8%aa%d8%9f\"><\/span>\u0641\u0627\u0632\u0631 \u0686\u06cc\u0633\u062a\u061f<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a href=\"https:\/\/phaser.io\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"broken_link\">\u0641\u0627\u0632\u0631<\/a> \u06cc\u06a9 \u0686\u0627\u0631\u0686\u0648\u0628 \u0628\u0627\u0632\u06cc HTML5 \u0627\u0633\u062a.  \u0627\u0632 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 API \u0647\u0627\u06cc HTML5 \u0645\u0627\u0646\u0646\u062f Canvas\u060c WebGL\u060c Audio\u060c Gamepad \u0648 \u063a\u06cc\u0631\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0645\u0646\u0637\u0642 \u0645\u0641\u06cc\u062f\u06cc \u0645\u0627\u0646\u0646\u062f \u0645\u062f\u06cc\u0631\u06cc\u062a \u062d\u0644\u0642\u0647 \u0628\u0627\u0632\u06cc \u0648 \u0627\u0631\u0627\u0626\u0647 \u0645\u0648\u062a\u0648\u0631\u0647\u0627\u06cc \u0641\u06cc\u0632\u06cc\u06a9 \u0628\u0647 \u0645\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u062f.  \u0628\u0627 Phaser \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0627\u0632\u06cc\u200c\u0647\u0627\u06cc \u062f\u0648 \u0628\u0639\u062f\u06cc \u0631\u0627 \u0628\u0627 \u0686\u06cc\u0632\u06cc \u062c\u0632 HTML\u060c CSS \u0648 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0633\u0627\u0632\u06cc\u0645.<\/p>\n<h2 id=\"breakoutrules\"><span class=\"ez-toc-section\" id=\"%d9%82%d9%88%d8%a7%d9%86%db%8c%d9%86_%d8%a8%d8%b1%da%a9_%d8%a2%d9%88%d8%aa\"><\/span>\u0642\u0648\u0627\u0646\u06cc\u0646 \u0628\u0631\u06a9 \u0622\u0648\u062a<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0642\u0628\u0644 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u0627\u0632 Phaser \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u06a9\u0644\u0648\u0646 Breakout \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645\u060c \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0627\u0628\u062a\u062f\u0627 \u0645\u062d\u062f\u0648\u062f\u0647 \u0628\u0627\u0632\u06cc \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u0645:<\/p>\n<ul>\n<li>\u0627\u06cc\u0646 \u0628\u0627\u0632\u06cc \u062a\u06a9 \u0646\u0641\u0631\u0647 \u062f\u0627\u0631\u0627\u06cc \u06cc\u06a9 \u0633\u0637\u062d \u0628\u0627 30 \u0622\u062c\u0631\u060c \u067e\u0627\u0631\u0648 \u0648 \u062a\u0648\u067e \u0627\u0633\u062a<\/li>\n<li>\u0647\u062f\u0641 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u062a\u0648\u067e \u0631\u0627 \u0628\u0647 \u0646\u0627\u0628\u0648\u062f\u06cc \u0647\u0631 \u0622\u062c\u0631 \u0628\u0631\u0633\u0627\u0646\u06cc\u062f\u060c \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0627\u0632 \u067e\u0627\u06cc\u06cc\u0646 \u0635\u0641\u062d\u0647 \u0628\u0627\u0632\u06cc \u062e\u0627\u0631\u062c \u0646\u0645\u06cc \u0634\u0648\u062f.<\/li>\n<li>\u0628\u0627\u0632\u06cc\u06a9\u0646 \u06cc\u06a9 \u062f\u0633\u062a \u0648 \u067e\u0627 \u0632\u062f\u0646 \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0686\u067e \u0648 \u0631\u0627\u0633\u062a \u062d\u0631\u06a9\u062a \u06a9\u0646\u062f<\/li>\n<li>\u0627\u06cc\u0646 \u0628\u0627\u0632\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0648\u0628 \u062f\u0633\u06a9\u062a\u0627\u067e \u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0635\u0641\u062d\u0647 \u06a9\u0644\u06cc\u062f \u0628\u0631\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u062f \u0634\u062f<\/li>\n<\/ul>\n<h2 id=\"settingupphaser\"><span class=\"ez-toc-section\" id=\"%d8%b1%d8%a7%d9%87_%d8%a7%d9%86%d8%af%d8%a7%d8%b2%db%8c_phaser\"><\/span>\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc Phaser<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Phaser \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0633\u062a\u060c \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0648 \u0627\u062c\u0631\u0627\u06cc \u0628\u0627\u0632\u06cc \u062e\u0648\u062f \u0628\u0647 \u0686\u0646\u062f HTML \u0627\u0648\u0644\u06cc\u0647 \u0628\u0631\u0627\u06cc \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc JS \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645.  \u06cc\u06a9 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>breakout<\/code> \u062f\u0631 \u06cc\u06a9\u06cc \u0627\u0632 \u0645\u062d\u06cc\u0637 \u0647\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0634\u0645\u0627  \u0641\u0627\u06cc\u0644 \u0647\u0627 \u0648 \u067e\u0648\u0634\u0647 \u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n<ul>\n<li>\u06cc\u06a9 <code>index.html<\/code> \u0641\u0627\u06cc\u0644<\/li>\n<li>\u0622 <code>breakout.js<\/code> \u0641\u0627\u06cc\u0644<\/li>\n<li>\u067e\u0648\u0634\u0647 \u0627\u06cc \u0628\u0647 \u0646\u0627\u0645 <code>assets<\/code><\/li>\n<li>\u062f\u0631 \u062f\u0631\u0648\u0646 \u0634\u0645\u0627 <code>assets<\/code> \u067e\u0648\u0634\u0647\u060c \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>images<\/code> \u067e\u0648\u0634\u0647<\/li>\n<\/ul>\n<p>\u062f\u0627\u0631\u0627\u06cc\u06cc \u0647\u0627\u06cc \u0628\u0627\u0632\u06cc \u0647\u0646\u0631\u060c \u0635\u062f\u0627\u060c \u0648\u06cc\u062f\u0626\u0648 \u0648 \u0633\u0627\u06cc\u0631 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0628\u0627\u0632\u06cc \u0627\u0633\u062a.  \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0634\u0628\u06cc\u0647 \u0633\u0627\u0632\u06cc \u0633\u0627\u062f\u0647 Breakout\u060c \u062f\u0627\u0631\u0627\u06cc\u06cc \u0647\u0627\u06cc \u0632\u06cc\u0627\u062f\u06cc \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f \u06a9\u0647 \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u0628\u0627 \u067e\u0648\u0634\u0647 \u0647\u0627 \u0631\u0627 \u0636\u0631\u0648\u0631\u06cc \u06a9\u0646\u062f.  \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u062a\u0645\u0631\u06cc\u0646 \u062e\u0648\u0628\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062f\u0627\u0631\u0627\u06cc\u06cc \u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0627\u0632 \u06a9\u062f \u062e\u0648\u062f \u062c\u062f\u0627 \u0646\u06af\u0647 \u062f\u0627\u0631\u06cc\u062f \u0648 \u062f\u0627\u0631\u0627\u06cc\u06cc \u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0646\u0648\u0639 \u0622\u0646\u0647\u0627 \u062c\u062f\u0627 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>index.html<\/code> \u0641\u0627\u06cc\u0644:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-meta\">&lt;!doctype <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"utf-8\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, initial-scale=1, user-scalable=no\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Breakout<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\">\n    <span class=\"hljs-selector-tag\">html<\/span>,\n    <span class=\"hljs-selector-tag\">body<\/span> {\n      <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span> auto;\n      <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0<\/span>;\n      <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n      <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100%<\/span>;\n    }\n\n    <span class=\"hljs-selector-id\">#game<\/span> {\n      <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">10px<\/span> auto;\n      <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0<\/span>;\n      <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">800px<\/span>;\n      <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">640px<\/span>;\n    }\n  <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">noscript<\/span>&gt;<\/span>You need to enable JavaScript to run this app.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">noscript<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"game\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"\/\/cdn.jsdelivr.net\/npm\/(email\u00a0protected)\/dist\/phaser.min.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"breakout.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u0627\u06cc\u0646 \u06a9\u062f \u0627\u0635\u0644\u06cc HTML \u06a9\u0627\u0631\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f:<\/p>\n<ul>\n<li>\u062d\u0627\u0634\u06cc\u0647 \u0647\u0627\u06cc \u0645\u0631\u0648\u0631\u06af\u0631 \u0648 padding \u0631\u0627 \u0627\u0632 html \u0648 \u0628\u0631\u0686\u0633\u0628 \u0628\u062f\u0646\u0647 \u062d\u0630\u0641 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\u0627\u0644\u0641 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>game<\/code> \u0639\u0646\u0635\u0631 div \u06a9\u0647 \u0634\u0627\u0645\u0644 \u06a9\u0644\u0648\u0646 Breakout \u0645\u0627 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f<\/li>\n<li>Phaser \u0646\u0633\u062e\u0647 3.17 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 CDN \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u06cc \u06a9\u0646\u062f<\/li>\n<li>\u0645\u0627 \u0631\u0627 \u0628\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f <code>breakout.js<\/code> \u0641\u0627\u06cc\u0644\u06cc \u06a9\u0647 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u0647\u06cc\u0686 \u06a9\u0627\u0631\u06cc \u0627\u0646\u062c\u0627\u0645 \u0646\u0645\u06cc \u062f\u0647\u062f \u0627\u0645\u0627 \u062d\u0627\u0648\u06cc \u0645\u0646\u0637\u0642 \u0628\u0627\u0632\u06cc \u0645\u0627 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f<\/li>\n<\/ul>\n<p>\u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0645\u0624\u062b\u0631 \u0628\u0627\u0632\u06cc\u200c\u0647\u0627 \u0628\u0627 Phaser\u060c \u0628\u0647 \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645 \u06a9\u0647 \u062a\u0648\u0633\u0637 \u06cc\u06a9 \u0648\u0628 \u0633\u0631\u0648\u0631 \u0627\u0631\u0627\u0626\u0647 \u0634\u0648\u0646\u062f.  \u0628\u062f\u0648\u0646 \u0633\u0631\u0648\u0631 \u0648\u0628\u060c \u0645\u0631\u0648\u0631\u06af\u0631 \u0645\u0627 \u0628\u0647 \u062f\u0644\u0627\u06cc\u0644 \u0627\u0645\u0646\u06cc\u062a\u06cc \u0627\u062c\u0627\u0632\u0647 \u0646\u0645\u06cc \u062f\u0647\u062f \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0627\u0632\u06cc \u0645\u0627 \u062f\u0627\u0631\u0627\u06cc\u06cc \u0647\u0627\u06cc \u0645\u0627 \u0631\u0627 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u062e\u0648\u0634\u0628\u062e\u062a\u0627\u0646\u0647 \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u06cc\u06a9 \u0648\u0628 \u0633\u0631\u0648\u0631 \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627 \u0646\u06cc\u0627\u0632\u06cc \u0628\u0647 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc Apache \u06cc\u0627 Nginx \u0646\u06cc\u0633\u062a.  \u0627\u06af\u0631 \u0627\u0632 \u06a9\u062f\u0647\u0627\u06cc VisualStudio \u0645\u0627\u0646\u0646\u062f \u0645\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f <a href=\"https:\/\/ritwickdey.github.io\/vscode-live-server\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">\u0633\u0631\u0648\u0631 \u0632\u0646\u062f\u0647<\/a> \u0627\u0641\u0632\u0648\u0646\u0647.  \u0627\u06a9\u062b\u0631 IDE \u0647\u0627 \u0648 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631\u0647\u0627\u06cc \u0645\u062a\u0646 \u062f\u0627\u0631\u0627\u06cc \u06cc\u06a9 \u067e\u0644\u0627\u06af\u06cc\u0646 \u0628\u0627 \u0639\u0645\u0644\u06a9\u0631\u062f \u0645\u0634\u0627\u0628\u0647 \u0647\u0633\u062a\u0646\u062f.  \u0627\u06af\u0631 \u067e\u0627\u06cc\u062a\u0648\u0646 \u0646\u0633\u062e\u0647 3 \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0622\u0646 \u0628\u0647 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u062e\u0648\u062f \u0628\u0631\u0648\u06cc\u062f terminal \u0648 \u0648\u0627\u0631\u062f \u0634\u0648\u06cc\u062f <code>python3 -m http.server<\/code>.  \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc CLI \u062f\u06cc\u06af\u0631\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u0646\u062f \u06a9\u0647 \u0648\u0628 \u0633\u0631\u0648\u0631\u0647\u0627\u06cc \u0633\u0627\u062f\u0647 \u0627\u06cc \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u0646\u062f\u060c \u06cc\u06a9\u06cc \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0633\u0631\u06cc\u0639 \u062a\u0631\u06cc\u0646 \u0632\u0645\u0627\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0628\u0627\u0632\u06cc \u062e\u0648\u062f \u062f\u0631 \u0627\u062e\u062a\u06cc\u0627\u0631 \u0634\u0645\u0627 \u0642\u0631\u0627\u0631 \u062f\u0647\u062f.<\/p>\n<p>\u062f\u0631 \u0622\u062e\u0631\u060c \u062f\u0627\u0646\u0644\u0648\u062f \u06a9\u0646\u06cc\u062f <a href=\"https:\/\/stackabuse.s3.amazonaws.com\/files\/introduction-to-phaser-3-building-breakout-breakout-images.zip\" target=\"_blank\" rel=\"noopener\">\u062f\u0627\u0631\u0627\u06cc\u06cc \u0647\u0627\u06cc \u062a\u0635\u0648\u06cc\u0631\u06cc<\/a> \u0645\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0628\u0627\u0632\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645.  \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc PNG \u0631\u0627 \u06a9\u067e\u06cc \u06a9\u0631\u062f\u0647 \u0648 \u062f\u0631 \u067e\u0648\u0634\u0647 \u062a\u0635\u0627\u0648\u06cc\u0631 \u067e\u06cc\u0633\u062a \u06a9\u0646\u06cc\u062f.<\/p>\n<p><strong>\u0646\u06a9\u062a\u0647 \u062a\u0648\u0633\u0639\u0647<\/strong> &#8211; \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u062f\u0631 \u062d\u0627\u0644 \u062a\u0648\u0633\u0639\u0647 \u06cc\u06a9 \u0628\u0627\u0632\u06cc \u0647\u0633\u062a\u06cc\u062f \u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0631\u0627 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f console \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0627\u0633\u062a \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u062e\u0637\u0627\u0647\u0627\u06cc \u0638\u0627\u0647\u0631 \u0634\u062f\u0647 \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f.  \u0627\u06af\u0631 \u0627\u0632 \u06a9\u0631\u0648\u0645 \u06cc\u0627 \u0641\u0627\u06cc\u0631\u0641\u0627\u06a9\u0633 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f\u060c \u06a9\u0644\u06cc\u06a9 \u0631\u0627\u0633\u062a \u06a9\u0646\u06cc\u062f \u0631\u0648\u06cc \u0631\u0627 page \u0648 &#8220;Inspect Element&#8221; \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f.  \u06cc\u06a9 \u06a9\u0627\u062f\u0631 \u0628\u0627\u06cc\u062f \u0627\u0632 \u067e\u0627\u06cc\u06cc\u0646 \u06cc\u0627 \u06a9\u0646\u0627\u0631 \u067e\u0646\u062c\u0631\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0634\u0645\u0627 \u0638\u0627\u0647\u0631 \u0634\u0648\u062f.  \u0628\u0631\u0627\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc\u200c\u0647\u0627\u060c \u062e\u0637\u0627\u0647\u0627 \u06cc\u0627 \u06af\u0632\u0627\u0631\u0634\u200c\u0647\u0627 \u0627\u0632 \u06a9\u062f \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u060c \u0628\u0631\u06af\u0647 \u00ab\u06a9\u0646\u0633\u0648\u0644\u00bb \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\n<h2 id=\"creatingourgameworld\"><span class=\"ez-toc-section\" id=\"%d8%a7%db%8c%d8%ac%d8%a7%d8%af_%d8%af%d9%86%db%8c%d8%a7%db%8c_%d8%a8%d8%a7%d8%b2%db%8c_%d9%85%d8%a7\"><\/span>\u0627\u06cc\u062c\u0627\u062f \u062f\u0646\u06cc\u0627\u06cc \u0628\u0627\u0632\u06cc \u0645\u0627<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc HTML \u0648 CSS\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u062e\u0648\u062f \u0631\u0627 \u0648\u06cc\u0631\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u0645 <code>breakout.js<\/code> \u0641\u0627\u06cc\u0644 \u0628\u0631\u0627\u06cc \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u062f\u0646\u06cc\u0627\u06cc \u0628\u0627\u0632\u06cc \u0645\u0627.<\/p>\n<h3 id=\"startingphaser\"><span class=\"ez-toc-section\" id=\"%d8%b4%d8%b1%d9%88%d8%b9_%d9%81%d8%a7%d8%b2%d8%b1\"><\/span>\u0634\u0631\u0648\u0639 \u0641\u0627\u0632\u0631<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u0628\u062a\u062f\u0627 \u0628\u0627\u06cc\u062f Phaser \u0631\u0627 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0631\u062f\u0647 \u0648 \u0646\u0645\u0648\u0646\u0647 Game \u062e\u0648\u062f \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645.  \u0627\u06cc\u0646 <a href=\"https:\/\/photonstorm.github.io\/phaser3-docs\/Phaser.Game.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\u0646\u0645\u0648\u0646\u0647 \u0628\u0627\u0632\u06cc<\/a> \u06a9\u0646\u062a\u0631\u0644\u0631 \u0645\u0631\u06a9\u0632\u06cc \u06cc\u06a9 \u0628\u0627\u0632\u06cc Phaser \u0627\u0633\u062a\u060c \u062a\u0645\u0627\u0645 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f \u0648 \u062d\u0644\u0642\u0647 \u0628\u0627\u0632\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u0627 \u0634\u0631\u0648\u0639 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0648 \u0627\u06cc\u062c\u0627\u062f \u0646\u0645\u0648\u0646\u0647 \u0628\u0627\u0632\u06cc \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-comment\">\/\/ This object contains all the Phaser configurations to load our game<\/span>\n<span class=\"hljs-keyword\">const<\/span> config = {\n  <span class=\"hljs-attr\">type<\/span>: Phaser.AUTO,\n  <span class=\"hljs-attr\">parent<\/span>: <span class=\"hljs-string\">'game'<\/span>,\n  <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">800<\/span>,\n  <span class=\"hljs-attr\">height<\/span>: <span class=\"hljs-number\">640<\/span>,\n  <span class=\"hljs-attr\">scale<\/span>: {\n    <span class=\"hljs-attr\">mode<\/span>: Phaser.Scale.RESIZE,\n    <span class=\"hljs-attr\">autoCenter<\/span>: Phaser.Scale.CENTER_BOTH\n  },\n  <span class=\"hljs-attr\">scene<\/span>: {\n    preload,\n    create,\n    update,\n  },\n  <span class=\"hljs-attr\">physics<\/span>: {\n    <span class=\"hljs-attr\">default<\/span>: <span class=\"hljs-string\">'arcade'<\/span>,\n    <span class=\"hljs-attr\">arcade<\/span>: {\n      <span class=\"hljs-attr\">gravity<\/span>: <span class=\"hljs-literal\">false<\/span>\n    },\n  }\n};\n\n<span class=\"hljs-comment\">\/\/ Create the game instance<\/span>\n<span class=\"hljs-keyword\">const<\/span> game = <span class=\"hljs-keyword\">new<\/span> Phaser.Game(config);\n<\/code><\/pre>\n<p>\u0627\u06cc\u0646 <code>type<\/code> \u0648\u06cc\u0698\u06af\u06cc \u0628\u0647 Phaser \u0645\u06cc \u06af\u0648\u06cc\u062f \u06a9\u0647 \u0627\u0632 \u0686\u0647 \u0631\u0646\u062f\u0631\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u062f.  Phaser \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0627\u0632\u06cc \u0645\u0627 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0639\u0646\u0635\u0631 WebGL \u06cc\u0627 Canvas HTML5 \u0631\u0646\u062f\u0631 \u06a9\u0646\u062f.  \u0628\u0627 \u062a\u0646\u0638\u06cc\u0645 \u0646\u0648\u0639 <code>Phaser.AUTO<\/code>\u060c \u0628\u0647 Phaser \u0645\u06cc \u06af\u0648\u06cc\u06cc\u0645 \u06a9\u0647 \u0627\u0628\u062a\u062f\u0627 \u0631\u0646\u062f\u0631 \u0628\u0627 WebGL \u0631\u0627 \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646\u062f \u0648 \u0627\u06af\u0631 \u0645\u0648\u0641\u0642 \u0646\u0634\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Canvas \u0631\u0646\u062f\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f.<\/p>\n<p>\u0627\u06cc\u0646 <code>parent<\/code> \u0648\u06cc\u0698\u06af\u06cc \u0646\u0634\u0627\u0646 \u062f\u0647\u0646\u062f\u0647 \u0634\u0646\u0627\u0633\u0647 \u0639\u0646\u0635\u0631 HTML \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627\u0632\u06cc \u0645\u0627 \u062f\u0631 \u0622\u0646 \u0628\u0627\u0632\u06cc \u062e\u0648\u0627\u0647\u062f \u0634\u062f. <code>width<\/code> \u0648 <code>height<\/code>.  \u0627\u06cc\u0646 <code>scale<\/code> \u0634\u06cc \u062f\u0648 \u06a9\u0627\u0631 \u0628\u0631\u0627\u06cc \u0645\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f:<\/p>\n<ul>\n<li><code>mode<\/code>  \u0628\u0647 Phaser \u0645\u06cc \u06af\u0648\u06cc\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0627\u0632 \u0641\u0636\u0627\u06cc \u0639\u0646\u0635\u0631 \u0648\u0627\u0644\u062f \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u062f\u060c \u062f\u0631 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a \u0645\u0627 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0645\u06cc \u062f\u0647\u06cc\u0645 \u06a9\u0647 \u0628\u0627\u0632\u06cc \u0628\u0627 \u0627\u0646\u062f\u0627\u0632\u0647 div \u0648\u0627\u0644\u062f \u0645\u0637\u0627\u0628\u0642\u062a \u062f\u0627\u0631\u062f.<\/li>\n<li><code>autoCenter<\/code>  \u0628\u0647 Phaser \u0645\u06cc \u06af\u0648\u06cc\u062f \u06a9\u0647 \u0627\u06af\u0631 \u0628\u062e\u0648\u0627\u0647\u06cc\u0645 \u0686\u06af\u0648\u0646\u0647 \u0628\u0627\u0632\u06cc \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0642\u0633\u0645\u062a \u0627\u0635\u0644\u06cc \u062e\u0648\u062f \u0645\u062a\u0645\u0631\u06a9\u0632 \u06a9\u0646\u06cc\u0645.  \u062f\u0631 \u0627\u06cc\u0646 \u062d\u0627\u0644\u062a\u060c \u0645\u0627 \u0628\u0627\u0632\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0639\u0645\u0648\u062f\u06cc \u0648 \u0627\u0641\u0642\u06cc \u062f\u0631 \u062f\u0627\u062e\u0644 div \u0648\u0627\u0644\u062f \u0642\u0631\u0627\u0631 \u0645\u06cc \u062f\u0647\u06cc\u0645.  \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0632\u0645\u0627\u0646\u06cc \u0645\u0641\u06cc\u062f\u062a\u0631 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627\u0632\u06cc \u06a9\u0644 \u0641\u0636\u0627\u06cc div \u0648\u0627\u0644\u062f \u0631\u0627 \u0627\u0634\u063a\u0627\u0644 \u0646\u06a9\u0646\u062f\u060c \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0633\u0648\u0627\u0644 \u0645\u062a\u062f\u0627\u0648\u0644 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/li>\n<\/ul>\n<p>\u062f\u0631 Phaser \u0645\u0646\u0637\u0642 \u0628\u0627\u0632\u06cc \u0645\u0627 \u062f\u0631 Scenes \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a.  \u0635\u062d\u0646\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u062d\u0627\u0644\u062a \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u062f\u0631 \u0628\u0627\u0632\u06cc \u0645\u0627 \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f: \u0635\u0641\u062d\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0635\u062d\u0646\u0647 \u0627\u0633\u062a\u060c \u0647\u0631 \u0633\u0637\u062d \u0627\u0632 \u06cc\u06a9 \u0628\u0627\u0632\u06cc \u0635\u062d\u0646\u0647 \u0645\u062e\u0635\u0648\u0635 \u0628\u0647 \u062e\u0648\u062f \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f\u060c \u06cc\u06a9 \u0635\u062d\u0646\u0647 \u0628\u0631\u0634 \u0635\u062d\u0646\u0647 \u0645\u062e\u0635\u0648\u0635 \u0628\u0647 \u062e\u0648\u062f \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.  Phaser \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f <a href=\"https:\/\/photonstorm.github.io\/phaser3-docs\/Phaser.Scene.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\u0634\u06cc \u0635\u062d\u0646\u0647<\/a> \u0627\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0627 \u06cc\u06a9 \u0634\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0645\u0639\u0645\u0648\u0644\u06cc \u06a9\u0647 \u062d\u0627\u0648\u06cc <code>preload<\/code>\u060c <code>create<\/code> \u0648 <code>update<\/code> \u062a\u0648\u0627\u0628\u0639 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647<\/p>\n<p>\u0622\u062e\u0631\u06cc\u0646 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0628\u0647 Phaser \u0645\u06cc \u06af\u0648\u06cc\u062f \u06a9\u0647 \u0627\u0632 \u06a9\u062f\u0627\u0645 \u0645\u0648\u062a\u0648\u0631 \u0641\u06cc\u0632\u06cc\u06a9 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u062f.  Phaser \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0627\u0632 3 \u0645\u0648\u062a\u0648\u0631 \u0641\u06cc\u0632\u06cc\u06a9\u06cc \u0645\u062e\u062a\u0644\u0641 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u062f: <a href=\"https:\/\/photonstorm.github.io\/phaser3-docs\/Phaser.Physics.Arcade.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\u06af\u0630\u0631\u06af\u0627\u0647 \u0637\u0627\u0642\u062f\u0627\u0631<\/a>\u060c <a href=\"https:\/\/photonstorm.github.io\/phaser3-docs\/Phaser.Physics.Impact.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\u062a\u0623\u062b\u06cc\u0631<\/a> \u0648 <a href=\"https:\/\/photonstorm.github.io\/phaser3-docs\/Phaser.Physics.Matter.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\u0645\u0648\u0636\u0648\u0639<\/a>.  Arcade \u0633\u0627\u062f\u0647 \u062a\u0631\u06cc\u0646 \u0631\u0627\u0647 \u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u0627\u0633\u062a \u0648 \u0628\u0631\u0627\u06cc \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u0628\u0627\u0632\u06cc \u0645\u0627 \u06a9\u0627\u0641\u06cc \u0627\u0633\u062a.<\/p>\n<p>Breakout \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631 \u06a9\u0631\u062f\u0646 \u0628\u0647 \u0646\u06cc\u0631\u0648\u06cc \u062c\u0627\u0630\u0628\u0647 \u0646\u06cc\u0627\u0632 \u0646\u062f\u0627\u0631\u062f\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0631\u0627 \u063a\u06cc\u0631\u0641\u0639\u0627\u0644 \u0645\u06cc \u06a9\u0646\u06cc\u0645.  \u0627\u06af\u0631 \u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0633\u0627\u062e\u062a\u0646 \u06cc\u06a9 \u067e\u0644\u062a\u0641\u0631\u0645 \u0628\u0648\u062f\u06cc\u0645\u060c \u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b \u06af\u0631\u0627\u0646\u0634 \u0631\u0627 \u0641\u0639\u0627\u0644 \u0645\u06cc\u200c\u06a9\u0631\u062f\u06cc\u0645\u060c \u0628\u0647 \u0637\u0648\u0631\u06cc \u06a9\u0647 \u0648\u0642\u062a\u06cc \u0628\u0627\u0632\u06cc\u06a9\u0646\u0627\u0646 \u0645\u0627 \u0645\u06cc\u200c\u067e\u0631\u0646\u062f\u060c \u0628\u0647 \u0637\u0648\u0631 \u0637\u0628\u06cc\u0639\u06cc \u0628\u0647 \u0632\u0645\u06cc\u0646 \u0645\u06cc\u200c\u0627\u0641\u062a\u0646\u062f.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0628\u0627\u0632\u06cc \u0645\u0627 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0628\u0627\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 <code>preload<\/code>\u060c <code>create<\/code> \u0648 <code>update<\/code> \u062a\u0648\u0627\u0628\u0639\u060c \u067e\u0633 \u0627\u0632 \u0627\u06cc\u062c\u0627\u062f \u0646\u0645\u0648\u0646\u0647 \u0628\u0627\u0632\u06cc\u060c \u062a\u0648\u0627\u0628\u0639 \u062e\u0627\u0644\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">preload<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{ }\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">create<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{ }\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">update<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{ }\n<\/code><\/pre>\n<p>\u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0648\u0628 \u0633\u0631\u0648\u0631 \u0634\u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627 \u0627\u0633\u062a\u060c \u0628\u0647 \u0645\u0633\u06cc\u0631 \u0628\u0631\u0648\u06cc\u062f page \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0628\u0627\u0632\u06cc \u0634\u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627\u0633\u062a  \u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u062e\u0627\u0644\u06cc \u0645\u0627\u0646\u0646\u062f \u0627\u06cc\u0646 \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/rasanegar.com\/blog\/wp-content\/uploads\/2024\/01\/introduction-to-phaser-3-building-breakout-1.png\" alt=\"\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0628\u0627\u0632\u06cc\" title=\"\"><\/p>\n<h3 id=\"loadingassets\"><span class=\"ez-toc-section\" id=\"%d8%a8%d8%a7%d8%b1%da%af%db%8c%d8%b1%db%8c_%d8%af%d8%a7%d8%b1%d8%a7%db%8c%db%8c_%d9%87%d8%a7\"><\/span>\u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u062f\u0627\u0631\u0627\u06cc\u06cc \u0647\u0627<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0627\u0631\u0627\u06cc\u06cc \u0647\u0627\u06cc \u0627\u06cc\u0646 \u0628\u0627\u0632\u06cc \u0627\u0632 5 \u062a\u0635\u0648\u06cc\u0631 \u062a\u0634\u06a9\u06cc\u0644 \u0634\u062f\u0647 \u0627\u0633\u062a.  \u062f\u0631 \u0628\u0627\u0632\u06cc\u200c\u0647\u0627\u06cc \u062f\u06cc\u06af\u0631\u06cc \u06a9\u0647 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f\u060c \u062f\u0627\u0631\u0627\u06cc\u06cc\u200c\u0647\u0627\u06cc \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0628\u0633\u06cc\u0627\u0631 \u0632\u06cc\u0627\u062f \u0628\u0627\u0634\u062f.  \u062a\u0635\u0627\u0648\u06cc\u0631 \u0628\u0627 \u06a9\u06cc\u0641\u06cc\u062a \u0628\u0627\u0644\u0627\u060c \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u0635\u0648\u062a\u06cc \u0648 \u062a\u0635\u0648\u06cc\u0631\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0645\u06af\u0627\u0628\u0627\u06cc\u062a \u0641\u0636\u0627 \u0631\u0627 \u0627\u0634\u063a\u0627\u0644 \u06a9\u0646\u0646\u062f.  \u0647\u0631 \u0686\u0647 \u062f\u0627\u0631\u0627\u06cc\u06cc \u0628\u0632\u0631\u06af\u062a\u0631 \u0628\u0627\u0634\u062f\u060c \u0645\u062f\u062a \u0632\u0645\u0627\u0646 \u0628\u06cc\u0634\u062a\u0631\u06cc \u0637\u0648\u0644 \u0645\u06cc \u06a9\u0634\u062f.  \u0628\u0647 \u0647\u0645\u06cc\u0646 \u062f\u0644\u06cc\u0644\u060c Phaser \u062f\u0627\u0631\u0627\u06cc \u06cc\u06a9 <code>preload<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u062a\u0645\u0627\u0645 \u062f\u0627\u0631\u0627\u06cc\u06cc\u200c\u0647\u0627 \u0631\u0627 \u0642\u0628\u0644 \u0627\u0632 \u0634\u0631\u0648\u0639 \u0628\u0627\u0632\u06cc \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u0645.  \u0627\u0646\u062c\u0627\u0645 \u06cc\u06a9 \u0628\u0627\u0632\u06cc \u0647\u0631\u06af\u0632 \u06cc\u06a9 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062e\u0648\u0628 \u0646\u06cc\u0633\u062a \u0648 \u0646\u0627\u06af\u0647\u0627\u0646 \u0633\u0631\u0639\u062a \u0622\u0646 \u06a9\u0627\u0647\u0634 \u0645\u06cc \u06cc\u0627\u0628\u062f \u0632\u06cc\u0631\u0627 \u062f\u0631 \u062a\u0644\u0627\u0634 \u0628\u0631\u0627\u06cc \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u062f\u0627\u0631\u0627\u06cc\u06cc \u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0627\u0633\u062a.<\/p>\n<p>\u062a\u063a\u06cc\u06cc\u0631 \u062f\u0627\u062f\u0646 <code>preload<\/code> \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0639\u0645\u0644 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u0645 \u062a\u0635\u0627\u0648\u06cc\u0631 \u062e\u0648\u062f \u0631\u0627 \u0642\u0628\u0644 \u0627\u0632 \u0634\u0631\u0648\u0639 \u062d\u0644\u0642\u0647 \u0628\u0627\u0632\u06cc \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u06a9\u0646\u06cc\u0645:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">preload<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-built_in\">this<\/span>.load.image(<span class=\"hljs-string\">'ball'<\/span>, <span class=\"hljs-string\">'assets\/images\/ball_32_32.png'<\/span>);\n  <span class=\"hljs-built_in\">this<\/span>.load.image(<span class=\"hljs-string\">'paddle'<\/span>, <span class=\"hljs-string\">'assets\/images\/paddle_128_32.png'<\/span>);\n  <span class=\"hljs-built_in\">this<\/span>.load.image(<span class=\"hljs-string\">'brick1'<\/span>, <span class=\"hljs-string\">'assets\/images\/brick1_64_32.png'<\/span>);\n  <span class=\"hljs-built_in\">this<\/span>.load.image(<span class=\"hljs-string\">'brick2'<\/span>, <span class=\"hljs-string\">'assets\/images\/brick2_64_32.png'<\/span>);\n  <span class=\"hljs-built_in\">this<\/span>.load.image(<span class=\"hljs-string\">'brick3'<\/span>, <span class=\"hljs-string\">'assets\/images\/brick3_64_32.png'<\/span>);\n}\n<\/code><\/pre>\n<p>\u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u0627\u0648\u0644 \u06a9\u0644\u06cc\u062f\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0639\u062f\u0627\u064b \u0628\u0631\u0627\u06cc \u0627\u0631\u062c\u0627\u0639 \u062a\u0635\u0648\u06cc\u0631 \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f\u060c \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u062f\u0648\u0645 \u0645\u06a9\u0627\u0646 \u062a\u0635\u0648\u06cc\u0631 \u0627\u0633\u062a.<\/p>\n<p>\u0628\u0627 \u0644\u0648\u062f \u0634\u062f\u0646 \u062a\u0635\u0627\u0648\u06cc\u0631\u060c \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0627\u0633\u067e\u0631\u0627\u06cc\u062a \u0647\u0627 \u0631\u0627 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u0645 \u0631\u0648\u06cc \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634  \u062f\u0631 \u0628\u0627\u0644\u0627\u06cc <code>breakout.js<\/code>\u060c \u0627\u06cc\u0646 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u062d\u0627\u0648\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc sprite \u0645\u0627 \u0647\u0633\u062a\u0646\u062f:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-keyword\">let<\/span> player, ball, violetBricks, yellowBricks, redBricks;\n<\/code><\/pre>\n<p>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0622\u0646\u0647\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u062c\u0647\u0627\u0646\u06cc \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0646\u062f\u060c \u0647\u0645\u0647 \u062a\u0648\u0627\u0628\u0639 \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0627\u0632 \u0622\u0646\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0646\u062f.<\/p>\n<h3 id=\"addingsprites\"><span class=\"ez-toc-section\" id=\"%d8%a7%d9%81%d8%b2%d9%88%d8%af%d9%86_sprites\"><\/span>\u0627\u0641\u0632\u0648\u062f\u0646 Sprites<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u0633\u067e\u0631\u0627\u06cc\u062a \u0647\u0631 \u062a\u0635\u0648\u06cc\u0631 \u062f\u0648 \u0628\u0639\u062f\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u062e\u0634\u06cc \u0627\u0632 \u0635\u062d\u0646\u0647 \u0628\u0627\u0632\u06cc \u0628\u0627\u0634\u062f.  \u062f\u0631 Phaser\u060c \u06cc\u06a9 sprite \u06cc\u06a9 \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u0647\u0645\u0631\u0627\u0647 \u0645\u0648\u0642\u0639\u06cc\u062a\u060c \u0633\u0631\u0639\u062a\u060c \u062e\u0648\u0627\u0635 \u0641\u06cc\u0632\u06cc\u06a9\u06cc \u0648 \u0633\u0627\u06cc\u0631 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0622\u0646 \u06a9\u067e\u0633\u0648\u0644\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f.  \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627 \u0627\u06cc\u062c\u0627\u062f \u0627\u0633\u067e\u0631\u0627\u06cc\u062a \u0628\u0627\u0632\u06cc\u06a9\u0646 \u062e\u0648\u062f \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645.  \u062f\u0631 <code>create<\/code> \u062a\u0627\u0628\u0639 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"hljs\">player = <span class=\"hljs-built_in\">this<\/span>.physics.add.sprite(\n  <span class=\"hljs-number\">400<\/span>, <span class=\"hljs-comment\">\/\/ x position<\/span>\n  <span class=\"hljs-number\">600<\/span>, <span class=\"hljs-comment\">\/\/ y position<\/span>\n  <span class=\"hljs-string\">'paddle'<\/span>, <span class=\"hljs-comment\">\/\/ key of image for the sprite<\/span>\n);\n<\/code><\/pre>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0628\u0627\u06cc\u062f \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9 \u067e\u0627\u0631\u0648 \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f \u0631\u0648\u06cc \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/rasanegar.com\/blog\/wp-content\/uploads\/2024\/01\/introduction-to-phaser-3-building-breakout-2.png\" alt=\"\u0628\u0627\u0632\u06cc\u06a9\u0646 on \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634\" title=\"\"><\/p>\n<p>\u0627\u0648\u0644\u06cc\u0646 \u0627\u0633\u062a\u062f\u0644\u0627\u0644 \u0627\u0632 <code>sprite<\/code> \u0631\u0648\u0634 \u0645\u062e\u062a\u0635\u0627\u062a X \u0628\u0631\u0627\u06cc \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0646 sprite \u0627\u0633\u062a.  \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u062f\u0648\u0645 \u0645\u062e\u062a\u0635\u0627\u062a Y \u0627\u0633\u062a \u0648 \u0622\u062e\u0631\u06cc\u0646 \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u06a9\u0644\u06cc\u062f \u062f\u0627\u0631\u0627\u06cc\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0627\u0636\u0627\u0641\u0647 \u0634\u062f\u0647 \u062f\u0631 \u0622\u0646 \u0627\u0633\u062a <code>preload<\/code> \u062a\u0627\u0628\u0639.<\/p>\n<p>\u062f\u0631\u06a9 \u0627\u06cc\u0646\u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 Phaser \u0648 \u0627\u06a9\u062b\u0631 \u0686\u0627\u0631\u0686\u0648\u0628 \u0647\u0627\u06cc \u0628\u0627\u0632\u06cc \u062f\u0648 \u0628\u0639\u062f\u06cc \u0627\u0632 \u0645\u062e\u062a\u0635\u0627\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f \u0628\u0633\u06cc\u0627\u0631 \u0645\u0647\u0645 \u0627\u0633\u062a.  \u0646\u0645\u0648\u062f\u0627\u0631\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0631 \u0645\u062f\u0631\u0633\u0647 \u06cc\u0627\u062f \u06af\u0631\u0641\u062a\u06cc\u0645 \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0645\u0628\u062f\u0623 \u06cc\u0639\u0646\u06cc \u0646\u0642\u0637\u0647 (0\u060c 0) \u0631\u0627 \u062f\u0631 \u0645\u0631\u06a9\u0632 \u0642\u0631\u0627\u0631 \u0645\u06cc \u062f\u0647\u0646\u062f.  \u062f\u0631 Phaser\u060c \u0645\u0628\u062f\u0627 \u062f\u0631 \u0633\u0645\u062a \u0686\u067e \u0628\u0627\u0644\u0627\u06cc \u0635\u0641\u062d\u0647 \u0627\u0633\u062a.  \u0628\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 x\u060c \u0627\u0633\u0627\u0633\u0627\u064b \u0628\u0647 \u0633\u0645\u062a \u0631\u0627\u0633\u062a \u062d\u0631\u06a9\u062a \u0645\u06cc \u06a9\u0646\u06cc\u0645.  \u0628\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 y\u060c \u0645\u0627 \u0628\u0647 \u0633\u0645\u062a \u067e\u0627\u06cc\u06cc\u0646 \u062d\u0631\u06a9\u062a \u0645\u06cc \u06a9\u0646\u06cc\u0645.  \u0639\u0631\u0636 \u0628\u0627\u0632\u06cc \u0645\u0627 800 \u067e\u06cc\u06a9\u0633\u0644 \u0648 \u0627\u0631\u062a\u0641\u0627\u0639 640 \u067e\u06cc\u06a9\u0633\u0644 \u0627\u0633\u062a\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u062e\u062a\u0635\u0627\u062a \u0628\u0627\u0632\u06cc \u0645\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/rasanegar.com\/blog\/wp-content\/uploads\/2024\/01\/introduction-to-phaser-3-building-breakout-3.png\" alt=\"\u0645\u062e\u062a\u0635\u0627\u062a \u0628\u0627\u0632\u06cc\" title=\"\"><\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u062a\u0648\u067e \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0628\u0627\u0644\u0627\u06cc \u0628\u0627\u0632\u06cc\u06a9\u0646 \u0628\u0646\u0634\u06cc\u0646\u062f.  \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0647 <code>create<\/code> \u062a\u0627\u0628\u0639:<\/p>\n<pre><code class=\"hljs\">ball = <span class=\"hljs-built_in\">this<\/span>.physics.add.sprite(\n  <span class=\"hljs-number\">400<\/span>, <span class=\"hljs-comment\">\/\/ x position<\/span>\n  <span class=\"hljs-number\">565<\/span>, <span class=\"hljs-comment\">\/\/ y position<\/span>\n  <span class=\"hljs-string\">'ball'<\/span> <span class=\"hljs-comment\">\/\/ key of image for the sprite<\/span>\n);\n<\/code><\/pre>\n<p>\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062a\u0648\u067e \u0627\u0633\u062a <strong>\u062f\u0631 \u0628\u0627\u0644\u0627<\/strong> \u0628\u0627\u0632\u06cc\u06a9\u0646 \u0645\u0627\u060c \u0645\u0642\u062f\u0627\u0631 Y Coordinate \u0627\u0633\u062a <strong>\u067e\u0627\u06cc\u06cc\u0646 \u062a\u0631<\/strong> \u0627\u0632 \u0645\u062e\u062a\u0635\u0627\u062a Y \u0628\u0627\u0632\u06cc\u06a9\u0646.<\/p>\n<h3 id=\"addingspritegroups\"><span class=\"ez-toc-section\" id=\"%d8%a7%d8%b6%d8%a7%d9%81%d9%87_%da%a9%d8%b1%d8%af%d9%86_sprite_groups\"><\/span>\u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 Sprite Groups<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 Phaser \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 sprite \u0631\u0627 \u0622\u0633\u0627\u0646 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0627\u06af\u0631 \u0647\u0631 sprite \u0628\u0647 \u0635\u0648\u0631\u062a \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u062a\u0639\u0631\u06cc\u0641 \u0634\u0648\u062f\u060c \u0628\u0647 \u0633\u0631\u0639\u062a \u062e\u0633\u062a\u0647 \u06a9\u0646\u0646\u062f\u0647 \u062e\u0648\u0627\u0647\u062f \u0634\u062f.  \u0622\u062c\u0631\u0647\u0627\u06cc Breakout \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u06cc\u06a9\u0633\u0627\u0646 \u0647\u0633\u062a\u0646\u062f.  \u0645\u0648\u0642\u0639\u06cc\u062a \u0647\u0627 \u0645\u062a\u0641\u0627\u0648\u062a \u0627\u0633\u062a\u060c \u0627\u0645\u0627 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0622\u0646\u0647\u0627 \u0645\u0627\u0646\u0646\u062f \u0631\u0646\u06af \u0648 \u0631\u0648\u0634 \u062a\u0639\u0627\u0645\u0644 \u0622\u0646\u0647\u0627 \u0628\u0627 \u062a\u0648\u067e \u06cc\u06a9\u0633\u0627\u0646 \u0627\u0633\u062a.  \u0628\u0647 \u062c\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f 30 \u0634\u06cc\u0621 sprite \u0622\u062c\u0631\u06cc\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 \u06af\u0631\u0648\u0647 \u0647\u0627\u06cc Create Sprite \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0628\u0647\u062a\u0631 \u0622\u0646\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0631\u062f\u06cc\u0641 \u0627\u0648\u0644 \u0622\u062c\u0631\u0647\u0627\u06cc \u0628\u0646\u0641\u0634 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645.  \u062f\u0631 \u0634\u0645\u0627 <code>create<\/code> \u062a\u0627\u0628\u0639 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-comment\">\/\/ Add violet bricks<\/span>\nvioletBricks = <span class=\"hljs-built_in\">this<\/span>.physics.add.group({\n  <span class=\"hljs-attr\">key<\/span>: <span class=\"hljs-string\">'brick1'<\/span>,\n  <span class=\"hljs-attr\">repeat<\/span>: <span class=\"hljs-number\">9<\/span>,\n  <span class=\"hljs-attr\">setXY<\/span>: {\n    <span class=\"hljs-attr\">x<\/span>: <span class=\"hljs-number\">80<\/span>,\n    <span class=\"hljs-attr\">y<\/span>: <span class=\"hljs-number\">140<\/span>,\n    <span class=\"hljs-attr\">stepX<\/span>: <span class=\"hljs-number\">70<\/span>\n  }\n});\n<\/code><\/pre>\n<p>\u0628\u062c\u0627\u06cc <code>this.physics.add.sprite<\/code> \u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>this.physics.add.group<\/code> \u0648 \u06cc\u06a9 \u0634\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0631\u0627 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f.  \u0648\u06cc\u0698\u06af\u06cc key \u0628\u0647 \u06a9\u0644\u06cc\u062f \u062a\u0635\u0648\u06cc\u0631\u06cc \u0627\u0634\u0627\u0631\u0647 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0647\u0645\u0647 sprites \u062f\u0631 \u06af\u0631\u0648\u0647 sprite \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u0646\u062f \u06a9\u0631\u062f.  \u0627\u06cc\u0646 <code>repeat<\/code> \u0648\u06cc\u0698\u06af\u06cc \u0628\u0647 Phaser \u0645\u06cc \u06af\u0648\u06cc\u062f \u06a9\u0647 \u0686\u0646\u062f \u0628\u0627\u0631 \u062f\u06cc\u06af\u0631 \u06cc\u06a9 sprite \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u062f.  \u0647\u0631 \u06af\u0631\u0648\u0647 \u062c\u0646 \u06cc\u06a9 \u0627\u0633\u067e\u0631\u0627\u06cc\u062a \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f.  \u0628\u0627 <code>repeat<\/code> \u0628\u0627 \u062a\u0646\u0638\u06cc\u0645 9\u060c Phaser 10 sprite \u062f\u0631 \u0622\u0646 \u06af\u0631\u0648\u0647 sprite \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f.  \u0627\u06cc\u0646 <code>setXY<\/code> \u0634\u06cc \u0633\u0647 \u0648\u06cc\u0698\u06af\u06cc \u062c\u0627\u0644\u0628 \u062f\u0627\u0631\u062f:<\/p>\n<ul>\n<li><code>x<\/code>  \u0645\u062e\u062a\u0635\u0627\u062a X \u0627\u0648\u0644\u06cc\u0646 \u062c\u0646 \u0627\u0633\u062a<\/li>\n<li><code>y<\/code>  \u0645\u062e\u062a\u0635\u0627\u062a Y \u0627\u0632 \u062c\u0646 \u062f\u0648\u0645 \u0627\u0633\u062a<\/li>\n<li><code>stepX<\/code>  \u0637\u0648\u0644 \u0628\u06cc\u0646 \u0627\u0633\u067e\u0631\u0627\u06cc\u062a \u0647\u0627\u06cc \u0645\u06a9\u0631\u0631 \u0628\u0631 \u062d\u0633\u0628 \u067e\u06cc\u06a9\u0633\u0644 \u0627\u0633\u062a \u0631\u0648\u06cc \u0645\u062d\u0648\u0631 x<\/li>\n<\/ul>\n<p>\u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f <code>stepY<\/code> \u062f\u0627\u0631\u0627\u06cc\u06cc \u0646\u06cc\u0632 \u0647\u0633\u062a \u0627\u0645\u0627 \u0646\u06cc\u0627\u0632\u06cc \u0628\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0628\u0627\u0632\u06cc \u0646\u062f\u0627\u0631\u06cc\u0645.  \u0628\u06cc\u0627\u06cc\u06cc\u062f \u062f\u0648 \u06af\u0631\u0648\u0647 \u062c\u0646 \u0628\u0627\u0642\u06cc \u0645\u0627\u0646\u062f\u0647 \u0628\u0631\u0627\u06cc \u0622\u062c\u0631\u0647\u0627 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-comment\">\/\/ Add yellow bricks<\/span>\nyellowBricks = <span class=\"hljs-built_in\">this<\/span>.physics.add.group({\n  <span class=\"hljs-attr\">key<\/span>: <span class=\"hljs-string\">'brick2'<\/span>,\n  <span class=\"hljs-attr\">repeat<\/span>: <span class=\"hljs-number\">9<\/span>,\n  <span class=\"hljs-attr\">setXY<\/span>: {\n    <span class=\"hljs-attr\">x<\/span>: <span class=\"hljs-number\">80<\/span>,\n    <span class=\"hljs-attr\">y<\/span>: <span class=\"hljs-number\">90<\/span>,\n    <span class=\"hljs-attr\">stepX<\/span>: <span class=\"hljs-number\">70<\/span>\n  }\n});\n\n<span class=\"hljs-comment\">\/\/ Add red bricks<\/span>\nredBricks = <span class=\"hljs-built_in\">this<\/span>.physics.add.group({\n  <span class=\"hljs-attr\">key<\/span>: <span class=\"hljs-string\">'brick3'<\/span>,\n  <span class=\"hljs-attr\">repeat<\/span>: <span class=\"hljs-number\">9<\/span>,\n  <span class=\"hljs-attr\">setXY<\/span>: {\n    <span class=\"hljs-attr\">x<\/span>: <span class=\"hljs-number\">80<\/span>,\n    <span class=\"hljs-attr\">y<\/span>: <span class=\"hljs-number\">40<\/span>,\n    <span class=\"hljs-attr\">stepX<\/span>: <span class=\"hljs-number\">70<\/span>\n  }\n});\n<\/code><\/pre>\n<p>\u0628\u0627\u0632\u06cc \u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u06af\u0631\u062f \u0647\u0645 \u0622\u0645\u062f\u0647 \u0627\u0633\u062a\u060c \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u0634\u0628\u06cc\u0647 \u0627\u06cc\u0646 \u0628\u0627\u0634\u062f:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/rasanegar.com\/blog\/wp-content\/uploads\/2024\/01\/introduction-to-phaser-3-building-breakout-4.png\" alt=\"\u0647\u0645\u0647 Sprites \u0627\u0636\u0627\u0641\u0647 \u0634\u062f\" title=\"\"><\/p>\n<h2 id=\"winningandlosing\"><span class=\"ez-toc-section\" id=\"%d8%a8%d8%b1%d8%af_%d9%88_%d8%a8%d8%a7%d8%ae%d8%aa\"><\/span>\u0628\u0631\u062f \u0648 \u0628\u0627\u062e\u062a<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06cc\u0646 \u062a\u0645\u0631\u06cc\u0646 \u062e\u0648\u0628\u06cc \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0628\u0627\u0632\u06cc (\u0648 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc) \u0627\u0633\u062a \u062a\u0627 \u067e\u0627\u06cc\u0627\u0646 \u0631\u0627 \u062f\u0631 \u0686\u0634\u0645 \u0646\u06af\u0647 \u062f\u0627\u0631\u06cc\u062f.  \u062f\u0631 Breakout\u060c \u0627\u06af\u0631 \u062a\u0648\u067e \u0645\u0627 \u0628\u0647 \u067e\u0627\u06cc\u06cc\u0646 \u0635\u0641\u062d\u0647 \u0628\u06cc\u0641\u062a\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u06cc\u06a9 \u0628\u0627\u0632\u06cc \u0631\u0627 \u0628\u0628\u0627\u0632\u06cc\u0645.  \u062f\u0631 Phaser\u060c \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u062a\u0648\u067e \u0632\u06cc\u0631 \u0635\u0641\u062d\u0647 \u0628\u0627\u0634\u062f\u060c \u0645\u062e\u062a\u0635\u0627\u062a Y \u062a\u0648\u067e \u0628\u06cc\u0634\u062a\u0631 \u0627\u0632 \u0627\u0631\u062a\u0641\u0627\u0639 \u062f\u0646\u06cc\u0627\u06cc \u0628\u0627\u0632\u06cc \u0627\u0633\u062a.  \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0627\u06cc\u0646 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u062f\u060c \u067e\u0627\u06cc\u06cc\u0646 \u0622\u0646 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>breakout.js<\/code> \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">isGameOver<\/span>(<span class=\"hljs-params\">world<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">return<\/span> ball.body.y &gt; world.bounds.height;\n}\n<\/code><\/pre>\n<p>\u062a\u0627\u0628\u0639 \u0645\u0627 \u0634\u06cc \u062c\u0647\u0627\u0646 \u0631\u0627 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u0641\u06cc\u0632\u06cc\u06a9 \u0635\u062d\u0646\u0647 \u0645\u06cc \u06af\u06cc\u0631\u062f\u060c \u06a9\u0647 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f <code>update<\/code> \u062a\u0627\u0628\u0639.  \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0622\u06cc\u0627 \u0645\u062e\u062a\u0635\u0627\u062a Y \u062a\u0648\u067e \u0627\u0633\u067e\u0631\u0627\u06cc\u062a \u0628\u0632\u0631\u06af\u062a\u0631 \u0627\u0632 \u0627\u0631\u062a\u0641\u0627\u0639 \u0645\u0631\u0632\u0647\u0627\u06cc \u062c\u0647\u0627\u0646 \u0628\u0627\u0632\u06cc \u0627\u0633\u062a \u06cc\u0627 \u062e\u06cc\u0631.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u062f\u0647 \u0634\u062f\u0646 \u062f\u0631 \u0628\u0627\u0632\u06cc \u0628\u0627\u06cc\u062f \u0627\u0632 \u0634\u0631 \u062a\u0645\u0627\u0645 \u0622\u062c\u0631\u0647\u0627 \u062e\u0644\u0627\u0635 \u0634\u0648\u06cc\u0645.  Sprites \u062f\u0631 Phaser \u0647\u0645\u0647 \u062f\u0627\u0631\u0627\u06cc \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u0641\u0639\u0627\u0644 \u0647\u0633\u062a\u0646\u062f.  \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 \u0622\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0628\u0631\u0627\u06cc \u062a\u0639\u06cc\u06cc\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u0622\u06cc\u0627 \u0628\u0631\u0646\u062f\u0647 \u0634\u062f\u0647 \u0627\u06cc\u0645 \u06cc\u0627 \u0646\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645.  \u06af\u0631\u0648\u0647\u200c\u0647\u0627\u06cc Sprite \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0645\u0642\u062f\u0627\u0631 \u0627\u0633\u067e\u0631\u0627\u06cc\u062a\u200c\u0647\u0627\u06cc \u0641\u0639\u0627\u0644 \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0634\u0645\u0627\u0631\u0646\u062f.  \u0627\u06af\u0631 \u062f\u0631 \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u06af\u0631\u0648\u0647\u200c\u0647\u0627\u06cc \u0628\u0631\u06cc\u06a9 \u0627\u0633\u067e\u0631\u0627\u06cc\u062a\u060c \u0647\u06cc\u0686 \u062c\u0646 \u0641\u0639\u0627\u0644\u06cc \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f\u060c \u06cc\u0639\u0646\u06cc 0 \u0627\u0633\u067e\u0631\u0627\u06cc\u062a \u0622\u062c\u0631\u06cc \u0641\u0639\u0627\u0644 \u0648\u062c\u0648\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f\u060c \u0628\u0627\u0632\u06cc\u06a9\u0646 \u0628\u0631\u0646\u062f\u0647 \u0628\u0627\u0632\u06cc \u0627\u0633\u062a.  \u062f\u0631 \u067e\u0627\u06cc\u06cc\u0646 \u0634\u0645\u0627 <code>breakout.js<\/code> \u062a\u0627\u0628\u0639 \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">isWon<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">return<\/span> violetBricks.countActive() + yellowBricks.countActive() + redBricks.countActive() == <span class=\"hljs-number\">0<\/span>;\n}\n<\/code><\/pre>\n<p>\u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u06af\u0631\u0648\u0647\u200c\u0647\u0627\u06cc \u0627\u0633\u067e\u0631\u0627\u06cc\u062a \u0631\u0627 \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u0645\u06cc\u200c\u067e\u0630\u06cc\u0631\u06cc\u0645\u060c \u062a\u0639\u062f\u0627\u062f \u0627\u0633\u067e\u0631\u0627\u06cc\u062a\u200c\u0647\u0627\u06cc \u0641\u0639\u0627\u0644 \u062f\u0631\u0648\u0646 \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u0648 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0622\u06cc\u0627 \u0628\u0631\u0627\u0628\u0631 \u0628\u0627 \u06f0 \u0627\u0633\u062a \u06cc\u0627 \u062e\u06cc\u0631.<\/p>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u0634\u0631\u0627\u06cc\u0637 \u0628\u0631\u062f \u0648 \u0628\u0627\u062e\u062a \u062e\u0648\u062f \u0631\u0627 \u0645\u0634\u062e\u0635 \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645\u060c \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 Phaser \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u0647\u0631 \u0628\u0627\u0631 \u062f\u0631 \u0627\u0628\u062a\u062f\u0627\u06cc \u062d\u0644\u0642\u0647 \u0628\u0627\u0632\u06cc \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u062f.  \u0628\u0647 \u0645\u062d\u0636 \u0627\u06cc\u0646\u06a9\u0647 \u0628\u0627\u0632\u06cc\u06a9\u0646 \u0628\u0631\u0646\u062f\u0647 \u06cc\u0627 \u0628\u0628\u0627\u0632\u062f\u060c \u0628\u0627\u0632\u06cc \u0628\u0627\u06cc\u062f \u0645\u062a\u0648\u0642\u0641 \u0634\u0648\u062f.  \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0627\u062f\u0646 <code>update<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0647 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">update<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-comment\">\/\/ Check if the ball left the scene i.e. game over<\/span>\n  <span class=\"hljs-keyword\">if<\/span> (isGameOver(<span class=\"hljs-built_in\">this<\/span>.physics.world)) {\n    <span class=\"hljs-comment\">\/\/ <span class=\"hljs-doctag\">TODO:<\/span> Show \"Game over\" message to the player<\/span>\n  } <span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-keyword\">if<\/span> (isWon()) {\n    <span class=\"hljs-comment\">\/\/ <span class=\"hljs-doctag\">TODO:<\/span> Show \"You won!\" message to the player<\/span>\n  } <span class=\"hljs-keyword\">else<\/span> {\n    <span class=\"hljs-comment\">\/\/ <span class=\"hljs-doctag\">TODO:<\/span> Logic for regular game time<\/span>\n  }\n}\n<\/code><\/pre>\n<p>\u0647\u06cc\u0686 \u062a\u063a\u06cc\u06cc\u0631 \u0628\u0635\u0631\u06cc \u0628\u0631\u0627\u06cc \u0622\u0646 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u06a9\u062f \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f.<\/p>\n<p><strong>\u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f<\/strong> &#8211; \u0648\u0642\u062a\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>this<\/code> \u062f\u0631 \u0645\u0627 <code>preload<\/code>\u060c <code>create<\/code> \u0648 <code>update<\/code> \u062a\u0648\u0627\u0628\u0639\u060c \u0645\u0627 \u0628\u0647 \u0635\u062d\u0646\u0647 \u0627\u062c\u0631\u0627 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 \u0646\u0645\u0648\u0646\u0647 \u0628\u0627\u0632\u06cc \u0627\u0634\u0627\u0631\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0642\u0628\u0644\u0627 \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 \u0628\u0648\u062f.<\/p>\n<h2 id=\"movingtheplayerwithkeyboardinput\"><span class=\"ez-toc-section\" id=\"%d8%ad%d8%b1%da%a9%d8%aa_%d9%be%d8%ae%d8%b4_%da%a9%d9%86%d9%86%d8%af%d9%87_%d8%a8%d8%a7_%d9%88%d8%b1%d9%88%d8%af%db%8c_%d8%b5%d9%81%d8%ad%d9%87_%da%a9%d9%84%db%8c%d8%af\"><\/span>\u062d\u0631\u06a9\u062a \u067e\u062e\u0634 \u06a9\u0646\u0646\u062f\u0647 \u0628\u0627 \u0648\u0631\u0648\u062f\u06cc \u0635\u0641\u062d\u0647 \u06a9\u0644\u06cc\u062f<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062d\u0631\u06a9\u062a \u0628\u0627\u0632\u06cc\u06a9\u0646 \u0628\u0633\u062a\u06af\u06cc \u062f\u0627\u0631\u062f \u0631\u0648\u06cc \u0648\u0631\u0648\u062f\u06cc \u0635\u0641\u062d\u0647 \u06a9\u0644\u06cc\u062f  \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0628\u062a\u0648\u0627\u0646\u06cc\u0645 \u0648\u0631\u0648\u062f\u06cc \u0635\u0641\u062d\u0647 \u06a9\u0644\u06cc\u062f \u0631\u0627 \u0631\u062f\u06cc\u0627\u0628\u06cc \u06a9\u0646\u06cc\u0645\u060c \u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u0633\u0631\u0627\u0633\u0631\u06cc \u0628\u0647 \u0646\u0627\u0645 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>cursors<\/code> \u062f\u0631 \u0628\u0627\u0644\u0627\u06cc <code>breakout.js<\/code>:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-keyword\">let<\/span> player, ball, violetBricks, yellowBricks, redBricks, cursors;\n<\/code><\/pre>\n<p>\u0648 \u062f\u0631 \u067e\u0627\u06cc\u06cc\u0646 \u0645\u0627 <code>create<\/code> \u062a\u0627\u0628\u0639\u060c \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"hljs\">cursors = <span class=\"hljs-built_in\">this<\/span>.input.keyboard.createCursorKeys();\n<\/code><\/pre>\n<p>\u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc \u0645\u06a9\u0627\u0646 \u0646\u0645\u0627 \u062f\u0631 Phaser \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 6 \u06a9\u0644\u06cc\u062f \u0635\u0641\u062d\u0647 \u06a9\u0644\u06cc\u062f \u0631\u0627 \u0631\u062f\u06cc\u0627\u0628\u06cc \u0645\u06cc \u06a9\u0646\u0646\u062f: \u0628\u0627\u0644\u0627\u060c \u0631\u0627\u0633\u062a\u060c \u067e\u0627\u06cc\u06cc\u0646\u060c \u0686\u067e\u060c \u0634\u06cc\u0641\u062a \u0648 \u0641\u0627\u0635\u0644\u0647.<\/p>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0628\u0627\u06cc\u062f \u0628\u0647 \u0648\u0636\u0639\u06cc\u062a \u062e\u0648\u062f \u0648\u0627\u06a9\u0646\u0634 \u0646\u0634\u0627\u0646 \u062f\u0647\u06cc\u0645 <code>cursors<\/code> \u0627\u0639\u062a\u0631\u0627\u0636 \u0628\u0647 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0645\u0648\u0642\u0639\u06cc\u062a \u0628\u0627\u0632\u06cc\u06a9\u0646 \u0645\u0627.  \u062f\u0631 <code>else<\/code> \u0628\u0646\u062f \u0645\u0627 <code>update<\/code> \u062a\u0627\u0628\u0639 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-comment\">\/\/ Put this in so that the player stays still if no key is being pressed<\/span>\nplayer.body.setVelocityX(<span class=\"hljs-number\">0<\/span>);\n\n<span class=\"hljs-keyword\">if<\/span> (cursors.left.isDown) {\n  player.body.setVelocityX(-<span class=\"hljs-number\">350<\/span>);\n} <span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-keyword\">if<\/span> (cursors.right.isDown) {\n  player.body.setVelocityX(<span class=\"hljs-number\">350<\/span>);\n}\n<\/code><\/pre>\n<p>\u062d\u0627\u0644\u0627 \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u067e\u062e\u0634 \u06a9\u0646\u0646\u062f\u0647 \u062e\u0648\u062f \u0631\u0627 \u0627\u0632 \u0686\u067e \u0628\u0647 \u0631\u0627\u0633\u062a \u062d\u0631\u06a9\u062a \u062f\u0647\u06cc\u0645!<\/p>\n<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/rasanegar.com\/blog\/wp-content\/uploads\/2024\/01\/introduction-to-phaser-3-building-breakout-5.gif\" alt=\"\u0628\u0627\u0632\u06cc\u06a9\u0646 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0631\u06a9\u062a\" title=\"\"><\/p>\n<p>\u0645\u062a\u0648\u062c\u0647 \u062e\u0648\u0627\u0647\u06cc\u062f \u0634\u062f \u06a9\u0647 \u0628\u0627\u0632\u06cc\u06a9\u0646 \u0627\u0633\u067e\u0631\u0627\u06cc\u062a \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0627\u0632 \u0635\u0641\u062d\u0647 \u0628\u0627\u0632\u06cc \u062e\u0627\u0631\u062c \u0634\u0648\u062f\u060c \u062f\u0631 \u062d\u0627\u0644\u062a \u0627\u06cc\u062f\u0647 \u0622\u0644 \u0627\u06cc\u0646\u0637\u0648\u0631 \u0646\u0628\u0627\u0634\u062f.  \u0628\u0639\u062f\u0627\u064b \u0648\u0642\u062a\u06cc \u0628\u0631\u062e\u0648\u0631\u062f\u0647\u0627 \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u06cc\u0645 \u0628\u0647 \u0622\u0646 \u062e\u0648\u0627\u0647\u06cc\u0645 \u067e\u0631\u062f\u0627\u062e\u062a.<\/p>\n<h3 id=\"waitingtostart\"><span class=\"ez-toc-section\" id=\"%d8%af%d8%b1_%d8%a7%d9%86%d8%aa%d8%b8%d8%a7%d8%b1_%d8%b4%d8%b1%d9%88%d8%b9\"><\/span>\u062f\u0631 \u0627\u0646\u062a\u0638\u0627\u0631 \u0634\u0631\u0648\u0639<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0642\u0628\u0644 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u0645\u0646\u0637\u0642 \u0631\u0627 \u0628\u0631\u0627\u06cc \u062d\u0631\u06a9\u062a \u062f\u0627\u062f\u0646 \u062a\u0648\u067e \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645\u060c \u0627\u06af\u0631 \u0628\u0627\u0632\u06cc \u0645\u0646\u062a\u0638\u0631 \u0628\u0645\u0627\u0646\u062f \u06a9\u0645\u06a9 \u062e\u0648\u0627\u0647\u062f \u06a9\u0631\u062f \u0631\u0648\u06cc \u0648\u0631\u0648\u062f\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0642\u0628\u0644 \u0627\u0632 \u062c\u0627\u0628\u062c\u0627\u06cc\u06cc  \u0627\u06cc\u0646 \u062a\u062c\u0631\u0628\u0647 \u062e\u0648\u0628\u06cc \u0646\u06cc\u0633\u062a \u06a9\u0647 \u06cc\u06a9 \u0628\u0627\u0632\u06cc \u0631\u0627 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0644\u0627\u0641\u0627\u0635\u0644\u0647 \u0645\u062c\u0628\u0648\u0631 \u0634\u0648\u06cc\u062f \u0628\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f\u060c \u0628\u0627\u0632\u06cc\u06a9\u0646 \u0632\u0645\u0627\u0646 \u0645\u0646\u0627\u0633\u0628\u06cc \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0646\u0634 \u0646\u062e\u0648\u0627\u0647\u062f \u062f\u0627\u0634\u062a!<\/p>\n<p>\u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u067e\u0633 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u0628\u0627\u0632\u06cc\u06a9\u0646 \u06a9\u0644\u06cc\u062f \u0641\u0627\u0635\u0644\u0647 \u0631\u0627 \u0641\u0634\u0627\u0631 \u062f\u0627\u062f\u060c \u062a\u0648\u067e \u0631\u0627 \u0628\u0647 \u0633\u0645\u062a \u0628\u0627\u0644\u0627 \u062d\u0631\u06a9\u062a \u062f\u0647\u06cc\u0645.  \u0627\u06af\u0631 \u06a9\u0627\u0631\u0628\u0631 \u062f\u0633\u062a \u0648 \u067e\u0627 \u0631\u0627 \u0628\u0647 \u0633\u0645\u062a \u0686\u067e \u06cc\u0627 \u0631\u0627\u0633\u062a \u062d\u0631\u06a9\u062a \u062f\u0647\u062f\u060c \u062a\u0648\u067e \u0646\u06cc\u0632 \u0628\u0647 \u06af\u0648\u0646\u0647\u200c\u0627\u06cc \u062d\u0631\u06a9\u062a \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0647\u0645\u06cc\u0634\u0647 \u062f\u0631 \u0645\u0631\u06a9\u0632 \u067e\u0627\u0631\u0648 \u0628\u0627\u0634\u062f.<\/p>\n<p>\u0627\u0648\u0644\u060c \u0645\u0627 \u0628\u0647 \u0645\u062a\u063a\u06cc\u0631 \u062e\u0648\u062f \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645 \u062a\u0627 \u0631\u062f\u06cc\u0627\u0628\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0622\u06cc\u0627 \u0628\u0627\u0632\u06cc \u0634\u0631\u0648\u0639 \u0634\u062f\u0647 \u0627\u0633\u062a \u06cc\u0627 \u0646\u0647.  \u062f\u0631 \u0628\u0627\u0644\u0627\u06cc <code>breakout.js<\/code>\u060c \u067e\u0633 \u0627\u0632 \u0627\u0639\u0644\u0627\u0645 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0628\u0627\u0632\u06cc \u0645\u0627 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-keyword\">let<\/span> gameStarted = <span class=\"hljs-literal\">false<\/span>;\n<\/code><\/pre>\n<p>\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0627\u0632 \u0646\u0627\u0645 \u0622\u0646 \u067e\u06cc\u062f\u0627\u0633\u062a\u060c \u0622\u0646 \u0645\u062a\u063a\u06cc\u0631 \u0631\u062f\u06cc\u0627\u0628\u06cc \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0622\u06cc\u0627 \u0628\u0627\u0632\u06cc \u0645\u0627 \u0634\u0631\u0648\u0639 \u0634\u062f\u0647 \u0627\u0633\u062a \u06cc\u0627 \u0646\u0647.  \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631\u060c \u062f\u0631 <code>else<\/code> \u0628\u0646\u062f \u062a\u0627\u0628\u0639 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0645\u0627 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-keyword\">if<\/span> (!gameStarted) {\n  ball.setX(player.x);\n\n  <span class=\"hljs-keyword\">if<\/span> (cursors.space.isDown) {\n    gameStarted = <span class=\"hljs-literal\">true<\/span>;\n    ball.setVelocityY(-<span class=\"hljs-number\">200<\/span>);\n  }\n}\n<\/code><\/pre>\n<p>\u0627\u06af\u0631 \u0628\u0627\u0632\u06cc \u0634\u0631\u0648\u0639 \u0646\u0634\u062f\u0647 \u0627\u0633\u062a\u060c X Coordinate \u06cc\u0627 \u062a\u0648\u067e \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0645\u0631\u06a9\u0632 \u0628\u0627\u0632\u06cc\u06a9\u0646 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f.  \u0645\u062e\u062a\u0635\u0627\u062a \u06cc\u06a9 \u0634\u06cc \u0628\u0627\u0632\u06cc \u0645\u0628\u062a\u0646\u06cc \u0627\u0633\u062a \u0631\u0648\u06cc \u0645\u0631\u06a9\u0632 \u0622\u0646\u0647\u0627\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 <code>x<\/code> \u0648 <code>y<\/code> \u062e\u0648\u0627\u0635 \u062c\u0646 \u0647\u0627 \u0628\u0647 \u0645\u0631\u06a9\u0632 \u062c\u0646 \u0645\u0627 \u0645\u0631\u0628\u0648\u0637 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>\u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u062f\u0631 \u0639\u06cc\u0646 \u062d\u0627\u0644 \u062e\u0648\u0628 \u0627\u0633\u062a \u06a9\u0647 \u0627\u0631\u0632\u0634 \u06cc\u06a9 \u0645\u0644\u06a9 \u0631\u0627 \u0645\u0627\u0646\u0646\u062f <code>x<\/code> \u0628\u0627 \u0627\u0631\u062c\u0627\u0639 \u0645\u0633\u062a\u0642\u06cc\u0645 \u0628\u0647 \u0622\u0646\u060c \u0647\u0646\u06af\u0627\u0645 \u062a\u0646\u0638\u06cc\u0645 \u062e\u0635\u0648\u0635\u06cc\u0627\u062a\u060c \u0647\u0645\u06cc\u0634\u0647 \u0633\u0639\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0627\u0632 \u062a\u0627\u0628\u0639 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u0646\u062f\u0647 \u0645\u0646\u0627\u0633\u0628 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645.  \u062a\u0648\u0627\u0628\u0639 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u0646\u062f\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0634\u0627\u0645\u0644 \u0645\u0646\u0637\u0642 \u0628\u0631\u0627\u06cc \u0627\u0639\u062a\u0628\u0627\u0631\u0633\u0646\u062c\u06cc \u0648\u0631\u0648\u062f\u06cc \u0645\u0627\u060c \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u062f\u06cc\u06af\u0631 \u06cc\u0627 \u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u0631\u0648\u06cc\u062f\u0627\u062f \u0628\u0627\u0634\u062f.  \u06a9\u062f \u0645\u0627 \u0631\u0627 \u0642\u0627\u0628\u0644 \u067e\u06cc\u0634 \u0628\u06cc\u0646\u06cc \u062a\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0645\u0627\u0646\u0646\u062f \u0642\u0628\u0644 \u0628\u0627 \u062d\u0631\u06a9\u062a \u067e\u062e\u0634 \u06a9\u0646\u0646\u062f\u0647\u060c \u0686\u06a9 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0622\u06cc\u0627 \u06a9\u0644\u06cc\u062f \u0641\u0627\u0635\u0644\u0647 \u0641\u0634\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u06cc\u0627 \u062e\u06cc\u0631.  \u0627\u06af\u0631 \u0641\u0634\u0627\u0631 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u062f\u060c \u0622\u0646 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u062f\u0627\u062f\u06cc\u0645 <code>gameStarted<\/code> \u067e\u0631\u0686\u0645 \u0628\u0647 <code>true<\/code> \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u062a\u0648\u067e \u062f\u06cc\u06af\u0631 \u0627\u0632 \u0645\u0648\u0642\u0639\u06cc\u062a \u0627\u0641\u0642\u06cc \u0628\u0627\u0632\u06cc\u06a9\u0646 \u067e\u06cc\u0631\u0648\u06cc \u0646\u0645\u06cc \u06a9\u0646\u062f \u0648 \u0633\u0631\u0639\u062a Y \u062a\u0648\u067e \u0631\u0627 \u0631\u0648\u06cc 200- \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f.  \u0633\u0631\u0639\u062a \u0647\u0627\u06cc \u0645\u0646\u0641\u06cc y \u0627\u062c\u0633\u0627\u0645 \u0631\u0627 \u0628\u0647 \u0633\u0645\u062a \u0628\u0627\u0644\u0627 \u0645\u06cc \u0641\u0631\u0633\u062a\u0646\u062f.  \u0628\u0631\u0627\u06cc \u0633\u0631\u0639\u062a \u0647\u0627\u06cc \u0645\u062b\u0628\u062a\u060c \u0645\u0642\u0627\u062f\u06cc\u0631 \u0628\u0632\u0631\u06af\u062a\u0631 \u0627\u062c\u0633\u0627\u0645 \u0631\u0627 \u0633\u0631\u06cc\u0639\u062a\u0631 \u0628\u0647 \u0633\u0645\u062a \u067e\u0627\u06cc\u06cc\u0646 \u062d\u0631\u06a9\u062a \u0645\u06cc \u062f\u0647\u0646\u062f.  \u0628\u0631\u0627\u06cc \u0633\u0631\u0639\u062a \u0647\u0627\u06cc \u0645\u0646\u0641\u06cc\u060c \u0645\u0642\u0627\u062f\u06cc\u0631 \u06a9\u0648\u0686\u06a9\u062a\u0631 \u0627\u062c\u0633\u0627\u0645 \u0631\u0627 \u0633\u0631\u06cc\u0639\u062a\u0631 \u0628\u0647 \u0633\u0645\u062a \u0628\u0627\u0644\u0627 \u062d\u0631\u06a9\u062a \u0645\u06cc \u062f\u0647\u0646\u062f.<\/p>\n<p>\u062d\u0627\u0644\u0627 \u0648\u0642\u062a\u06cc \u0628\u0627\u0632\u06cc\u06a9\u0646 \u0631\u0627 \u062d\u0631\u06a9\u062a \u0645\u06cc \u062f\u0647\u06cc\u0645\u060c \u062a\u0648\u067e \u062f\u0646\u0628\u0627\u0644 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0627\u06af\u0631 \u0641\u0627\u0635\u0644\u0647 \u0631\u0627 \u0641\u0634\u0627\u0631 \u062f\u0647\u06cc\u0645 \u062a\u0648\u067e \u0628\u0647 \u0633\u0645\u062a \u0628\u0627\u0644\u0627 \u0634\u0648\u062a \u0645\u06cc \u06a9\u0646\u062f:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/rasanegar.com\/blog\/wp-content\/uploads\/2024\/01\/introduction-to-phaser-3-building-breakout-6.gif\" alt=\"\u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u0641\u0634\u0627\u0631 \u062f\u0647\u06cc\u062f\" title=\"\"><\/p>\n<p>\u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0686\u0646\u062f \u0646\u06a9\u062a\u0647 \u0631\u0627 \u0627\u0632 \u0631\u0648\u0634 \u0631\u0641\u062a\u0627\u0631 \u0628\u0627\u0632\u06cc \u0645\u0627 \u062a\u0627 \u06a9\u0646\u0648\u0646 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<ol>\n<li>\u062a\u0648\u067e \u062f\u0631 \u067e\u0634\u062a \u0622\u062c\u0631\u0647\u0627 \u0631\u0646\u062f\u0631 \u0645\u06cc \u0634\u0648\u062f<\/li>\n<li>\u0628\u0627\u0632\u06cc\u06a9\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0627\u0632 \u0645\u062d\u062f\u0648\u062f\u0647 \u0647\u0627\u06cc \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u062f<\/li>\n<li>\u062a\u0648\u067e \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0627\u0632 \u0645\u062d\u062f\u0648\u062f\u0647 \u0647\u0627\u06cc \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u062f<\/li>\n<\/ol>\n<p>\u062a\u0648\u067e \u062f\u0631 \u067e\u0634\u062a \u0622\u062c\u0631\u0647\u0627 \u0631\u0646\u062f\u0631 \u0645\u06cc \u0634\u0648\u062f \u0632\u06cc\u0631\u0627 \u062f\u0631 \u0639\u0645\u0644\u06a9\u0631\u062f \u0627\u06cc\u062c\u0627\u062f \u0645\u0627 \u0642\u0628\u0644 \u0627\u0632 \u06af\u0631\u0648\u0647 \u0647\u0627\u06cc \u0622\u062c\u0631 \u0627\u0633\u067e\u0631\u0627\u06cc\u062a \u0628\u0647 \u0628\u0627\u0632\u06cc \u0627\u0636\u0627\u0641\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.  \u062f\u0631 \u0641\u0627\u0632\u0631 \u0648 \u0628\u0647 \u0637\u0648\u0631 \u06a9\u0644\u06cc \u0628\u0627 \u0639\u0646\u0635\u0631 \u0628\u0648\u0645 HTML5\u060c \u062c\u062f\u06cc\u062f\u062a\u0631\u06cc\u0646 \u062a\u0635\u0648\u06cc\u0631 \u0627\u0636\u0627\u0641\u0647 \u0634\u062f\u0647 \u062a\u0631\u0633\u06cc\u0645 \u0645\u06cc \u0634\u0648\u062f \u0631\u0648\u06cc \u0628\u0627\u0644\u0627\u06cc \u062a\u0635\u0627\u0648\u06cc\u0631 \u0642\u0628\u0644\u06cc<\/p>\n<p>\u062f\u0648 \u0645\u0633\u0626\u0644\u0647 \u0622\u062e\u0631 \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0628\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0645\u0642\u062f\u0627\u0631\u06cc \u0628\u0631\u062e\u0648\u0631\u062f \u062c\u0647\u0627\u0646\u06cc \u062d\u0644 \u06a9\u0631\u062f.<\/p>\n<h2 id=\"handlingcollisions\"><span class=\"ez-toc-section\" id=\"%d8%b1%d8%b3%db%8c%d8%af%da%af%db%8c_%d8%a8%d9%87_%d8%a8%d8%b1%d8%ae%d9%88%d8%b1%d8%af%d9%87%d8%a7\"><\/span>\u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0628\u0631\u062e\u0648\u0631\u062f\u0647\u0627<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3 id=\"worldcollision\"><span class=\"ez-toc-section\" id=\"%d8%a8%d8%b1%d8%ae%d9%88%d8%b1%d8%af_%d8%ac%d9%87%d8%a7%d9%86%db%8c\"><\/span>\u0628\u0631\u062e\u0648\u0631\u062f \u062c\u0647\u0627\u0646\u06cc<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062a\u0645\u0627\u0645 \u062a\u0639\u0627\u0645\u0644\u0627\u062a \u062c\u0646 \u0645\u0627 \u062f\u0631 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a <code>create<\/code> \u062a\u0627\u0628\u0639.  \u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0628\u0631\u062e\u0648\u0631\u062f \u0628\u0627 \u0635\u062d\u0646\u0647 \u062c\u0647\u0627\u0646 \u0628\u0627 Phaser \u0628\u0633\u06cc\u0627\u0631 \u0622\u0633\u0627\u0646 \u0627\u0633\u062a\u060c \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u0627\u0646\u062a\u0647\u0627\u06cc \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>create<\/code> \u062a\u0627\u0628\u0639:<\/p>\n<pre><code class=\"hljs\">player.setCollideWorldBounds(<span class=\"hljs-literal\">true<\/span>);\nball.setCollideWorldBounds(<span class=\"hljs-literal\">true<\/span>);\n<\/code><\/pre>\n<p>\u0628\u0627\u06cc\u062f \u062e\u0631\u0648\u062c\u06cc \u0627\u06cc\u0646\u06af\u0648\u0646\u0647 \u0628\u0647 \u0645\u0627 \u0628\u062f\u0647\u062f:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/rasanegar.com\/blog\/wp-content\/uploads\/2024\/01\/introduction-to-phaser-3-building-breakout-7.gif\" alt=\"\u0628\u0631\u062e\u0648\u0631\u062f \u062c\u0647\u0627\u0646\u06cc\" title=\"\"><\/p>\n<p>\u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u062d\u0631\u06a9\u062a \u0628\u0627\u0632\u06cc\u06a9\u0646 \u062e\u0648\u0628 \u0627\u0633\u062a\u060c \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f \u062a\u0648\u067e \u062f\u0631 \u0628\u0627\u0644\u0627 \u06af\u06cc\u0631 \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a.  \u0628\u0631\u0627\u06cc \u0631\u0641\u0639 \u0627\u06cc\u0646 \u0645\u0634\u06a9\u0644\u060c \u0628\u0627\u06cc\u062f \u0622\u0646 \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u0645 <code>bounce<\/code> \u062e\u0627\u0635\u06cc\u062a \u062a\u0648\u067e \u0627\u0633\u067e\u0631\u0627\u06cc\u062a  \u0627\u06cc\u0646 <code>bounce<\/code> \u0648\u06cc\u0698\u06af\u06cc \u0628\u0647 Phaser \u0645\u06cc \u06af\u0648\u06cc\u062f \u06a9\u0647 \u067e\u0633 \u0627\u0632 \u0628\u0631\u062e\u0648\u0631\u062f \u0628\u0627 \u06cc\u06a9 \u062c\u0633\u0645 \u0686\u0642\u062f\u0631 \u0633\u0631\u0639\u062a \u0631\u0627 \u062d\u0641\u0638 \u06a9\u0646\u062f.  \u0627\u06cc\u0646 \u0631\u0627 \u0628\u0647 \u0627\u0646\u062a\u0647\u0627\u06cc \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>create<\/code> \u062a\u0627\u0628\u0639:<\/p>\n<pre><code class=\"hljs\">ball.setBounce(<span class=\"hljs-number\">1<\/span>, <span class=\"hljs-number\">1<\/span>);\n<\/code><\/pre>\n<p>\u0627\u06cc\u0646 \u0628\u0647 \u0641\u0627\u0632\u0631 \u0645\u06cc \u06af\u0648\u06cc\u062f \u06a9\u0647 \u062a\u0648\u067e \u0628\u0627\u06cc\u062f \u062a\u0645\u0627\u0645 \u0633\u0631\u0639\u062a X \u0648 Y \u062e\u0648\u062f \u0631\u0627 \u062d\u0641\u0638 \u06a9\u0646\u062f.  \u0627\u06af\u0631 \u062a\u0648\u067e \u0631\u0627 \u0628\u0627 \u0646\u0648\u0627\u0631 \u0641\u0627\u0635\u0644\u0647 \u0631\u0647\u0627 \u06a9\u0646\u06cc\u0645\u060c \u062a\u0648\u067e \u0628\u0627\u06cc\u062f \u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u0628\u0627\u0632\u06cc \u0628\u0627\u0644\u0627 \u0648 \u067e\u0627\u06cc\u06cc\u0646 \u0628\u067e\u0631\u062f.  \u0645\u0627 \u0628\u0627\u06cc\u062f \u062a\u0634\u062e\u06cc\u0635 \u0628\u0631\u062e\u0648\u0631\u062f \u0631\u0627 \u0627\u0632 \u0642\u0633\u0645\u062a \u067e\u0627\u06cc\u06cc\u0646 \u062f\u0646\u06cc\u0627\u06cc \u0628\u0627\u0632\u06cc \u063a\u06cc\u0631\u0641\u0639\u0627\u0644 \u06a9\u0646\u06cc\u0645.  \u0627\u06af\u0631 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0646\u06a9\u0646\u06cc\u0645\u060c \u0647\u0631\u06af\u0632 \u0646\u062e\u0648\u0627\u0647\u06cc\u0645 \u0641\u0647\u0645\u06cc\u062f \u06a9\u0647 \u0628\u0627\u0632\u06cc \u0686\u0647 \u0632\u0645\u0627\u0646\u06cc \u062a\u0645\u0627\u0645 \u0645\u06cc \u0634\u0648\u062f.  \u0628\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0627\u06cc\u0646 \u062e\u0637 \u062f\u0631 \u0627\u0646\u062a\u0647\u0627\u06cc \u0628\u0627\u0632\u06cc\u060c \u0628\u0631\u062e\u0648\u0631\u062f \u0628\u0627 \u067e\u0627\u06cc\u06cc\u0646 \u062f\u0646\u06cc\u0627\u06cc \u0628\u0627\u0632\u06cc \u0631\u0627 \u063a\u06cc\u0631\u0641\u0639\u0627\u0644 \u06a9\u0646\u06cc\u062f <code>create<\/code> \u062a\u0627\u0628\u0639:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-built_in\">this<\/span>.physics.world.checkCollision.down = <span class=\"hljs-literal\">false<\/span>;\n<\/code><\/pre>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u0628\u0627\u0632\u06cc \u0645\u0627\u0646\u0646\u062f \u0627\u06cc\u0646 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u0645:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/rasanegar.com\/blog\/wp-content\/uploads\/2024\/01\/introduction-to-phaser-3-building-breakout-8.gif\" alt=\"\u062a\u0648\u067e \u0628\u0647 \u0627\u0646\u062a\u0647\u0627\u06cc \u062f\u0646\u06cc\u0627\u06cc \u0628\u0627\u0632\u06cc \u0645\u06cc \u0627\u0641\u062a\u062f\" title=\"\"><\/p>\n<h3 id=\"brickcollision\"><span class=\"ez-toc-section\" id=\"%d8%a8%d8%b1%d8%ae%d9%88%d8%b1%d8%af_%d8%a2%d8%ac%d8%b1\"><\/span>\u0628\u0631\u062e\u0648\u0631\u062f \u0622\u062c\u0631<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062d\u0627\u0644\u0627 \u06a9\u0647 \u062c\u0646 \u0647\u0627\u06cc \u0645\u062a\u062d\u0631\u06a9 \u0645\u0627 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u0628\u0627 \u062f\u0646\u06cc\u0627\u06cc \u0628\u0627\u0632\u06cc \u0645\u0627 \u0628\u0631\u062e\u0648\u0631\u062f \u0645\u06cc \u06a9\u0646\u0646\u062f\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06a9\u0627\u0631 \u06a9\u0646\u06cc\u0645 \u0631\u0648\u06cc \u0628\u0631\u062e\u0648\u0631\u062f \u0628\u06cc\u0646 \u062a\u0648\u067e \u0648 \u0622\u062c\u0631 \u0648 \u0633\u067e\u0633 \u062a\u0648\u067e \u0648 \u0628\u0627\u0632\u06cc\u06a9\u0646.<\/p>\n<p>\u062f\u0631 \u062a\u0627\u0628\u0639 \u0627\u06cc\u062c\u0627\u062f \u0645\u0627 \u062f\u0631 \u062e\u0637\u0648\u0637 \u06a9\u062f \u0632\u06cc\u0631 \u062a\u0627 \u0627\u0646\u062a\u0647\u0627:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-built_in\">this<\/span>.physics.add.collider(ball, violetBricks, hitBrick, <span class=\"hljs-literal\">null<\/span>, <span class=\"hljs-built_in\">this<\/span>);\n<span class=\"hljs-built_in\">this<\/span>.physics.add.collider(ball, yellowBricks, hitBrick, <span class=\"hljs-literal\">null<\/span>, <span class=\"hljs-built_in\">this<\/span>);\n<span class=\"hljs-built_in\">this<\/span>.physics.add.collider(ball, redBricks, hitBrick, <span class=\"hljs-literal\">null<\/span>, <span class=\"hljs-built_in\">this<\/span>);\n<\/code><\/pre>\n<p>\u0627\u06cc\u0646 <code>collider<\/code> \u0631\u0648\u0634 \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0641\u06cc\u0632\u06cc\u06a9 Phaser \u0645\u06cc \u06af\u0648\u06cc\u062f \u06a9\u0647 \u0622\u0646 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u062f <code>hitBrick<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 <code>ball<\/code> \u0628\u0627 \u06af\u0631\u0648\u0647 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0622\u062c\u0631\u06cc \u0628\u0631\u062e\u0648\u0631\u062f \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0647\u0631 \u0628\u0627\u0631 \u06a9\u0647 \u0641\u0627\u0635\u0644\u0647 \u0631\u0627 \u0641\u0634\u0627\u0631 \u0645\u06cc \u062f\u0647\u06cc\u0645\u060c \u062a\u0648\u067e \u0628\u0647 \u0633\u0645\u062a \u0628\u0627\u0644\u0627 \u0634\u0648\u062a \u0645\u06cc \u06a9\u0646\u062f.  X Velocity \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f \u062a\u0627 \u062a\u0648\u067e \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0628\u0647 \u067e\u0627\u0631\u0648 \u0628\u0631\u06af\u0631\u062f\u062f.  \u0627\u06cc\u0646 \u06cc\u06a9 \u0628\u0627\u0632\u06cc \u062e\u0633\u062a\u0647 \u06a9\u0646\u0646\u062f\u0647 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.  \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0627\u0648\u0644\u06cc\u0646 \u0628\u0627\u0631 \u0628\u0647 \u06cc\u06a9 \u0622\u062c\u0631 \u0628\u0631\u062e\u0648\u0631\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645\u060c \u0633\u0631\u0639\u062a X \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u06cc\u0645.  \u062f\u0631 \u067e\u0627\u06cc\u06cc\u0646 <code>breakout.js<\/code> \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0631\u062f\u0646 <code>hitBrick<\/code> \u0632\u06cc\u0631:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">hitBrick<\/span>(<span class=\"hljs-params\">ball, brick<\/span>) <\/span>{\n  brick.disableBody(<span class=\"hljs-literal\">true<\/span>, <span class=\"hljs-literal\">true<\/span>);\n\n  <span class=\"hljs-keyword\">if<\/span> (ball.body.velocity.x == <span class=\"hljs-number\">0<\/span>) {\n    randNum = <span class=\"hljs-built_in\">Math<\/span>.random();\n    <span class=\"hljs-keyword\">if<\/span> (randNum &gt;= <span class=\"hljs-number\">0.5<\/span>) {\n      ball.body.setVelocityX(<span class=\"hljs-number\">150<\/span>);\n    } <span class=\"hljs-keyword\">else<\/span> {\n      ball.body.setVelocityX(-<span class=\"hljs-number\">150<\/span>);\n    }\n  }\n}\n<\/code><\/pre>\n<p>\u0627\u06cc\u0646 <code>hitBrick<\/code> \u062a\u0627\u0628\u0639 \u062f\u0648 \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u0642\u0628\u0644\u06cc \u0631\u0627 \u06a9\u0647 \u062f\u0631 <code>collider<\/code> \u0631\u0648\u0634 \u0645\u062b\u0644\u0627 <code>ball<\/code> \u0648 <code>violetBricks<\/code>.  \u0627\u06cc\u0646 <code>disableBody(true, true)<\/code> \u0632\u0646\u06af \u0632\u062f\u0646 \u0631\u0648\u06cc \u0622\u062c\u0631 \u0628\u0647 Phaser \u0645\u06cc \u06af\u0648\u06cc\u062f \u06a9\u0647 \u0622\u0646 \u0631\u0627 \u063a\u06cc\u0631\u0641\u0639\u0627\u0644 \u06a9\u0646\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0627\u0632 \u0635\u0641\u062d\u0647 \u067e\u0646\u0647\u0627\u0646 \u06a9\u0646\u062f.  \u0627\u06af\u0631 \u0633\u0631\u0639\u062a X \u062a\u0648\u067e 0 \u0628\u0627\u0634\u062f\u060c \u0628\u0633\u062a\u0647 \u0628\u0647 \u0622\u0646 \u0633\u0631\u0639\u062a\u06cc \u0628\u0647 \u062a\u0648\u067e \u0645\u06cc \u062f\u0647\u06cc\u0645 \u0631\u0648\u06cc \u0645\u0642\u062f\u0627\u0631 \u06cc\u06a9 \u0639\u062f\u062f \u062a\u0635\u0627\u062f\u0641\u06cc<\/p>\n<p>\u0627\u06af\u0631 \u06cc\u06a9 \u062a\u0648\u067e \u06a9\u0648\u0686\u06a9 \u0628\u0627 \u0633\u0631\u0639\u062a \u0622\u0647\u0633\u062a\u0647 \u0628\u0647 \u0633\u0645\u062a \u067e\u0627\u06cc \u0634\u0645\u0627 \u0628\u063a\u0644\u062a\u062f\u060c \u0631\u0648\u06cc \u0628\u0631\u062e\u0648\u0631\u062f \u0622\u0646 \u0631\u0627 \u0645\u062a\u0648\u0642\u0641 \u062e\u0648\u0627\u0647\u062f \u06a9\u0631\u062f.  \u0645\u0648\u062a\u0648\u0631 Arcade Physics \u0628\u0631\u062e\u0648\u0631\u062f \u0636\u0631\u0628\u0647 \u0627\u06cc \u0631\u0627 \u0645\u062f\u0644 \u0645\u06cc \u06a9\u0646\u062f \u0631\u0648\u06cc \u0633\u0631\u0639\u062a \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u06cc\u0634 \u0641\u0631\u0636  \u0628\u0631\u0627\u06cc \u0628\u0627\u0632\u06cc \u0645\u0627\u060c \u0646\u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u062a\u0648\u067e \u0628\u0627 \u0628\u0631\u062e\u0648\u0631\u062f \u0628\u0647 \u0622\u062c\u0631\u060c \u0633\u0631\u0639\u062a \u062e\u0648\u062f \u0631\u0627 \u0627\u0632 \u062f\u0633\u062a \u0628\u062f\u0647\u062f.  \u0645\u0627 \u0628\u0627\u06cc\u062f \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u0645 <code>immovable<\/code> \u0627\u0645\u0648\u0627\u0644 \u0628\u0647 \u06af\u0631\u0648\u0647 \u0647\u0627\u06cc \u062c\u0646 \u0645\u0627 \u0628\u0647 <code>true<\/code>.  \u062a\u0639\u0627\u0631\u06cc\u0641 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f <code>violetBricks<\/code>\u060c <code>yellowBricks<\/code> \u0648 <code>redBricks<\/code> \u0628\u0647 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-comment\">\/\/ Add violet bricks<\/span>\nvioletBricks = <span class=\"hljs-built_in\">this<\/span>.physics.add.group({\n  <span class=\"hljs-attr\">key<\/span>: <span class=\"hljs-string\">'brick1'<\/span>,\n  <span class=\"hljs-attr\">repeat<\/span>: <span class=\"hljs-number\">9<\/span>,\n  <span class=\"hljs-attr\">immovable<\/span>: <span class=\"hljs-literal\">true<\/span>,\n  <span class=\"hljs-attr\">setXY<\/span>: {\n    <span class=\"hljs-attr\">x<\/span>: <span class=\"hljs-number\">80<\/span>,\n    <span class=\"hljs-attr\">y<\/span>: <span class=\"hljs-number\">140<\/span>,\n    <span class=\"hljs-attr\">stepX<\/span>: <span class=\"hljs-number\">70<\/span>\n  }\n});\n\n<span class=\"hljs-comment\">\/\/ Add yellow bricks<\/span>\nyellowBricks = <span class=\"hljs-built_in\">this<\/span>.physics.add.group({\n  <span class=\"hljs-attr\">key<\/span>: <span class=\"hljs-string\">'brick2'<\/span>,\n  <span class=\"hljs-attr\">repeat<\/span>: <span class=\"hljs-number\">9<\/span>,\n  <span class=\"hljs-attr\">immovable<\/span>: <span class=\"hljs-literal\">true<\/span>,\n  <span class=\"hljs-attr\">setXY<\/span>: {\n    <span class=\"hljs-attr\">x<\/span>: <span class=\"hljs-number\">80<\/span>,\n    <span class=\"hljs-attr\">y<\/span>: <span class=\"hljs-number\">90<\/span>,\n    <span class=\"hljs-attr\">stepX<\/span>: <span class=\"hljs-number\">70<\/span>\n  }\n});\n\n<span class=\"hljs-comment\">\/\/ Add red bricks<\/span>\nredBricks = <span class=\"hljs-built_in\">this<\/span>.physics.add.group({\n  <span class=\"hljs-attr\">key<\/span>: <span class=\"hljs-string\">'brick3'<\/span>,\n  <span class=\"hljs-attr\">repeat<\/span>: <span class=\"hljs-number\">9<\/span>,\n  <span class=\"hljs-attr\">immovable<\/span>: <span class=\"hljs-literal\">true<\/span>,\n  <span class=\"hljs-attr\">setXY<\/span>: {\n    <span class=\"hljs-attr\">x<\/span>: <span class=\"hljs-number\">80<\/span>,\n    <span class=\"hljs-attr\">y<\/span>: <span class=\"hljs-number\">40<\/span>,\n    <span class=\"hljs-attr\">stepX<\/span>: <span class=\"hljs-number\">70<\/span>\n  }\n});\n<\/code><\/pre>\n<p>\u0628\u0631\u062e\u0648\u0631\u062f \u0622\u062c\u0631\u06cc \u0645\u0627 \u0627\u06a9\u0646\u0648\u0646 \u06a9\u0627\u0645\u0644 \u0634\u062f\u0647 \u0627\u0633\u062a \u0648 \u0628\u0627\u0632\u06cc \u0645\u0627 \u0628\u0627\u06cc\u062f \u0628\u0647 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a \u0639\u0645\u0644 \u06a9\u0646\u062f:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/rasanegar.com\/blog\/wp-content\/uploads\/2024\/01\/introduction-to-phaser-3-building-breakout-9.gif\" alt=\"\u0628\u0631\u062e\u0648\u0631\u062f \u0622\u062c\u0631\" title=\"\"><\/p>\n<p><strong>\u0646\u06a9\u062a\u0647 \u062a\u0648\u0633\u0639\u0647<\/strong> &#8211; \u0647\u0646\u06af\u0627\u0645 \u062a\u0648\u0633\u0639\u0647 \u0641\u06cc\u0632\u06cc\u06a9 \u0628\u0627\u0632\u06cc \u062e\u0648\u062f\u060c \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u062e\u0648\u0627\u0647\u06cc\u062f \u062d\u0627\u0644\u062a \u0627\u0634\u06a9\u0627\u0644 \u0632\u062f\u0627\u06cc\u06cc \u0631\u0627 \u0641\u0639\u0627\u0644 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u062c\u0639\u0628\u0647 \u0647\u0627\u06cc \u0645\u0631\u0632\u06cc \u0627\u0633\u067e\u0631\u0627\u06cc\u062a \u0647\u0627 \u0648 \u0631\u0648\u0634 \u0628\u0631\u062e\u0648\u0631\u062f \u0622\u0646\u0647\u0627 \u0628\u0627 \u06cc\u06a9\u062f\u06cc\u06af\u0631 \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f.  \u062f\u0631 \u0628\u0627\u0632\u06cc \u0634\u0645\u0627 <code>config<\/code> \u0634\u06cc\u0621\u060c \u062f\u0631 \u062f\u0627\u062e\u0644 <code>arcade<\/code> \u0645\u0644\u06a9\u06cc \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0631\u062f\u06cc\u0645 <code>gravity<\/code>\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0634\u06a9\u0627\u0644 \u0632\u062f\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0627\u06cc\u0646 \u0628\u0647 \u0634\u06cc \u0641\u0639\u0627\u0644 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"hljs\">debug: <span class=\"hljs-literal\">true<\/span>\n<\/code><\/pre>\n<h3 id=\"playercollision\"><span class=\"ez-toc-section\" id=\"%d8%a8%d8%b1%d8%ae%d9%88%d8%b1%d8%af_%d8%a8%d8%a7%d8%b2%db%8c%da%a9%d9%86\"><\/span>\u0628\u0631\u062e\u0648\u0631\u062f \u0628\u0627\u0632\u06cc\u06a9\u0646<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0645\u062f\u06cc\u0631\u06cc\u062a \u0628\u0631\u062e\u0648\u0631\u062f \u0628\u06cc\u0646 \u062a\u0648\u067e \u0648 \u0628\u0627\u0632\u06cc\u06a9\u0646 \u0646\u06cc\u0632 \u062a\u0644\u0627\u0634\u06cc \u0645\u0634\u0627\u0628\u0647 \u0627\u0633\u062a.  \u0627\u0648\u0644\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u0645 \u06a9\u0647 \u0628\u0627\u0632\u06cc\u06a9\u0646 \u063a\u06cc\u0631\u0642\u0627\u0628\u0644 \u062d\u0631\u06a9\u062a \u0627\u0633\u062a.  \u062f\u0631 \u067e\u0627\u06cc\u0627\u0646 \u0627\u0632 <code>create<\/code> \u062a\u0627\u0628\u0639 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"hljs\">player.setImmovable(<span class=\"hljs-literal\">true<\/span>);\n<\/code><\/pre>\n<p>\u0648 \u0633\u067e\u0633 a \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>collider<\/code> \u0628\u06cc\u0646 \u062a\u0648\u067e \u0648 \u0628\u0627\u0632\u06cc\u06a9\u0646:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-built_in\">this<\/span>.physics.add.collider(ball, player, hitPlayer, <span class=\"hljs-literal\">null<\/span>, <span class=\"hljs-built_in\">this<\/span>);\n<\/code><\/pre>\n<p>\u0648\u0642\u062a\u06cc \u062a\u0648\u067e \u0628\u0647 \u0628\u0627\u0632\u06cc\u06a9\u0646 \u0628\u0631\u062e\u0648\u0631\u062f \u0645\u06cc \u06a9\u0646\u062f\u060c \u0645\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0648 \u0627\u062a\u0641\u0627\u0642 \u0628\u06cc\u0641\u062a\u062f:<\/p>\n<ul>\n<li>\u062a\u0648\u067e \u0628\u0627\u06cc\u062f \u06a9\u0645\u06cc \u0633\u0631\u06cc\u0639\u062a\u0631 \u062d\u0631\u06a9\u062a \u06a9\u0646\u062f \u062a\u0627 \u0628\u0647 \u062a\u062f\u0631\u06cc\u062c \u0633\u062e\u062a\u06cc \u0628\u0627\u0632\u06cc \u0627\u0641\u0632\u0627\u06cc\u0634 \u06cc\u0627\u0628\u062f<\/li>\n<li>\u062c\u0647\u062a \u0627\u0641\u0642\u06cc \u062a\u0648\u067e \u0628\u0633\u062a\u06af\u06cc \u062f\u0627\u0631\u062f \u0631\u0648\u06cc \u0628\u0647 \u06a9\u062f\u0627\u0645 \u0633\u0645\u062a \u0628\u0627\u0632\u06cc\u06a9\u0646 \u0636\u0631\u0628\u0647 \u0645\u06cc \u0632\u0646\u062f &#8211; \u0627\u06af\u0631 \u062a\u0648\u067e \u0628\u0647 \u0633\u0645\u062a \u0686\u067e \u0628\u0627\u0632\u06cc\u06a9\u0646 \u0628\u0631\u062e\u0648\u0631\u062f \u06a9\u0646\u062f \u0628\u0627\u06cc\u062f \u0628\u0647 \u0633\u0645\u062a \u0686\u067e \u0628\u0631\u0648\u062f \u0648 \u0627\u06af\u0631 \u0628\u0647 \u0633\u0645\u062a \u0631\u0627\u0633\u062a \u0628\u0627\u0632\u06cc\u06a9\u0646 \u0628\u0631\u062e\u0648\u0631\u062f \u06a9\u0646\u062f \u0628\u0627\u06cc\u062f \u0628\u0647 \u0633\u0645\u062a \u0631\u0627\u0633\u062a \u0628\u0631\u0648\u062f.<\/li>\n<\/ul>\n<p>\u062f\u0631 \u067e\u0627\u06cc\u06cc\u0646 \u0634\u0645\u0627 <code>breakout.js<\/code> \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 <code>hitPlayer<\/code> \u062a\u0627\u0628\u0639:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">hitPlayer<\/span>(<span class=\"hljs-params\">ball, player<\/span>) <\/span>{\n  <span class=\"hljs-comment\">\/\/ Increase the velocity of the ball after it bounces<\/span>\n  ball.setVelocityY(ball.body.velocity.y - <span class=\"hljs-number\">5<\/span>);\n\n  <span class=\"hljs-keyword\">let<\/span> newXVelocity = <span class=\"hljs-built_in\">Math<\/span>.abs(ball.body.velocity.x) + <span class=\"hljs-number\">5<\/span>;\n  <span class=\"hljs-comment\">\/\/ If the ball is to the left of the player, ensure the X Velocity is negative<\/span>\n  <span class=\"hljs-keyword\">if<\/span> (ball.x &lt; player.x) {\n    ball.setVelocityX(-newXVelocity);\n  } <span class=\"hljs-keyword\">else<\/span> {\n    ball.setVelocityX(newXVelocity);\n  }\n}\n<\/code><\/pre>\n<p><strong>\u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f<\/strong> &#8211; \u06cc\u06a9 \u0627\u0633\u067e\u0631\u0627\u06cc\u062a \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0627 \u062f\u06cc\u06af\u0631\u06cc \u0628\u0631\u062e\u0648\u0631\u062f \u06a9\u0646\u062f\u060c \u06cc\u06a9 \u062c\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0627 \u06cc\u06a9 \u06af\u0631\u0648\u0647 \u0627\u0633\u067e\u0631\u0627\u06cc\u062a \u0628\u0631\u062e\u0648\u0631\u062f \u06a9\u0646\u062f \u0648 \u06af\u0631\u0648\u0647 \u0647\u0627\u06cc \u062c\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0627 \u06cc\u06a9\u062f\u06cc\u06af\u0631 \u0628\u0631\u062e\u0648\u0631\u062f \u06a9\u0646\u0646\u062f.  Phaser \u0628\u0647 \u0627\u0646\u062f\u0627\u0632\u0647 \u06a9\u0627\u0641\u06cc \u0647\u0648\u0634\u0645\u0646\u062f \u0627\u0633\u062a \u062a\u0627 \u0627\u0632 \u062a\u0627\u0628\u0639 \u0628\u0631\u062e\u0648\u0631\u062f\u06cc \u06a9\u0647 \u0645\u0627 \u062f\u0631 \u0632\u0645\u06cc\u0646\u0647 \u0645\u0646\u0627\u0633\u0628 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u062f.<\/p>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0628\u0627\u0632\u06cc \u0645\u0627 \u0647\u0645 \u0628\u0631\u062e\u0648\u0631\u062f \u0628\u0627\u0632\u06cc\u06a9\u0646 \u0648 \u0647\u0645 \u0628\u0631\u062e\u0648\u0631\u062f \u0622\u062c\u0631\u06cc \u062f\u0627\u0631\u062f:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/rasanegar.com\/blog\/wp-content\/uploads\/2024\/01\/introduction-to-phaser-3-building-breakout-10.gif\" alt=\"\u0628\u0631\u062e\u0648\u0631\u062f \u0628\u0627\u0632\u06cc\u06a9\u0646\" title=\"\"><\/p>\n<h2 id=\"addingtext\"><span class=\"ez-toc-section\" id=\"%d8%a7%d8%b6%d8%a7%d9%81%d9%87_%da%a9%d8%b1%d8%af%d9%86_%d9%85%d8%aa%d9%86\"><\/span>\u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0645\u062a\u0646<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0628\u0627\u0632\u06cc \u0645\u0627 \u06a9\u0627\u0645\u0644\u0627\u064b \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0627\u0633\u062a\u060c \u06a9\u0633\u06cc \u06a9\u0647 \u0627\u06cc\u0646 \u0628\u0627\u0632\u06cc \u0631\u0627 \u0628\u0627\u0632\u06cc \u0645\u06cc \u06a9\u0646\u062f \u0646\u0645\u06cc \u062f\u0627\u0646\u062f \u0686\u06af\u0648\u0646\u0647 \u0628\u0627\u0632\u06cc \u0631\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0646\u062f \u06cc\u0627 \u0628\u062f\u0627\u0646\u062f \u0686\u0647 \u0632\u0645\u0627\u0646\u06cc \u0628\u0627\u0632\u06cc \u062a\u0645\u0627\u0645 \u0634\u062f\u0647 \u0627\u0633\u062a.  \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 3 \u0645\u062a\u063a\u06cc\u0631 \u062c\u0647\u0627\u0646\u06cc \u0627\u062e\u0628\u0627\u0631 \u06a9\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0645\u062a\u0646\u06cc \u0645\u0627 \u0631\u0627 \u0628\u0639\u062f \u0627\u0632 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>gameStarted<\/code> \u0627\u0639\u0644\u0627\u0645\u06cc\u0647 \u062f\u0631 \u0628\u0627\u0644\u0627\u06cc <code>breakout.js<\/code>:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-keyword\">let<\/span> openingText, gameOverText, playerWonText;\n<\/code><\/pre>\n<h3 id=\"openingtext\"><span class=\"ez-toc-section\" id=\"%d8%a8%d8%a7%d8%b2_%da%a9%d8%b1%d8%af%d9%86_%d9%85%d8%aa%d9%86\"><\/span>\u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u0645\u062a\u0646<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0648\u0642\u062a\u06cc \u0628\u0627\u0632\u06cc \u0644\u0648\u062f \u0645\u06cc \u0634\u0648\u062f\u060c \u0645\u062a\u0646\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0628\u0647 \u0628\u0627\u0632\u06cc\u06a9\u0646 \u0628\u06af\u0648\u06cc\u06cc\u0645 \u0641\u0627\u0635\u0644\u0647 \u0631\u0627 \u0641\u0634\u0627\u0631 \u062f\u0647\u062f.  \u062f\u0631 <code>create<\/code> \u062a\u0627\u0628\u0639 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"hljs\">openingText = <span class=\"hljs-built_in\">this<\/span>.add.text(\n  <span class=\"hljs-built_in\">this<\/span>.physics.world.bounds.width \/ <span class=\"hljs-number\">2<\/span>,\n  <span class=\"hljs-built_in\">this<\/span>.physics.world.bounds.height \/ <span class=\"hljs-number\">2<\/span>,\n  <span class=\"hljs-string\">'Press SPACE to Start'<\/span>,\n  {\n    <span class=\"hljs-attr\">fontFamily<\/span>: <span class=\"hljs-string\">'Monaco, Courier, monospace'<\/span>,\n    <span class=\"hljs-attr\">fontSize<\/span>: <span class=\"hljs-string\">'50px'<\/span>,\n    <span class=\"hljs-attr\">fill<\/span>: <span class=\"hljs-string\">'#fff'<\/span>\n  },\n);\n\nopeningText.setOrigin(<span class=\"hljs-number\">0.5<\/span>);\n<\/code><\/pre>\n<p>\u062f\u0648 \u0627\u0633\u062a\u062f\u0644\u0627\u0644 \u0627\u0648\u0644 \u0627\u0632 <code>text<\/code> \u0645\u062a\u062f \u0645\u062e\u062a\u0635\u0627\u062a X \u0648 Y \u062c\u0639\u0628\u0647 \u0645\u062a\u0646 \u0647\u0633\u062a\u0646\u062f.  \u0645\u0627 \u0627\u0632 \u0639\u0631\u0636 \u0648 \u0627\u0631\u062a\u0641\u0627\u0639 \u0635\u062d\u0646\u0647 \u0628\u0627\u0632\u06cc \u0628\u0631\u0627\u06cc \u062a\u0639\u06cc\u06cc\u0646 \u0645\u062d\u0644 \u0642\u0631\u0627\u0631\u06af\u06cc\u0631\u06cc \u0622\u0646 &#8211; \u062f\u0631 \u0645\u0631\u06a9\u0632 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645.  \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u0633\u0648\u0645 \u0645\u062a\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u0648\u062f.  \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u0686\u0647\u0627\u0631\u0645 \u06cc\u06a9 \u0634\u06cc JS \u0627\u0633\u062a \u06a9\u0647 \u062d\u0627\u0648\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0645\u0631\u062a\u0628\u0637 \u0628\u0627 \u0641\u0648\u0646\u062a \u0627\u0633\u062a.<\/p>\n<p>\u0628\u0631 \u062e\u0644\u0627\u0641 sprites\u060c \u0627\u0634\u06cc\u0627\u0621 \u0645\u062a\u0646\u06cc X \u0648 Y \u0645\u062e\u062a\u0635\u0627\u062a \u0628\u0647 \u0642\u0633\u0645\u062a \u0628\u0627\u0644\u0627\u06cc \u0633\u0645\u062a \u0686\u067e \u0634\u06cc \u0627\u0634\u0627\u0631\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f\u060c \u0646\u0647 \u0645\u0631\u06a9\u0632 \u0622\u0646\u0647\u0627.  \u0628\u0647 \u0647\u0645\u06cc\u0646 \u062f\u0644\u06cc\u0644 \u0627\u0633\u062a \u06a9\u0647 \u0645\u0627 \u0627\u0632 <code>setOrigin<\/code> \u0631\u0648\u0634\u06cc \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0645\u062e\u062a\u0635\u0627\u062a \u0645\u0627\u0646\u0646\u062f sprites \u06a9\u0627\u0631 \u06a9\u0646\u062f\u060c \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0648\u0631\u062f \u0645\u0648\u0642\u0639\u06cc\u062a \u0642\u0631\u0627\u0631 \u06af\u0631\u0641\u062a\u0646 \u062f\u0631 \u0645\u0631\u06a9\u0632 \u0631\u0627 \u0622\u0633\u0627\u0646\u200c\u062a\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<p>\u0648\u0642\u062a\u06cc \u062f\u0631 \u062d\u0627\u0644 \u0628\u0627\u0632\u06cc \u0647\u0633\u062a\u06cc\u0645\u060c \u062f\u06cc\u06af\u0631 \u0646\u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0645\u062a\u0646 \u0622\u063a\u0627\u0632\u06cc\u0646 \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u0645.  \u062f\u0631 <code>update<\/code> \u062a\u0627\u0628\u0639\u060c \u0639\u0628\u0627\u0631\u062a if \u0631\u0627 \u06a9\u0647 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0622\u06cc\u0627 \u0646\u0648\u0627\u0631 \u0641\u0627\u0635\u0644\u0647 \u0641\u0634\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-keyword\">if<\/span> (cursors.space.isDown) {\n  gameStarted = <span class=\"hljs-literal\">true<\/span>;\n  ball.setVelocityY(-<span class=\"hljs-number\">200<\/span>);\n  openingText.setVisible(<span class=\"hljs-literal\">false<\/span>);\n}\n<\/code><\/pre>\n<p>\u0627\u0634\u06cc\u0627\u0621 \u0645\u062a\u0646\u06cc \u062c\u0646 \u0646\u06cc\u0633\u062a\u0646\u062f\u060c \u0646\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u062f\u0646\u0647 \u0622\u0646\u0647\u0627 \u0631\u0627 \u063a\u06cc\u0631\u0641\u0639\u0627\u0644 \u06a9\u0646\u06cc\u0645.  \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0646\u06cc\u0627\u0632\u06cc \u0628\u0647 \u062f\u06cc\u062f\u0646\u0634\u0627\u0646 \u0646\u062f\u0627\u0631\u06cc\u0645\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0646\u0627\u0645\u0631\u0626\u06cc \u06a9\u0646\u06cc\u0645.  \u0628\u0627\u0632\u06cc \u0645\u0627 \u0627\u06a9\u0646\u0648\u0646 \u0628\u0647 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a \u0634\u0631\u0648\u0639 \u0645\u06cc \u0634\u0648\u062f:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/rasanegar.com\/blog\/wp-content\/uploads\/2024\/01\/introduction-to-phaser-3-building-breakout-11.gif\" alt=\"\u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u0645\u062a\u0646 \u0628\u0627\u0632\u06cc \u0631\u0627 \u0634\u0631\u0648\u0639 \u0645\u06cc \u06a9\u0646\u062f\" title=\"\"><\/p>\n<h3 id=\"gameoverandgamewontext\"><span class=\"ez-toc-section\" id=\"game_over_%d9%88_game_won_text\"><\/span>Game Over \u0648 Game Won Text<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0645\u0627\u0646\u0646\u062f \u0642\u0628\u0644\u060c \u0628\u0627\u06cc\u062f \u0627\u0634\u06cc\u0627\u0621 \u0645\u062a\u0646\u06cc \u0631\u0627 \u062f\u0631 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 <code>create<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f\u060c \u0648 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0646\u0627\u0645\u0631\u0626\u06cc \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0647\u0646\u06af\u0627\u0645 \u0634\u0631\u0648\u0639 \u0628\u0627\u0632\u06cc \u062f\u06cc\u062f\u0647 \u0646\u0634\u0648\u0646\u062f:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-comment\">\/\/ Create game over text<\/span>\ngameOverText = <span class=\"hljs-built_in\">this<\/span>.add.text(\n  <span class=\"hljs-built_in\">this<\/span>.physics.world.bounds.width \/ <span class=\"hljs-number\">2<\/span>,\n  <span class=\"hljs-built_in\">this<\/span>.physics.world.bounds.height \/ <span class=\"hljs-number\">2<\/span>,\n  <span class=\"hljs-string\">'Game Over'<\/span>,\n  {\n    <span class=\"hljs-attr\">fontFamily<\/span>: <span class=\"hljs-string\">'Monaco, Courier, monospace'<\/span>,\n    <span class=\"hljs-attr\">fontSize<\/span>: <span class=\"hljs-string\">'50px'<\/span>,\n    <span class=\"hljs-attr\">fill<\/span>: <span class=\"hljs-string\">'#fff'<\/span>\n  },\n);\n\ngameOverText.setOrigin(<span class=\"hljs-number\">0.5<\/span>);\n\n<span class=\"hljs-comment\">\/\/ Make it invisible until the player loses<\/span>\ngameOverText.setVisible(<span class=\"hljs-literal\">false<\/span>);\n\n<span class=\"hljs-comment\">\/\/ Create the game won text<\/span>\nplayerWonText = <span class=\"hljs-built_in\">this<\/span>.add.text(\n  <span class=\"hljs-built_in\">this<\/span>.physics.world.bounds.width \/ <span class=\"hljs-number\">2<\/span>,\n  <span class=\"hljs-built_in\">this<\/span>.physics.world.bounds.height \/ <span class=\"hljs-number\">2<\/span>,\n  <span class=\"hljs-string\">'You won!'<\/span>,\n  {\n    <span class=\"hljs-attr\">fontFamily<\/span>: <span class=\"hljs-string\">'Monaco, Courier, monospace'<\/span>,\n    <span class=\"hljs-attr\">fontSize<\/span>: <span class=\"hljs-string\">'50px'<\/span>,\n    <span class=\"hljs-attr\">fill<\/span>: <span class=\"hljs-string\">'#fff'<\/span>\n  },\n);\n\nplayerWonText.setOrigin(<span class=\"hljs-number\">0.5<\/span>);\n\n<span class=\"hljs-comment\">\/\/ Make it invisible until the player wins<\/span>\nplayerWonText.setVisible(<span class=\"hljs-literal\">false<\/span>);\n<\/code><\/pre>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0622\u0646\u0647\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0646\u062f\u060c \u0645\u0627 \u0628\u0627\u06cc\u062f \u062f\u06cc\u062f \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0622\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u0645 <code>update<\/code> \u062a\u0627\u0628\u0639:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-comment\">\/\/ Check if the ball left the scene i.e. game over<\/span>\n<span class=\"hljs-keyword\">if<\/span> (isGameOver(<span class=\"hljs-built_in\">this<\/span>.physics.world)) {\n  gameOverText.setVisible(<span class=\"hljs-literal\">true<\/span>);\n  ball.disableBody(<span class=\"hljs-literal\">true<\/span>, <span class=\"hljs-literal\">true<\/span>);\n} <span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-keyword\">if<\/span> (isWon()) {\n  playerWonText.setVisible(<span class=\"hljs-literal\">true<\/span>);\n  ball.disableBody(<span class=\"hljs-literal\">true<\/span>, <span class=\"hljs-literal\">true<\/span>);\n} <span class=\"hljs-keyword\">else<\/span> {\n  ...\n<\/code><\/pre>\n<p>\u0645\u0627 \u0628\u062f\u0646\u0647 \u062a\u0648\u067e \u0631\u0627 \u063a\u06cc\u0631\u0641\u0639\u0627\u0644 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u062a\u0627 \u062f\u06cc\u06af\u0631 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0646\u0634\u0648\u062f \u0648 \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u062f\u06cc\u06af\u0631 \u0628\u0647 \u0622\u0646 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0646\u0634\u0648\u062f.<\/p>\n<p>\u0627\u06af\u0631 \u0628\u0627\u0632\u06cc \u0631\u0627 \u0628\u0628\u0627\u0632\u06cc\u0645\u060c \u0627\u06cc\u0646 \u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u06cc\u062f:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/rasanegar.com\/blog\/wp-content\/uploads\/2024\/01\/introduction-to-phaser-3-building-breakout-12.png\" alt=\"\u0628\u0627\u0632\u06cc \u062a\u0645\u0627\u0645 \u0634\u062f\" title=\"\"><\/p>\n<p>\u0627\u06af\u0631 \u0628\u0627\u0632\u06cc \u0631\u0627 \u0628\u0628\u0631\u06cc\u0645\u060c \u0627\u06cc\u0646 \u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u06cc\u062f:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/rasanegar.com\/blog\/wp-content\/uploads\/2024\/01\/introduction-to-phaser-3-building-breakout-13.png\" alt=\"\u0628\u0627\u0632\u06cc \u0628\u0631\u062f\" title=\"\"><\/p>\n<p>\u06a9\u0644\u0648\u0646 Breakout \u0645\u0627 \u06a9\u0627\u0645\u0644 \u0634\u062f!<\/p>\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"%d9%86%d8%aa%db%8c%d8%ac%d9%87\"><\/span>\u0646\u062a\u06cc\u062c\u0647<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Phaser \u06cc\u06a9 \u0686\u0627\u0631\u0686\u0648\u0628 \u062a\u0648\u0633\u0639\u0647 \u0628\u0627\u0632\u06cc HTML5 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0628\u0647 \u0633\u0631\u0639\u062a \u0628\u0627\u0632\u06cc \u0647\u0627\u06cc \u0648\u06cc\u062f\u06cc\u0648\u06cc\u06cc \u0628\u0633\u0627\u0632\u06cc\u0645 \u0631\u0648\u06cc \u0648\u0628.  \u062c\u062f\u0627 \u0627\u0632 \u0627\u0646\u062a\u0632\u0627\u0639 \u0628\u0631 \u0631\u0648\u06cc API \u0647\u0627\u06cc HTML5\u060c \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0645\u0641\u06cc\u062f\u06cc \u0645\u0627\u0646\u0646\u062f \u0645\u0648\u062a\u0648\u0631\u0647\u0627\u06cc \u0641\u06cc\u0632\u06cc\u06a9 \u0631\u0627 \u0646\u06cc\u0632 \u062f\u0631 \u0627\u062e\u062a\u06cc\u0627\u0631 \u0645\u0627 \u0642\u0631\u0627\u0631 \u0645\u06cc \u062f\u0647\u062f \u0648 \u062d\u0644\u0642\u0647 \u0628\u0627\u0632\u06cc \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f &#8211; \u0686\u0631\u062e\u0647 \u0639\u0645\u0631 \u0627\u062c\u0631\u0627\u06cc \u0647\u0645\u0647 \u0628\u0627\u0632\u06cc \u0647\u0627.<\/p>\n<p>\u0645\u0627 \u06cc\u06a9 \u06a9\u0644\u0648\u0646 Breakout \u0633\u0627\u062e\u062a\u06cc\u0645 \u062a\u0648\u0633\u0637:<\/p>\n<ul>\n<li>\u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u062f\u0627\u0631\u0627\u06cc\u06cc \u0647\u0627\u06cc \u0645\u0627\u060c \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0648\u0631\u062f \u062a\u0635\u0627\u0648\u06cc\u0631 \u0645\u0627<\/li>\n<li>\u0627\u06cc\u062c\u0627\u062f \u0627\u0633\u067e\u0631\u0627\u06cc\u062a \u0628\u0631\u0627\u06cc \u0628\u0627\u0632\u06cc\u06a9\u0646 \u0648 \u062a\u0648\u067e \u0645\u0627 \u0648 \u06af\u0631\u0648\u0647 \u0647\u0627\u06cc \u062c\u0646 \u0628\u0631\u0627\u06cc \u0622\u062c\u0631\u0647\u0627\u06cc\u0645\u0627\u0646<\/li>\n<li>\u06af\u0648\u0634 \u062f\u0627\u062f\u0646 \u0628\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u0635\u0641\u062d\u0647 \u06a9\u0644\u06cc\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u0645 \u067e\u062e\u0634 \u06a9\u0646\u0646\u062f\u0647 \u0631\u0627 \u062d\u0631\u06a9\u062a \u062f\u0647\u06cc\u0645<\/li>\n<li>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0648\u062a\u0648\u0631 \u0641\u06cc\u0632\u06cc\u06a9 \u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0628\u0631\u062e\u0648\u0631\u062f \u0628\u06cc\u0646 \u0627\u0634\u06cc\u0627\u0621 \u062c\u0646 \u0648 \u062f\u0646\u06cc\u0627\u06cc \u0628\u0627\u0632\u06cc<\/li>\n<li>\u0646\u0645\u0627\u06cc\u0634 \u0645\u062a\u0646 \u0628\u0631\u0627\u06cc \u0622\u0645\u0648\u0632\u0634 \u0628\u0627\u0632\u06cc\u06a9\u0646 \u0648 \u0627\u0637\u0644\u0627\u0639 \u062f\u0627\u062f\u0646 \u0628\u0647 \u0622\u0646\u0647\u0627 \u062f\u0631 \u0635\u0648\u0631\u062a \u0628\u0631\u062f \u06cc\u0627 \u0628\u0627\u062e\u062a<\/li>\n<\/ul>\n<p>\u0627\u0632 \u06cc\u06a9 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0645\u0634\u0627\u0628\u0647 \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0628\u0627\u0632\u06cc \u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u062f\u0631 Phaser \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f.<\/p>\n<p>\u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0627\u0647 \u0628\u0631\u0627\u06cc \u0628\u0647\u0628\u0648\u062f \u0645\u0647\u0627\u0631\u062a \u0647\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0628\u0627\u0632\u06cc\u060c \u0627\u062f\u0627\u0645\u0647 \u0633\u0627\u062e\u062a\u0646 \u0628\u0627\u0632\u06cc \u0647\u0627 \u0627\u0633\u062a.  \u0627\u06af\u0631 \u062f\u0648\u0633\u062a \u062f\u0627\u0631\u06cc\u062f \u062f\u0631 \u0645\u0648\u0631\u062f \u0633\u0627\u062e\u062a \u0628\u0627\u0632\u06cc \u0628\u0627 Phaser \u0628\u06cc\u0634\u062a\u0631 \u0628\u062f\u0627\u0646\u06cc\u062f\u060c \u0628\u0647 \u0645\u0642\u062f\u0645\u0647 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0631\u0633\u0645\u06cc \u0646\u06af\u0627\u0647\u06cc \u0628\u06cc\u0646\u062f\u0627\u0632\u06cc\u062f. <a href=\"http:\/\/phaser.io\/tutorials\/making-your-first-phaser-3-game\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\u0622\u0645\u0648\u0632\u0634<\/a>.<\/p>\n<p>\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u062f \u0645\u0646\u0628\u0639 \u062d\u0627\u0634\u06cc\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0628\u0627\u0632\u06cc \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f <a href=\"https:\/\/github.com\/StackAbuse\/intro-to-phaser-3-building-breakout\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\u0627\u06cc\u0646\u062c\u0627<\/a>.<\/p>\n<\/div>\n<p>    (\u0628\u0631\u0686\u0633\u0628\u200c\u0647\u0627 \u0628\u0647 \u062a\u0631\u062c\u0645\u0647)# \u0631\u0648\u0634<br \/>\n<br \/><br \/>\n<br \/>\u0645\u0646\u062a\u0634\u0631 \u0634\u062f\u0647 \u062f\u0631 1403-01-25 07:49:11<br \/>\n<\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-center kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;center&quot;,&quot;id&quot;:&quot;16454&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;0&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;0&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;5&quot;,&quot;greet&quot;:&quot;\u0627\u0645\u062a\u06cc\u0627\u0632 \u0634\u0645\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628&quot;,&quot;legend&quot;:&quot;0\\\/5 (0 \u0631\u0627\u06cc)&quot;,&quot;size&quot;:&quot;30&quot;,&quot;title&quot;:&quot;\u0645\u0642\u062f\u0645\u0647 \u0627\u06cc \u0628\u0631 \u0641\u0627\u0632 3: \u062a\u0648\u0633\u0639\u0647 BreakoutGame \u0634\u0627\u062e\u0647 \u0627\u06cc \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u0627\u0632 \u062a\u0648\u0633\u0639\u0647 \u0646\u0631\u0645 \u0627\u0641\u0632\u0627\u0631 \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0647\u0645\u0627\u0646 \u0627\u0646\u062f\u0627\u0632\u0647 \u06a9\u0647 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0627\u0633\u062a \u0645\u0641\u06cc\u062f \u0628\u0627\u0634\u062f.  \u0648\u0642\u062a\u06cc \u0628\u0647 \u0633\u0627\u062e\u062a \u0628\u0627\u0632\u06cc \u0641\u06a9\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u0645\u060c \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u0646\u0635\u0628 \u0648 \u0628\u0627\u0632\u06cc \u0641\u06a9\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0631\u0648\u06cc \u0631\u0627\u06cc\u0627\u0646\u0647 \u0647\u0627 \u06cc\u0627 \u06a9\u0646\u0633\u0648\u0644 \u0647\u0627\u06cc \u0645\u0627  \u0645\u0634\u062e\u0635\u0627\u062a HTML5 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 API \u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 \u062a\u0648\u0633\u0639\u0647 \u0628\u0627\u0632\u06cc \u0645\u0639\u0631\u0641\u06cc \u06a9\u0631\u062f \u0631\u0648\u06cc ...&quot;,&quot;width&quot;:&quot;0&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} ({count} \u0631\u0627\u06cc)&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 0px;\">\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 24px;\">\n            <span class=\"kksr-muted\">\u0627\u0645\u062a\u06cc\u0627\u0632 \u0634\u0645\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628<\/span>\n    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">\u0632\u0645\u0627\u0646 \u0644\u0627\u0632\u0645 \u0628\u0631\u0627\u06cc \u0645\u0637\u0627\u0644\u0639\u0647: <\/span> <span class=\"rt-time\"> 17<\/span> <span class=\"rt-label rt-postfix\">\u062f\u0642\u06cc\u0642\u0647<\/span><\/span>\u0645\u0639\u0631\u0641\u06cc \u062a\u0648\u0633\u0639\u0647 \u0628\u0627\u0632\u06cc \u06cc\u06a9 \u0634\u0627\u062e\u0647 \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u0627\u0632 \u062a\u0648\u0633\u0639\u0647 \u0646\u0631\u0645 \u0627\u0641\u0632\u0627\u0631 \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0647\u0645\u0627\u0646 \u0627\u0646\u062f\u0627\u0632\u0647 \u06a9\u0647 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0627\u0633\u062a\u060c \u067e\u0627\u062f\u0627\u0634 \u062f\u0647\u0646\u062f\u0647 \u0628\u0627\u0634\u062f. \u0648\u0642\u062a\u06cc \u0628\u0647 \u0633\u0627\u062e\u062a \u0628\u0627\u0632\u06cc \u0641\u06a9\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u0645\u060c \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u0646\u0635\u0628 \u0648 \u0628\u0627\u0632\u06cc \u0641\u06a9\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0631\u0648\u06cc \u0631\u0627\u06cc\u0627\u0646\u0647 \u0647\u0627 \u06cc\u0627 \u06a9\u0646\u0633\u0648\u0644 \u0647\u0627\u06cc \u0645\u0627 \u0645\u0634\u062e\u0635\u0627\u062a HTML5 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 API [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":16455,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1772,620],"tags":[],"class_list":["post-16454","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-programming"],"acf":[],"_links":{"self":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/posts\/16454","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/comments?post=16454"}],"version-history":[{"count":0,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/posts\/16454\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/media\/16455"}],"wp:attachment":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/media?parent=16454"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/categories?post=16454"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/tags?post=16454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}