{"id":17033,"date":"2021-01-15T16:36:04","date_gmt":"2021-01-15T13:06:04","guid":{"rendered":"https:\/\/maktabkhooneh.org\/mag\/?p=17033"},"modified":"2026-04-07T13:16:14","modified_gmt":"2026-04-07T09:46:14","slug":"learn-how-to-make-a-game-with-javascript-in-simple-language","status":"publish","type":"post","link":"https:\/\/maktabkhooneh.org\/mag\/learn-how-to-make-a-game-with-javascript-in-simple-language\/","title":{"rendered":"\u0622\u0645\u0648\u0632\u0634 \u0633\u0627\u062e\u062a \u0628\u0627\u0632\u06cc \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0647 \u0632\u0628\u0627\u0646 \u0633\u0627\u062f\u0647"},"content":{"rendered":"\n

\u062a\u0639\u0631\u06cc\u0641 \u0645\u062e\u062a\u0635\u0631\u06cc \u0627\u0632 \u0633\u0627\u062e\u062a \u0628\u0627\u0632\u06cc \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/span><\/h2>\n\n\n\n

JavaScript (\u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a) \u062f\u0631 \u0645\u06cc\u0627\u0646 \u062f\u0647 \u0632\u0628\u0627\u0646 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u06cc \u067e\u0631\u06a9\u0627\u0631\u0628\u0631\u062f \u0648 \u0645\u062d\u0628\u0648\u0628 \u0642\u0631\u0627\u0631 \u062f\u0627\u0631\u062f. \u0647\u062f\u0641 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0647\u0631 \u0646\u0631\u0645 \u0627\u0641\u0632\u0627\u0631 \u0645\u062f\u0631\u0646\u06cc \u0628\u062a\u0648\u0627\u0646\u062f \u062f\u0631 \u0647\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u06cc \u0628\u0647 \u0627\u062c\u0631\u0627 \u062f\u0631 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u06cc\u0646 \u0632\u0628\u0627\u0646 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u06cc \u062a\u0627\u06a9\u06cc\u062f \u0634\u062f\u06cc\u062f\u06cc \u0628\u0631 \u0631\u0648\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062f\u0627\u0631\u062f. \u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u0627\u06af\u0631 \u0634\u0645\u0627 \u0647\u0645 \u062f\u0648\u0633\u062a \u062f\u0627\u0631\u06cc\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0627\u0632\u06cc \u0628\u0633\u0627\u0632\u06cc\u062f (\u0633\u0627\u062e\u062a \u0628\u0627\u0632\u06cc \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/strong>) \u0645\u0627 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f.<\/span><\/p>\n\n\n

\r\n
\r\n
\r\n
\r\n \r\n \r\n <\/svg>\r\n <\/div>\r\n \r\n \r\n \r\n \u062f\u0648\u0631\u0647\u200c\u0647\u0627\u06cc \u0622\u0645\u0648\u0632\u0634 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a <\/a>\r\n <\/div>\r\n\r\n \r\n \r\n

JavaScript (\u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a) \u0633\u0627\u062e\u062a \u0628\u0627\u0632\u06cc \u0631\u0627 \u0628\u0647 \u06cc\u06a9\u06cc \u0627\u0632 \u0644\u0630\u062a\u200c\u0628\u062e\u0634\u200c\u062a\u0631\u06cc\u0646 \u06a9\u0627\u0631\u0647\u0627\u06cc \u062f\u0646\u06cc\u0627 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a \u0628\u0647 \u0637\u0648\u0631\u06cc \u06a9\u0647 \u0627\u06a9\u062b\u0631\u06cc\u062a \u0627\u0641\u0631\u0627\u062f \u062f\u0648\u0633\u062a \u062f\u0627\u0631\u0646\u062f \u0647\u0631\u0686\u0647 \u0633\u0631\u06cc\u0639\u062a\u0631 \u0632\u0628\u0627\u0646 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0631\u0627 \u0628\u06cc\u0627\u0645\u0648\u0632\u0646\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0627\u0632\u06cc\u200c\u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0639\u0644\u0627\u0642\u0647 \u062e\u0648\u062f \u0631\u0627 \u0628\u0633\u0627\u0632\u0646\u062f. <\/span><\/p>\n\n\n\n

\u0637\u0631\u0627\u062d\u06cc \u0648 \u0633\u0627\u062e\u062a \u0628\u0627\u0632\u06cc \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/span><\/h3>\n\n\n\n

\u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062a\u0642\u0631\u06cc\u0628\u0627 \u0627\u0632 \u0633\u0627\u0644 \u06f1\u06f9\u06f9\u06f5 \u0628\u0647 \u0631\u0648\u06cc \u06a9\u0627\u0631 \u0622\u0645\u062f \u0648 \u062a\u0627 \u0628\u0647 \u0627\u0645\u0631\u0648\u0632\u0647 \u0646\u0642\u0634\u06cc \u0627\u0633\u0627\u0633\u06cc \u062f\u0631 \u0627\u06cc\u0646\u062a\u0631\u0646\u062a \u0648 \u0627\u06a9\u062b\u0631\u06cc\u062a \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627 \u062f\u0627\u0634\u062a\u0647 \u0627\u0633\u062a. \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0627 \u0647\u0645\u06a9\u0627\u0631\u06cc \u0632\u0628\u0627\u0646 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u06cc \u062f\u06cc\u06af\u0631\u06cc \u0628\u0647 \u0646\u0627\u0645 HTML \u062f\u0631 \u0632\u0646\u062f\u0647 \u0646\u06af\u0647 \u062f\u0627\u0634\u062a\u0646 \u0635\u0641\u062d\u0627\u062a \u0648\u0628 \u0628\u0647 \u06cc\u06a9\u062f\u06cc\u06af\u0631 \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/span><\/p>\n\n\n\n

\u0628\u0647 \u0637\u0648\u0631 \u06a9\u0644\u06cc \u0627\u06af\u0631 \u0628\u062e\u0648\u0627\u0647\u06cc\u0645 \u062d\u0633\u0627\u0628 \u06a9\u0646\u06cc\u0645 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0633\u0627\u0633 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0628\u0627\u0632\u06cc\u200c\u0647\u0627 \u062f\u0631 \u0637\u0648\u0644 \u0633\u0627\u0644\u06cc\u0627\u0646 \u06af\u0630\u0634\u062a\u0647 \u0628\u0648\u062f\u0647 \u0627\u0633\u062a \u0648 \u0627\u06a9\u062b\u0631\u06cc\u062a \u0637\u0631\u0627\u062d\u0627\u0646 \u0648 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0627\u06cc\u0646 \u0632\u0628\u0627\u0646 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u06cc \u0631\u0627 \u062c\u0632\u0621 \u067e\u0631\u06a9\u0627\u0631\u0628\u0631\u062f\u062a\u0631\u06cc\u0646 \u0632\u0628\u0627\u0646 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u06cc \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0628\u0627\u0632\u06cc \u0645\u06cc\u200c\u062f\u0627\u0646\u0633\u062a\u0646\u062f.<\/span><\/p>\n\n\n\n

\"\u0622\u0645\u0648\u0632\u0634
<\/figcaption><\/figure>\n\n\n\n

\u067e\u0631\u0633\u0634\u06cc \u06a9\u0647 \u0627\u06a9\u062b\u0631\u06cc\u062a \u0627\u0641\u0631\u0627\u062f \u062f\u0627\u0631\u062f \u0628\u0647 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a \u0627\u0633\u062a \u06a9\u0647 \u0622\u06cc\u0627 \u0633\u0627\u062e\u062a \u0628\u0627\u0632\u06cc \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0633\u062e\u062a \u0627\u0633\u062a\u061f! \u0628\u0631\u0627\u06cc \u067e\u0627\u0633\u062e \u062f\u0627\u062f\u0646 \u0628\u0647 \u0627\u06cc\u0646 \u0633\u0648\u0627\u0644 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0631\u0648\u0631\u0627\u0633\u062a \u0628\u0627\u0634\u06cc\u0645\u060c \u0627\u06af\u0631 \u0634\u0645\u0627 \u0647\u06cc\u0686 \u0639\u0644\u0627\u0642\u0647\u200c\u0627\u06cc \u0628\u0647 \u0633\u0627\u062e\u062a \u0628\u0627\u0632\u06cc \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/strong> \u0646\u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0628\u0633\u06cc\u0627\u0631 \u0633\u062e\u062a \u0648 \u062f\u0634\u0648\u0627\u0631 \u0628\u0631\u0627\u06cc \u0634\u0645\u0627 \u067e\u06cc\u0634 \u062e\u0648\u0627\u0647\u062f \u0631\u0641\u062a. \u0632\u06cc\u0631\u0627 \u0633\u0627\u062e\u062a \u0628\u0627\u0632\u06cc \u0646\u06cc\u0627\u0632\u0645\u0646\u062f \u0639\u0644\u0627\u0642\u0647 \u0628\u0633\u06cc\u0627\u0631 \u0632\u06cc\u0627\u062f\u060c \u0647\u0646\u0631\u060c \u06af\u0631\u0627\u0641\u06cc\u06a9\u060c \u0631\u06cc\u0627\u0636\u06cc\u060c \u0635\u062f\u0627\u060c \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc\u060c \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u06cc \u0648… \u0627\u0633\u062a. <\/span><\/p>\n\n\n\n

\u062d\u0627\u0644 \u0627\u06af\u0631 \u0645\u0648\u0627\u0641\u0642 \u0628\u0627\u0634\u06cc\u062f \u0628\u0647 \u0633\u0631\u0627\u063a \u0622\u0645\u0648\u0632\u0634 \u0633\u0627\u062e\u062a \u0628\u0627\u0632\u06cc \u0645\u0627\u0631 (Snake) \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0631\u0648\u06cc\u0645.<\/span><\/p>\n\n\n\n

\u0633\u0627\u062e\u062a \u0628\u0627\u0632\u06cc \u0645\u0627\u0631 (Snake) \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/span><\/h3>\n\n\n\n

\u0627\u06af\u0631 \u0634\u0645\u0627 \u0647\u0645 \u062c\u0632\u0621 \u0628\u0627\u0632\u06cc\u06a9\u0646\u200c\u0647\u0627\u06cc \u0642\u062f\u06cc\u0645\u06cc \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u0644\u0641\u0646\u200c\u0647\u0627\u06cc \u0647\u0645\u0631\u0627\u0647 \u0633\u0627\u062f\u0647 \u062e\u0648\u062f \u0645\u0634\u063a\u0648\u0644 \u0628\u0647 \u0628\u0627\u0632\u06cc \u0628\u0648\u062f\u0646\u062f \u062d\u062a\u0645\u0627 \u0628\u0627\u0632\u06cc \u0645\u0627\u0631 \u0631\u0627 \u0645\u06cc\u200c\u0634\u0646\u0627\u0633\u06cc\u062f \u0648 \u0628\u0627 \u0622\u0646 \u062e\u0627\u0637\u0631\u0627\u062a \u0628\u0633\u06cc\u0627\u0631\u06cc \u062f\u0627\u0631\u06cc\u062f. \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0647\u0646\u0648\u0632 \u0628\u0627\u0632\u06cc\u200c\u0647\u0627\u06cc \u06a9\u0627\u0645\u067e\u06cc\u0648\u062a\u0631\u06cc \u0628\u0647 \u0631\u0648\u06cc \u06a9\u0627\u0631 \u0646\u06cc\u0627\u0645\u062f\u0647 \u0628\u0648\u062f\u0646\u062f \u0628\u0627\u0632\u06cc \u0645\u0627\u0631 \u062c\u0632\u0621 \u067e\u0631\u0637\u0631\u0641\u062f\u0627\u0631\u062a\u0631\u06cc\u0646 \u0628\u0627\u0632\u06cc \u0628\u0647\u200c\u062d\u0633\u0627\u0628 \u0645\u06cc\u200c\u0622\u0645\u062f.<\/span><\/p>\n\n\n\n

\u0647\u0645\u06cc\u0634\u0647 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0627\u0647 \u0628\u0631\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u06cc\u06a9 \u0632\u0628\u0627\u0646 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u06cc \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0627\u0632 \u0622\u0646 \u0632\u0628\u0627\u0646 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u06cc \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u067e\u0631\u0648\u0698\u0647\u200c\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u0648\u062f. \u0628\u0627\u0632\u06cc \u0645\u0627\u0631 \u06cc\u06a9 \u0628\u0627\u0632\u06cc \u06a9\u0627\u0645\u0644\u0627 \u0633\u0627\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0635\u0648\u0644 JavaScript \u0648 HTML \u0633\u0627\u062e\u062a\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f. \u062a\u0627\u0631\u06cc\u062e\u0686\u0647 \u0633\u0627\u062e\u062a \u0628\u0627\u0632\u06cc \u0645\u0627\u0631 \u0628\u0647 \u0627\u0648\u0627\u062e\u0631 \u062f\u0647\u0647 \u06f7\u06f0 \u0628\u0627\u0632 \u0645\u06cc\u200c\u06af\u0631\u062f\u062f.<\/span><\/p>\n\n\n\n

\u0627\u0648\u0644\u06cc\u0646 \u06a9\u0627\u0631\u06cc \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0648 \u06cc\u06a9 \u0645\u0627\u0631 \u0631\u0627 \u0628\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0628\u06af\u0630\u0627\u0631\u06cc\u0645. \u0628\u0627 \u0627\u06cc\u062c\u0627\u062f \u0641\u0627\u06cc\u0644      snakegame.html  \u0634\u0631\u0648\u0639 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u0628\u0639\u062f \u0641\u0627\u06cc\u0644 \u0631\u0627 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u062e\u0648\u062f \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f. <\/span><\/p>\n\n\n\n

\u0628\u0627 \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0647\u06cc\u0686 \u0686\u06cc\u0632\u06cc \u0628\u0647 \u0634\u0645\u0627 \u0646\u0634\u0627\u0646 \u0646\u0645\u06cc\u200c\u062f\u0647\u062f \u0632\u06cc\u0631\u0627 \u0628\u0648\u0645 (canvas) \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0628\u0648\u0645 \u0628\u0627\u06cc\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0686\u0646\u062f \u06a9\u062f \u0628\u0646\u0648\u06cc\u0633\u0645 \u062a\u0627 \u0628\u0631\u0627\u06cc \u0628\u0648\u0645 \u0645\u0627 \u0645\u0631\u0632\u06cc \u0627\u06cc\u062c\u0627\u062f \u0634\u0648\u062f.<\/span><\/p>\n\n\n\n

\u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0627\u06cc\u0646 \u0645\u0631\u0627\u062d\u0644 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f: \u0627\u0628\u062a\u062f\u0627 <script>  \u0648 <\/script>  \u0631\u0627 \u0628\u0639\u062f \u0627\u0632 <\/canvas>  \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f.<\/span><\/p>\n\n\n\n

\u0633\u0627\u062e\u062a \u0628\u0648\u0645 (canvas)<\/span><\/h4>\n\n\n\n

\u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0648\u0645 \u06cc\u0627 \u0635\u0641\u062d\u0647 \u0628\u0627\u0632\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0631\u0627\u06cc \u062d\u0631\u06a9\u062a \u0645\u0627\u0631 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645. \u0644\u0627\u0632\u0645 \u0628\u0647 \u0630\u06a9\u0631 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0627\u0632 \u0633\u0627\u06cc\u062a id gameCanvas \u0627\u0628\u062a\u062f\u0627 \u0639\u0646\u0635\u0631 (element) \u0628\u0648\u0645 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u0645. \u0628\u0639\u062f \u0627\u0632 \u0633\u0627\u062e\u062a \u0628\u0648\u0645\u060c \u0628\u0627\u06cc\u062f \u0632\u0645\u06cc\u0646\u0647 \u06f2D \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645. \u06f2D \u0647\u0645\u0627\u0646 \u0641\u0636\u0627\u06cc \u062f\u0648 \u0628\u0639\u062f\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u0634\u0648\u062f.<\/span><\/p>\n\n\n\n

\u0628\u0639\u062f \u0627\u0632 \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u0647\u0627 \u0628\u0627\u06cc\u062f \u0645\u0633\u062a\u0637\u06cc\u0644\u06cc \u0633\u0641\u06cc\u062f \u0628\u0647 \u0627\u0628\u0639\u0627\u062f \u06f4\u06f0\u06f0x 400 \u0628\u0627 \u062d\u0627\u0634\u06cc\u0647 \u0633\u06cc\u0627\u0647 \u0631\u0646\u06af \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645. \u06a9\u0647 \u0627\u0632 \u062a\u0645\u0627\u0645\u06cc \u0628\u0637\u0646\u200c\u0647\u0627 \u0648 \u06af\u0648\u0634\u0647\u200c\u0647\u0627\u06cc \u06a9\u0644 \u0628\u0648\u0645 \u0645\u0627 \u0631\u0627 \u067e\u0648\u0634\u0634 \u062f\u0647\u062f. \u0628\u062f\u06cc\u0646 \u0634\u06a9\u0644 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u0647\u0627 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f:<\/span><\/p>\n\n\n\n

const snakeboard = document.getElementById(\"gameCanvas\");\n\nconst snakeboard_ctx = gameCanvas.getContext(\"2d\");<\/pre>\n\n\n\n
\u0633\u0627\u062e\u062a \u0645\u0627\u0631<\/span><\/h4>\n\n\n\n
\u062d\u0627\u0644\u0627\u060c \u0628\u0631\u0627\u06cc \u0645\u0627\u0631! \u0645\u0627 \u0628\u0627\u06cc\u062f \u0628\u0627 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0646 \u0645\u0627\u0631 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0622\u0631\u0627\u06cc\u0647 \u0627\u0632 \u0645\u062e\u062a\u0635\u0627\u062a\u060c \u0645\u062d\u0644 \u0627\u0648\u0644\u06cc\u0647 \u0645\u0627\u0631 \u062e\u0648\u062f \u0631\u0627 \u0628\u0631 \u0631\u0648\u06cc \u0628\u0648\u0645 \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u0645. \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0645\u0627\u0631 \u0627\u0641\u0642\u06cc \u062f\u0631 \u0648\u0633\u0637 \u0628\u0648\u0645 \u062f\u0631 \u0627\u0628\u0639\u0627\u062f (\u06f2\u06f0\u06f0x200)\u060c \u0645\u062e\u062a\u0635\u0627\u062a \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0627\u0639\u0636\u0627\u06cc \u0628\u062f\u0646 \u0645\u0627\u0631 \u0631\u0627 \u0644\u06cc\u0633\u062a \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645. \u0627\u0639\u062f\u0627\u062f \u0648 \u062a\u0639\u062f\u0627\u062f \u0645\u062e\u062a\u0635\u0627\u062a \u0628\u062f\u0646 \u0645\u0627\u0631 \u0628\u0631\u0627\u0628\u0631 \u0628\u0627 \u0637\u0648\u0644 \u0645\u0627\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f. \u0628\u062f\u06cc\u0646 \u0634\u06a9\u0644:<\/span><\/p>\n\n\n\n
let snake = [  {x: 200, y: 200},  {x: 190, y: 200},  {x: 180, y: 200},  {x: 170, y: 200},  {x: 160, y: 200},];<\/pre>\n\n\n\n
\u0646\u06a9\u062a\u0647: \u0645\u062e\u062a\u0635\u0627\u062a y \u0628\u0631\u0627\u06cc \u0647\u0645\u0647 \u0642\u0633\u0645\u062a\u200c\u0647\u0627 \u0647\u0645\u06cc\u0634\u0647 \u06f2\u06f0\u06f0 \u0627\u0633\u062a. \u0645\u062e\u062a\u0635\u0627\u062a xx \u0647\u0645\u06cc\u0634\u0647 \u06a9\u0627\u0647\u0634\u06cc \u06f1\u06f0 \u0628\u0631\u0627\u0628\u0631\u06cc \u062f\u0627\u0631\u062f \u062a\u0627 \u0642\u0633\u0645\u062a\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0628\u062f\u0646 \u0645\u0627\u0631 \u0631\u0627 \u0646\u0634\u0627\u0646 \u062f\u0647\u062f. \u0627\u0648\u0644\u06cc\u0646 \u0645\u062e\u062a\u0635\u0627\u062a \u0646\u0634\u0627\u0646\u200c\u062f\u0647\u0646\u062f\u0647 \u0633\u0631 \u0645\u0627\u0631 \u0627\u0633\u062a.<\/span><\/p>\n\n\n\n
\u062d\u0627\u0644 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0645\u0627\u0631 \u0645\u0627 \u0628\u0631 \u0631\u0648\u06cc \u0628\u0648\u0645 \u0638\u0627\u0647\u0631 \u0634\u0648\u062f \u0628\u0627\u06cc\u062f \u0628\u0631\u0627\u06cc \u0647\u0631 \u062a\u0627\u0628\u0639 \u0645\u0633\u062a\u0637\u06cc\u0644 \u06cc\u06a9 \u062c\u0641\u062a \u0645\u062e\u062a\u0635\u0627\u062a \u0646\u0648\u0634\u062a \u0628\u062f\u06cc\u0646 \u0634\u06a9\u0644:<\/span><\/p>\n\n\n\n
function drawSnakePart(snakePart) \n\n{  \n\n  snakeboard_ctx.fillStyle = 'lightblue';  \n\n  snakeboard_ctx.strokestyle = 'darkblue';\n\n  snakeboard_ctx.fillRect(snakePart.x, snakePart.y, 10, 10);  \n\n  snakeboard_ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);\n\n}\n\n\n\n\n\/*Function that prints the parts*\/\n\nfunction drawSnake() \n\n{  \n\n  snake.forEach(drawSnakePart);\n\n}<\/pre>\n\n\n\n
\u0628\u0627 \u06a9\u0646\u0627\u0631 \u0647\u0645 \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0646 \u0645\u0631\u0627\u062d\u0644 \u0648 \u0627\u062c\u0631\u0627 \u06a9\u062f\u060c \u0645\u0627\u0631 \u0645\u0627 \u0628\u0631 \u0631\u0648\u06cc \u0635\u0641\u062d\u0647 \u0638\u0627\u0647\u0631 \u0645\u06cc\u200c\u0634\u0648\u062f. \u06a9\u062f\u0647\u0627 \u0631\u0627 \u0628\u062f\u06cc\u0646 \u0634\u06a9\u0644 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f:<\/span><\/p>\n\n\n\n
<!DOCTYPE html>\n\n<html>\n\n  <head>\n\n  <title>Snake Game<\/title>\n\n    <link href=\"https:\/\/fonts.googleapis.com\/css?family=Antic+Slab\" rel=\"stylesheet\">\n\n\n\n\n  <\/head>\n\n\n\n\n  <body>\n\n\n\n\n    <canvas id=\"snakeboard\" width=\"400\" height=\"400\"><\/canvas>\n\n\n\n\n    <style>\n\n      #snakeboard {\n\n        position: absolute;\n\n        top: 50%;\n\n        left: 50%;\n\n        transform: translate(-50%, -50%);\n\n      }\n\n    <\/style>\n\n  <\/body>\n\n\n\n\n  <script>\n\n    const board_border = 'black';\n\n    const board_background = \"white\";\n\n    const snake_col = 'lightblue';\n\n    const snake_border = 'darkblue';\n\n    \n\n    let snake = [\n\n      {x: 200, y: 200},\n\n      {x: 190, y: 200},\n\n      {x: 180, y: 200},\n\n      {x: 170, y: 200},\n\n      {x: 160, y: 200}\n\n    ]\n\n    \n\n    \/\/ Get the canvas element\n\n    const snakeboard = document.getElementById(\"snakeboard\");\n\n    \/\/ Return a two dimensional drawing context\n\n    const snakeboard_ctx = snakeboard.getContext(\"2d\");\n\n    \/\/ Start game\n\n    main();\n\n    \n\n    \/\/ main function called repeatedly to keep the game running\n\n    function main() {\n\n        clearCanvas();\n\n        drawSnake();\n\n    }\n\n    \n\n    \/\/ draw a border around the canvas\n\n    function clearCanvas() {\n\n      \/\/  Select the colour to fill the drawing\n\n      snakeboard_ctx.fillStyle = board_background;\n\n      \/\/  Select the colour for the border of the canvas\n\n      snakeboard_ctx.strokestyle = board_border;\n\n      \/\/ Draw a \"filled\" rectangle to cover the entire canvas\n\n      snakeboard_ctx.fillRect(0, 0, snakeboard.width, snakeboard.height);\n\n      \/\/ Draw a \"border\" around the entire canvas\n\n      snakeboard_ctx.strokeRect(0, 0, snakeboard.width, snakeboard.height);\n\n    }\n\n    \n\n    \/\/ Draw the snake on the canvas\n\n    function drawSnake() {\n\n      \/\/ Draw each part\n\n      snake.forEach(drawSnakePart)\n\n    }\n\n    \n\n    \/\/ Draw one snake part\n\n    function drawSnakePart(snakePart) {\n\n\n\n\n      \/\/ Set the colour of the snake part\n\n      snakeboard_ctx.fillStyle = snake_col;\n\n      \/\/ Set the border colour of the snake part\n\n      snakeboard_ctx.strokestyle = snake_border;\n\n      \/\/ Draw a \"filled\" rectangle to represent the snake part at the coordinates\n\n      \/\/ the part is located\n\n      snakeboard_ctx.fillRect(snakePart.x, snakePart.y, 10, 10);\n\n      \/\/ Draw a border around the snake part\n\n      snakeboard_ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);\n\n    }\n\n    \n\n  <\/script>\n\n<\/html><\/pre>\n\n\n\n
\u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u062a\u0627\u0628\u0639 \u0627\u0635\u0644\u06cc \u0641\u0642\u0637 \u062a\u0648\u0627\u0628\u0639 clearCanvas() \u0648 drawSnake() \u0631\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f. \u062d\u0627\u0644 \u0628\u0647 \u0633\u0631\u0627\u063a \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f \u0645\u06cc\u200c\u0631\u0648\u06cc\u0645.<\/span><\/p>\n\n\n\n
\u062d\u0631\u06a9\u062a \u062e\u0648\u062f\u06a9\u0627\u0631 \u0645\u0627\u0631<\/span><\/h4>\n\n\n\n
\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0627 \u0628\u0648\u0645 \u0648 \u0645\u0627\u0631 \u062e\u0648\u062f \u0631\u0627 \u062f\u0627\u0631\u06cc\u0645\u060c \u0627\u0645\u0627 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645 \u06a9\u0647 \u0645\u0627\u0631 \u0628\u0647 \u0635\u0648\u0631\u062a \u062e\u0648\u062f\u06a9\u0627\u0631 \u062d\u0631\u06a9\u062a \u06a9\u0646\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u062f \u062a\u0645\u0627\u0645\u06cc \u0645\u062d\u06cc\u0637 \u0627\u0637\u0631\u0627\u0641 \u062e\u0648\u062f \u0631\u0627 \u0628\u06af\u0631\u062f\u062f. \u062d\u0627\u0644 \u0628\u06cc\u0627\u06cc\u062f \u06cc\u0627\u062f \u0628\u06af\u06cc\u0631\u06cc\u0645 \u0686\u06af\u0648\u0646\u0647 \u0645\u0627\u0631 \u0631\u0627 \u0628\u0647 \u062d\u0631\u06a9\u062a \u062f\u0631\u0628\u06cc\u0627\u0648\u0631\u06cc\u0645. \u0627\u06af\u0631 \u0628\u062e\u0648\u0627\u0647\u06cc\u0645 \u0645\u0627\u0631 \u0628\u0647 \u0635\u0648\u0631\u062a \u0627\u0641\u0642\u06cc \u062d\u0631\u06a9\u062a \u06a9\u0646\u062f \u0648 \u0628\u0647 \u0633\u0645\u062a \u0631\u0627\u0633\u062a \u0628\u0631\u0648\u062f \u0628\u0627\u06cc\u062f \u0645\u062e\u062a\u0635\u0627\u062a xx  \u0647\u0631 \u0642\u0633\u0645\u062a \u0627\u0632 \u0645\u0627\u0631 \u0631\u0627 \u06f1\u06f0 \u067e\u06cc\u06a9\u0633\u0644 \u0627\u0641\u0632\u0627\u06cc\u0634 \u062f\u0647\u06cc\u0645 \u0628\u0647 \u0627\u06cc\u0646 \u0634\u06a9\u0644: (dx = 10+).<\/span><\/p>\n\n\n
\n
\n    
\n        \"\u0622\u0645\u0648\u0632\u0634\n    <\/div>\n\n    
\n        \n            \u0622\u0645\u0648\u0632\u0634 Node.js        <\/a>\n\n        
\n            \n                \n                                            \u06f1,\u06f5\u06f9\u06f9,\u06f0\u06f0\u06f0                                    <\/span>\n\n                \n                    \n                        \u06f4\u06f7\u06f9,\u06f7\u06f0\u06f0                    <\/span>\n                    \u062a\u0648\u0645\u0627\u0646<\/span>\n                <\/span>\n\n                                    
\n                        \u06f7\u06f0%                    <\/div>\n                \n                    <\/div>\n