selection sort 副本 | JavaScript Programming Project

{"id":53552,"student_id":10,"content":"var bars = new Bars(20);\n","created_at":"2019-01-11T17:56:31.267+08:00","updated_at":"2019-11-08T11:53:12.237+08:00","name":"selection sort 副本","language":"javascript","screenshot":{"url":null},"parent_id":31721,"plugin":"function Bars (length) {\n\n    this.length = length; // 陣列長度\n    this.arr = []; // 存放數字\n    this.rects = []; // 幾何圖形\n    this.frames = []; // 播放動畫的腳本\n    this.playing = false; // 是否正在播放動畫的狀態\n    this.space; // 圖形之間的間隔\n\n    this.init();\n};\n\nBars.prototype.init = function () {\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    var space = 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*space + space,\n            y: 435,\n            width: 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        if (this.playing) {\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        } else {\n            // 沒有可以播放的動畫則返回\n            if (this.frames.length \u003c= 0) {\n                return this.playing = false;\n            }\n\n            this.playing = true;\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// 取得位置 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    if (this.rects[idx] == undefined) return;\n    this.rects[idx].color = 'red';\n    setTimeout(()=\u003e {\n        this.rects[idx].color = 'black';\n        this.playing = false;\n    }, 50);\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/30;\n    r2.speed = r2.move/30;\n    this.rects[a] = r2;\n    this.rects[b] = r1;\n    setTimeout(()=\u003e {\n        this.playing = false;\n    }, 500);\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/30;\n    }\n\n    var r = this.rects[a];\n    r.move = this.rects[b].x - this.rects[a].x;\n    r.speed = r.move/30;\n    r.color = 'red';\n\n    var n = this.rects.splice(a, 1);\n    this.rects.splice(b, 0, n[0]);\n    setTimeout(()=\u003e {\n        this.playing = false;\n    }, 500);\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}","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":504,"hashid":"rdvs32n4","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}