貪食蛇的最高分只存在自己的瀏覽器裡，換一台電腦就沒了，朋友也看不到？這篇幫遊戲加上大家共用的排行榜：遊戲結束輸入名字送出分數，棋盤旁邊顯示前 10 名。資料存在 Supabase 的免費資料庫，你不用寫一行 SQL，Claude Code 會寫好給你貼。
快速回答 在 Supabase 建一個免費專案，把 Project URL 和 publishable key 放進遊戲資料夾的
config.js。在 Claude Code 切到 plan 模式，請它先列出資料表和安全規則（RLS），再給你一段 SQL；核准計畫後它改程式，你把 SQL 貼到 Supabase 的 SQL Editor 執行。2026-10-21 實測，核准後 2 分 50 秒做好，原本的 8 項測試仍然全過。金鑰不要貼進聊天，也請它不要印在回覆裡。
做完這篇，你會有
- 有線上排行榜的貪食蛇：結束時輸入名字，旁邊顯示目前難度的前 10 名
- 一個 Supabase 免費專案，裡面有
scores資料表 - 會請 Claude Code 先說清楚資料表和安全規則，再動手
開始之前要準備：
- 前幾篇的
snake-game資料夾（做完第 15 篇的狀態，有test.js） - GitHub 帳號，用來登入 Supabase
步驟 1：建 Supabase 專案
到 supabase.com 按 Start your project，用 GitHub 登入，會看到 Projects 頁。
按 New project：名稱填 snake-leaderboard，Region 選離你近的（這次選 Northeast Asia (Tokyo)），方案 Free。Database password 用 Generate a password 產生就好，這篇用不到它。
等一兩分鐘，專案建好：
步驟 2：找到網址和金鑰，放進 config.js
遊戲要兩樣東西才能連上資料庫：
- Project URL：左側 Integrations → Data API，API URL 那一欄（拿掉最後的
/rest/v1/）。 - Publishable key：左側 Project Settings → API Keys，Publishable key 那一列，按旁邊的複製鈕。
publishable key 本來就是給瀏覽器用的，搭配下一步的安全規則才安全。secret key 有管理權限，絕對不能放進網頁。
在 snake-game 資料夾自己新建一個 config.js，內容兩行：
window.SUPABASE_URL = "貼上 Project URL";
window.SUPABASE_KEY = "貼上 publishable key";
這一步自己做，金鑰不要貼進 Claude Code 的對話。
步驟 3：在 plan 模式說你要什麼
在 snake-game 啟動 claude，按 Shift+Tab 切到 plan 模式，輸入：
幫貪食蛇加上排行榜，資料存在 Supabase：遊戲結束時可以輸入名字送出分數，畫面旁邊顯示前 10 名。Supabase 的網址和 publishable key 已經放在 config.js（這次可以讀 config.js，也可以為排行榜新增需要的檔案），不要把金鑰印在回覆裡。請先列出要在 Supabase 建的資料表和安全規則，並給我一段可以貼到 SQL Editor 的 SQL。
它會讀遊戲的程式，列出要建的 scores 資料表（名字、分數、難度、時間），每個欄位有範圍限制，例如名字 1 到 20 字、分數最多 397：
往下捲是安全規則：開啟 Row Level Security，網頁上的金鑰只能讀和新增分數，不能修改或刪除。
它也老實說了限制：publishable key 是公開的，有人可以直接呼叫 API 送一筆在範圍內的假分數。只靠前端的遊戲沒辦法完全防作弊，範圍限制只能擋掉離譜的數字。給朋友玩的排行榜，這樣就夠了。
步驟 4：等它改完
雖然允許它新增檔案，它還是全部寫在 index.html，直接用 fetch 呼叫 Supabase，不另外裝套件。它也提醒你：還沒建資料表之前，排行榜只會顯示「排行榜載入失敗」，遊戲照常能玩。
步驟 5：把 SQL 貼到 Supabase
回到 Supabase，左側 SQL Editor，把計畫裡那段 SQL 貼上，按 Run，下方出現 Success. No rows returned：
到左側 Table Editor，會看到新的 scores 表，還沒有資料：
步驟 6：玩一局，送出分數
用瀏覽器打開 snake-game/index.html，玩到撞牆，按 Enter 輸入名字送出。棋盤右邊的排行榜馬上出現這一筆：
回到 Table Editor 重新整理，同一筆分數也在資料庫裡：
步驟 7：確認沒改壞
在終端機執行：
node test.js
換你做
請它幫排行榜加一個「本週」分頁，只顯示 7 天內的分數。記得一樣先在 plan 模式看它要不要改資料表。
常見卡關
- 排行榜顯示「排行榜載入失敗」：SQL 還沒在 SQL Editor 執行，或
config.js的網址、金鑰貼錯。網址只要到.supabase.co，不要/rest/v1/。 - 它說讀 config.js 被擋下：這次實測它想看金鑰開頭確認種類，被權限擋下，它就改請你自己確認。自己看一眼：開頭是
sb_publishable_或舊版的 anon key 才對，不是sb_secret_或service_role。 - 送出後沒出現：分數 0 分不能送出；排行榜也只顯示目前難度的名次。
- 不小心把 secret key 貼出去了：到 API Keys 把那把金鑰作廢、重新產生。
你做到了
- 建好 Supabase 免費專案，把網址和 publishable key 放進
config.js - 在 plan 模式先看資料表和安全規則，再核准
- 貪食蛇有了大家共用的排行榜，原本的測試都還過
下一篇把個人網站和遊戲放上網，拿到一個公開網址。
常見問題
publishable key 放在網頁裡安全嗎？
它本來就是公開用的，安全靠的是資料表的安全規則（RLS）。這篇的規則只允許讀和新增，不能改、不能刪。真正不能外流的是 secret key 和資料庫密碼。
免費方案夠用嗎？
給朋友玩的小遊戲綽綽有餘。免費專案一段時間沒人用會被暫停，回到 Supabase 按恢復就好。
為什麼要先用 plan 模式？
資料表和安全規則一旦建錯，之後要改比較麻煩。先讓它寫出來給你看，確定「不能改、不能刪」有寫進去再核准。
下一步
- Claude Code Hooks 教學：每次改完自動檢查，再也不怕改壞：
test.js自動檢查是在這篇設好的。 - 一句話做出個人網站：Claude Code 新手作品集教學：plan 模式第一次出現在這篇。
參考資料
- Supabase, Row Level Security（Supabase 文件，RLS 與 policy） https://supabase.com/docs/guides/database/postgres/row-level-security
- Supabase, Understanding API keys（Supabase 文件，publishable 與 secret key 的差別） https://supabase.com/docs/guides/api/api-keys
留言0
登入後就能留言。
登入