拼圖遊戲 | Programming Project | OrangeApple Learning Platform

{"id":553697,"student_id":10,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n    \u003ctitle\u003e拼圖遊戲\u003c/title\u003e\\n    \u003cstyle\u003e\\n        /* 設定包含圖片的容器的樣式 */\\n        .container {\\n            /* 使用 flex 佈局，讓圖片自動排列 */\\n            display: flex;\\n            flex-wrap: wrap;\\n            /* 設定容器的寬度 */\\n            width: 450px;\\n            /* 水平居中 */\\n            margin: 0 auto;\\n        }\\n\\n        /* 設定圖片的樣式 */\\n        .container img {\\n            /* 設定圖片的寬度和高度 */\\n            width: 150px;\\n            height: 150px;\\n            /* 設定圖片的填充方式 */\\n            object-fit: cover;\\n            /* 設定滑鼠指針的樣式 */\\n            cursor: pointer;\\n        }\\n\\n        /* 設定開始遊戲按鈕的樣式 */\\n        .start-button {\\n            /* 設定按鈕的顯示方式 */\\n            display: block;\\n            /* 水平居中 */\\n            margin: 20px auto;\\n            /* 設定按鈕的內邊距 */\\n            padding: 10px 20px;\\n            /* 設定按鈕的字體大小 */\\n            font-size: 20px;\\n            /* 設定按鈕的背景顏色 */\\n            background-color: #4CAF50;\\n            /* 設定按鈕的文字顏色 */\\n            color: white;\\n            /* 設定按鈕的邊框 */\\n            border: none;\\n            /* 設定按鈕的圓角 */\\n            border-radius: 5px;\\n            /* 設定滑鼠指針的樣式 */\\n            cursor: pointer;\\n        }\\n\\n    \u003c/style\u003e\\n    \u003cscript\u003e\\n        // 宣告一個變數，用於記錄第一張被點擊的圖片\\n        let firstImg = null;\\n\\n        // 定義一個函式，用於隨機交換圖片的位置\\n        function shuffleImages() {\\n            // 取得所有圖片元素\\n            const images = document.querySelectorAll('.container img');\\n            // 從最後一張圖片開始，向前遍歷每一張圖片\\n            for (let i = images.length - 1; i \u003e 0; i--) {\\n                // 隨機生成一個介於 0 和 i 之間的整數\\n                const j = Math.floor(Math.random() * (i + 1));\\n                // 交換第 i 張圖片和第 j 張圖片的位置\\n                const tempSrc = images[i].src;\\n                images[i].src = images[j].src;\\n                images[j].src = tempSrc;\\n            }\\n        }\\n\\n        // 定義一個函式，用於交換兩張圖片的位置\\n        function swapImages(event) {\\n            // 取得被點擊的圖片元素\\n            const clickedImg = event.target;\\n            // 如果第一張圖片還沒有被選中，則將它記錄下來\\n            if (firstImg === null) {\\n                firstImg = clickedImg;\\n            } else {\\n                // 如果第一張圖片已經被選中，則交換它和第二張圖片的位置\\n                const tempSrc = firstImg.src;\\n                firstImg.src = clickedImg.src;\\n                clickedImg.src = tempSrc;\\n                firstImg = null;\\n            }\\n        }\\n\\n    \u003c/script\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003cdiv class=\\\"container\\\"\u003e\\n        \u003cimg src=\\\"1.png\\\" alt=\\\"1\\\" onclick=\\\"swapImages(event)\\\"\u003e\\n        \u003cimg src=\\\"2.png\\\" alt=\\\"2\\\" onclick=\\\"swapImages(event)\\\"\u003e\\n        \u003cimg src=\\\"3.png\\\" alt=\\\"3\\\" onclick=\\\"swapImages(event)\\\"\u003e\\n        \u003cimg src=\\\"4.png\\\" alt=\\\"4\\\" onclick=\\\"swapImages(event)\\\"\u003e\\n        \u003cimg src=\\\"5.png\\\" alt=\\\"5\\\" onclick=\\\"swapImages(event)\\\"\u003e\\n        \u003cimg src=\\\"6.png\\\" alt=\\\"6\\\" onclick=\\\"swapImages(event)\\\"\u003e\\n        \u003cimg src=\\\"7.png\\\" alt=\\\"7\\\" onclick=\\\"swapImages(event)\\\"\u003e\\n        \u003cimg src=\\\"8.png\\\" alt=\\\"8\\\" onclick=\\\"swapImages(event)\\\"\u003e\\n        \u003cimg src=\\\"9.png\\\" alt=\\\"9\\\" onclick=\\\"swapImages(event)\\\"\u003e\\n    \u003c/div\u003e\\n    \u003cbutton class=\\\"start-button\\\" onclick=\\\"shuffleImages()\\\"\u003e開始\u003c/button\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"\",\"js\":\"\"}","created_at":"2023-06-22T01:16:11.970+08:00","updated_at":"2023-06-22T14:08:42.036+08:00","name":"拼圖遊戲","language":"web","screenshot":{"url":"/uploads/project/screenshot/553697/0b92bb2be94477afbbaf89d624e71083.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":311,"hashid":"36ysd8gkk","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}

[{"id":12629787,"file_name":"9.png","project_id":553697,"asset_id":640526,"created_at":"2023-06-22T01:57:59.260+08:00","updated_at":"2023-06-22T01:57:59.260+08:00"},{"id":12629779,"file_name":"1.png","project_id":553697,"asset_id":640518,"created_at":"2023-06-22T01:57:55.660+08:00","updated_at":"2023-06-22T01:57:55.660+08:00"},{"id":12629780,"file_name":"2.png","project_id":553697,"asset_id":640519,"created_at":"2023-06-22T01:57:55.662+08:00","updated_at":"2023-06-22T01:57:55.662+08:00"},{"id":12629772,"file_name":"image.png","project_id":553697,"asset_id":640517,"created_at":"2023-06-22T01:16:23.340+08:00","updated_at":"2023-06-22T01:16:23.340+08:00"},{"id":12629781,"file_name":"3.png","project_id":553697,"asset_id":640520,"created_at":"2023-06-22T01:57:56.737+08:00","updated_at":"2023-06-22T01:57:56.737+08:00"},{"id":12629782,"file_name":"4.png","project_id":553697,"asset_id":640521,"created_at":"2023-06-22T01:57:56.738+08:00","updated_at":"2023-06-22T01:57:56.738+08:00"},{"id":12629783,"file_name":"5.png","project_id":553697,"asset_id":640522,"created_at":"2023-06-22T01:57:58.044+08:00","updated_at":"2023-06-22T01:57:58.044+08:00"},{"id":12629784,"file_name":"6.png","project_id":553697,"asset_id":640523,"created_at":"2023-06-22T01:57:58.045+08:00","updated_at":"2023-06-22T01:57:58.045+08:00"},{"id":12629785,"file_name":"7.png","project_id":553697,"asset_id":640524,"created_at":"2023-06-22T01:57:58.596+08:00","updated_at":"2023-06-22T01:57:58.596+08:00"},{"id":12629786,"file_name":"8.png","project_id":553697,"asset_id":640525,"created_at":"2023-06-22T01:57:58.597+08:00","updated_at":"2023-06-22T01:57:58.597+08:00"}]