打造你的擊落冰雹 copy | 程式專案

{"id":1209802,"student_id":2589,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"zh-Hant\\\"\u003e\\n\u003chead\u003e\\n    \u003cmeta charset=\\\"UTF-8\\\"\u003e\\n    \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e\\n    \u003ctitle\u003e打造你的擊落冰雹\u003c/title\u003e\\n    \u003clink href=\\\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css\\\" rel=\\\"stylesheet\\\" integrity=\\\"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\\\" crossorigin=\\\"anonymous\\\"\u003e\\n    \u003cstyle\u003e\\n        body {\\n            padding-top: 20px;\\n            background-color: #f8f9fa;\\n        }\\n        .image-container {\\n            margin-bottom: 30px;\\n            text-align: center;\\n            /* 為懶載入的圖片預留空間，避免載入時佈局跳動 */\\n            /* 可以設置一個最小高度，或根據圖片比例設置 aspect-ratio (較新瀏覽器支援) */\\n            min-height: 200px;\\n            /* 根據你的圖片大致高度調整 */\\n        }\\n        .download-image-link {\\n            display: flex;\\n            text-decoration: none;\\n            border-radius: 0.25rem;\\n            overflow: hidden;\\n            border: 1px solid #dee2e6;\\n            background-color: #000;\\n            /* 黑色背景 */\\n            padding: 10px;\\n            box-shadow: 0 1px 3px rgba(0,0,0,0.1);\\n            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\\n            /* 使用 flex 讓圖片居中 */\\n            align-items: center;\\n            justify-content: center;\\n            /* 設定 1:1 比例 */\\n            aspect-ratio: 1 / 1;\\n            width: 100%;\\n        }\\n        .download-image-link img {\\n            display: block;\\n            max-width: 100%;\\n            max-height: 100%;\\n            width: auto;\\n            height: auto;\\n            object-fit: contain;\\n            /* 保持圖片比例並完整顯示在容器內 */\\n            cursor: pointer;\\n        }\\n        .download-image-link:hover {\\n            transform: scale(1.03);\\n            box-shadow: 0 4px 8px rgba(0,0,0,0.15);\\n            text-decoration: none;\\n        }\\n        h1 {\\n            color: #343a40;\\n        }\\n        h3 {\\n            color: #495057;\\n            font-weight: 600;\\n        }\\n        .content-section {\\n            background-color: #fff;\\n            padding: 25px;\\n            border-radius: 8px;\\n            box-shadow: 0 2px 4px rgba(0,0,0,0.08);\\n        }\\n        .content-section ol {\\n            line-height: 1.8;\\n        }\\n        .content-section p {\\n            line-height: 1.8;\\n        }\\n        .text-muted {\\n            color: #6c757d !important;\\n        }\\n        /* 簡單的圖片載入失敗樣式 */\\n        img[data-load-error=\\\"true\\\"] {\\n            position: relative;\\n            background-color: #f8d7da;\\n            /* 淺紅色背景表示錯誤 */\\n            color: #721c24;\\n            /* 深紅色文字 */\\n            text-align: center;\\n            padding: 10px;\\n            min-height: 100px;\\n            /* 給錯誤訊息留空間 */\\n            width: 100%;\\n            /* 佔滿容器寬度 */\\n        }\\n        img[data-load-error=\\\"true\\\"]::after {\\n            content: attr(alt) ' 加載失敗';\\n            /* 顯示替代文字和錯誤訊息 */\\n            position: absolute;\\n            top: 50%;\\n            left: 50%;\\n            transform: translate(-50%, -50%);\\n            font-size: 0.9em;\\n        }\\n    \u003c/style\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003cdiv class=\\\"container p-5\\\"\u003e\\n        \u003ch1 class=\\\"text-center mb-5\\\"\u003e海洋守護隊\u003c/h1\u003e\\n\\n        \u003cdiv class=\\\"content-section mb-4\\\"\u003e\\n            \u003ch5 class=\\\"mb-3\\\"\u003e測驗方式：\u003c/h3\u003e\\n            \u003col class=\\\"ps-4\\\"\u003e\\n                \u003cli class=\\\"mb-2\\\"\u003e確認考題：輸入邀請碼並進入課程，來取得本試卷。\u003c/li\u003e\\n                \u003cli class=\\\"mb-2\\\"\u003e建立專案：在瀏覽器中開啟新分頁後，到橘蘋學習平台的首頁（\u003ca href=\\\"https://koding.school/\\\" target=\\\"_blank\\\"\u003e連結\u003c/a\u003e），點擊上方的創造按鈕，接著選擇 Scratch3，然後輸入「打造你的擊落冰雹」，並點擊新增作品按鈕。待頁面載入完成後，就會開啟一個新的 Scratch 專案。\u003c/li\u003e\\n                \u003cli class=\\\"mb-2\\\"\u003e下載素材：接著回到試卷頁面，點擊下方的各個素材圖示，來下載需要使用的專案素材。不一定全部都需要使用到，但不能使用自行準備的素材。\u003c/li\u003e\\n                \u003cli class=\\\"mb-2\\\"\u003e匯入素材：下載完後回到專案頁面，滑到右下方的貓咪圖示，並點擊裡面的上傳按鈕，來匯入角色素材。建立完角色後，如果需要的話，也可以到造型頁面中匯入造型素材。最後，別忘記滑到右下角舞台內的圖片新增按鈕，並點擊裡面的上傳按鈕來匯入背景。\u003c/li\u003e\\n                \u003cli class=\\\"mb-2\\\"\u003e製作專案：匯入完成後，就開始依照以下的任務指令開始製作專案，請特別留意評分項目，只需要完成評分項目的需求即可，額外製作的內容不予計分。\u003c/li\u003e\\n                \u003cli class=\\\"mb-2\\\"\u003e繳交成果：完成測驗後，主動向專員回報已完成測驗，並提供專案連結。專員收件後，後續會有考官協助評分，待考官評分完成後會將結果提供給專員。\u003c/li\u003e\\n            \u003c/ol\u003e\\n        \u003c/div\u003e\\n\\n        \u003cdiv class=\\\"content-section mb-4\\\"\u003e\\n            \u003ch5 class=\\\"mb-3\\\"\u003e任務說明：\u003c/h3\u003e\\n            \u003cp\u003e\\n                海洋正受到大量的塑膠垃圾威脅！請操作「叩叮」，在 30 秒內發射子彈清除塑膠垃圾。\\n            \u003c/p\u003e\\n        \u003c/div\u003e\\n\\n        \u003cdiv class=\\\"content-section mb-5\\\"\u003e\\n            \u003ch5 class=\\\"mb-3\\\"\u003e評分方式：\u003c/h3\u003e\\n            \u003cp\u003e\\n                考官將逐項確認以下評分項目，正確完成一項得 20 分，未完成得 0 分，最後加總。\\n            \u003c/p\u003e\\n        \u003c/div\u003e\\n\\n        \u003cdiv class=\\\"content-section mb-5\\\"\u003e\\n            \u003ch5 class=\\\"mb-3\\\"\u003e評分項目：\u003c/h3\u003e\\n            \u003col class=\\\"ps-4\\\"\u003e\\n                \u003cli class=\\\"mb-2\\\"\u003e開場 LOGO 動畫：點擊綠旗，不進行其他操作，觀察畫面中央的標題。LOGO 標題呈現忽大忽小和左右搖擺的動態效果，且不會只執行一次就停止。\u003c/li\u003e\\n                \u003cli class=\\\"mb-2\\\"\u003e角色行走動畫：遊戲開始後，持續按住右鍵移動角色，然後按住右鍵移動角色。角色在移動時，雙腳有交替踏步的造型切換效果，而非單純滑行。\u003c/li\u003e\\n                \u003cli class=\\\"mb-2\\\"\u003e邊界防止穿牆：控制角色持續往畫面的最左邊移動，然後往最右邊。角色移動到邊緣時會被擋住停下，不會整個人穿出畫面消失不見。\u003c/li\u003e\\n                \u003cli class=\\\"mb-2\\\"\u003e倒數計時功能：觀察畫面左上角的時間變數變化，等待約 3 秒。時間數字能夠以每秒扣 1 的速度穩定倒數（例如從 30 變 29、28）。\u003c/li\u003e\\n                \u003cli class=\\\"mb-2\\\"\u003e遊戲結束判定：等待倒數計時歸零（0 秒）的那一瞬間。畫面顯示 Time's up 的圖片，且所有角色無法再移動，所有畫面上的動作都停止。\u003c/li\u003e\\n            \u003c/ol\u003e\\n        \u003c/div\u003e\\n\\n        \u003cdiv class=\\\"content-section mb-4\\\"\u003e\\n            \u003ch5 class=\\\"mb-3\\\"\u003e任務提示：\u003c/h3\u003e\\n            \u003col class=\\\"ps-4\\\"\u003e\\n                \u003cli class=\\\"mb-2\\\"\u003e設定初始化：綠旗點擊時，隱藏角色並重設位置；「LOGO 標題」需顯示並定位於中央。\u003c/li\u003e\\n                \u003cli class=\\\"mb-2\\\"\u003e開場動畫：為「LOGO 標題」製作重複無限次的縮放和搖擺動畫（利用迴圈與等待積木）。\u003c/li\u003e\\n                \u003cli class=\\\"mb-2\\\"\u003e遊戲開始機制：點擊「LOGO 標題」後廣播「遊戲開始」，隱藏標題並顯示「叩叮」與變數（分數、時間）。\u003c/li\u003e\\n                \u003cli class=\\\"mb-2\\\"\u003e角色移動與動畫：使用左右方向鍵控制叩叮移動，需搭配「造型換成下一個」製作走路動畫，並設定邊界檢查（如 X 座標小於 -210 時往回推）。\u003c/li\u003e\\n                \u003cli class=\\\"mb-2\\\"\u003e計時器系統：設定時間變數初始為 30，使用「重複直到（時間 = 0）」積木，每秒將時間改變 -1。\u003c/li\u003e\\n                \u003cli class=\\\"mb-2\\\"\u003e計分規則：子彈擊中海洋垃圾（寶特瓶跟輪胎）得 1 分；叩叮被海洋垃圾擊中（收到受傷訊息）扣 5 分。\u003c/li\u003e\\n                \u003cli class=\\\"mb-2\\\"\u003e遊戲結束：當時間歸零時，廣播「遊戲結束」，顯示「Time's up」角色並停止全部程式。\u003c/li\u003e\\n            \u003c/ol\u003e\\n        \u003c/div\u003e\\n\\n        \u003ch2 class=\\\"text-center mb-5 mt-5\\\"\u003e點擊圖片即可下載素材\u003c/h2\u003e\\n\\n        \u003c!-- 圖片將會動態插入到這裡 --\u003e\\n        \u003cdiv class=\\\"row\\\" id=\\\"image-gallery\\\"\u003e\\n            \u003c!-- 範例：載入中的提示 --\u003e\\n            \u003cdiv class=\\\"col-12 text-center\\\" id=\\\"loading-indicator\\\"\u003e\\n                \u003cp\u003e\\n                    正在載入圖片...\\n                \u003c/p\u003e\\n            \u003c/div\u003e\\n        \u003c/div\u003e\\n        \u003c!-- /row --\u003e\\n\\n    \u003c/div\u003e\\n    \u003c!-- /container --\u003e\\n\\n    \u003c!-- jQuery --\u003e\\n    \u003cscript src=\\\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js\\\" integrity=\\\"sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==\\\" crossorigin=\\\"anonymous\\\" referrerpolicy=\\\"no-referrer\\\"\u003e\u003c/script\u003e\\n    \u003c!-- Bootstrap Bundle JS (includes Popper for tooltips) --\u003e\\n    \u003cscript src=\\\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js\\\" integrity=\\\"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM\\\" crossorigin=\\\"anonymous\\\"\u003e\u003c/script\u003e\\n\\n    \u003cscript\u003e\\n        $(document).ready(function() {\\n            const gallery = $('#image-gallery');\\n            const loadingIndicator = $('#loading-indicator');\\n\\n            // --- 圖片資料陣列 ---\\n            // 使用 ./檔名.png 格式\\n            const images = [\\n                \\\"./1.svg\\\",\\n                \\\"./2.svg\\\",\\n                \\\"./3.png\\\",\\n                \\\"./4.jpg\\\",\\n                \\\"./5.png\\\",\\n                \\\"./6.png\\\",\\n                \\\"./7.png\\\",\\n                \\\"./8.png\\\",\\n                \\\"./9.png\\\",\\n                \\\"./10.png\\\",\\n                \\\"./11.png\\\",\\n                \\\"./12.png\\\",\\n                \\\"./13.png\\\",\\n                \\\"./14.png\\\",\\n                \\\"./15.png\\\",\\n                \\\"./16.png\\\"\\n            ];\\n\\n            // 清空載入提示\\n            loadingIndicator.remove();\\n\\n            // 遍歷圖片陣列，生成 HTML 並添加到頁面\\n            images.forEach(imageUrl =\u003e {\\n                // 從URL 取得檔名作為 downloadName 和 alt\\n                const fileName = imageUrl.substring(imageUrl.lastIndexOf('/') + 1);\\n                const downloadName = fileName;\\n                const altText = fileName;\\n\\n                // 生成圖片的 HTML 結構 - 改為 col-md-3 (四張一列)\\n                const imageHtml = `\\n                \u003cdiv class=\\\"col-md-3 col-sm-6 image-container\\\"\u003e\\n                \u003ca href=\\\"${imageUrl}\\\"\\n                download=\\\"${downloadName}\\\"\\n                class=\\\"download-image-link\\\"\\n                data-bs-toggle=\\\"tooltip\\\"\\n                data-bs-placement=\\\"top\\\"\\n                title=\\\"點擊下載 ${downloadName}\\\"\u003e\\n                \u003cimg src=\\\"${imageUrl}\\\"\\n                alt=\\\"${altText}\\\"\\n                loading=\\\"lazy\\\"\\n                onerror=\\\"this.dataset.loadError='true'; this.src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';\\\"\u003e\\n                \u003c/a\u003e\\n                \u003c/div\u003e\\n                `;\\n\\n                gallery.append(imageHtml);\\n            }\\n\\n            );\\n\\n            // 初始化所有動態添加的元素的 Tooltip\\n            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle=\\\"tooltip\\\"]'));\\n            tooltipTriggerList.map(function (tooltipTriggerEl) {\\n                // 確保舊的 tooltip 實例被銷毀 (如果有的話)，再創建新的\\n                var existingTooltip = bootstrap.Tooltip.getInstance(tooltipTriggerEl);\\n                if (existingTooltip) {\\n                    existingTooltip.dispose();\\n                }\\n                return new bootstrap.Tooltip(tooltipTriggerEl);\\n            }\\n\\n            );\\n\\n            console.log(`圖片已動態載入 (${images.length} 張)，並已啟用懶載入。`);\\n        }\\n\\n        );\\n\\n    \u003c/script\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"\",\"js\":\"\"}","created_at":"2026-01-15T19:14:15.675+08:00","updated_at":"2026-01-15T19:14:15.675+08:00","name":"打造你的擊落冰雹 copy","language":"web","screenshot":{"url":null},"parent_id":1205086,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":26,"hashid":"2pds3pz3z","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}

[{"id":43761077,"file_name":"11.png","project_id":1209802,"asset_id":879101,"created_at":"2026-01-15T19:14:15.682+08:00","updated_at":"2026-01-15T19:14:15.682+08:00"},{"id":43761078,"file_name":"12.png","project_id":1209802,"asset_id":879102,"created_at":"2026-01-15T19:14:15.683+08:00","updated_at":"2026-01-15T19:14:15.683+08:00"},{"id":43761079,"file_name":"koding.png","project_id":1209802,"asset_id":879103,"created_at":"2026-01-15T19:14:15.684+08:00","updated_at":"2026-01-15T19:14:15.684+08:00"},{"id":43761080,"file_name":"15.png","project_id":1209802,"asset_id":879104,"created_at":"2026-01-15T19:14:15.685+08:00","updated_at":"2026-01-15T19:14:15.685+08:00"},{"id":43761081,"file_name":"16.png","project_id":1209802,"asset_id":879105,"created_at":"2026-01-15T19:14:15.687+08:00","updated_at":"2026-01-15T19:14:15.687+08:00"},{"id":43761082,"file_name":"1.svg","project_id":1209802,"asset_id":879106,"created_at":"2026-01-15T19:14:15.688+08:00","updated_at":"2026-01-15T19:14:15.688+08:00"},{"id":43761083,"file_name":"2.svg","project_id":1209802,"asset_id":879107,"created_at":"2026-01-15T19:14:15.689+08:00","updated_at":"2026-01-15T19:14:15.689+08:00"},{"id":43761084,"file_name":"5.png","project_id":1209802,"asset_id":879108,"created_at":"2026-01-15T19:14:15.690+08:00","updated_at":"2026-01-15T19:14:15.690+08:00"},{"id":43761085,"file_name":"6.png","project_id":1209802,"asset_id":879109,"created_at":"2026-01-15T19:14:15.691+08:00","updated_at":"2026-01-15T19:14:15.691+08:00"},{"id":43761086,"file_name":"3.png","project_id":1209802,"asset_id":879110,"created_at":"2026-01-15T19:14:15.692+08:00","updated_at":"2026-01-15T19:14:15.692+08:00"},{"id":43761087,"file_name":"4.jpg","project_id":1209802,"asset_id":879111,"created_at":"2026-01-15T19:14:15.694+08:00","updated_at":"2026-01-15T19:14:15.694+08:00"},{"id":43761088,"file_name":"9.png","project_id":1209802,"asset_id":879112,"created_at":"2026-01-15T19:14:15.695+08:00","updated_at":"2026-01-15T19:14:15.695+08:00"},{"id":43761089,"file_name":"10.png","project_id":1209802,"asset_id":879113,"created_at":"2026-01-15T19:14:15.696+08:00","updated_at":"2026-01-15T19:14:15.696+08:00"},{"id":43761090,"file_name":"13.png","project_id":1209802,"asset_id":879114,"created_at":"2026-01-15T19:14:15.697+08:00","updated_at":"2026-01-15T19:14:15.697+08:00"},{"id":43761091,"file_name":"14.png","project_id":1209802,"asset_id":879115,"created_at":"2026-01-15T19:14:15.697+08:00","updated_at":"2026-01-15T19:14:15.697+08:00"},{"id":43761092,"file_name":"7.png","project_id":1209802,"asset_id":879116,"created_at":"2026-01-15T19:14:15.698+08:00","updated_at":"2026-01-15T19:14:15.698+08:00"},{"id":43761093,"file_name":"8.png","project_id":1209802,"asset_id":879117,"created_at":"2026-01-15T19:14:15.699+08:00","updated_at":"2026-01-15T19:14:15.699+08:00"}]