海洋守護隊 | 程式專案 | 橘蘋學習平台

{"id":1205086,"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            \u003cp\u003e\\n                應試者閱讀完試卷說明後，就可以點擊練習頁籤開始依照說明製作專案。請特別留意評分項目，只需完成指定項目，額外製作的內容不予計分。完成測驗後，主動向專員回報並提供專案，收件後會有考官協助評分，並將結果請專員提供給應試者。\\n            \u003c/p\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 時往回推）。每次移動時，建立子彈分身並移動到角色的位置，然後重複向上移動直到 Y 座標高於舞台頂部。\u003c/li\u003e\\n                \u003cli class=\\\"mb-2\\\"\u003e海洋垃圾掉落：幫兩個海洋垃圾分別建立「分身」，並每隔「隨機」秒數建立分身，並在建立後將該分身移動到遊戲頂部的隨機水平位置，然後只用重複直到積木不停改變該角色的 Y 座標直到底部。\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    \u003c/div\u003e\\n    \u003c!-- /container --\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"\",\"js\":\"\"}","created_at":"2026-01-09T16:30:06.795+08:00","updated_at":"2026-01-15T19:39:22.269+08:00","name":"海洋守護隊","language":"web","screenshot":{"url":"https://cdn9.koding.school/uploads/project/screenshot/1205086/d26837d0e5e9289fc07c71f44908012b.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":22,"hashid":"npmsrwzg3","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}

[{"id":43636657,"file_name":"11.png","project_id":1205086,"asset_id":879101,"created_at":"2026-01-09T16:30:15.413+08:00","updated_at":"2026-01-09T16:30:15.413+08:00"},{"id":43636658,"file_name":"12.png","project_id":1205086,"asset_id":879102,"created_at":"2026-01-09T16:30:15.419+08:00","updated_at":"2026-01-09T16:30:15.419+08:00"},{"id":43636659,"file_name":"koding.png","project_id":1205086,"asset_id":879103,"created_at":"2026-01-09T16:30:15.429+08:00","updated_at":"2026-01-09T16:30:15.429+08:00"},{"id":43636660,"file_name":"15.png","project_id":1205086,"asset_id":879104,"created_at":"2026-01-09T16:30:15.433+08:00","updated_at":"2026-01-09T16:30:15.433+08:00"},{"id":43636661,"file_name":"16.png","project_id":1205086,"asset_id":879105,"created_at":"2026-01-09T16:30:15.443+08:00","updated_at":"2026-01-09T16:30:15.443+08:00"},{"id":43636662,"file_name":"1.svg","project_id":1205086,"asset_id":879106,"created_at":"2026-01-09T16:30:15.455+08:00","updated_at":"2026-01-09T16:30:15.455+08:00"},{"id":43636663,"file_name":"2.svg","project_id":1205086,"asset_id":879107,"created_at":"2026-01-09T16:30:15.467+08:00","updated_at":"2026-01-09T16:30:15.467+08:00"},{"id":43636664,"file_name":"5.png","project_id":1205086,"asset_id":879108,"created_at":"2026-01-09T16:30:15.471+08:00","updated_at":"2026-01-09T16:30:15.471+08:00"},{"id":43636665,"file_name":"6.png","project_id":1205086,"asset_id":879109,"created_at":"2026-01-09T16:30:15.475+08:00","updated_at":"2026-01-09T16:30:15.475+08:00"},{"id":43636666,"file_name":"3.png","project_id":1205086,"asset_id":879110,"created_at":"2026-01-09T16:30:15.483+08:00","updated_at":"2026-01-09T16:30:15.483+08:00"},{"id":43636667,"file_name":"4.jpg","project_id":1205086,"asset_id":879111,"created_at":"2026-01-09T16:30:15.491+08:00","updated_at":"2026-01-09T16:30:15.491+08:00"},{"id":43636668,"file_name":"9.png","project_id":1205086,"asset_id":879112,"created_at":"2026-01-09T16:30:15.498+08:00","updated_at":"2026-01-09T16:30:15.498+08:00"},{"id":43636669,"file_name":"10.png","project_id":1205086,"asset_id":879113,"created_at":"2026-01-09T16:30:15.505+08:00","updated_at":"2026-01-09T16:30:15.505+08:00"},{"id":43636670,"file_name":"13.png","project_id":1205086,"asset_id":879114,"created_at":"2026-01-09T16:30:15.510+08:00","updated_at":"2026-01-09T16:30:15.510+08:00"},{"id":43636671,"file_name":"14.png","project_id":1205086,"asset_id":879115,"created_at":"2026-01-09T16:30:15.516+08:00","updated_at":"2026-01-09T16:30:15.516+08:00"},{"id":43636672,"file_name":"7.png","project_id":1205086,"asset_id":879116,"created_at":"2026-01-09T16:30:15.523+08:00","updated_at":"2026-01-09T16:30:15.523+08:00"},{"id":43636673,"file_name":"8.png","project_id":1205086,"asset_id":879117,"created_at":"2026-01-09T16:30:15.531+08:00","updated_at":"2026-01-09T16:30:15.531+08:00"}]