{"id":866,"date":"2025-04-10T15:14:45","date_gmt":"2025-04-10T15:14:45","guid":{"rendered":"https:\/\/datanalyser.ir\/?p=866"},"modified":"2025-04-19T05:29:18","modified_gmt":"2025-04-19T05:29:18","slug":"%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d8%a7%d8%b3%d8%a7%d8%b3%db%8c-%db%8c%da%a9-%d8%a8%d8%a7%d8%b2%db%8c-html5","status":"publish","type":"post","link":"https:\/\/datanalyser.ir\/?p=866","title":{"rendered":"\u0686\u0627\u0631\u0686\u0648\u0628 \u0627\u0633\u0627\u0633\u06cc \u06cc\u06a9 \u0628\u0627\u0632\u06cc HTML5"},"content":{"rendered":"\n

\u0645\u0642\u062f\u0645\u0647<\/h2>\n\n\n\n

\u0628\u0627\u0632\u06cc\u200c\u0647\u0627\u06cc HTML5<\/code> \u0628\u0647 \u062f\u0644\u06cc\u0644 \u062f\u0633\u062a\u0631\u0633\u06cc \u0622\u0633\u0627\u0646 \u0648 \u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u062c\u0631\u0627 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641\u060c \u0628\u0647 \u06cc\u06a9 \u067e\u0644\u062a\u0641\u0631\u0645 \u0645\u062d\u0628\u0648\u0628 \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0628\u0627\u0632\u06cc \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u0647\u200c\u0627\u0646\u062f. \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0686\u0627\u0631\u0686\u0648\u0628 \u0627\u0633\u0627\u0633\u06cc \u0648 \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u0634\u062f\u0647\u060c \u0627\u0648\u0644\u06cc\u0646 \u0642\u062f\u0645 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u06cc\u06a9 \u0628\u0627\u0632\u06cc HTML5<\/code> \u0645\u0648\u0641\u0642 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0647 \u0628\u0631\u0631\u0633\u06cc \u0627\u062c\u0632\u0627\u06cc \u0627\u0635\u0644\u06cc \u0627\u06cc\u0646 \u0686\u0627\u0631\u0686\u0648\u0628 \u0648 \u0646\u062d\u0648\u0647 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0622\u0646\u0647\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0646\u0645\u0648\u0646\u0647 \u06a9\u062f \u0645\u06cc\u200c\u067e\u0631\u062f\u0627\u0632\u062f.<\/p>\n\n\n\n\n\n\n\n

1. \u0633\u0627\u062e\u062a\u0627\u0631 HTML<\/code>:<\/h2>\n\n\n\n

\u0647\u0633\u062a\u0647 \u0627\u0635\u0644\u06cc \u06cc\u06a9 \u0628\u0627\u0632\u06cc HTML5\u060c<\/code> \u0639\u0646\u0635\u0631 <canvas><\/code> \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0639\u0646\u0635\u0631 \u06cc\u06a9 \u0646\u0627\u062d\u06cc\u0647 \u0645\u0633\u062a\u0637\u06cc\u0644\u06cc \u0631\u0627 \u062f\u0631 \u0635\u0641\u062d\u0647 \u0648\u0628 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0631\u0627\u06cc \u062a\u0631\u0633\u06cc\u0645 \u06af\u0631\u0627\u0641\u06cc\u06a9\u060c \u062a\u0635\u0627\u0648\u06cc\u0631 \u0648 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f. \u0633\u0627\u062e\u062a\u0627\u0631 \u0627\u0648\u0644\u06cc\u0647 HTML<\/code> \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0628\u0627\u0632\u06cc HTML5<\/code> \u0628\u0647 \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n\n\n\n

<!DOCTYPE html>\n<html>\n<head>\n    <title>\u0628\u0627\u0632\u06cc HTML5<\/title>\n    <style>\n        body { margin: 0; }\n        canvas { display: block; }\n    <\/style>\n<\/head>\n<body>\n    <canvas id=\"gameCanvas\"><\/canvas>\n    <script src=\"game.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
\u062f\u0631 \u0627\u06cc\u0646 \u0633\u0627\u062e\u062a\u0627\u0631:<\/p>\n\n\n\n
    \n
  • <!DOCTYPE html><\/code>: \u0646\u0648\u0639 \u0633\u0646\u062f HTML5<\/code> \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n\n\n\n
  • <html><\/code>: \u0639\u0646\u0635\u0631 \u0631\u06cc\u0634\u0647 \u0633\u0646\u062f HTML<\/code> \u0627\u0633\u062a.<\/li>\n\n\n\n
  • <head><\/code>: \u0634\u0627\u0645\u0644 \u0641\u0631\u0627\u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0645\u0627\u0646\u0646\u062f \u0639\u0646\u0648\u0627\u0646 \u0635\u0641\u062d\u0647 \u0648 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc CSS<\/code> \u0627\u0633\u062a.<\/li>\n\n\n\n
  • <title><\/code>: \u0639\u0646\u0648\u0627\u0646 \u0628\u0627\u0632\u06cc \u0631\u0627 \u062f\u0631 \u0646\u0648\u0627\u0631 \u0639\u0646\u0648\u0627\u0646 \u0645\u0631\u0648\u0631\u06af\u0631 \u062a\u0639\u06cc\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n\n\n\n
  • <style><\/code>: \u0634\u0627\u0645\u0644 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc CSS<\/code> \u0628\u0631\u0627\u06cc \u0635\u0641\u062d\u0647 \u0648 \u0639\u0646\u0635\u0631 canvas<\/code> \u0627\u0633\u062a. \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627\u060c \u062d\u0627\u0634\u06cc\u0647 \u0628\u062f\u0646\u0647 \u062d\u0630\u0641 \u0634\u062f\u0647 \u0648 \u0639\u0646\u0635\u0631 canvas<\/code> \u0628\u0647 \u0635\u0648\u0631\u062a \u06cc\u06a9 \u0628\u0644\u0648\u06a9 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/li>\n\n\n\n
  • <body><\/code>: \u0634\u0627\u0645\u0644 \u0645\u062d\u062a\u0648\u0627\u06cc \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0635\u0641\u062d\u0647 \u0627\u0633\u062a.<\/li>\n\n\n\n
  • <canvas id=\"gameCanvas\"><\/canvas><\/code>: \u0639\u0646\u0635\u0631 \u0627\u0635\u0644\u06cc \u0628\u0631\u0627\u06cc \u062a\u0631\u0633\u06cc\u0645 \u06af\u0631\u0627\u0641\u06cc\u06a9 \u0628\u0627\u0632\u06cc \u0627\u0633\u062a. \u0634\u0646\u0627\u0633\u0647 gameCanvas<\/code> \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u0627\u06cc\u0646 \u0639\u0646\u0635\u0631 \u062f\u0631 \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/li>\n\n\n\n
  • <script src=\"game.js\"><\/script><\/code>: \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062d\u0627\u0648\u06cc \u0645\u0646\u0637\u0642 \u0628\u0627\u0632\u06cc \u0631\u0627 \u0628\u0647 \u0635\u0641\u062d\u0647 \u067e\u06cc\u0648\u0646\u062f \u0645\u06cc\u200c\u062f\u0647\u062f.<\/li>\n<\/ul>\n\n\n\n
    2. \u0645\u0646\u0637\u0642 \u0628\u0627\u0632\u06cc \u0628\u0627 \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a (game<\/code>.js<\/code>):<\/h2>\n\n\n\n
    \u0627\u06a9\u062b\u0631 \u0645\u0646\u0637\u0642 \u0628\u0627\u0632\u06cc \u062f\u0631 \u0641\u0627\u06cc\u0644 \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a (game.js<\/code>) \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f. \u0627\u06cc\u0646 \u0634\u0627\u0645\u0644 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0631\u0648\u062f\u06cc\u060c \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0648\u0636\u0639\u06cc\u062a \u0628\u0627\u0632\u06cc\u060c \u0648 \u062a\u0631\u0633\u06cc\u0645 \u0639\u0646\u0627\u0635\u0631 \u0631\u0648\u06cc canvas<\/code> \u0627\u0633\u062a.<\/p>\n\n\n\n
    2.1. \u062f\u0631\u06cc\u0627\u0641\u062a \u0632\u0645\u06cc\u0646\u0647 \u0646\u0642\u0627\u0634\u06cc:<\/strong><\/p>\n\n\n\n
    \u0627\u0648\u0644\u06cc\u0646 \u0642\u062f\u0645 \u062f\u0631 \u0641\u0627\u06cc\u0644 game.js<\/code>\u060c \u062f\u0631\u06cc\u0627\u0641\u062a \u0627\u0631\u062c\u0627\u0639 \u0628\u0647 \u0639\u0646\u0635\u0631 canvas<\/code> \u0648 \u0632\u0645\u06cc\u0646\u0647 \u0646\u0642\u0627\u0634\u06cc \u062f\u0648 \u0628\u0639\u062f\u06cc (2D<\/code> rendering<\/code> context<\/code>) \u0622\u0646 \u0627\u0633\u062a:<\/p>\n\n\n\n
    const canvas = document.getElementById('gameCanvas');\nconst ctx = canvas.getContext('2d');<\/code><\/pre>\n\n\n\n
    \u0645\u062a\u063a\u06cc\u0631 canvas<\/code> \u0628\u0647 \u0639\u0646\u0635\u0631 HTML<\/code> canvas<\/code> \u0627\u0634\u0627\u0631\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0645\u062a\u063a\u06cc\u0631 ctx<\/code> \u06cc\u06a9 \u0634\u06cc\u0621 \u0631\u0627 \u062f\u0631 \u0627\u062e\u062a\u06cc\u0627\u0631 \u0645\u0627 \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u062f\u0647\u062f \u06a9\u0647 \u0645\u062a\u062f\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641\u06cc \u0628\u0631\u0627\u06cc \u062a\u0631\u0633\u06cc\u0645 \u0627\u0634\u06a9\u0627\u0644\u060c \u0645\u062a\u0646\u060c \u062a\u0635\u0627\u0648\u06cc\u0631 \u0648 \u063a\u06cc\u0631\u0647 \u0631\u0648\u06cc canvas<\/code> \u062f\u0627\u0631\u062f.<\/p>\n\n\n\n
    2.2. \u062d\u0644\u0642\u0647 \u0628\u0627\u0632\u06cc (Game<\/code> Loop<\/code>):<\/strong><\/p>\n\n\n\n
    \u062d\u0644\u0642\u0647 \u0628\u0627\u0632\u06cc \u06cc\u06a9 \u0645\u0641\u0647\u0648\u0645 \u0627\u0633\u0627\u0633\u06cc \u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u0628\u0627\u0632\u06cc \u0627\u0633\u062a. \u0627\u06cc\u0646 \u06cc\u06a9 \u062d\u0644\u0642\u0647 \u0628\u06cc\u200c\u0646\u0647\u0627\u06cc\u062a \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0637\u0648\u0631 \u0645\u062f\u0627\u0648\u0645 \u0645\u0631\u0627\u062d\u0644 \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc\u200c\u062f\u0647\u062f:<\/p>\n\n\n\n
      \n
    1. \u067e\u0631\u062f\u0627\u0632\u0634 \u0648\u0631\u0648\u062f\u06cc:<\/strong> \u0628\u0631\u0631\u0633\u06cc \u0648\u0631\u0648\u062f\u06cc \u06a9\u0627\u0631\u0628\u0631 (\u0645\u0627\u0646\u0646\u062f \u0641\u0634\u0627\u0631 \u062f\u0627\u062f\u0646 \u06a9\u0644\u06cc\u062f\u0647\u0627 \u06cc\u0627 \u06a9\u0644\u06cc\u06a9 \u0645\u0627\u0648\u0633).<\/li>\n\n\n\n
    2. \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0648\u0636\u0639\u06cc\u062a \u0628\u0627\u0632\u06cc:<\/strong> \u062a\u063a\u06cc\u06cc\u0631 \u0645\u0648\u0642\u0639\u06cc\u062a\u060c \u0633\u0631\u0639\u062a\u060c \u0627\u0645\u062a\u06cc\u0627\u0632 \u0648 \u0633\u0627\u06cc\u0631 \u062c\u0646\u0628\u0647\u200c\u0647\u0627\u06cc \u0628\u0627\u0632\u06cc \u0628\u0631 \u0627\u0633\u0627\u0633 \u0648\u0631\u0648\u062f\u06cc \u0648 \u0642\u0648\u0627\u0646\u06cc\u0646 \u0628\u0627\u0632\u06cc.<\/li>\n\n\n\n
    3. \u062a\u0631\u0633\u06cc\u0645 (Rendering<\/code>):<\/strong> \u067e\u0627\u06a9 \u06a9\u0631\u062f\u0646 canvas<\/code> \u0648 \u062a\u0631\u0633\u06cc\u0645 \u0645\u062c\u062f\u062f \u062a\u0645\u0627\u0645 \u0639\u0646\u0627\u0635\u0631 \u0628\u0627\u0632\u06cc \u062f\u0631 \u0645\u0648\u0642\u0639\u06cc\u062a\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f.<\/li>\n<\/ol>\n\n\n\n
      \u06cc\u06a9 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0633\u0627\u062f\u0647 \u0627\u0632 \u062d\u0644\u0642\u0647 \u0628\u0627\u0632\u06cc \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u0628\u0627\u0634\u062f:<\/p>\n\n\n\n
      function gameLoop() {\n    \/\/ \u067e\u0631\u062f\u0627\u0632\u0634 \u0648\u0631\u0648\u062f\u06cc\n    update();\n    \/\/ \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0648\u0636\u0639\u06cc\u062a \u0628\u0627\u0632\u06cc\n    render();\n    \/\/ \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0641\u0631\u06cc\u0645 \u0628\u0639\u062f\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\n    requestAnimationFrame(gameLoop);\n}\n\nfunction update() {\n    \/\/ \u0645\u0646\u0637\u0642 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0648\u0636\u0639\u06cc\u062a \u0628\u0627\u0632\u06cc \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u06af\u06cc\u0631\u062f\n}\n\nfunction render() {\n    \/\/ \u067e\u0627\u06a9 \u06a9\u0631\u062f\u0646 canvas\n    ctx.clearRect(0, 0, canvas.width, canvas.height);\n    \/\/ \u0645\u0646\u0637\u0642 \u062a\u0631\u0633\u06cc\u0645 \u0639\u0646\u0627\u0635\u0631 \u0628\u0627\u0632\u06cc \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u06af\u06cc\u0631\u062f\n}\n\n\/\/ \u0634\u0631\u0648\u0639 \u062d\u0644\u0642\u0647 \u0628\u0627\u0632\u06cc\ngameLoop();<\/code><\/pre>\n\n\n\n
      \u062a\u0627\u0628\u0639 gameLoop<\/code> \u0628\u0647 \u0637\u0648\u0631 \u0645\u06a9\u0631\u0631 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f. requestAnimationFrame<\/code> \u06cc\u06a9 \u0631\u0648\u0634 \u06a9\u0627\u0631\u0622\u0645\u062f \u0628\u0631\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0627\u0633\u062a \u0632\u06cc\u0631\u0627 \u0646\u0631\u062e \u0641\u0631\u06cc\u0645 \u0631\u0627 \u0628\u0627 \u0646\u0631\u062e \u062a\u0627\u0632\u0647\u200c\u0633\u0627\u0632\u06cc \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0647\u0645\u0627\u0647\u0646\u06af \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n\n\n\n
      2.3. \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0631\u0648\u062f\u06cc:<\/strong><\/p>\n\n\n\n
      \u0628\u0631\u0627\u06cc \u062a\u0639\u0627\u0645\u0644 \u0628\u0627 \u06a9\u0627\u0631\u0628\u0631\u060c \u0628\u0627\u06cc\u062f \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc \u0645\u0627\u0646\u0646\u062f \u0641\u0634\u0627\u0631 \u062f\u0627\u062f\u0646 \u06a9\u0644\u06cc\u062f\u0647\u0627 \u06cc\u0627 \u06a9\u0644\u06cc\u06a9 \u0645\u0627\u0648\u0633 \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0646\u06cc\u0645.<\/p>\n\n\n\n
      2.3.1. \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0631\u0648\u062f\u06cc \u0635\u0641\u062d\u0647 \u06a9\u0644\u06cc\u062f:<\/strong><\/p>\n\n\n\n
      const keys = {};\n\ndocument.addEventListener('keydown', function(event) {\n    keys[event.key] = true;\n});\n\ndocument.addEventListener('keyup', function(event) {\n    keys[event.key] = false;\n});\n\nfunction update() {\n    if (keys['ArrowUp']) {\n        \/\/ \u062d\u0631\u06a9\u062a \u0628\u0647 \u0628\u0627\u0644\u0627\n    }\n    if (keys['ArrowDown']) {\n        \/\/ \u062d\u0631\u06a9\u062a \u0628\u0647 \u067e\u0627\u06cc\u06cc\u0646\n    }\n    if (keys['ArrowLeft']) {\n        \/\/ \u062d\u0631\u06a9\u062a \u0628\u0647 \u0686\u067e\n    }\n    if (keys['ArrowRight']) {\n        \/\/ \u062d\u0631\u06a9\u062a \u0628\u0647 \u0631\u0627\u0633\u062a\n    }\n    \/\/ \u0633\u0627\u06cc\u0631 \u0645\u0646\u0637\u0642\u200c\u0647\u0627\u06cc \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc\n}<\/code><\/pre>\n\n\n\n
      \u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644\u060c \u06cc\u06a9 \u0634\u06cc\u0621 \u0628\u0647 \u0646\u0627\u0645 keys<\/code> \u0628\u0631\u0627\u06cc \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0648\u0636\u0639\u06cc\u062a \u0647\u0631 \u06a9\u0644\u06cc\u062f (\u0641\u0634\u0631\u062f\u0647 \u0634\u062f\u0647 \u06cc\u0627 \u062e\u06cc\u0631) \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f. \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc keydown<\/code> \u0648 keyup<\/code> \u0628\u0631\u0627\u06cc \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0627\u06cc\u0646 \u0634\u06cc\u0621 \u062b\u0628\u062a \u0645\u06cc\u200c\u0634\u0648\u0646\u062f. \u062f\u0631 \u062a\u0627\u0628\u0639 update<\/code>\u060c \u0648\u0636\u0639\u06cc\u062a \u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc \u062c\u0647\u062a\u200c\u062f\u0627\u0631 \u0628\u0631\u0631\u0633\u06cc \u0634\u062f\u0647 \u0648 \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u0645\u0631\u0628\u0648\u0637\u0647 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n\n\n\n
      2.3.2. \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0631\u0648\u062f\u06cc \u0645\u0627\u0648\u0633:<\/strong><\/p>\n\n\n\n
      canvas.addEventListener('mousedown', function(event) {\n    const mouseX = event.clientX - canvas.getBoundingClientRect().left;\n    const mouseY = event.clientY - canvas.getBoundingClientRect().top;\n    \/\/ \u0627\u0646\u062c\u0627\u0645 \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u0628\u0631 \u0627\u0633\u0627\u0633 \u0645\u0648\u0642\u0639\u06cc\u062a \u0645\u0627\u0648\u0633 (mouseX, mouseY)\n});<\/code><\/pre>\n\n\n\n
      \u0631\u0648\u06cc\u062f\u0627\u062f mousedown<\/code> \u0628\u0631\u0627\u06cc \u062a\u0634\u062e\u06cc\u0635 \u06a9\u0644\u06cc\u06a9 \u0645\u0627\u0648\u0633 \u0631\u0648\u06cc canvas<\/code> \u062b\u0628\u062a \u0645\u06cc\u200c\u0634\u0648\u062f. event.clientX<\/code> \u0648 event.clientY<\/code> \u0645\u062e\u062a\u0635\u0627\u062a \u0645\u0627\u0648\u0633 \u062f\u0631 \u067e\u0646\u062c\u0631\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f. \u0628\u0631\u0627\u06cc \u0628\u0647 \u062f\u0633\u062a \u0622\u0648\u0631\u062f\u0646 \u0645\u062e\u062a\u0635\u0627\u062a \u0645\u0627\u0648\u0633 \u0646\u0633\u0628\u062a \u0628\u0647 canvas<\/code>\u060c \u0645\u0648\u0642\u0639\u06cc\u062a canvas<\/code> \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 getBoundingClientRect()<\/code> \u06a9\u0645 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n\n\n\n
      2.4. \u062a\u0631\u0633\u06cc\u0645 (Rendering<\/code>):<\/strong><\/p>\n\n\n\n
      \u062a\u0627\u0628\u0639 render<\/code> \u0645\u0633\u0626\u0648\u0644 \u067e\u0627\u06a9 \u06a9\u0631\u062f\u0646 canvas<\/code> \u0648 \u062a\u0631\u0633\u06cc\u0645 \u062a\u0645\u0627\u0645 \u0639\u0646\u0627\u0635\u0631 \u0628\u0627\u0632\u06cc \u0627\u0633\u062a.<\/p>\n\n\n\n
      2.4.1. \u062a\u0631\u0633\u06cc\u0645 \u06cc\u06a9 \u0645\u0633\u062a\u0637\u06cc\u0644:<\/strong><\/p>\n\n\n\n
      function render() {\n    ctx.clearRect(0, 0, canvas.width, canvas.height);\n    ctx.fillStyle = 'blue';\n    ctx.fillRect(50, 50, 100, 100); \/\/ x, y, width, height\n}<\/code><\/pre>\n\n\n\n
      \u0627\u06cc\u0646 \u06a9\u062f \u06cc\u06a9 \u0645\u0633\u062a\u0637\u06cc\u0644 \u0622\u0628\u06cc \u0631\u0646\u06af \u0628\u0627 \u0639\u0631\u0636 \u0648 \u0627\u0631\u062a\u0641\u0627\u0639 100 \u067e\u06cc\u06a9\u0633\u0644 \u062f\u0631 \u0645\u0648\u0642\u0639\u06cc\u062a (50, 50) \u0631\u0648\u06cc canvas<\/code> \u062a\u0631\u0633\u06cc\u0645 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n\n\n\n
      2.4.2. \u062a\u0631\u0633\u06cc\u0645 \u06cc\u06a9 \u062f\u0627\u06cc\u0631\u0647:<\/strong><\/p>\n\n\n\n
      function render() {\n    ctx.clearRect(0, 0, canvas.width, canvas.height);\n    ctx.fillStyle = 'green';\n    ctx.beginPath();\n    ctx.arc(200, 200, 50, 0, Math.PI * 2); \/\/ x, y, radius, startAngle, endAngle\n    ctx.fill();\n}<\/code><\/pre>\n\n\n\n
      \u0627\u06cc\u0646 \u06a9\u062f \u06cc\u06a9 \u062f\u0627\u06cc\u0631\u0647 \u0633\u0628\u0632 \u0631\u0646\u06af \u0628\u0627 \u0634\u0639\u0627\u0639 50 \u067e\u06cc\u06a9\u0633\u0644 \u062f\u0631 \u0645\u0648\u0642\u0639\u06cc\u062a (200, 200) \u062a\u0631\u0633\u06cc\u0645 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n\n\n\n
      2.4.3. \u062a\u0631\u0633\u06cc\u0645 \u0645\u062a\u0646:<\/strong><\/p>\n\n\n\n
      function render() {\n    ctx.clearRect(0, 0, canvas.width, canvas.height);\n    ctx.fillStyle = 'black';\n    ctx.font = '20px Arial';\n    ctx.fillText('\u0633\u0644\u0627\u0645 \u062f\u0646\u06cc\u0627!', 10, 30); \/\/ text, x, y\n}<\/code><\/pre>\n\n\n\n
      \u0627\u06cc\u0646 \u06a9\u062f \u0645\u062a\u0646 “\u0633\u0644\u0627\u0645 \u062f\u0646\u06cc\u0627!” \u0631\u0627 \u0628\u0627 \u0641\u0648\u0646\u062a Arial<\/code> \u0628\u0647 \u0627\u0646\u062f\u0627\u0632\u0647 20 \u067e\u06cc\u06a9\u0633\u0644 \u062f\u0631 \u0645\u0648\u0642\u0639\u06cc\u062a (10, 30) \u062a\u0631\u0633\u06cc\u0645 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n\n\n\n
      3. \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0636\u0639\u06cc\u062a \u0628\u0627\u0632\u06cc:<\/h2>\n\n\n\n
      \u062f\u0631 \u0628\u0627\u0632\u06cc\u200c\u0647\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647\u200c\u062a\u0631\u060c \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0636\u0639\u06cc\u062a\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0628\u0627\u0632\u06cc (\u0645\u0627\u0646\u0646\u062f \u0635\u0641\u062d\u0647 \u0634\u0631\u0648\u0639\u060c \u0635\u0641\u062d\u0647 \u0628\u0627\u0632\u06cc\u060c \u0635\u0641\u062d\u0647 \u067e\u0627\u06cc\u0627\u0646) \u0636\u0631\u0648\u0631\u06cc \u0627\u0633\u062a. \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0627\u0632 \u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u0628\u0631\u0627\u06cc \u067e\u06cc\u06af\u06cc\u0631\u06cc \u0648\u0636\u0639\u06cc\u062a \u0641\u0639\u0644\u06cc \u0628\u0627\u0632\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f:<\/p>\n\n\n\n
      let gameState = 'loading'; \/\/ \u06cc\u0627 'playing', 'gameOver'\n\nfunction gameLoop() {\n    \/\/ ...\n    if (gameState === 'loading') {\n        \/\/ \u0646\u0645\u0627\u06cc\u0634 \u0635\u0641\u062d\u0647 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc\n    } else if (gameState === 'playing') {\n        update();\n        render();\n    } else if (gameState === 'gameOver') {\n        \/\/ \u0646\u0645\u0627\u06cc\u0634 \u0635\u0641\u062d\u0647 \u067e\u0627\u06cc\u0627\u0646 \u0628\u0627\u0632\u06cc\n    }\n    requestAnimationFrame(gameLoop);\n}<\/code><\/pre>\n\n\n\n
      4. \u0645\u062b\u0627\u0644 \u0633\u0627\u062f\u0647: \u062d\u0631\u06a9\u062a \u06cc\u06a9 \u0645\u0633\u062a\u0637\u06cc\u0644 \u0628\u0627 \u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc \u062c\u0647\u062a\u200c\u062f\u0627\u0631:<\/h2>\n\n\n\n
      \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06cc\u06a9 \u0645\u062b\u0627\u0644 \u06a9\u0627\u0645\u0644 \u0627\u0632 \u06cc\u06a9 \u0628\u0627\u0632\u06cc \u0628\u0633\u06cc\u0627\u0631 \u0633\u0627\u062f\u0647 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u06cc\u06a9 \u0645\u0633\u062a\u0637\u06cc\u0644 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc \u062c\u0647\u062a\u200c\u062f\u0627\u0631 \u062d\u0631\u06a9\u062a \u0645\u06cc\u200c\u06a9\u0646\u062f:<\/p>\n\n\n\n
      game<\/code>.js<\/code>:<\/strong><\/p>\n\n\n\n
      const canvas = document.getElementById('gameCanvas');\nconst ctx = canvas.getContext('2d');\n\ncanvas.width = 400;\ncanvas.height = 300;\n\nconst player = {\n    x: canvas.width \/ 2 - 25,\n    y: canvas.height \/ 2 - 25,\n    width: 50,\n    height: 50,\n    speed: 5\n};\n\nconst keys = {};\n\ndocument.addEventListener('keydown', function(event) {\n    keys[event.key] = true;\n});\n\ndocument.addEventListener('keyup', function(event) {\n    keys[event.key] = false;\n});\n\nfunction update() {\n    if (keys['ArrowUp']) {\n        player.y -= player.speed;\n    }\n    if (keys['ArrowDown']) {\n        player.y += player.speed;\n    }\n    if (keys['ArrowLeft']) {\n        player.x -= player.speed;\n    }\n    if (keys['ArrowRight']) {\n        player.x += player.speed;\n    }\n\n    \/\/ \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u062e\u0631\u0648\u062c \u0645\u0633\u062a\u0637\u06cc\u0644 \u0627\u0632 \u0645\u0631\u0632\u0647\u0627\u06cc canvas\n    if (player.x < 0) player.x = 0;\n    if (player.y < 0) player.y = 0;\n    if (player.x + player.width > canvas.width) player.x = canvas.width - player.width;\n    if (player.y + player.height > canvas.height) player.y = canvas.height - player.height;\n}\n\nfunction render() {\n    ctx.clearRect(0, 0, canvas.width, canvas.height);\n    ctx.fillStyle = 'red';\n    ctx.fillRect(player.x, player.y, player.width, player.height);\n}\n\nfunction gameLoop() {\n    update();\n    render();\n    requestAnimationFrame(gameLoop);\n}\n\ngameLoop();<\/code><\/pre>\n\n\n\n
      \u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644:<\/p>\n\n\n\n