拼圖遊戲 | 程式專案 | 橘蘋學習平台

{"id":565291,"student_id":74183,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\r\\n\u003chtml\u003e\\r\\n\u003chead\u003e\\r\\n\\t\u003ctitle\u003e拼圖遊戲\u003c/title\u003e\\r\\n\\t\u003cstyle\u003e\\r\\n\\t\\t.container {\\r\\n\\t\\t\\tdisplay: flex;\\r\\n\\t\\t\\tflex-wrap: wrap;\\r\\n\\t\\t\\twidth: 450px;\\r\\n\\t\\t\\theight: 450px;\\r\\n\\t\\t\\tmargin: 0 auto;\\r\\n\\t\\t}\\r\\n\\t\\t.container img {\\r\\n\\t\\t\\twidth: 150px;\\r\\n\\t\\t\\theight: 150px;\\r\\n\\t\\t\\tobject-fit: cover;\\r\\n\\t\\t\\tcursor: pointer;\\r\\n\\t\\t}\\r\\n\\t\\t.btn-container {\\r\\n\\t\\t\\tdisplay: flex;\\r\\n\\t\\t\\tjustify-content: center;\\r\\n\\t\\t\\tmargin-top: 20px;\\r\\n\\t\\t}\\r\\n\\t\\t.btn {\\r\\n\\t\\t\\tpadding: 10px 20px;\\r\\n\\t\\t\\tbackground-color: #4CAF50;\\r\\n\\t\\t\\tcolor: white;\\r\\n\\t\\t\\tborder: none;\\r\\n\\t\\t\\tborder-radius: 5px;\\r\\n\\t\\t\\tcursor: pointer;\\r\\n\\t\\t}\\r\\n\\t\u003c/style\u003e\\r\\n\u003c/head\u003e\\r\\n\u003cbody\u003e\\r\\n\\t\u003cdiv class=\\\"container\\\"\u003e\\r\\n\\t\\t\u003cimg src=\\\"9.png\\\" alt=\\\"9\\\" onclick=\\\"swap(this)\\\"\u003e\\r\\n\\t\\t\u003cimg src=\\\"8.png\\\" alt=\\\"8\\\" onclick=\\\"swap(this)\\\"\u003e\\r\\n\\t\\t\u003cimg src=\\\"7.png\\\" alt=\\\"7\\\" onclick=\\\"swap(this)\\\"\u003e\\r\\n\\t\\t\u003cimg src=\\\"6.png\\\" alt=\\\"6\\\" onclick=\\\"swap(this)\\\"\u003e\\r\\n\\t\\t\u003cimg src=\\\"5.png\\\" alt=\\\"5\\\" onclick=\\\"swap(this)\\\"\u003e\\r\\n\\t\\t\u003cimg src=\\\"4.png\\\" alt=\\\"4\\\" onclick=\\\"swap(this)\\\"\u003e\\r\\n\\t\\t\u003cimg src=\\\"3.png\\\" alt=\\\"3\\\" onclick=\\\"swap(this)\\\"\u003e\\r\\n\\t\\t\u003cimg src=\\\"2.png\\\" alt=\\\"2\\\" onclick=\\\"swap(this)\\\"\u003e\\r\\n\\t\\t\u003cimg src=\\\"1.png\\\" alt=\\\"1\\\" onclick=\\\"swap(this)\\\"\u003e\\r\\n\\t\u003c/div\u003e\\r\\n\\t\u003cdiv class=\\\"btn-container\\\"\u003e\\r\\n\\t\\t\u003cbutton class=\\\"btn\\\" onclick=\\\"shuffle()\\\"\u003e開始\u003c/button\u003e\\r\\n\\t\u003c/div\u003e\\r\\n\\t\u003cscript\u003e\\r\\n\\t\\tlet firstClick = null;\\r\\n\\t\\tfunction swap(img) {\\r\\n\\t\\t\\tif (firstClick === null) {\\r\\n\\t\\t\\t\\tfirstClick = img;\\r\\n\\t\\t\\t} else {\\r\\n\\t\\t\\t\\tlet temp = img.src;\\r\\n\\t\\t\\t\\timg.src = firstClick.src;\\r\\n\\t\\t\\t\\tfirstClick.src = temp;\\r\\n\\t\\t\\t\\tfirstClick = null;\\r\\n\\t\\t\\t}\\r\\n\\t\\t}\\r\\n\\t\\tfunction shuffle() {\\r\\n\\t\\t\\tlet imgs = document.querySelectorAll('.container img');\\r\\n\\t\\t\\tfor (let i = 0; i \u003c imgs.length; i++) {\\r\\n\\t\\t\\t\\tlet j = Math.floor(Math.random() * imgs.length);\\r\\n\\t\\t\\t\\tlet temp = imgs[i].src;\\r\\n\\t\\t\\t\\timgs[i].src = imgs[j].src;\\r\\n\\t\\t\\t\\timgs[j].src = temp;\\r\\n\\t\\t\\t}\\r\\n\\t\\t}\\r\\n\\t\u003c/script\u003e\\r\\n\u003c/body\u003e\\r\\n\u003c/html\u003e\\r\\n\",\"css\":\"\",\"js\":\"\"}","created_at":"2023-07-14T11:17:21.819+08:00","updated_at":"2023-07-14T12:00:47.329+08:00","name":"拼圖遊戲","language":"web","screenshot":{"url":"https://cdn8.koding.school/uploads/project/screenshot/565291/8970457178dcd552692a31164a26a9f9.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":72,"hashid":"qmds3nkq4","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}

[{"id":12850311,"file_name":"9.png","project_id":565291,"asset_id":650992,"created_at":"2023-07-14T11:18:00.310+08:00","updated_at":"2023-07-14T11:18:00.310+08:00"},{"id":12850312,"file_name":"8.png","project_id":565291,"asset_id":650993,"created_at":"2023-07-14T11:18:00.318+08:00","updated_at":"2023-07-14T11:18:00.318+08:00"},{"id":12850313,"file_name":"7.png","project_id":565291,"asset_id":650994,"created_at":"2023-07-14T11:18:00.326+08:00","updated_at":"2023-07-14T11:18:00.326+08:00"},{"id":12850314,"file_name":"6.png","project_id":565291,"asset_id":650995,"created_at":"2023-07-14T11:18:00.333+08:00","updated_at":"2023-07-14T11:18:00.333+08:00"},{"id":12850315,"file_name":"5.png","project_id":565291,"asset_id":650996,"created_at":"2023-07-14T11:18:00.341+08:00","updated_at":"2023-07-14T11:18:00.341+08:00"},{"id":12850316,"file_name":"4.png","project_id":565291,"asset_id":650997,"created_at":"2023-07-14T11:18:00.349+08:00","updated_at":"2023-07-14T11:18:00.349+08:00"},{"id":12850317,"file_name":"3.png","project_id":565291,"asset_id":650998,"created_at":"2023-07-14T11:18:00.356+08:00","updated_at":"2023-07-14T11:18:00.356+08:00"},{"id":12850318,"file_name":"2.png","project_id":565291,"asset_id":650999,"created_at":"2023-07-14T11:18:00.361+08:00","updated_at":"2023-07-14T11:18:00.361+08:00"},{"id":12850319,"file_name":"1.png","project_id":565291,"asset_id":651000,"created_at":"2023-07-14T11:18:00.368+08:00","updated_at":"2023-07-14T11:18:00.368+08:00"}]