河內塔（預設版）副本 | Programming Project

{"id":242992,"student_id":10,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n\\t\u003ctitle\u003eDocument\u003c/title\u003e\\n\\t\u003cscript src=\\\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\\\"\u003e\u003c/script\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003cdiv id=\\\"root\\\"\u003e\\n        \\n        \u003cdiv class=\\\"row\\\"\u003e\\n            \u003cdiv\\n                v-for=\\\"disk in disks\\\"\\n                id=\\\"disk.value\\\"\\n                :style=\\\"diskStyle(disk)\\\"\\n                class=\\\"disk\\\"\\n                :draggable=\\\"isTop(disk)\\\"\\n                @dragstart=\\\"dragstart(disk)\\\"\\n            \u003e\u003c/div\u003e\\n            \u003cdiv class=\\\"col col-a\\\" @drop=\\\"ondrop('a')\\\" @ondragover=\\\"allowDrop\\\" @dragenter.prevent @dragover.prevent\u003e\u003c/div\u003e\\n            \u003cdiv class=\\\"col col-b\\\" @drop=\\\"ondrop('b')\\\" @ondragover=\\\"allowDrop\\\" @dragenter.prevent @dragover.prevent\u003e\u003c/div\u003e\\n            \u003cdiv class=\\\"col col-c\\\" @drop=\\\"ondrop('c')\\\" @ondragover=\\\"allowDrop\\\" @dragenter.prevent @dragover.prevent\u003e\u003c/div\u003e\\n        \u003c/div\u003e\\n        \\n        \u003cdiv class=\\\"footer\\\"\u003e\\n            \u003cp\u003e總共移動了\u003cspan class=\\\"highlight\\\"\u003e {{count}} \u003c/span\u003e次\u003c/p\u003e\\n            \u003cinput @change=\\\"start\\\" v-model=\\\"size\\\" type=\\\"number\\\" min=\\\"1\\\" max=\\\"10\\\"/\u003e\\n            \u003cbutton @click=\\\"start\\\"\u003e重新開始\u003c/button\u003e\\n            \u003cbutton @click=\\\"resolve\\\"\u003e自動破解\u003c/button\u003e\\n        \u003c/div\u003e\\n\\n    \u003c/div\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"body {\\n    height: 100vh;\\n    color: #ccc;\\n    background-color: #222222;\\n    text-align: center;\\n    overflow: hidden;\\n}\\n\\n#root {\\n    position: absolute;\\n    top: 0;\\n    left: 0;\\n    right: 0;\\n    bottom: 0;\\n    padding: 10px;\\n}\\n\\n\\n.footer {\\n    padding: 0 10px 10px 10px;\\n    height: 200px;\\n    box-sizing: box-sizing;\\n}\\n\\n.footer p {\\n    margin: 0;\\n}\\n\\n.row {\\n    height: calc(100% - 200px);\\n    position: relative;\\n    display: inline-flex;\\n    width: 100%;\\n    box-sizing: border-box;\\n    flex-direction: row;\\n}\\n\\n.col {\\n    flex: 1;\\n    position: relative;\\n}\\n.col:before {\\n    position: absolute;\\n    top: 10px;\\n    left: 10px;\\n    right: 10px;\\n    bottom: 10px;\\n    background-color: #171717;\\n    border-radius: 15px;\\n    font-size: 2rem;\\n    color: #444;\\n    padding: 30px;\\n}\\n.col-a:before { content: 'A' }\\n.col-b:before { content: 'B' }\\n.col-c:before { content: 'C' }\\n\\n\\n.disk {\\n    position: absolute;\\n    border-radius: 100px;\\n    transform: translate(-50%, -40%);\\n    cursor: move;\\n    transition: all 0.3s;\\n    z-index: 10;\\n}\\n\\n.disk:after {\\n    content: '';\\n    position: absolute;\\n    top: 0px;\\n    left: 0px;\\n    right: 0px;\\n    bottom: 0px;\\n    border-radius: 100px;\\n    border: 5px solid rgba(0, 0, 0, .5);\\n}\\n\\n.highlight {\\n    color: rgb(52, 235, 161);\\n}\\n\\ninput, button {\\n    display: block;\\n    outline: none;\\n    width: 100%;\\n    height: 40px;\\n    padding: 5px 10px;\\n    margin-top: 10px;\\n    border-radius: 5px;\\n    border: 1px solid #555;\\n    color: #ddd;\\n    background-color: rgba(0, 0, 0, 0);\\n    font-size: 1rem;\\n    box-sizing: border-box;\\n}\\n\\ninput {\\n    padding: 7px 9px;\\n}\\n\\ninput:hover, button:hover,\\ninput:focus, button:focus {\\n    color: rgb(52, 235, 161);\\n    border-color: rgb(52, 235, 161);\\n    outline: none;\\n\\n}\\n\\n\\n\",\"js\":\"setSpeed(4); //每秒移動的次數\\n\\n//按下「自動破解」時會執行此函式\\nfunction cracker (size) {\\n    drag('a', 'c') //移動指令\\n    \\n}\\n\\n//移動 size 層從(from)位置，移動到(to)位置，過程中暫放在(tmp)位置\\nfunction move (size, from, to, tmp) {\\n    \\n    \\n}\"}","created_at":"2021-04-14T18:26:27.575+08:00","updated_at":"2025-03-31T12:56:23.011+08:00","name":"河內塔（預設版） 副本","language":"web","screenshot":{"url":"/uploads/project/screenshot/242992/4335b73f18c7a4ed185691d7541aed3e.jpg"},"parent_id":163012,"plugin":"var DISKS = [\n    { value: 1, color: '#f55142', },\n    { value: 2, color: '#f58742', },\n    { value: 3, color: '#f5c242', },\n    { value: 4, color: '#b6f542', },\n    { value: 5, color: '#42f599', },\n    { value: 6, color: '#42f5ef', },\n    { value: 7, color: '#4293f5', },\n    { value: 8, color: '#7242f5', },\n    { value: 9, color: '#9042f5', },\n    { value: 10, color: '#f542da', },\n]\n\nvar actions = [];\n\nfunction drag (from, to) {\n    actions.push({from, to});\n}\n\nfunction setSpeed (v) {\n    var t = 1/v;\n    data.intervalTime = t \u003e 0.2 ? t : 0.2;\n}\n\nvar data = {\n    disks: [],\n    stack_a: [],\n    stack_b: [],\n    stack_c: [],\n    dragging: undefined,\n    actions: actions,\n    count: 0,\n    size: 4,\n    intervalTime: 0.3,\n}\n\nnew Vue({\n    el: '#root',\n    data: data,\n    \n    mounted: function () {\n        for (var i = 0; i \u003c this.disks.length; i++) {\n            this.stack_a.push(this.disks[i]);\n        }\n        \n        var self = this;\n        function loop () {\n            \n            var action = self.actions.shift();\n            if (action) {\n                self.drag(action.from, action.to);\n            }\n            \n            setTimeout(loop, 1000*self.intervalTime);\n        }\n        loop();\n        \n        this.start();\n    },\n    \n    methods: {\n        \n        allowDrop: function(ev) {\n            ev.preventDefault();\n        },\n        \n        drag: function (from , to) {\n            if (from == 'a' \u0026\u0026 this.stack_a[0]) this.dragging = this.stack_a[0]\n            if (from == 'b' \u0026\u0026 this.stack_b[0]) this.dragging = this.stack_b[0]\n            if (from == 'c' \u0026\u0026 this.stack_c[0]) this.dragging = this.stack_c[0]\n\n            this.ondrop(to);\n        },\n        \n        dragstart: function (disk) {\n            if (this.stack_a[0] || this.stack_b[0] || this.stack_c[0]) {\n                this.dragging = disk;    \n            }\n        },\n        \n        ondrop: function (target) {\n            \n            if (this.dragging == undefined) return;\n            \n            this.count++;\n            \n            var disk = this.dragging;\n            \n            var remove = () =\u003e {\n                if (this.stack_a[0] === disk) this.stack_a.shift()\n                if (this.stack_b[0] === disk) this.stack_b.shift() \n                if (this.stack_c[0] === disk) this.stack_c.shift()\n            }\n            \n            if (target == 'a' \u0026\u0026 (!this.stack_a[0] || this.stack_a[0].value \u003e disk.value)) {\n                remove()\n                this.stack_a.unshift(disk)\n            }\n            else if (target == 'b' \u0026\u0026 (!this.stack_b[0] || this.stack_b[0].value \u003e disk.value)) {\n                remove()\n                this.stack_b.unshift(disk)\n            }\n            else if (target == 'c' \u0026\u0026 (!this.stack_c[0] || this.stack_c[0].value \u003e disk.value)) {\n                remove()\n                this.stack_c.unshift(disk)\n            }\n            \n            \n            this.dragging = undefined;\n            \n        },\n        diskStyle: function (disk) {\n            \n            var h = 80 / this.disks.length;\n            \n            var a_idx = this.stack_a.indexOf(disk);\n            if (a_idx != -1) {\n                var left = 100*1/6;\n                var bottom = (this.stack_a.length - a_idx - 1)*h;\n            }\n            \n            var b_idx = this.stack_b.indexOf(disk);\n            if (b_idx != -1) {\n                var left = 100*3/6;\n                var bottom = (this.stack_b.length - b_idx- 1)*h;\n            }\n            \n            var c_idx = this.stack_c.indexOf(disk);\n            if (c_idx != -1) {\n                var left = 100*5/6;\n                var bottom = (this.stack_c.length - c_idx- 1)*h;\n            }\n            \n            var width = (5 + 25 * disk.value / this.disks.length) + '%';\n            \n            return {\n                backgroundColor: disk.color,\n                color: '#fff',\n                left: left + '%',\n                height: h + '%',\n                bottom: bottom + '%',\n                width: `calc(${width})`\n            }\n        },\n        \n        start: function () {\n            \n            this.disks.length = 0;\n            this.stack_a.length = 0;\n            this.stack_b.length = 0;\n            this.stack_c.length = 0;\n            this.count = 0;\n            this.actions.length = 0;\n            for (var i=0; i \u003c 10 \u0026\u0026 i \u003c this.size; i++) {\n                this.disks.push(DISKS[i]);    \n                this.stack_a.push(DISKS[i])\n            }\n        },\n        \n        resolve: function () {\n            if (window.cracker) {\n                this.start();\n                var self = this;\n                setTimeout(function () {\n                    window.cracker(self.disks.length);    \n                }, 500);\n                \n            }\n        },\n        \n        isTop: function (disk) {\n            return disk === this.stack_a[0] || \n                    disk === this.stack_b[0] ||\n                    disk === this.stack_c[0];\n        }\n    },\n    \n})","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":363,"hashid":"2pds9vv29","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}