{"id":22505,"date":"2024-10-14T12:13:43","date_gmt":"2024-10-14T05:13:43","guid":{"rendered":"https:\/\/dp.rmutsv.ac.th\/?p=22505"},"modified":"2024-10-14T12:13:43","modified_gmt":"2024-10-14T05:13:43","slug":"%e0%b9%80%e0%b8%81%e0%b8%a1%e0%b8%ab%e0%b8%a5%e0%b8%9a%e0%b8%aa%e0%b8%b4%e0%b9%88%e0%b8%87%e0%b8%81%e0%b8%b5%e0%b8%94%e0%b8%82%e0%b8%a7%e0%b8%b2%e0%b8%87-obstacle-dodge-game","status":"publish","type":"post","link":"https:\/\/dp.rmutsv.ac.th\/?p=22505","title":{"rendered":"\u0e40\u0e01\u0e21\u0e2b\u0e25\u0e1a\u0e2a\u0e34\u0e48\u0e07\u0e01\u0e35\u0e14\u0e02\u0e27\u0e32\u0e07 (Obstacle dodge game)"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>\u0e1c\u0e39\u0e49\u0e40\u0e02\u0e35\u0e22\u0e19 :<\/strong> \u0e19\u0e32\u0e22\u0e2a\u0e23\u0e27\u0e34\u0e28 \u0e40\u0e2b\u0e21\u0e42\u0e25\u0e2b\u0e30 \u0e23\u0e2b\u0e31\u0e2a\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32 167404130071<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u0e04\u0e13\u0e30\u0e27\u0e34\u0e28\u0e27\u0e01\u0e23\u0e23\u0e21\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c : <\/strong>\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e28\u0e27\u0e01\u0e23\u0e23\u0e21\u0e44\u0e1f\u0e1f\u0e49\u0e32<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u0e27\u0e34\u0e0a\u0e32 :<\/strong> 04000104 \u0e01\u0e32\u0e23\u0e42\u0e1b\u0e23\u0e41\u0e01\u0e23\u0e21\u0e04\u0e2d\u0e21\u0e1e\u0e34\u0e27\u0e40\u0e15\u0e2d\u0e23\u0e4c 1\/2567<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1.\u0e04\u0e27\u0e32\u0e21\u0e40\u0e1b\u0e47\u0e19\u0e21\u0e32<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u0e40\u0e01\u0e21\u0e2b\u0e25\u0e1a\u0e2a\u0e34\u0e48\u0e07\u0e01\u0e35\u0e14\u0e02\u0e27\u0e32\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e40\u0e01\u0e21\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e07\u0e48\u0e32\u0e22\u0e46\u0e44\u0e21\u0e48\u0e0b\u0e31\u0e1a\u0e0b\u0e49\u0e2d\u0e19\u0e0a\u0e48\u0e27\u0e22\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e17\u0e31\u0e01\u0e29\u0e30\u0e01\u0e32\u0e23\u0e15\u0e31\u0e14\u0e2a\u0e34\u0e19\u0e43\u0e08,\u0e01\u0e32\u0e23\u0e41\u0e01\u0e49\u0e1b\u0e31\u0e0d\u0e2b\u0e32\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e2b\u0e19\u0e49\u0e32 \u0e43\u0e19\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21\u0e19\u0e35\u0e49\u0e40\u0e23\u0e32\u0e08\u0e30\u0e19\u0e33\u0e40\u0e2a\u0e19\u0e2d\u0e40\u0e01\u0e21\u0e2b\u0e25\u0e1a\u0e2a\u0e34\u0e48\u0e07\u0e01\u0e35\u0e14\u0e02\u0e27\u0e32\u0e07\u0e17\u0e35\u0e48\u0e40\u0e02\u0e35\u0e22\u0e19\u0e42\u0e14\u0e22 HTML,CSS \u0e41\u0e25\u0e30JavaScript \u0e40\u0e1b\u0e47\u0e19\u0e20\u0e32\u0e29\u0e32\u0e17\u0e35\u0e48\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e07\u0e48\u0e32\u0e22\u0e41\u0e25\u0e30\u0e43\u0e0a\u0e49\u0e43\u0e19\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e40\u0e1a\u0e23\u0e32\u0e27\u0e4c\u0e40\u0e0b\u0e2d\u0e23\u0e4c\u0e44\u0e14\u0e49\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e21\u0e35\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e20\u0e32\u0e1e<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2.\u0e27\u0e31\u0e15\u0e16\u0e38\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">1.\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e40\u0e01\u0e21\u0e2b\u0e25\u0e1a\u0e2a\u0e34\u0e48\u0e07\u0e01\u0e35\u0e14\u0e02\u0e27\u0e32\u0e07<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">2.\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\u0e27\u0e34\u0e18\u0e35\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e40\u0e1a\u0e23\u0e32\u0e27\u0e4c\u0e40\u0e0b\u0e2d\u0e23\u0e4c<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3.\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e20\u0e32\u0e29\u0e32 HTML,CSS \u0e41\u0e25\u0e30JavaScript<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3.\u0e02\u0e2d\u0e1a\u0e40\u0e02\u0e15<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">1.\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e40\u0e01\u0e21\u0e2b\u0e25\u0e1a\u0e2a\u0e34\u0e48\u0e07\u0e01\u0e35\u0e14\u0e02\u0e27\u0e32\u0e07<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">2.\u0e43\u0e0a\u0e49\u0e20\u0e32\u0e29\u0e32 HTML,CSS \u0e41\u0e25\u0e30JavaScript \u0e43\u0e19\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e40\u0e01\u0e21\u0e41\u0e25\u0e30\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e1a\u0e23\u0e32\u0e27\u0e4c\u0e40\u0e0b\u0e2d\u0e23\u0e4c<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3.\u0e15\u0e31\u0e27\u0e40\u0e01\u0e21\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e17\u0e33\u0e07\u0e32\u0e19\u0e44\u0e14\u0e49\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e21\u0e35\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e20\u0e32\u0e1e<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4.\u0e1b\u0e23\u0e30\u0e42\u0e22\u0e0a\u0e19\u0e4c\u0e17\u0e35\u0e48\u0e04\u0e32\u0e14\u0e27\u0e48\u0e32\u0e08\u0e30\u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">1.\u0e1c\u0e39\u0e49\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49 HTML,CSS \u0e41\u0e25\u0e30JavaScript <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">2.\u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49\u0e04\u0e27\u0e32\u0e21\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e43\u0e19\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e40\u0e1a\u0e23\u0e32\u0e27\u0e4c\u0e40\u0e0b\u0e2d\u0e23\u0e4c<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5.\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49\u0e17\u0e35\u0e48\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">1.\u00a0<strong>*HTML (HyperText Markup Language)*<\/strong>: \u0e43\u0e0a\u0e49\u0e43\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19\u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">2.\u00a0<strong>*CSS (Cascading Style Sheets)*<\/strong>: \u0e43\u0e0a\u0e49\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e15\u0e01\u0e41\u0e15\u0e48\u0e07\u0e41\u0e25\u0e30\u0e08\u0e31\u0e14\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3.\u00a0<strong>*JavaScript*<\/strong>: \u0e43\u0e0a\u0e49\u0e43\u0e19\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e40\u0e01\u0e21\u0e41\u0e25\u0e30\u0e04\u0e27\u0e1a\u0e04\u0e38\u0e21\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19\u0e02\u0e2d\u0e07\u0e40\u0e01\u0e21 \u0e01\u0e32\u0e23\u0e42\u0e15\u0e49\u0e15\u0e2d\u0e1a\u0e01\u0e31\u0e1a\u0e1c\u0e39\u0e49\u0e40\u0e25\u0e48\u0e19<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">6.\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">1.\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e40\u0e01\u0e21\u0e2b\u0e25\u0e1a\u0e2a\u0e34\u0e48\u0e07\u0e01\u0e35\u0e14\u0e02\u0e27\u0e32\u0e07\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">2.\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e40\u0e2a\u0e16\u0e35\u0e22\u0e23\u0e15\u0e2d\u0e1a\u0e2a\u0e19\u0e2d\u0e07\u0e44\u0e14\u0e49\u0e14\u0e35<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">7.\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e17\u0e14\u0e25\u0e2d\u0e07<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">1.\u0e40\u0e01\u0e21\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e25\u0e48\u0e19\u0e44\u0e14\u0e49\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e25\u0e37\u0e48\u0e19\u0e44\u0e2b\u0e25\u0e1a\u0e19 Google Chrome\u0e41\u0e25\u0e30Microsoft Edge<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">2.\u0e40\u0e01\u0e21\u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e40\u0e2a\u0e16\u0e35\u0e22\u0e23\u0e41\u0e25\u0e30\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e15\u0e2d\u0e1a\u0e2a\u0e19\u0e2d\u0e07\u0e01\u0e31\u0e1a\u0e1c\u0e39\u0e49\u0e40\u0e25\u0e48\u0e19\u0e44\u0e14\u0e49\u0e14\u0e35<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">8.\u0e2a\u0e23\u0e38\u0e1b\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e17\u0e14\u0e25\u0e2d\u0e07<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e40\u0e01\u0e21\u0e2b\u0e25\u0e1a\u0e2a\u0e34\u0e48\u0e07\u0e01\u0e35\u0e14\u0e02\u0e27\u0e32\u0e07\u0e1b\u0e23\u0e30\u0e2a\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\u0e15\u0e32\u0e21\u0e27\u0e31\u0e15\u0e16\u0e38\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e25\u0e48\u0e19\u0e44\u0e14\u0e49\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e21\u0e35\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e20\u0e32\u0e1e\u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e40\u0e2a\u0e16\u0e35\u0e22\u0e23\u0e15\u0e2d\u0e1a\u0e2a\u0e19\u0e2d\u0e07\u0e01\u0e31\u0e1a\u0e1c\u0e39\u0e49\u0e40\u0e25\u0e48\u0e19\u0e44\u0e14\u0e49\u0e14\u0e35<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">9.\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e2d\u0e49\u0e32\u0e07\u0e2d\u0e34\u0e07<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">1.<strong>HTML<\/strong>\u00a0(<strong>H<\/strong>yper\u00a0<strong>T<\/strong>ext\u00a0<strong>M<\/strong>arkup\u00a0<strong>L<\/strong>anguage) \u0e08\u0e32\u0e01 : <a href=\"https:\/\/searchstudio.co.th\/th\/seo\/what-is-html\/\">https:\/\/searchstudio.co.th\/th\/seo\/what-is-html\/<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">2.<strong>JavaScript<\/strong> \u0e08\u0e32\u0e01 : <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3.<strong>CSS (Cascading Style Sheets)<\/strong> \u0e08\u0e32\u0e01 : <a href=\"https:\/\/www.w3schools.com\/html\/html_css.asp\">https:\/\/www.w3schools.com\/html\/html_css.asp<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">10.\u0e27\u0e35\u0e14\u0e35\u0e42\u0e2d\u0e41\u0e19\u0e30\u0e19\u0e33\u0e40\u0e01\u0e21\u0e41\u0e25\u0e30\u0e42\u0e1b\u0e23\u0e41\u0e01\u0e23\u0e21<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"video-container\"><iframe loading=\"lazy\" title=\"\u0e40\u0e01\u0e21\u0e2b\u0e25\u0e1a\u0e2a\u0e34\u0e48\u0e07\u0e01\u0e35\u0e14\u0e02\u0e27\u0e32\u0e07(Obstacle dodge game)\" width=\"620\" height=\"349\" src=\"https:\/\/www.youtube.com\/embed\/jpd6i6rf4ZI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u0e42\u0e1b\u0e23\u0e41\u0e01\u0e23\u0e21<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n  &lt;meta charset=\"UTF-8\"&gt;\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n  &lt;title&gt;\u0e40\u0e01\u0e21\u0e2b\u0e25\u0e1a\u0e2a\u0e34\u0e48\u0e07\u0e01\u0e35\u0e14\u0e02\u0e27\u0e32\u0e07&lt;\/title&gt;\n  &lt;style&gt;\n    body {\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      height: 100vh;\n      margin: 0;\n      background-color: #f3f3f3;\n    }\n    canvas {\n      border: 1px solid #000;\n      background-color: #eaacac;\n    }\n    #resetButton {\n      display: none;\n      margin-top: 20px;\n      padding: 10px 20px;\n      font-size: 16px;\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body onload=\"startGame()\"&gt; \n\n&lt;script&gt;\nvar player;\nvar obstacles = &#091;];\nvar score;\n\nfunction startGame() {\n  player = new component(30, 30, \"blue\", 10, 120);\n  score = new component(\"30px\", \"Consolas\", \"black\", 280, 40, \"text\");\n  gameArea.start();\n}\n\nvar gameArea = {\n  canvas: document.createElement(\"canvas\"),\n  start: function() {\n    this.canvas.width = 480;\n    this.canvas.height = 270;\n    this.context = this.canvas.getContext(\"2d\");\n    document.body.insertBefore(this.canvas, document.body.childNodes&#091;0]);\n    this.frameNo = 0;\n    this.interval = setInterval(updateGameArea, 20);\n    window.addEventListener('keydown', function (e) {\n      gameArea.keys = (gameArea.keys || &#091;]);\n      gameArea.keys&#091;e.keyCode] = true;\n    });\n    window.addEventListener('keyup', function (e) {\n      gameArea.keys&#091;e.keyCode] = false;\n    });\n  },\n  clear: function() {\n    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);\n  },\n  stop: function() {\n    clearInterval(this.interval);\n    document.getElementById(\"resetButton\").style.display = \"block\";\n  }\n}\n\nfunction component(width, height, color, x, y, type) {\n  this.type = type;\n  this.width = width;\n  this.height = height;\n  this.speedX = 0;\n  this.speedY = 0;\n  this.x = x;\n  this.y = y;\n  this.update = function() {\n    var ctx = gameArea.context;\n    if (this.type == \"text\") {\n      ctx.font = this.width + \" \" + this.height;\n      ctx.fillStyle = color;\n      ctx.fillText(this.text, this.x, this.y);\n    } else {\n      ctx.fillStyle = color;\n      ctx.fillRect(this.x, this.y, this.width, this.height);\n    }\n  }\n  this.newPos = function() {\n    this.x += this.speedX;\n    this.y += this.speedY;\n    this.hitBoundary();\n  }\n  this.hitBoundary = function() {\n    var bottom = gameArea.canvas.height - this.height;\n    var right = gameArea.canvas.width - this.width;\n    if (this.y &gt; bottom) { this.y = bottom; }\n    if (this.y &lt; 0) { this.y = 0; }\n    if (this.x &gt; right) { this.x = right; }\n    if (this.x &lt; 0) { this.x = 0; }\n  }\n  this.crashWith = function(otherobj) {\n    var myleft = this.x;\n    var myright = this.x + this.width;\n    var mytop = this.y;\n    var mybottom = this.y + this.height;\n    var otherleft = otherobj.x;\n    var otherright = otherobj.x + otherobj.width;\n    var othertop = otherobj.y;\n    var otherbottom = otherobj.y + otherobj.height;\n    var crash = true;\n    if ((mybottom &lt; othertop) ||\n       (mytop &gt; otherbottom) ||\n       (myright &lt; otherleft) ||\n       (myleft &gt; otherright)) {\n      crash = false;\n    }\n    return crash;\n  }\n}\n\nfunction updateGameArea() {\n  for (i = 0; i &lt; obstacles.length; i += 1) {\n    if (player.crashWith(obstacles&#091;i])) {\n      gameArea.stop();\n      return;\n    }\n  }\n  gameArea.clear();\n  gameArea.frameNo += 1;\n  if (gameArea.frameNo == 1 || everyInterval(150)) {\n    var x = gameArea.canvas.width;\n    var minHeight = 20;\n    var maxHeight = 200;\n    var height = Math.floor(Math.random() * (maxHeight - minHeight + 1) + minHeight);\n    var minGap = 50;\n    var maxGap = 200;\n    var gap = Math.floor(Math.random() * (maxGap - minGap + 1) + minGap);\n    obstacles.push(new component(10, height, \"green\", x, 0));\n    obstacles.push(new component(10, x - height - gap, \"green\", x, height + gap));\n  }\n  for (i = 0; i &lt; obstacles.length; i += 1) {\n    obstacles&#091;i].x += -1;\n    obstacles&#091;i].update();\n  }\n  score.text = \"SCORE: \" + gameArea.frameNo;\n  score.update();\n  movePlayer();\n  player.newPos();\n  player.update();\n}\n\nfunction everyInterval(n) {\n  if ((gameArea.frameNo \/ n) % 1 == 0) { return true; }\n  return false;\n}\n\nfunction movePlayer() {\n  player.speedX = 0;\n  player.speedY = 0;\n  if (gameArea.keys &amp;&amp; gameArea.keys&#091;37]) { player.speedX = -1; }\n  if (gameArea.keys &amp;&amp; gameArea.keys&#091;39]) { player.speedX = 1; }\n  if (gameArea.keys &amp;&amp; gameArea.keys&#091;38]) { player.speedY = -1; }\n  if (gameArea.keys &amp;&amp; gameArea.keys&#091;40]) { player.speedY = 1; }\n}\n\nfunction resetGame() {\n  document.getElementById(\"resetButton\").style.display = \"none\";\n  obstacles = &#091;];\n  startGame();\n}\n&lt;\/script&gt;\n\n&lt;p&gt;The score increases as long as you survive. Use arrow keys to move the blue player square.&lt;\/p&gt;\n&lt;button id=\"resetButton\" onclick=\"resetGame()\"&gt;Reset Game&lt;\/button&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u0e1c\u0e39\u0e49\u0e40\u0e02\u0e35\u0e22\u0e19 : \u0e19\u0e32\u0e22\u0e2a\u0e23\u0e27\u0e34\u0e28 \u0e40\u0e2b\u0e21\u0e42\u0e25\u0e2b&#46;&#46;&#46;<\/p>\n","protected":false},"author":707,"featured_media":24386,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[62,71],"class_list":["post-22505","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-1","tag-62","tag--04000104-"],"_links":{"self":[{"href":"https:\/\/dp.rmutsv.ac.th\/index.php?rest_route=\/wp\/v2\/posts\/22505","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dp.rmutsv.ac.th\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dp.rmutsv.ac.th\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dp.rmutsv.ac.th\/index.php?rest_route=\/wp\/v2\/users\/707"}],"replies":[{"embeddable":true,"href":"https:\/\/dp.rmutsv.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=22505"}],"version-history":[{"count":3,"href":"https:\/\/dp.rmutsv.ac.th\/index.php?rest_route=\/wp\/v2\/posts\/22505\/revisions"}],"predecessor-version":[{"id":23318,"href":"https:\/\/dp.rmutsv.ac.th\/index.php?rest_route=\/wp\/v2\/posts\/22505\/revisions\/23318"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dp.rmutsv.ac.th\/index.php?rest_route=\/wp\/v2\/media\/24386"}],"wp:attachment":[{"href":"https:\/\/dp.rmutsv.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=22505"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dp.rmutsv.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=22505"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dp.rmutsv.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=22505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}