路徑搜尋 - 開始後用滑鼠點擊舞台以啟用按鍵，重整畫面即可重新遊戲。 | JavaScript 程式專案

{"id":157282,"student_id":2589,"content":"","created_at":"2020-06-10T14:58:25.070+08:00","updated_at":"2023-03-14T11:12:45.823+08:00","name":"路徑搜尋 - 開始後用滑鼠點擊舞台以啟用按鍵，重整畫面即可重新遊戲。","language":"javascript","screenshot":{"url":null},"parent_id":3,"plugin":"var grid = [];\nvar arrows = [];\nvar maze = [];\nvar width = 20;\nvar row = 640/width;\nvar col = 480/width;\nmaze.hideSprite = false;\n\nvar arrows = [];\n\nfor (var x = -1; x \u003c row + 1; x++) {\n    maze[x] = [];\n    arrows[x] = [];\n    grid[x] = [];\n    for (var y = -1; y \u003c col + 1; y++) {\n        var color = x == -1 || y == -1 || x == row || y == col ? 'black': 'white';\n        maze[x][y] = {\n            color: color,\n            up: true,\n            right: true,\n            down: true,\n            left: true,\n            isWall: false,\n            x: x,\n            y: y,\n        };\n\n        var a = createSprite('arrow.png');\n        a.x = x*width + width/2;\n        a.y = y*width + width/2;\n        a.hidden = true;\n        a.scale = 0.7;\n        arrows[x][y] = a;\n        \n        var s = createSprite('grass.png', 'wall.png');\n        s.x = x*width + width/2;\n        s.y = y*width + width/2;\n        s.scale = 0.333;\n        s.opacity = 1;\n        grid[x][y] = s;\n\n        if (x === -1 || x === row - 1) maze[x][y].right = false;\n        if (x === 0 || x === row) maze[x][y].left = false;\n        if (y === -1 || y === col - 1) maze[x][y].down = false;\n        if (y === 0 || y === col) maze[x][y].up = false;\n    }\n}\n\nforever(function() {\n    for (var cx = 0; cx \u003c row; cx++) {\n        for (var cy = 0; cy \u003c col; cy++) {\n\n            var cell = maze[cx][cy];\n            pen.size = 0.001;\n            \n            if (maze.hideSprite == false || (cell.color !== 'white' \u0026\u0026 cell.isWall === false)) {\n                pen.fillColor = cell.color;\n                pen.drawRect(cx*width, cy*width, width, width);\n            }\n            \n            if (cell.color !== 'white' \u0026\u0026 cell.isWall === false) {\n                grid[cx][cy].opacity = 0.4;\n            } else {\n                grid[cx][cy].opacity = 1;\n            }\n            \n            if (maze.hideSprite) {\n                pen.fillColor = cell.color;    \n                pen.drawRect(cx*width, cy*width, width, width);\n            }\n            \n            grid[cx][cy].costumeId = cell.isWall ? 1 : 0;\n            grid[cx][cy].hidden = maze.hideSprite;\n            \n\n            pen.size = 1;\n            var x = cx*width;\n            var y = cy*width;\n            if (!cell.up) pen.drawLine(x, y, x + width, y);\n            if (!cell.right) pen.drawLine(x + width, y, x + width, y + width);\n            if (!cell.down) pen.drawLine(x, y + width, x + width, y + width);\n            if (!cell.left) pen.drawLine(x, y + width, x, y);\n\n\n            if (cell.from == 'up') {\n                arrows[cx][cy].hidden = false;\n                arrows[cx][cy].direction = 0;\n            } else if (cell.from == 'down') {\n                arrows[cx][cy].hidden = false;\n                arrows[cx][cy].direction = 180;\n            } else if (cell.from == 'right') {\n                arrows[cx][cy].hidden = false;\n                arrows[cx][cy].direction = 90;\n            } else if (cell.from == 'left') {\n                arrows[cx][cy].hidden = false;\n                arrows[cx][cy].direction = 270;\n            } else {\n                arrows[cx][cy].hidden = true;\n            }\n            \n            \n            \n        }\n    }\n});\n\nfunction block (x, y) {\n    var cell = maze[x][y];\n    cell.isWall = true;\n    cell.color = '#ccc';\n    cell.up = false;\n    cell.down = false;\n    cell.right = false;\n    cell.left = false;\n    maze[x][y + 1].up = false;\n    maze[x][y - 1].down = false;\n    maze[x - 1][y].right = false;\n    maze[x + 1][y].left = false;\n}\n\nfunction unblock (x, y) {\n    var cell = maze[x][y];\n    cell.isWall = false;\n    cell.color = 'white';\n    cell.up = maze[x][y - 1].down = !maze[x][y - 1].isWall;\n    cell.down = maze[x][y + 1].up = !maze[x][y + 1].isWall;\n    cell.right = maze[x + 1][y].left = !maze[x + 1][y].isWall;\n    cell.left = maze[x - 1][y].right = !maze[x - 1][y].isWall;\n}\n\nfunction randomBlock(rate) {\n    for (var x = 0; x \u003c row; x++) {\n        for (var y = 0; y \u003c col; y++) {\n            if (Math.random() \u003c rate) {\n                block(x, y);\n            }\n        }\n    }\n}\n\nfunction clearRect(cell, range) {\n    for (var x = cell.x - range; x \u003c= cell.x + range; x++) {\n        for (var y = cell.y - range; y \u003c= cell.y + range; y++) {\n            if (x \u003e= 0 \u0026\u0026 y \u003e= 0 \u0026\u0026 x \u003c row \u0026\u0026 y \u003c col) {\n                unblock(x, y);\n            }\n        }\n    }\n}\n\nfunction createTarget(img, x, y) {\n    var obj = {\n        x: x,\n        y: y,\n    };\n    \n    var s = createSprite(img);\n    s.scale = 0.7;\n    s.forever(function () {\n        s.x = width*obj.x + width/2;\n        s.y = width*obj.y + width/2;    \n    })\n    return obj;\n}\n\nfunction loadMaze(str) {\n    var data = str.split('\\n').map(function (s) {\n        return s.trim();\n    }).filter(function (s) {\n        return s.length \u003e 0\n    })\n    for (var x=0; x\u003crow; x++) {\n         for (var y=0; y\u003ccol; y++) {\n            if (data[y] \u0026\u0026 data[y][x] === '1') {\n                block(x, y);\n            } else {\n                \n            }\n        }   \n    }\n}\n\nmaze.hideSprite = false; //是否隱藏地形圖片\nvar start = maze[2][11]; //起點格子\nvar end = maze[29][11]; //終點格子\nvar back = undefined; //繪製綠色格子用\n\nvar player = createTarget('hero.png', 2, 11); //創造人物\nvar box = createTarget('box.png', 29, 11); //創造寶箱\n\nrandomBlock(0.35); // 0.35 的機率隨機生成障礙物\nclearRect(start, 2); //清除起點2格內的障礙物\nclearRect(end, 2); //清除終點2格內的障礙物\n\nvar arr = [start]; //存放要探索的格子\n\nforever(loop); //不斷執行遊戲迴圈\n\n// 遊戲迴圈\nfunction loop () {\n\n    if (arr.length \u003e 0) { //判斷還有沒有格子還需要探索\n\n        arr.sort(function (a, b) {\n            return getDistance(a, end) - getDistance(b, end);\n        });\n\n        var cell = arr.shift();\n        cell.color = 'orange';\n        var x = cell.x;\n        var y = cell.y;\n\n        if (maze[x + 1][y].color == 'white') {\n            maze[x + 1][y].color = 'red';\n            maze[x + 1][y].from = 'left';\n            arr.push(maze[x + 1][y]);\n        }\n        if (maze[x - 1][y].color == 'white') {\n            maze[x - 1][y].color = 'red';\n            maze[x - 1][y].from = 'right';\n            arr.push(maze[x - 1][y]);\n        }\n        if (maze[x][y + 1].color == 'white') {\n            maze[x][y + 1].color = 'red';\n            maze[x][y + 1].from = 'up';\n            arr.push(maze[x][y + 1]);\n        }\n        if (maze[x][y - 1].color == 'white') {\n            maze[x][y - 1].color = 'red';\n            maze[x][y - 1].from = 'down';\n            arr.push(maze[x][y - 1]);\n        }\n\n        if (cell == end) {\n            arr.length = 0;\n            back = end; //很重要\n        }\n\n    } else { //如果沒有格子需要探索，就開始繪製路徑\n        back.color = 'green';\n        if (back.from == 'up') {\n            back = maze[back.x][back.y - 1];\n        }\n        else if (back.from == 'down') {\n            back = maze[back.x][back.y + 1];\n        }\n        else if (back.from == 'left') {\n            back = maze[back.x - 1][back.y];\n        }\n        else if (back.from == 'right') {\n            back = maze[back.x + 1][back.y];\n        }\n\n        if (back == start) { //當回朔到起點時就可以開始移動角色\n            var x = player.x;\n            var y = player.y;\n            if (maze[x + 1][y].color == 'green' \u0026\u0026 maze[x + 1][y].from == 'left') {\n                player.x += 1;\n            }\n            if (maze[x - 1][y].color == 'green' \u0026\u0026 maze[x - 1][y].from == 'right') {\n                player.x -= 1;\n            }\n            if (maze[x][y + 1].color == 'green' \u0026\u0026 maze[x][y + 1].from == 'up') {\n                player.y += 1;\n            }\n            if (maze[x][y - 1].color == 'green' \u0026\u0026 maze[x][y - 1].from == 'down') {\n                player.y -= 1;\n            }\n        }\n    }\n};\n\n// 計算a, b 兩個格子之間的距離\nfunction getDistance(a, b) {\n    return Math.sqrt((a.x - b.x)**2 + (a.y - b.y)**2);\n}","description":null,"note":null,"status":"public","like_student_ids":[7418,5574,10764,16868],"is_featured":false,"views":299,"hashid":"gk4s4699","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}