選擇排序法 - 開始後用滑鼠點擊舞台以啟用按鍵，重整畫面即可重新遊戲。 | JavaScript 程式專案

{"id":146274,"student_id":2589,"content":"","created_at":"2020-05-07T11:01:08.820+08:00","updated_at":"2023-03-14T11:02:34.160+08:00","name":"選擇排序法 - 開始後用滑鼠點擊舞台以啟用按鍵，重整畫面即可重新遊戲。","language":"javascript","screenshot":{"url":"https://cdn1.koding.school/uploads/project/screenshot/146274/3336f525790927df3e4be46a94df542b.jpg"},"parent_id":3,"plugin":"function Bars (args) {\n    \n    // this.length = length; // 陣列長度\n    // this.arr = []; // 存放數字\n    this.rects = []; // 幾何圖形\n    this.frames = []; // 播放動畫的腳本\n    this.space; // 圖形之間的間隔\n    this.speed = 1; // 播放速度\n    \n    if (args instanceof Array) {\n        this.arr = args;\n        this.length = args.length;\n    } else {\n        this.arr = [];\n        this.length = args;\n        \n        // 產生數字的陣列並隨機洗牌\n        var arr = [];\n        for (var i = 1; i \u003c= this.length; i++) arr.push(i);\n        this.arr = shuffle(arr); // 洗牌\n    }\n    \n    this.init();\n};\n\nBars.prototype.init = function () {\n\n    // 計算每個圖形的距離\n    this.space = 640/(this.length + 1);\n\n    // 產生長條圖形\n    for (var i = 0; i \u003c this.length; i++) {\n        this.rects.push({\n            x: (i + 1)*this.space,\n            y: 435,\n            width: this.space*0.7, // 圖形寬度\n            value: this.arr[i], // 圖形的高度\n            color: 'black',\n            move: 0, // 需要移動的距離\n            speed: 0, // 移動的速度\n        });\n    }\n\n    // 繪製圖形\n    forever(() =\u003e {\n        this.rects.forEach((b) =\u003e {\n            pen.color = pen.fillColor = b.color;\n            pen.drawRect(b.x - b.width/2, b.y, b.width, -b.value*(400/this.length));\n            print(b.value, b.x - 5, b.y + 10, 'black', 12);\n        });\n    });\n\n    // 播放動畫腳本\n    forever(() =\u003e {\n        \n        var isPlaying = false; // 當前是否播放完畢，切換下一個動畫\n        this.rects.forEach(function (r) {\n            if (r.flash \u003e 1 || r.move !== 0) isPlaying = true;\n        });\n        \n        if (isPlaying) {\n            this.rects.forEach((r) =\u003e {\n                if (r.move != 0) {\n                    r.x += r.speed;\n                    r.move -= r.speed;\n                    // 移動的速度大於還需要移動的距離，則直接移動到目標並結束\n                    if (Math.abs(r.speed) \u003e Math.abs(r.move)) {\n                        r.x += r.move;\n                        r.move = 0;\n                        r.color = 'black';\n                    }\n                }\n                \n                if (r.flash \u003e 1) r.flash-=this.speed;\n            });\n        } else {\n            // 切換下一個動畫前，將顏色重置\n            this.rects.forEach(r =\u003e r.color = 'black');\n            if (this.frames.length == 0) return;\n            \n            var f = this.frames.shift(); // 下一個要播放的動畫\n            if (f[0] == 'get') this.getAnimate(f[1]);\n            if (f[0] == 'swap') this.swapAnimate(f[1], f[2]);\n            if (f[0] == 'insert') this.insertAnimate(f[1], f[2]);\n        }\n    });\n}\n\n// 設定播放速度 1 ~ 100\nBars.prototype.setSpeed = function (speed) {\n    speed = Math.floor(speed)\n    if (speed \u003c 1) speed = 1;\n    if (speed \u003e 100) speed = 100;\n    this.speed = speed;\n}\n\n// 取得位置 idx 的值\nBars.prototype.get = function (idx) {\n    if (this.arr[idx] == undefined) return;\n    this.frames.push(['get', idx]);\n    return this.arr[idx];\n}\n\n// 位置 a, b 互換\nBars.prototype.swap = function (a, b) {\n    if (a == b) return;\n    this.frames.push(['swap', a, b]);\n    var temp = this.arr[a];\n    this.arr[a] = this.arr[b];\n    this.arr[b] = temp;\n}\n\n// 位置 a 插入到位置 b\nBars.prototype.insert = function (a, b) {\n    if (a == b) return;\n    this.frames.push(['insert', a, b]);\n    var n = this.arr.splice(a, 1);\n    this.arr.splice(b, 0, n[0]);\n}\n\n// 取的 idx 值的動畫\nBars.prototype.getAnimate = function (idx) {\n    this.rects[idx].color = 'red';\n    this.rects[idx].flash = 30;\n}\n\n// 位置 a, b 互換動畫\nBars.prototype.swapAnimate = function (a, b) {\n    var r1 = this.rects[a];\n    var r2 = this.rects[b];\n    r1.color = r2.color = 'red';\n    r1.move = r2.x - r1.x;\n    r2.move = r1.x - r2.x;\n    r1.speed = r1.move*this.speed/100;\n    r2.speed = r2.move*this.speed/100;\n    this.rects[a] = r2;\n    this.rects[b] = r1;\n}\n\n// 位置 a 插入到位置 b 的動畫\nBars.prototype.insertAnimate = function (a, b) {\n    var start = Math.min(a, b);\n    var end = Math.max(a, b);\n    for (var i = start; i \u003c= end; i++) {\n        var r = this.rects[i];\n        r.move = a \u003e b ? this.space: -this.space;\n        r.speed = r.move*this.speed/100;\n    }\n\n    var r = this.rects[a];\n    r.move = this.rects[b].x - this.rects[a].x;\n    r.speed = r.move*this.speed/100;\n    r.color = 'red';\n\n    var n = this.rects.splice(a, 1);\n    this.rects.splice(b, 0, n[0]);\n}\n\n// 返回切割後的 bars 物件\nBars.prototype.slice = function (a, b) {\n    var offset = a;\n    var instance = this;\n    return {\n        length: b - a,\n        get: function (idx) {\n            return instance.get(idx + offset)\n        },\n        swap: function (a1, b1) {\n            instance.swap(a1 + offset, b1 + offset)\n        },\n        insert: function (a1, b1) {\n            instance.insert(a1 + offset, b1 + offset)\n        },\n        slice: function (a1, b1) {\n            return instance.slice(a1 + offset, b1 + offset)\n        },\n    }\n}\n\n// 將傳入的陣列隨機洗牌並返回\nfunction shuffle(arr) {\n    var newArr = [];\n    while (arr.length \u003e 0) {\n        var rand = Math.floor(Math.random() * arr.length);\n        newArr.push(arr.splice(rand, 1)[0]);\n    }\n    return newArr;\n}\n\nvar bars = new Bars(10);\nbars.setSpeed(10);\n\nfor (var a = 0; a \u003c 10; a++) {\n    var best = a;\n    for (var b = a; b \u003c 10; b++) {\n        if (bars.get(b) \u003c bars.get(best)) {\n            best = b;\n        }\n    }\n    bars.swap(a, best);\n}\n","description":null,"note":null,"status":"public","like_student_ids":[6523,20683,7418,11198,10845,9413,10956,10498,16868,16827],"is_featured":false,"views":327,"hashid":"882srgkm","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}