拼圖遊戲 | Programming Project | OrangeApple Learning Platform

{"id":553728,"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            display: flex;\\n            /* 使用 flex 顯示方式 */\\n            flex-wrap: wrap;\\n            /* 允許圖片換行 */\\n            width: 450px;\\n            /* 設置寬度為 450 像素 */\\n            height: 450px;\\n            /* 設置高度為 450 像素 */\\n            margin: 0 auto;\\n            /* 水平居中對齊 */\\n        }\\n\\n        /* 定義每個拼圖圖片的樣式 */\\n        .container img {\\n            width: 150px;\\n            /* 設置寬度為 150 像素 */\\n            height: 150px;\\n            /* 設置高度為 150 像素 */\\n            object-fit: cover;\\n            /* 調整圖片大小以填滿容器 */\\n            cursor: pointer;\\n            /* 設置指針樣式 */\\n        }\\n\\n        /* 定義包含「開始」按鈕的容器的樣式 */\\n        .btn-container {\\n            display: flex;\\n            /* 使用 flex 顯示方式 */\\n            justify-content: center;\\n            /* 水平居中對齊 */\\n            margin-top: 20px;\\n            /* 設置上邊距為 20 像素 */\\n        }\\n\\n        /* 定義「開始」按鈕的樣式 */\\n        .btn {\\n            padding: 10px 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\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003cdiv class=\\\"container\\\"\u003e\\n        \u003cimg src=\\\"9.png\\\" alt=\\\"9\\\" onclick=\\\"swap(this)\\\"\u003e\\n        \u003cimg src=\\\"8.png\\\" alt=\\\"8\\\" onclick=\\\"swap(this)\\\"\u003e\\n        \u003cimg src=\\\"7.png\\\" alt=\\\"7\\\" onclick=\\\"swap(this)\\\"\u003e\\n        \u003cimg src=\\\"6.png\\\" alt=\\\"6\\\" onclick=\\\"swap(this)\\\"\u003e\\n        \u003cimg src=\\\"5.png\\\" alt=\\\"5\\\" onclick=\\\"swap(this)\\\"\u003e\\n        \u003cimg src=\\\"4.png\\\" alt=\\\"4\\\" onclick=\\\"swap(this)\\\"\u003e\\n        \u003cimg src=\\\"3.png\\\" alt=\\\"3\\\" onclick=\\\"swap(this)\\\"\u003e\\n        \u003cimg src=\\\"2.png\\\" alt=\\\"2\\\" onclick=\\\"swap(this)\\\"\u003e\\n        \u003cimg src=\\\"1.png\\\" alt=\\\"1\\\" onclick=\\\"swap(this)\\\"\u003e\\n    \u003c/div\u003e\\n    \u003cdiv class=\\\"btn-container\\\"\u003e\\n        \u003cbutton class=\\\"btn\\\" onclick=\\\"shuffle()\\\"\u003e開始\u003c/button\u003e\\n    \u003c/div\u003e\\n    \u003cscript\u003e\\n        // 定義一個變量，用於保存第一次點擊的圖片\\n        let firstClick = null;\\n\\n        // 定義一個函數，用於交換兩個拼圖圖片的位置\\n        function swap(img) {\\n            // 如果這是第一次點擊，則將其保存在 firstClick 變量中\\n            if (firstClick === null) {\\n                firstClick = img;\\n            } else {\\n                // 否則，交換這兩個圖片的位置，然後將 firstClick 重置為 null\\n                let temp = img.src;\\n                img.src = firstClick.src;\\n                firstClick.src = temp;\\n                firstClick = null;\\n            }\\n        }\\n\\n        // 定義一個函數，用於隨機打亂所有拼圖圖片的位置\\n        function shuffle() {\\n            // 獲取所有拼圖圖片\\n            let imgs = document.querySelectorAll('.container img');\\n            // 遍歷所有圖片\\n            for (let i = 0; i \u003c imgs.length; i++) {\\n                // 隨機選擇一個位置進行交換\\n                let j = Math.floor(Math.random() * imgs.length);\\n                let temp = imgs[i].src;\\n                imgs[i].src = imgs[j].src;\\n                imgs[j].src = temp;\\n            }\\n        }\\n    \u003c/script\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"/* 設定整個頁面內容水平置中、內寬為 30 像素：*/\\nbody {\\n    text-align: center;\\n    padding: 30px;\\n}\\n\\n/* 設定圖片的寬度為銀幕一半寬 */\\nimg {    \\n    max-width: 50%; \\n}\\n\\n/* 設定文字的顏色為淡黑色 */\\np {\\n    color: #555555;\\n}\",\"js\":\"// 創造一個函式指令 hello：\\nfunction hello () {\\n    // 讓網頁跳出文字訊息：\\n    alert('叩叮：\\\\n嗨你好～ 讓我們一起加油寫出漂漂亮亮的網頁唄！');\\n}\"}","created_at":"2023-06-22T14:52:12.842+08:00","updated_at":"2023-06-22T15:11:33.748+08:00","name":"拼圖遊戲","language":"web","screenshot":{"url":"/uploads/project/screenshot/553728/f76ff906d829626bdb8f2f6c17cc7e08.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":326,"hashid":"gk4spd49g","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}

[{"id":12630322,"file_name":"3.png","project_id":553728,"asset_id":640548,"created_at":"2023-06-22T14:52:37.089+08:00","updated_at":"2023-06-22T14:52:37.089+08:00"},{"id":12630323,"file_name":"4.png","project_id":553728,"asset_id":640549,"created_at":"2023-06-22T14:52:37.091+08:00","updated_at":"2023-06-22T14:52:37.091+08:00"},{"id":12630319,"file_name":"koding.png","project_id":553728,"asset_id":302342,"created_at":"2023-06-22T14:52:12.849+08:00","updated_at":"2023-06-22T14:52:12.849+08:00"},{"id":12630320,"file_name":"1.png","project_id":553728,"asset_id":640546,"created_at":"2023-06-22T14:52:36.355+08:00","updated_at":"2023-06-22T14:52:36.355+08:00"},{"id":12630321,"file_name":"2.png","project_id":553728,"asset_id":640547,"created_at":"2023-06-22T14:52:36.356+08:00","updated_at":"2023-06-22T14:52:36.356+08:00"},{"id":12630324,"file_name":"5.png","project_id":553728,"asset_id":640550,"created_at":"2023-06-22T14:52:37.814+08:00","updated_at":"2023-06-22T14:52:37.814+08:00"},{"id":12630325,"file_name":"6.png","project_id":553728,"asset_id":640551,"created_at":"2023-06-22T14:52:37.817+08:00","updated_at":"2023-06-22T14:52:37.817+08:00"},{"id":12630326,"file_name":"7.png","project_id":553728,"asset_id":640552,"created_at":"2023-06-22T14:52:38.634+08:00","updated_at":"2023-06-22T14:52:38.634+08:00"},{"id":12630327,"file_name":"8.png","project_id":553728,"asset_id":640553,"created_at":"2023-06-22T14:52:38.636+08:00","updated_at":"2023-06-22T14:52:38.636+08:00"},{"id":12630328,"file_name":"9.png","project_id":553728,"asset_id":640554,"created_at":"2023-06-22T14:52:39.048+08:00","updated_at":"2023-06-22T14:52:39.048+08:00"}]