賽道繪製工具 | JavaScript Programming Project

{"id":48760,"student_id":10,"content":"pen.size = 2;\nvar mode = 'manual'; // manual、normal、drawing、dragging\nvar nodes = [];\nvar currentNode;\n\nforever(function() {\n    if (mode === 'manual') {\n        var texts = [\n            '------------------ 操作手冊 ------------------',\n            '1. 點擊畫面 -\u003e 進入繪製模式                   ',\n            '2. 按鍵 esc 返回一般模式                      ',\n            '3. 按鍵 d 刪除節點                            ',\n            '4. 按鍵 e 匯出地圖資料                        ',\n            '5. 按鍵 h 顯示按鍵功能提示                    ',\n            '6. 一般模式下「點擊節點」來修改位置           ',\n            '----------------------------------------------',\n        ]\n        for (var i = 0; i \u003c texts.length; i++) {\n            print(texts[i], 100, 100 + i*30, 'black', 16, 'monospace');\n        }\n    } else {\n        // 繪製已完成的線\n        nodes.forEach((node) =\u003e {\n            if (node.right) pen.drawLine(node.x, node.y, node.right.x, node.right.y);\n        });\n        // 編輯模式下提示的線\n        if (mode == 'drawing') {\n            var p = nodes[nodes.length - 1];\n            pen.drawLine(p.x, p.y, cursor.x, cursor.y);\n        }\n    }\n});\n\nwhen('click', function () {\n    if (mode === 'dragging') {\n        nodes.forEach(function (n) {\n            n.modify = false\n        });\n        return mode = 'normal';\n    }\n    if (mode === 'normal') {\n        for (var i = 0; i \u003c nodes.length; i++) {\n            if (nodes[i].touched(cursor)) {\n                nodes[i].modify = true;\n                return mode = 'dragging';\n            }\n        }\n    }\n\n    mode = 'drawing';\n    var node = createSprite('red.png');\n\n    node.modify = false;\n    node.moveTo(cursor);\n    nodes.push(node);\n\n    node.forever(function () {\n        if (node.modify) node.moveTo(cursor);\n        node.scale = node.touched(cursor) ? 1.1: 0.8;\n    });\n\n    // 第一個節點不需要和別的節點相關聯\n    if (currentNode === undefined) {\n        currentNode = node;\n    } else {\n        currentNode.right = node;\n        node.left = currentNode;\n        currentNode = node;\n    }\n});\n\n\n// 按鍵 h 顯示按鍵功能提示\nwhen('keydown', 'h', function () {\n    mode = 'manual';\n});\n\n// 按鍵 esc 返回一般模式\nwhen('keydown', 'esc', function () {\n    mode = 'normal';\n    currentNode = undefined;\n});\n\n// 按鍵 d 刪除節點\nwhen('keydown', 'd', function () {\n    nodes.forEach((node) =\u003e {\n        if (node.touched(cursor)) {\n            if (node.left) node.left.right = node.right;\n            if (node.right) node.right.left = node.left;\n            nodes.splice(nodes.indexOf(node), 1);\n            node.destroy();\n        }\n    });\n});\n\n// 匯出地圖資料\nwhen('keyup', 'e', function () {\n    var groups = [];\n    for (var i = 0; i \u003c nodes.length; i++) {\n        if (nodes[i].left !== undefined) continue;\n\n        var lines = [];\n        var head = nodes[i];\n        lines.push({\n            x: Math.round(head.x),\n            y: Math.round(head.y),\n        });\n        while (head.right) {\n            head = head.right;\n            lines.push({\n                x: Math.round(head.x),\n                y: Math.round(head.y),\n            });\n        }\n        if (lines.length \u003e 1) groups.push(lines);\n\n    }\n    alert('主控台中複製地圖資料');\n    console.log(JSON.stringify(groups));\n});","created_at":"2018-11-16T16:03:48.418+08:00","updated_at":"2024-01-19T17:10:46.258+08:00","name":"賽道繪製工具","language":"javascript","screenshot":{"url":"/uploads/project/screenshot/48760/0cba6ef3e3b5f894e8b0fcae74eb896f.jpg"},"parent_id":2,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":479,"hashid":"36ys55kv","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}