首頁 讓精心製作的 Scratch 3.0 專案轉換為 HTML 網頁,再也不怕透漏程式碼!
文章
取消

讓精心製作的 Scratch 3.0 專案轉換為 HTML 網頁,再也不怕透漏程式碼!

這篇文章將指導您將Scratch的專案 (.sb3) 轉換為HTML程式碼,不但可以在不分享程式碼的情況下分享專案,更可以在未安裝或開啟Scratch編輯器的情況下使用!

前言

Scratch 3.0 是一個適合程式初學者或國中小學生的程式啟蒙語言,不包含繁瑣的程式碼或繁複難記的指令,取而代之的是簡單的模塊,以積木的方式拼接,以達到想要的效果。並且即使操作簡單,寫出來的程式也並不一定樸實無華且枯燥,也能做出如同熱門遊戲般的效果。

若自己製作出了精美的程式,又想和他人分享,卻因為Scratch無法僅限分享執行檔的限制而止步嗎?這篇文章將帶著您將檔案通過外部網頁匯出成 HTML,再也不怕程式碼外洩給他人!

HTML是一種標記語言,極其廣泛的用於網頁開發領域。

讓我們開始今天的主軸,轉換檔案吧!

實作

接下來,讓我們開始進行實際的操作。

今天的操作主要將會使用 TurboWarp Packager 這個網頁,不須註冊登入即可免費使用。

TurboWarp Packager

  • 可將專案匯出為多種格式的檔案
  • 頁面底部可切換為多國語言,包含繁體中文
  • TurboWarp 網頁子網域
  • 並非由Scratch官方營運或開發

第一步:前往TurboWarp Packager網頁

首先,請先開啟 TurboWarp Packager 網頁,您將會來到這個畫面

第二步:匯入要匯出的專案

接著,您可以通過三個方法中的其中一個來匯入您的Scratch專案

Scratch專案ID或網址是在 https://scratch.mit.edu 中公開分享的專案,可以貼上專案首頁的網址或是專案網址後的一段數字,也就是專案ID。

選取專案後點擊載入專案。

第三步:調整專案設定與其他參數

檔案載入完成後,會出現許多設定,接下來將與您一一講解:

此處是調整專案的顯示設定、限制突破與用戶名稱的參數,可以依照個人需求設定,亦可直接使用預設值。

介面設定中,標題將會是顯示在網頁標題的文字,而圖示是網頁的圖標。 載入畫面為專案仍在載入時,顯示的畫面設定,可以輸入文字或圖片來做為載入時的顯示物件。 控制欄中設定的是有關於Scratch的介面中控制按鈕,也就是綠旗、中止、全螢幕這些按鈕的功能或顯示設定。

此處可以調整專案的網頁顯示出的相關色系,或是變數/列表顯示器的顏色。

輸入,可以調整鼠標的輸入相關設置。

雲端變數,也就是Scratch中僅限Scratcher的功能,可以在此處設定存取的方式。

進階設定由於較難理解,也不需要使用於較簡單的專案,在此不進行說明。 封裝選項請選擇HTML,以便後續的教學。

若您想在下次使用此網頁時繼續保存剛剛調整的所有設定,請點擊 Export Settings,並在下次要使用時點按Import Settings選擇上次所下載的設定檔。Reset All Settings會將剛剛所有調整的設定重設。誤按的話保證後悔

第四步:預覽所製作的專案並下載

您可以點擊預覽來開啟新分頁檢視您的作品惠出的成果,或是點擊封裝或是下方的檔案名稱超連結,來下載您的匯出檔案。

結語

這篇文章用短短的四個步驟,指導各位將自己的Scratch作品轉換為HTML格式,既方便分享又保護程式碼簡直一舉兩得。希望這篇文章對各位有幫助,感謝您的閱讀!

本文由作者按照 CC BY 4.0 進行授權

帶您快速入門 AI 繪圖工具 Nijijourney ,輕鬆成為二次元繪師

帶您認識風靡全球的聊天與通話社群平台 Discord ,輕鬆成為社群小達人 | 介紹篇