{"id":25960,"date":"2025-04-08T06:45:56","date_gmt":"2025-04-07T21:45:56","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25960"},"modified":"2025-04-08T06:45:58","modified_gmt":"2025-04-07T21:45:58","slug":"javascript-%e8%bf%b7%e8%b7%af","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25960","title":{"rendered":"Javascript \u8ff7\u8def"},"content":{"rendered":"\n<p>index.html<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"ja\">\n\n&lt;head>\n    &lt;meta charset=\"utf-8\">\n    &lt;title>My Maze&lt;\/title>\n&lt;\/head>\n\n&lt;body>\n    &lt;canvas>\n        Canvas not supported ...\n    &lt;\/canvas>\n\n    &lt;script src=\"js\/main.js\">&lt;\/script>\n&lt;\/body>\n\n&lt;\/html><\/code><\/pre>\n\n\n\n<p>main.js<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>'use strict';\n\n(() => {\n    class MazeRenderer {\n        constructor(canvas) {\n            this.ctx = canvas.getContext('2d');\n            this.WALL_SIZE = 10;\n        }\n\n        render(data) {\n            canvas.height = data.length * this.WALL_SIZE;\n            canvas.width = data&#91;0].length * this.WALL_SIZE;\n\n            for (let row = 0; row &lt; data.length; row++) {\n                for (let col = 0; col &lt; data&#91;0].length; col++) {\n                    if (data&#91;row]&#91;col] === 1) {\n                        this.ctx.fillRect(\n                            col * this.WALL_SIZE,\n                            row * this.WALL_SIZE,\n                            this.WALL_SIZE,\n                            this.WALL_SIZE\n                        );\n                    }\n                }\n            }\n        }\n    }\n\n    class Maze {\n        constructor(row, col, renderer) {\n            if (row &lt; 5 || col &lt; 5 || row % 2 === 0 || col % 2 === 0) {\n                alert('Size not valid!');\n                return;\n            }\n\n            this.renderer = renderer;\n            this.row = row;\n            this.col = col;\n            this.data = this.getData();\n        }\n\n        getData() {\n            const data = &#91;];\n\n            for (let row = 0; row &lt; this.row; row++) {\n                data&#91;row] = &#91;];\n                for (let col = 0; col &lt; this.col; col++) {\n                    data&#91;row]&#91;col] = 1;\n                }\n            }\n\n            for (let row = 1; row &lt; this.row - 1; row++) {\n                for (let col = 1; col &lt; this.col - 1; col++) {\n                    data&#91;row]&#91;col] = 0;\n                }\n            }\n\n            for (let row = 2; row &lt; this.row - 2; row += 2) {\n                for (let col = 2; col &lt; this.col - 2; col += 2) {\n                    data&#91;row]&#91;col] = 1;\n                }\n            }\n\n            for (let row = 2; row &lt; this.row - 2; row += 2) {\n                for (let col = 2; col &lt; this.col - 2; col += 2) {\n                    let destRow;\n                    let destCol;\n\n                    do {\n                        const dir = row === 2 ?\n                            Math.floor(Math.random() * 4) :\n                            Math.floor(Math.random() * 3) + 1;\n                        switch (dir) {\n                            case 0: \/\/ up\n                                destRow = row - 1;\n                                destCol = col;\n                                break;\n                            case 1: \/\/ down\n                                destRow = row + 1;\n                                destCol = col;\n                                break;\n                            case 2: \/\/ left\n                                destRow = row;\n                                destCol = col - 1;\n                                break;\n                            case 3: \/\/ right\n                                destRow = row;\n                                destCol = col + 1;\n                                break;\n                        }\n                    } while (data&#91;destRow]&#91;destCol] === 1);\n\n                    data&#91;destRow]&#91;destCol] = 1;\n                }\n            }\n\n            return data;\n        }\n\n        render() {\n            this.renderer.render(this.data);\n        }\n    }\n\n    const canvas = document.querySelector('canvas');\n    if (typeof canvas.getContext === 'undefined') {\n        return;\n    }\n\n    const maze = new Maze(21, 15, new MazeRenderer(canvas));\n    maze.render();\n})();<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>index.html main.js<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[78],"tags":[41,3],"class_list":["post-25960","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-javascript","tag-programming"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25960","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=25960"}],"version-history":[{"count":2,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25960\/revisions"}],"predecessor-version":[{"id":25962,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25960\/revisions\/25962"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25960"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25960"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}