{"id":345,"date":"2013-12-04T00:08:52","date_gmt":"2013-12-03T22:08:52","guid":{"rendered":"http:\/\/www.incodes.net\/?p=345"},"modified":"2013-12-04T00:16:27","modified_gmt":"2013-12-03T22:16:27","slug":"%d9%83%d9%8a%d9%81-%d8%aa%d8%b5%d9%85%d9%85-%d9%84%d8%b9%d8%a8%d8%a9-%d8%ac%d9%88%d8%a7%d9%84-%d8%a8%d8%a7%d8%b3%d8%aa%d8%ae%d8%af%d8%a7%d9%85-html5","status":"publish","type":"post","link":"https:\/\/www.incodes.net\/?p=345","title":{"rendered":"\u0643\u064a\u0641 \u062a\u0635\u0645\u0645 \u0644\u0639\u0628\u0629 \u062c\u0648\u0627\u0644 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 HTML5"},"content":{"rendered":"

<\/h1>\n

\u0643\u064a\u0641 \u062a\u0635\u0645\u0645 \u0644\u0639\u0628\u0629 \u062c\u0648\u0627\u0644 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 <\/span>HTML5<\/span><\/span><\/h1>\n

 <\/p>\n

\"bubbles\"<\/a>
bubbles<\/figcaption><\/figure>\n

 <\/p>\n

\u0647\u0644 \u0623\u0646\u062a \u0645\u0646 \u0627\u0644\u0645\u0647\u062a\u0645\u064a\u0646 \u0628\u062a\u0637\u0648\u064a\u0631 \u0623\u0644\u0639\u0627\u0628 \u0627\u0644\u062c\u0648\u0627\u0644\u061f\u00a0\r\n<\/span>\r\n\u0647\u0644 \u062a\u0631\u064a\u062f \u0637\u0631\u064a\u0642\u0647 \u0628\u0633\u064a\u0637\u0629 \u0644\u062f\u062e\u0648\u0644 \u0647\u0630\u0627 \u0627\u0644\u0645\u062c\u0627\u0644\u061f\r\n\r\n<\/span>\u0644\u0633\u062a \u0645\u0636\u0637\u0631\u0627 \u0623\u0646 \u062a\u0643\u0648\u0646 \u062e\u0628\u064a\u0631\u0627 \u0628\u0644\u063a\u0627\u062a <\/span>Java \u0623\u0648 <\/span>Objective-C \u2026\r\n\r\nHTML5 + JavaScript \u0645\u0639 \u0634\u0648\u064a\u0629 \u0631\u064a\u0627\u0636\u064a\u0627\u062a \u062a\u0643\u0641\u064a \u0644\u0623\u0646 \u062a\u0635\u0645\u0645 \u0644\u0639\u0628\u062a\u0643 \u0627\u0644\u0627\u0648\u0644\u0649<\/span>.<\/pre>\n
\u00a0<\/span><\/span><\/p>\n
\u0641\u0644\u0646\u0628\u062f\u0623 \u0639\u0644\u0649 \u0628\u0631\u0643\u0629 \u0627\u0644\u0644\u0647<\/span><\/span>…<\/span><\/p>\n
<\/h1>\n
\u0641\u064a \u0646\u0647\u0627\u064a\u0629 \u0647\u0630\u0627 \u0627\u0644\u0645\u0642\u0627\u0644 \u0633\u062a\u0643\u0648\u0646 \u0642\u0627\u062f\u0631 \u0639\u0644\u0649<\/span>:<\/h1>\n
– \u0641\u0647\u0645 \u0648\u0628\u0634\u0643\u0644 \u0645\u0628\u0633\u0637 \u0645\u0628\u0639\u0636 \u0645\u0628\u0627\u062f\u0626 \u0628\u0631\u0645\u062c\u0629 \u0627\u0644\u0623\u0644\u0639\u0627\u0628<\/span>.<\/p>\n
– \u0627\u0644\u062a\u0639\u0631\u0641 \u0639\u0644\u0649 \u0628\u0639\u0636 \u0627\u0644\u0645\u0641\u0627\u0647\u064a\u0645 \u0648\u0627\u0644\u0645\u0635\u0637\u0644\u062d\u0627\u062a \u0627\u0644\u062e\u0627\u0635\u0629 \u0628\u0647\u0630\u0627 \u0627\u0644\u0645\u062c\u0627\u0644<\/span>.<\/p>\n
– \u0628\u0646\u0627\u0621 \u0627\u0644\u0644\u0639\u0628\u0647 \u0627\u0644\u062a\u0627\u0644\u064a\u0629<\/span>: \u064a\u0645\u0643\u0646\u0643 \u062a\u062c\u0631\u0628\u062a\u0647\u0627 \u0645\u0646 \u0647\u0646\u0627\u00a0<\/span><\/a><\/span><\/p>\n
<\/h1>\n

\n<\/span>\u0648\u0644\u0643\u0646 \u0644\u0645\u0627\u0630\u0627 <\/span>HTML5<\/span>\u061f<\/span><\/h1>\n
\u0628\u0628\u0633\u0627\u0637\u0647 \u064a\u0645\u0643\u0646\u0646\u0627 \u0627\u0644\u0642\u0648\u0644 \u0627\u0646 <\/span>HTML5 \u062a\u062d\u0642\u0642 \u0627\u0644\u0647\u062f\u0641 \u0627\u0644\u0628\u0631\u0645\u062c\u064a \u0627\u0644\u0645\u0646\u0634\u0648\u062f \u201c\u0627\u0643\u062a\u0628 \u0627\u0644\u0643\u0648\u062f \u0645\u0631\u0629 \u0648\u0627\u062d\u062f\u0629 \u2026 \u064a\u0639\u0645\u0644 \u0641\u064a \u0643\u0644 \u0645\u0643\u0627\u0646\u201d <\/span>write once \u2026 run anywhere
\n\u0623\u064a \u062a\u0639\u0645\u0644 \u0639\u0644\u0649 \u0623\u062c\u0647\u0632\u0629 \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644 \u0628\u0646\u0641\u0633 \u0627\u0644\u062c\u0648\u062f\u0629 \u0627\u0644\u062a\u064a \u062a\u0639\u0645\u0644 \u0628\u0647\u0627 \u0639\u0644\u0649 \u0623\u062c\u0647\u0632\u0629 \u0627\u0644\u062d\u0648\u0627\u0633\u064a\u0628 \u0648\u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0646\u0641\u0633 \u0627\u0644\u0643\u0648\u062f<\/span>.<\/p>\n
\u0625\u0644\u064a\u0643 \u0628\u0639\u0636 \u0627\u0644\u0623\u0645\u062b\u0644\u0647 \u0639\u0646 \u0627\u0644\u0639\u0627\u0628 \u062a\u0645 \u0627\u0646\u0634\u0627\u0624\u0647\u0627 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 <\/span>HTML5<\/p>\n
Nutmeg<\/span><\/span><\/a><\/p>\n
Lunch Bug<\/span><\/span><\/a><\/p>\n
\u0623\u0645\u0648\u0631 \u064a\u062c\u0628 \u0627\u0644\u0627\u0646\u062a\u0628\u0627\u0647 \u0644\u0647\u0627<\/span>:<\/h1>\n
\u0642\u0628\u0644 \u0623\u0646 \u0646\u0628\u062f\u0623 \u064a\u062c\u0628 \u0627\u0646 \u0646\u0643\u0648\u0646 \u0639\u0644\u0649 \u0646\u0647\u062a\u0645 \u0628\u0627\u0644\u0623\u0645\u0648\u0631 \u0627\u0644\u062a\u0627\u0644\u064a\u0629<\/span>:<\/p>\n
\u0623\u0648\u0644\u0627\u064b <\/span>– \u0627\u0644\u0623\u062f\u0627\u0621<\/span>:<\/h2>\n
\u0645\u062a\u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0627\u0646\u062a\u0631\u0646\u062a \u0628\u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644\u0627\u062a \u0648 \u0628\u0627\u0644\u0631\u063a\u0645 \u0645\u0646 \u0627\u0644\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0633\u0631\u064a\u0639 \u0644\u064a\u0633\u062a \u062f\u0627\u0639\u0645\u0647 \u0628\u0634\u0643\u0644 \u0643\u0628\u064a\u0631 \u0644\u0645\u062d\u0631\u0643\u0627\u062a \u0627\u0644\u062c\u0627\u0641\u0627 \u0633\u0643\u0631\u064a\u0628\u062a \u0628\u0645\u0627 \u0641\u064a\u0647\u0627 <\/span>IOS6 \u0648 <\/span>Chrome beta.<\/p>\n
\u062b\u0627\u0646\u064a\u0627\u064b <\/span>– <\/span>\u0627\u0644\u062f\u0642\u0629<\/span>:<\/span><\/h2>\n
\u0645\u0627 \u064a\u0642\u0644\u0642\u0646\u0627 \u0647\u0646\u0627 \u0647\u0648 \u0648\u062c\u0648\u062f \u062a\u0646\u0648\u0639 \u0643\u0628\u064a\u0631 \u0641\u064a \u0627\u0644\u062f\u0642\u0629 \u0644\u0623\u062c\u0647\u0632\u0629 \u0627\u0644\u0627\u0646\u062f\u0631\u0648\u064a\u062f \u0648\u0627\u0644\u0627\u064a\u0641\u0648\u0646 \u0648\u0627\u0644\u0627\u064a\u0628\u0627\u062f<\/span>.<\/p>\n
\u062b\u0627\u0644\u062b\u0627\u064b <\/span>– <\/span>\u0627\u0644\u0635\u0648\u062a<\/span>:<\/span><\/h2>\n
\u064a\u062c\u0628 \u0627\u0644\u0627\u0634\u0627\u0631\u0629 \u0647\u0646\u0627 \u0625\u0644\u0649 \u0623\u0646 \u062f\u0639\u0645 \u0627\u0644\u0635\u0648\u062a \u0641\u064a \u0645\u062a\u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644 \u0636\u0639\u064a\u0641<\/span>.<\/p>\n
\u062e\u0637\u0648\u0627\u062a \u0627\u0644\u0639\u0645\u0644<\/span><\/h1>\n
\u0628\u0628\u0633\u0627\u0637\u0647 \u0627\u0644\u0644\u0639\u0628\u0647 \u0627\u0644\u062a\u064a \u0633\u0646\u0639\u0645\u0644 \u0639\u0644\u064a\u0647\u0627 \u062a\u062a\u0644\u062e\u0635 \u0628\u0645\u0627 \u064a\u0644\u064a<\/span>:\u00a0\u064a\u062c\u0628 \u0639\u0644\u0649 \u0627\u0644\u0644\u0627\u0639\u0628 \u0623\u0646 \u064a\u0642\u0648\u0645 \u0628\u0625\u0635\u0627\u0628\u0629 \u0627\u0644\u0641\u0642\u0627\u0639\u0627\u062a \u0642\u0628\u0644 \u0623\u0646 \u062a\u0635\u0644 \u0644\u0642\u0645\u0629 \u0627\u0644\u0634\u0627\u0634\u0629<\/span>.<\/p>\n
\u0633\u0646\u0642\u0648\u0645 \u0628\u062a\u0642\u0633\u064a\u0645 \u0627\u0644\u0639\u0645\u0644 \u0625\u0644\u0649 \u0627\u0644\u062e\u0637\u0648\u0627\u062a \u0627\u0644\u062a\u0627\u0644\u064a\u0647<\/span>:<\/p>\n
    \n
  1. \n
    \u0627\u0644\u0639\u0645\u0644 \u0639\u0644\u0649 \u0645\u0644\u0627\u0626\u0645\u0647 \u0644\u0639\u0628\u062a\u0646\u0627 \u0645\u0639 \u0642\u064a\u0627\u0633 \u0634\u0627\u0634\u0627\u062a \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644<\/span>.<\/p>\n<\/li>\n
  2. \n
    \u0646\u0638\u0631\u0629 \u0633\u0631\u064a\u0639\u0647 \u0639\u0644\u0649 <\/span>convas \u0627\u0644\u0645\u0641\u064a\u062f\u0647 \u0644\u0644\u0631\u0633\u0645 \u0639\u0644\u0649 \u0627\u0644\u0634\u0627\u0634\u0629<\/span>.<\/p>\n<\/li>\n
  3. \n
    \u0627\u0644\u062a\u0639\u0627\u0645\u0644 \u0645\u0639 \u0623\u062d\u062f\u0627\u062b \u0627\u0644\u0644\u0645\u0633<\/span>.<\/p>\n<\/li>\n
  4. \n
    \u0635\u0646\u0627\u0639\u0647 \u062d\u0644\u0642\u0629 \u0627\u0644\u0644\u0639\u0628\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629<\/span>.<\/p>\n<\/li>\n
  5. \n
    \u0627\u0644\u062a\u0639\u0631\u0641 \u0639\u0644\u0649 \u0645\u0635\u0637\u0644\u062d \u201c<\/span>entities\u201d.<\/p>\n<\/li>\n
  6. \n
    \u0627\u0636\u0627\u0641\u0629 \u0643\u0634\u0641 \u0627\u0644\u062a\u0635\u0627\u062f\u0645 \u0648\u0627\u0644\u062a\u0639\u0627\u0645\u0644 \u0645\u0639 \u0628\u0639\u0636 \u0627\u0644\u0639\u0644\u0627\u0642\u0627\u062a \u0627\u0644\u0631\u064a\u0627\u0636\u064a\u0647<\/span>.<\/p>\n<\/li>\n<\/ol>\n
     <\/p>\n
     <\/p>\n
    \u0623\u0648\u0644\u0627\u064b <\/span>– \u0627\u0644\u0639\u0645\u0644 \u0639\u0644\u0649 \u0645\u0644\u0627\u0626\u0645\u0629 \u0644\u0639\u0628\u062a\u0646\u0627 \u0645\u0639 \u0642\u064a\u0627\u0633 \u0634\u0627\u0634\u0627\u062a \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644<\/span>:<\/h2>\n
    \u0643\u0645\u0627 \u0627\u0634\u0631\u0646\u0627 \u0633\u0627\u0628\u0642\u0627\u060c \u0647\u0646\u0627\u0643 \u062a\u0646\u0648\u0639 \u0643\u0628\u064a\u0631 \u0641\u064a \u0645\u0642\u0627\u0633\u0627\u062a \u0627\u0644\u0623\u062c\u0647\u0632\u0629 \u0627\u0644\u0630\u0643\u064a\u0647 \u0647\u0630\u0627 \u064a\u0639\u0646\u064a \u064a\u062c\u0628 \u0639\u0644\u064a\u0646\u0627 \u0623\u0646 \u0646\u0644\u0627\u0626\u0645 \u0648\u0627\u062c\u0647\u0629 \u0639\u0631\u0636\u0646\u0627 <\/span>convas \u0645\u0639 \u0634\u0627\u0634\u0627\u062a \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644\u0627\u062a <\/span>viewport.\u0647\u0630\u0647 \u0627\u0644\u0645\u0644\u0627\u0626\u0645\u0629 \u0631\u0628\u0645\u0627 \u062a\u0633\u0628\u0628 \u062a\u0631\u0627\u062c\u0639 \u062c\u0648\u062f\u0629 \u0627\u0644\u0635\u0648\u0631\u0629<\/span>.<\/p>\n
    \u064a\u0645\u0643\u0646 \u0623\u0646 \u0646\u062a\u0639\u0627\u0645\u0644 \u0645\u0639 \u0647\u0630\u0647 \u0627\u0644\u0645\u0634\u0643\u0644\u0629 \u0628\u062e\u062f\u0639\u0629 \u0628\u0633\u064a\u0637\u0629 \u0648\u0647\u064a \u062c\u0639\u0644 <\/span>convas \u0635\u063a\u064a\u0631\u0629 \u0645\u0645\u0627 \u064a\u0632\u064a\u062f \u0641\u064a \u0627\u0644\u0623\u062f\u0627\u0621<\/span>.<\/p>\n
    \u0647\u0630\u0627 \u0627\u0644\u0643\u0648\u062f \u0633\u064a\u0643\u0648\u0646 \u0627\u0633\u0627\u0633 \u0639\u0645\u0644\u0646\u0627<\/span>:<\/p>\n
    \n
    <!DOCTYPE HTML><\/span><\/span><\/code><\/span>\r\n<<\/span><\/span><\/code>html <\/span><\/span><\/code>lang<\/span><\/span><\/code>=\"<\/span><\/span><\/code>en<\/span><\/span><\/code>\"><\/span><\/span><\/code><\/span>\r\n<<\/span><\/span><\/code>head<\/span><\/span><\/code>><\/span><\/span><\/code><\/span>\r\n<<\/span><\/span><\/code>meta <\/span><\/span><\/code>charset<\/span><\/span><\/code>=\"<\/span><\/span><\/code>UTF-8<\/span><\/span><\/code>\"><\/span><\/span><\/code><\/span>\r\n\r\n<<\/span><\/span><\/code>meta <\/span><\/span><\/code>name<\/span><\/span><\/code>=\"<\/span><\/span><\/code>viewport<\/span><\/span><\/code>\"<\/span><\/span><\/code><\/code>content<\/span><\/span><\/code>=\"<\/span><\/span><\/code>width<\/span><\/span><\/code>=<\/span><\/span><\/code>device-width, <\/span><\/span><\/code>\r\n<\/code>user-scalable<\/span><\/span><\/code>=<\/span><\/span><\/code>no, initial-scale<\/span><\/span><\/code>=<\/span><\/span><\/code>1, maximum-scale<\/span><\/span><\/code>=<\/span><\/span><\/code>1, user-scalable<\/span><\/span><\/code>=<\/span><\/span><\/code>0<\/span><\/span><\/code>\"<\/span><\/span><\/code><\/code>\/><\/span><\/span><\/code>\r\n<<\/span><\/span><\/code>meta <\/span><\/span><\/code>name<\/span><\/span><\/code>=\"<\/span><\/span><\/code>apple-mobile-web-app-capable<\/span><\/span><\/code>\"<\/span><\/span><\/code><\/code>content<\/span><\/span><\/code>=\"<\/span><\/span><\/code>yes<\/span><\/span><\/code>\"<\/span><\/span><\/code><\/code>\/><\/span><\/span><\/code><\/span>\r\n<<\/span><\/span><\/code>meta <\/span><\/span><\/code>name<\/span><\/span><\/code>=\"<\/span><\/span><\/code>apple-mobile-web-app-status-bar-style<\/span><\/span><\/code>\"<\/span><\/span><\/code><\/code>content<\/span><\/span><\/code>=\"<\/span><\/span><\/code>black-translucent<\/span><\/span><\/code>\"<\/span><\/span><\/code><\/code>\/><\/span><\/span><\/code><\/span>\r\n\r\n<<\/span><\/span><\/code>style <\/span><\/span><\/code>type<\/span><\/span><\/code>=\"<\/span><\/span><\/code>text\/css<\/span><\/span><\/code>\"><\/span><\/span><\/code>\r\nbody <\/span><\/span><\/code>{<\/span><\/span><\/code><\/code>margin<\/span><\/span><\/code>:<\/span><\/span><\/code> 0<\/span><\/span><\/code>;<\/span><\/span><\/code><\/code>padding<\/span><\/span><\/code>:<\/span><\/span><\/code> 0<\/span><\/span><\/code>;<\/span><\/span><\/code><\/code>background<\/span><\/span><\/code>:<\/span><\/span><\/code> #000<\/span><\/span><\/code>;}<\/span><\/span><\/code>\r\ncanvas <\/span><\/span><\/code>{<\/span><\/span><\/code><\/code>display<\/span><\/span><\/code>:<\/span><\/span><\/code> block<\/span><\/span><\/code>;<\/span><\/span><\/code><\/code>margin<\/span><\/span><\/code>:<\/span><\/span><\/code> 0 auto<\/span><\/span><\/code>;<\/span><\/span><\/code><\/code>background<\/span><\/span><\/code>:<\/span><\/span><\/code> #fff<\/span><\/span><\/code>;<\/span><\/span><\/code><\/code>}<\/span><\/span><\/code>\r\n<\/<\/span><\/span><\/code>style<\/span><\/span><\/code>><\/span><\/span><\/code><\/span>\r\n\r\n<\/<\/span><\/span><\/code>head<\/span><\/span><\/code>><\/span><\/span><\/code><\/span>\r\n\r\n<<\/span><\/span><\/code>body<\/span><\/span><\/code>><\/span><\/span><\/code><\/span>\r\n\r\n<<\/span><\/span><\/code>canvas<\/span><\/span><\/code>><\/span><\/span><\/code><\/code><\/<\/span><\/span><\/code>canvas<\/span><\/span><\/code>><\/span><\/span><\/code>\r\n<<\/span><\/span><\/code>script<\/span><\/span><\/code>><\/span><\/span><\/code>\r\n\/\/ all the code goes here<\/span><\/span><\/code>\r\n<\/<\/span><\/span><\/code>script<\/span><\/span><\/code>><\/span><\/span><\/code><\/span>\r\n\r\n<\/<\/span><\/span><\/code>body<\/span><\/span><\/code>><\/span><\/span><\/code><\/span>\r\n<\/<\/span><\/span><\/code>html<\/span><\/span><\/code>><\/span><\/span><\/code><\/pre>\n<\/div>\n
    \u0627\u064a\u0636\u0627\u062d\u0627\u062a \u062d\u0648\u0644 \u0627\u0644\u0643\u0648\u062f<\/span>:<\/p>\n
    – viewport meta \u062a\u062e\u0628\u0631 \u0645\u062a\u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644 \u0628\u062a\u0639\u0637\u064a\u0644 \u0627\u0645\u0643\u0627\u0646\u064a\u0629 \u062a\u063a\u064a\u064a\u0631 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u0627\u0648 \u0627\u0644\u0644\u0627\u0639\u0628 \u0644\u0644\u0642\u064a\u0627\u0633 \u0648 \u0631\u0633\u0645 \u062d\u062c\u0645 \u0643\u0627\u0645\u0644 \u0631\u063a\u0645 \u062a\u0635\u063a\u064a\u0631 \u0627\u0648 \u062a\u0643\u0628\u064a\u0631 \u0627\u0644\u0635\u0648\u0631\u0629<\/span>.<\/p>\n
    – Apple meta \u062a\u0633\u0645\u062d \u0644\u0644\u0639\u0628\u0629 \u0623\u0646 \u062a\u062d\u0641\u0638 <\/span>bookmarked.<\/p>\n
    \u0627\u0646\u0638\u0631 \u0644\u0645\u0627 \u064a\u0644\u064a<\/span>:<\/p>\n
    \n
    \/\/ namespace our game<\/span><\/span><\/span><\/code>\r\nvar<\/span><\/span><\/span><\/code> POP <\/span><\/span><\/code>=<\/span><\/span><\/span><\/code><\/code>{<\/span><\/span><\/span><\/code>\r\n\r\n<\/code><\/code>\/\/ set up some initial values<\/span><\/span><\/span><\/code>\r\n<\/code>WIDTH<\/span><\/span><\/code>:<\/span><\/span><\/span><\/code><\/code>320<\/span><\/span><\/span><\/code>,<\/span><\/span><\/span><\/code><\/code>\r\n<\/code>HEIGHT<\/span><\/span><\/code>:<\/span><\/span><\/span><\/code><\/code>480<\/span><\/span><\/span><\/code>,<\/span><\/span><\/span><\/code><\/code>\r\n<\/code><\/code>\/\/ we'll set the rest of these<\/span><\/span><\/span><\/code>\r\n<\/code><\/code>\/\/ in the init function<\/span><\/span><\/span><\/code>\r\n<\/code>RATIO<\/span><\/span><\/code>:<\/span><\/span><\/span><\/code><\/code>null<\/span><\/span><\/span><\/code>,<\/span><\/span><\/span><\/code>\r\n<\/code>currentWidth<\/span><\/span><\/code>:<\/span><\/span><\/span><\/code><\/code>null<\/span><\/span><\/span><\/code>,<\/span><\/span><\/span><\/code>\r\n<\/code>currentHeight<\/span><\/span><\/code>:<\/span><\/span><\/span><\/code><\/code>null<\/span><\/span><\/span><\/code>,<\/span><\/span><\/span><\/code>\r\n<\/code>canvas<\/span><\/span><\/code>:<\/span><\/span><\/span><\/code><\/code>null<\/span><\/span><\/span><\/code>,<\/span><\/span><\/span><\/code>\r\n<\/code>ctx<\/span><\/span><\/code>:<\/span><\/span><\/span><\/code><\/code>null<\/span><\/span><\/span><\/code>,<\/span><\/span><\/span><\/code>\r\n\r\n<\/code>init<\/span><\/span><\/code>:<\/span><\/span><\/span><\/code><\/code>function<\/span><\/span><\/span><\/code>()<\/span><\/span><\/span><\/code><\/code>{<\/span><\/span><\/span><\/code>\r\n\r\n<\/code><\/code>\/\/ the proportion of width to height<\/span><\/span><\/span><\/code>\r\n<\/code>POP<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>RATIO <\/span><\/span><\/code>=<\/span><\/span><\/span><\/code> POP<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>WIDTH <\/span><\/span><\/code>\/<\/span><\/span><\/span><\/code> POP<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>HEIGHT<\/span><\/span><\/code>;<\/span><\/span><\/span><\/code>\r\n<\/code><\/code>\/\/ these will change when the screen is resized<\/span><\/span><\/span><\/code>\r\n<\/code>POP<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>currentWidth <\/span><\/span><\/code>=<\/span><\/span><\/span><\/code> POP<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>WIDTH<\/span><\/span><\/code>;<\/span><\/span><\/span><\/code>\r\n<\/code>POP<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>currentHeight <\/span><\/span><\/code>=<\/span><\/span><\/span><\/code> POP<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>HEIGHT<\/span><\/span><\/code>;<\/span><\/span><\/span><\/code>\r\n<\/code><\/code>\/\/ this is our canvas element<\/span><\/span><\/span><\/code>\r\n<\/code>POP<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>canvas <\/span><\/span><\/code>=<\/span><\/span><\/span><\/code> document<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>getElementsByTagName<\/span><\/span><\/span><\/code>(<\/span><\/span><\/span><\/code>'canvas'<\/span><\/span><\/span><\/code>)[<\/span><\/span><\/span><\/code>0<\/span><\/span><\/span><\/code>];<\/span><\/span><\/span><\/code>\r\n<\/code><\/code>\/\/ setting this is important<\/span><\/span><\/span><\/code>\r\n<\/code><\/code>\/\/ otherwise the browser will<\/span><\/span><\/span><\/code>\r\n<\/code><\/code>\/\/ default to 320 x 200<\/span><\/span><\/span><\/code>\r\n<\/code>POP<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>canvas<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>width <\/span><\/span><\/code>=<\/span><\/span><\/span><\/code> POP<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>WIDTH<\/span><\/span><\/code>;<\/span><\/span><\/span><\/code>\r\n<\/code>POP<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>canvas<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>height <\/span><\/span><\/code>=<\/span><\/span><\/span><\/code> POP<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>HEIGHT<\/span><\/span><\/code>;<\/span><\/span><\/span><\/code>\r\n<\/code><\/code>\/\/ the canvas context enables us to <\/span><\/span><\/span><\/code>\r\n<\/code><\/code>\/\/ interact with the canvas api<\/span><\/span><\/span><\/code>\r\n<\/code>POP<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>ctx <\/span><\/span><\/code>=<\/span><\/span><\/span><\/code> POP<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>canvas<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>getContext<\/span><\/span><\/span><\/code>(<\/span><\/span><\/span><\/code>'2d'<\/span><\/span><\/span><\/code>);<\/span><\/span><\/span><\/code>\r\n\r\n<\/code><\/code>\/\/ we're ready to resize<\/span><\/span><\/span><\/code>\r\n<\/code>POP<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>resize<\/span><\/span><\/span><\/code>();<\/span><\/span><\/span><\/code>\r\n\r\n<\/code>},<\/span><\/span><\/span><\/code>\r\n\r\n<\/code>resize<\/span><\/span><\/code>:<\/span><\/span><\/span><\/code><\/code>function<\/span><\/span><\/span><\/code>()<\/span><\/span><\/span><\/code><\/code>{<\/span><\/span><\/span><\/code>\r\n\r\n<\/code>POP<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>currentHeight <\/span><\/span><\/code>=<\/span><\/span><\/span><\/code> window<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>innerHeight<\/span><\/span><\/code>;<\/span><\/span><\/span><\/code>\r\n<\/code><\/code>\/\/ resize the width in proportion<\/span><\/span><\/span><\/code>\r\n<\/code><\/code>\/\/ to the new height<\/span><\/span><\/span><\/code>\r\n<\/code>POP<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>currentWidth <\/span><\/span><\/code>=<\/span><\/span><\/span><\/code> POP<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>currentHeight <\/span><\/span><\/code>*<\/span><\/span><\/span><\/code> POP<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>RATIO<\/span><\/span><\/code>;<\/span><\/span><\/span><\/code>\r\n\r\n<\/code><\/code>\/\/ this will create some extra space on the<\/span><\/span><\/span><\/code>\r\n<\/code><\/code>\/\/ page, allowing us to scroll past<\/span><\/span><\/span><\/code>\r\n<\/code><\/code>\/\/ the address bar, thus hiding it.<\/span><\/span><\/span><\/code>\r\n<\/code>if<\/span><\/span><\/span><\/code><\/code>(<\/span><\/span><\/span><\/code>POP<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>android <\/span><\/span><\/code>||<\/span><\/span><\/span><\/code> POP<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>ios<\/span><\/span><\/code>)<\/span><\/span><\/span><\/code><\/code>{<\/span><\/span><\/span><\/code>\r\n<\/code>document<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>body<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>style<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>height <\/span><\/span><\/code>=<\/span><\/span><\/span><\/code><\/code>(<\/span><\/span><\/span><\/code>window<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>innerHeight <\/span><\/span><\/code>+<\/span><\/span><\/span><\/code><\/code>50<\/span><\/span><\/span><\/code>)<\/span><\/span><\/span><\/code><\/code>+<\/span><\/span><\/span><\/code><\/code>'px'<\/span><\/span><\/span><\/code>;<\/span><\/span><\/span><\/code>\r\n<\/code>}<\/span><\/span><\/span><\/code>\r\n\r\n<\/code><\/code>\/\/ set the new canvas style width and height<\/span><\/span><\/span><\/code>\r\n<\/code><\/code>\/\/ note: our canvas is still 320 x 480, but<\/span><\/span><\/span><\/code>\r\n<\/code><\/code>\/\/ we're essentially scaling it with CSS<\/span><\/span><\/span><\/code>\r\n<\/code>POP<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>canvas<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>style<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>width <\/span><\/span><\/code>=<\/span><\/span><\/span><\/code> POP<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>currentWidth <\/span><\/span><\/code>+<\/span><\/span><\/span><\/code><\/code>'px'<\/span><\/span><\/span><\/code>;<\/span><\/span><\/span><\/code>\r\n<\/code>POP<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>canvas<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>style<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>height <\/span><\/span><\/code>=<\/span><\/span><\/span><\/code> POP<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>currentHeight <\/span><\/span><\/code>+<\/span><\/span><\/span><\/code><\/code>'px'<\/span><\/span><\/span><\/code>;<\/span><\/span><\/span><\/code>\r\n\r\n<\/code><\/code>\/\/ we use a timeout here because some mobile<\/span><\/span><\/span><\/code>\r\n<\/code><\/code>\/\/ browsers don't fire if there is not<\/span><\/span><\/span><\/code>\r\n<\/code><\/code>\/\/ a short delay<\/span><\/span><\/span><\/code>\r\n<\/code>window<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>setTimeout<\/span><\/span><\/span><\/code>(<\/span><\/span><\/span><\/code>function<\/span><\/span><\/span><\/code>()<\/span><\/span><\/span><\/code><\/code>{<\/span><\/span><\/span><\/code>\r\n<\/code>window<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>scrollTo<\/span><\/span><\/span><\/code>(<\/span><\/span><\/span><\/code>0<\/span><\/span><\/span><\/code>,<\/span><\/span><\/span><\/code>1<\/span><\/span><\/span><\/code>);<\/span><\/span><\/span><\/code>\r\n<\/code>},<\/span><\/span><\/span><\/code><\/code>1<\/span><\/span><\/span><\/code>);<\/span><\/span><\/span><\/code>\r\n<\/code>}<\/span><\/span><\/span><\/code>\r\n\r\n};<\/span><\/span><\/span><\/code>\r\n\r\nwindow<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>addEventListener<\/span><\/span><\/span><\/code>(<\/span><\/span><\/span><\/code>'load'<\/span><\/span><\/span><\/code>,<\/span><\/span><\/span><\/code> POP<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>init<\/span><\/span><\/code>,<\/span><\/span><\/span><\/code><\/code>false<\/span><\/span><\/span><\/code>);<\/span><\/span><\/span><\/code>\r\nwindow<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>addEventListener<\/span><\/span><\/span><\/code>(<\/span><\/span><\/span><\/code>'resize'<\/span><\/span><\/span><\/code>,<\/span><\/span><\/span><\/code> POP<\/span><\/span><\/code>.<\/span><\/span><\/span><\/code>resize<\/span><\/span><\/code>,<\/span><\/span><\/span><\/code><\/code>false<\/span><\/span><\/span><\/code>);<\/span><\/span><\/span><\/code><\/pre>\n<\/div>\n
    \u0627\u064a\u0636\u0627\u062d\u0627\u062a \u062d\u0648\u0644 \u0627\u0644\u0643\u0648\u062f<\/span>:<\/p>\n