Embedded Files
(2024/07/01)
原來利用AI製作一個網頁工具或遊戲這麼簡單，幾秒鐘就完成了一個亂數抽籤、倒數計時、貪吃蛇遊戲，簡單測試內容如下，供參
這教材重點：
使用Claude來寫網頁程式
其中一項比較大的專案為：學生作業繳交情形一覽表
最後還有包括如何使用GibHub發布網頁
本教材參考：Claude 一分鐘做出亂數抽籤工具、貪吃蛇遊戲，與 ChatGPT 對比 https://www.playpcesor.com/2024/06/claude-chatgpt.html (電腦玩物 Esor Huang)
一、使用Claude
使用Google帳號註冊即可
需手機號碼進行認證
就能開始使用最新的 Claude 3.5 Sonnet 模型
記得開啟「 Artifacts 」功能，它可直接在對話中生成你需要的網頁小工具、小遊戲，乃至於簡單的簡報。
點擊左下角電子郵件帳號 / Feature Preview
二、製作【亂數抽籤】網頁
先踩在前人的肩上，再去做修改
此prompt取自上面電腦玩物 Esor Huang的文章：你是一位注重功能與舒適介面的程式設計師，幫我設計一個「亂數抽籤」網站工具，讓我可以輸入一數字，決定要抽出的數量，然後工具就會抽出符合數字範圍內、符合數量的中獎數字。
對程式碼有興趣的，再自行去研究！！
再針對自己的需求去做修改
prompt：請再修改上面的亂數抽籤工具，請將輸入數字預設為50，要抽出的數字預設為3，且可利用上下鍵來增減
再針對自己的需求去做修改
因為男生只到14號，且女生的號碼是21開始，全班共29人，因此抽籤工具要改一下
prompt：請再修改上面的亂數抽籤工具，請將輸入數字預設為35，並且抽出的值不要有15到20的值
再針對自己的需求去做修改
由於想讓呈現數字的快慢，根據自己的需要去調整
prompt：請再修改上面的亂數抽籤工具，請再增加一個輸入欄位為顯示等待時間，預設為1秒，間距為0.1秒，也就是抽出的數字，顯示第一個數字後會等待該時間後，再顯示第2個數字
再針對自己的需求去做修改
prompt：請再修改上面的亂數抽籤工具，請每顯示第一個數字時增加一個音效
測試後，聲音沒有出來，有空再來找問題！
三、製作【倒數計時】網頁
此prompt：你是一位注重功能與舒適介面的程式設計師，幫我設計一個「倒數計時 」網站工具，讓我可以輸入一個秒數，預設為10秒，然後1秒1秒倒數，到達0秒時，就顯示時間到，並發出聲音來題示。
測試後，聲音沒有出來，有空再來找問題！
四、製作【貪吃蛇】網頁小遊戲
先踩在前人的肩上，再去做修改
此prompt取自上面電腦玩物 Esor Huang的文章：
你是一位注重功能與舒適介面的程式設計師，幫我設計一個「貪吃蛇」網頁小遊戲。
請一步一步分析，根據我的需求，設計基本的網頁架構，接著設計好輸入的欄位，並且設計一些符合這個需求，可以增加美觀的網頁效果，然後寫出網頁程式碼。
再針對自己的需求去做修改
prompt：請再修改上面的貪吃蛇遊戲，增加可輸入遊戲者的名字及顯示排行榜
將檔案下載成HTML檔(副檔名為html)，直接在電腦執行
再針對自己的需求去做修改
prompt：請再修改上面的貪吃蛇遊戲，增加可將排行榜匯出成Excel檔
匯出的Excel如果為亂，請到記事本另存成「具有BOM的UTF-8」編碼格式
就可以正確顯示了
五、製作【跳恐龍 T-Rex】網頁小遊戲
Prompt：你是一位注重功能與舒適介面的程式設計師，幫我設計一個跳恐龍 T-Rex網頁小遊戲。 請一步一步分析，根據我的需求，設計基本的網頁架構，接著設計好輸入的欄位，並且設計一些符合這個需求，可以增加美觀的網頁效果，然後寫出網頁程式碼。
這做出來的遊戲有BUG，不能玩
而且Claude也不給我玩了，只好晚一點再試了
六、製作【俄羅斯方塊】網頁小遊戲
Prompt：你是一位注重功能與舒適介面的程式設計師，幫我設計一個「俄羅斯方塊」網頁小遊戲。 請一步一步分析，根據我的需求，設計基本的網頁架構，接著設計好輸入的欄位，並且設計一些符合這個需求，可以增加美觀的網頁效果，然後寫出網頁程式碼。
發現：此遊戲的向上鍵為旋轉方塊，而且右邊邊界有問題
再針對自己的需求去做修改
由於我習慣用【空白鍵】來旋轉方塊
prompt：請再修改上面的俄羅斯方塊的遊戲，增加空白鍵可以改變下降方塊的方向
結果：這時出現了另類玩法
再針對自己的需求去做修改
由於我習慣用【空白鍵】來旋轉方塊
prompt：上面表達錯誤，請再修改上面的俄羅斯方塊的遊戲，增加空白鍵可以旋轉下降方塊，如同現在向上鍵的功能
再針對自己的需求去做修改
由於網頁的邊界有問題，所以我去查它的程式碼。
發現：有2個參數要互相配合
<canvas id="tetris" width="280" height="400"></canvas> (寬度)
const COLS = 10; (欄數)
所以 把const COLS = 10; 改為 const COLS = 12; 就好了
Prompt：請再修改上面的俄羅斯方塊的遊戲，請將程式碼的const COLS = 10;改為const COLS = 12;
七、製作【學生作業繳交】網頁工具
Prompt：你是一位注重功能與舒適介面的程式設計師，幫我設計一個「學生作業繳交」網頁工具。內容包含日期(第1列)、作業名稱(第2列)、學生1到30的座號(第3列)，未繳交作業的座號及待訂正的座號(第4列) 。請一步一步分析，根據我的需求，設計基本的網頁架構，接著設計好輸入的欄位，並且設計一些符合這個需求，可以增加美觀的網頁效果，然後寫出網頁程式碼。
內建的功能
點擊座號可以選中/取消選中。 (灰色/藍色切換)
右鍵點擊可以循環切換狀態: 正常 -> 未繳交(紅色) -> 待訂正(黃色) -> 正常。
再針對自己的需求去做修改
Prompt：請再修改上面的學生作業繳交工具，學生座號的一列改用10個號碼，且取消下方保存資料的按鈕，直接顯示未繳交座號及待訂正座號
發現
它自動取消右鍵，並直接點擊來切換 (正常 -> 未繳交(紅色) -> 待訂正(黃色) -> 正常)，這部份是它自己做的，我尚未請他修改！
再針對自己的需求去做修改
Prompt：請再修改上面的學生作業繳交工具，學生座號一樣是30人，只是每一列為10個號碼，且將正常狀態改為淺綠色
再針對自己的需求去做修改
Prompt：請再修改上面的學生作業繳交工具，在狀態顯示下，新增3個按鈕，分別是匯出成Excel、匯出圖片及清除(全部學生可恢復成正常狀態)
再針對自己的需求去做修改
Prompt：請再修改上面的學生作業繳交工具，請在日期下方新增一個本日作業數，預設為3個，並可上下鍵來新增或減少數字。下方的作業名稱及學生座號與狀態顯示整合為一組，如果作業數為3，則顥示3組上面的組合
再針對自己的需求去做修改
Prompt：請再修改上面的學生作業繳交工具，調整每個作業區的面積大小，讓所有作業能呈現在一頁，方便觀看
再針對自己的需求去做修改
Prompt：請再修改上面的學生作業繳交工具，並在每個作業區的學生座號後方新増2個按鈕，一個為刪除，用來刪除此作業，一個為清除，用來將此作業的所有學生恢復成正常狀態
發現：按刪除鍵後，除了刪除此作業外，其他各作業存在，但資料內容全部都刷新成淺綠色了！
再針對自己的需求去做修改
Prompt：請再修改上面的學生作業繳交工具，將上面新增的刪除按鈕，只能刪除該作業，其他作業的內容則不受影響
修改下面的函式即可
再針對自己的需求去做修改
Prompt：請再修改上面的學生作業繳交工具，將匯出圖片的按鈕，設定為可將目前頁面資料匯出成PNG檔
再針對自己的需求去做修改
Prompt：請再修改上面的學生作業繳交工具，將匯出Excel的按鈕，設定為以日期名稱當工作表名稱，第1欄從A2開始為學生座號，由小到大排列，第1列從B1開始為各作業的作業名稱，各作業依學生座號分別正常顯示1、未繳交顯示2、待訂正顯示3，儲存成excel檔
修改下面程式，這部份很成功
再針對自己的需求去做修改
Prompt：請再修改上面的學生作業繳交工具，將匯出Excel的按鈕，設定為以日期名稱當工作表名稱，第1欄從A2開始為學生座號，由小到大排列，第1列從B1開始為各作業的作業名稱，各作業依學生座號分別正常顯示1(儲存格填滿淺綠色)、未繳交顯示2(儲存格填滿紅色)、待訂正顯示3(儲存格填滿黃色)，儲存成excel檔
修改下面程式，在Excel中儲存格並無填上顏色
再針對自己的需求去做修改
Prompt：請再修改上面的學生作業繳交工具，學生座號由1到15號及21號到34號，請重新修改
如下，但這部份修改後，一切都可正常使用，唯獨【滙出成Excel】的功能就失靈了，
再針對自己的需求去做修改
Prompt：附件為學生作業繳交工具，請修改作業名稱為下拉式選單，下拉式選單內容包括國習、數習、社習、自習等4 項
這部份請自行修改成想要的作業名稱
再針對自己的需求去做修改
Prompt：請再修改上面的學生作業繳交工具，請修改將日期直接預設為當日
再針對自己的需求去做修改
Prompt：請再修改上面的學生作業繳交工具，請修改將日期直接預設為當日
最終完成版
測試網址：
下載網址：https://educase.kh.edu.tw/navigate/a/#/s/C599972055164AA498102F5CFBC616B36BL
使用說明：
到檔案195行處修改：$student_no=35; //此數字請修改為班級最後一個座號
176行處修改常派作業的作業名稱：
<option value="國習">國習</option>
<option value="數習">數習</option>
<option value="社習">社習</option>
<option value="自習">自習</option>
如有更多作業名稱，請按上面格式繼續往下增加
結論：
利用Claude來寫網頁程式，真的太方便了！有時都會懷疑自己寫的prompt，連自己都不大懂，沒想到AI都能寫出來我想要的東西，真是太神了！
但由於使用免費版，對話次數有限，而且有時玩太久，就會限制使用時間！當中斷對話後，開新對話，把之前的程式利用附件的方式上傳上去，還可以延續部份內容，但通常用教學的方式來互動，因此要自己複製、貼上，比較麻煩一點。而且有時前後的程式會有不一致的現象！
後續
後來看到陳佳釧老師的網頁：【老師也要學不停】請AI幫忙寫程式，做自己的計時器!!得知可以把網頁放到GitHub
並從【使用GitHub來發布網頁(文賢)】學到如何發布網頁，並把過程記錄如下：
Page updated
Google Sites
Report abuse