เกี่ยวกับ Codelab นี้
1 บทนำ
เมื่อวันที่ 25 มีนาคม 2025 Google ได้เปิดตัว Gemini 2.5 สิ่งที่น่าจดจําที่สุดอย่างหนึ่งของการเปิดตัวครั้งนี้คือการเปิดให้ทุกคนได้ลองใช้ฟีเจอร์ "การเขียนโค้ดขั้นสูง" [วิดีโอ]
Gemini 2.5: สร้างเกมไดโนเสาร์ของคุณเองจากพรอมต์บรรทัดเดียว
ใน Codelab นี้ คุณจะได้เรียนรู้เกี่ยวกับ "การเขียนโค้ดตามความรู้สึก" ซึ่งเป็นแอปง่ายๆ สำหรับเด็ก โดยเริ่มจากพรอมต์ทั่วไป แล้วปรับแต่งตามสไตล์ของคุณเอง เราจะทดสอบแอปใน p5.js สุดท้าย เราจะพุชการเปลี่ยนแปลงเหล่านี้ไปยัง Firebase Hosting สิ่งที่ยอดเยี่ยมที่สุดเกี่ยวกับเรื่องนี้คือตอนนี้ทั้งแพ็กเกจนี้ไม่มีค่าใช้จ่าย
สิ่งที่คุณจะได้เรียนรู้
- ใช้ Gemini 2.5 เพื่อสแกนโค้ดแอปเกม
- ทดสอบโค้ดใน p5js.org
- วิธีปรับปรุงและปรับแต่งพรอมต์ / แอป
- วิธีโฮสต์แอปพลิเคชันแบบคงที่ใน Firebase
หมายเหตุว่าโค้ดแล็บนี้ใช้โค้ดที่ AI สร้างขึ้น ซึ่งไม่ใช่ค่าคงที่ ดังนั้นโค้ดแล็บนี้จึงมีหลักเกณฑ์เนื่องจากผู้เขียนไม่ทราบเอาต์พุตของคุณ และโปรดอย่าใช้โค้ดนี้ในเวอร์ชันที่ใช้งานจริง
หากชอบ Codelab นี้ อย่าลืมลองใช้ 🔥 Firebase Studio ซึ่งมอบประสบการณ์การเขียนโค้ดที่ทันสมัยและผสานรวม
2 ข้อกำหนดเบื้องต้น
Codelab นี้แบ่งออกเป็น 2 ระยะ ดังนี้
- การพัฒนาบนเว็บเท่านั้น เครื่องมือนี้จะทำให้คุณสนุกที่สุดและไม่จำเป็นต้องมีทักษะการเขียนโค้ด เราจะใช้ UI ของ Gemini ( gemini.google.com) และ p5.js
- สภาพแวดล้อมการเขียนโค้ดในเครื่อง ขั้นตอนนี้ต้องใช้ทักษะการเขียนโค้ด / สคริปต์เล็กน้อย รวมถึงการติดตั้งและการใช้
npm/npxและเครื่องมือแก้ไขในเครื่อง เช่นvscodeหรือ IntelliJ หรืออื่นๆ ส่วนนี้ไม่บังคับและจำเป็นต่อเมื่อคุณต้องการเก็บแอปพลิเคชันไว้เพื่อให้เพื่อนและครอบครัวเล่นจากอุปกรณ์เคลื่อนที่หรือคอมพิวเตอร์
ข้อกําหนดเบื้องต้นเพียงอย่างเดียวของระยะที่ 1 คือเบราว์เซอร์และคอมพิวเตอร์ (หน้าจอขนาดใหญ่จะมีประโยชน์) อ่านต่อเพื่อดูข้อมูลเกี่ยวกับระยะที่ 2
UI ของ Gemini
gemini.google.com เป็นแพลตฟอร์มที่ยอดเยี่ยมซึ่งคุณสามารถลองใช้โมเดล Gemini ล่าสุดทั้งหมด รวมถึงสร้างรูปภาพและวิดีโอของคุณเองได้ด้วย ฟีเจอร์นี้มาพร้อมการผสานรวมกับ Google อย่างเต็มรูปแบบ เช่น Google Maps และโรงแรม/เที่ยวบิน/รีวิว จึงเหมาะอย่างยิ่งที่จะเป็นเพื่อนเดินทางในการวางแผนวันหยุดครั้งถัดไป
เคล็ดลับ: หากสนใจการเขียนโค้ด ให้ลองใช้ AI Studio ซึ่งเป็นอินเทอร์เฟซที่คล้ายกันซึ่งคุณสามารถสร้างต้นแบบการโต้ตอบ LLM (เช่น สร้างรูปภาพ) และรับโค้ด Python ได้จากหน้าเว็บโดยตรง
p5.js
p5.js เป็นไลบรารี JavaScript แบบโอเพนซอร์สที่ใช้งานได้ฟรี ซึ่งทำให้การเขียนโค้ดอย่างสร้างสรรค์เข้าถึงได้และครอบคลุมสำหรับศิลปิน นักออกแบบ นักการศึกษา และทุกคน ซึ่งอิงตามภาษา Processing และลดความซับซ้อนของกระบวนการสร้างเนื้อหาแบบอินเทอร์แอกทีฟและภาพโดยใช้โค้ดในเว็บเบราว์เซอร์
การโค้ดในเครื่อง [ไม่บังคับ]
หากต้องการเก็บแอปพลิเคชันไว้ คุณต้องตั้งค่าเพิ่มเติมดังนี้
- เครื่องมือแก้ไขโค้ดในเครื่อง ( Visual Studio Code, IntelliJ ฯลฯ)
- บัญชี git ( github / gitlab / bitbucket) สำหรับจัดเก็บโค้ด
npmที่ติดตั้งในเครื่อง ซึ่งควรอยู่ในพื้นที่ผู้ใช้ (ผ่านnpxหรือเทคโนโลยีที่เทียบเท่า)
นอกจากนี้ เราจะสร้างบัญชี Firebase ให้คุณในภายหลัง
นอกจากนี้ คุณต้องมีทักษะการเขียนโค้ดบางอย่างด้วย เช่น
- ความสามารถในการติดตั้งแพ็กเกจ
npm - ความสามารถในการโต้ตอบกับระบบไฟล์ (สร้างโฟลเดอร์และไฟล์)
- ความสามารถในการโต้ตอบกับ
git(git add,git commit,git push)
หากมีข้อสงสัยใดๆ โปรดทราบว่า LLM จะให้ความช่วยเหลือคุณได้ คุณสามารถใช้ "Gemini 2.0 flash" หรือรูปแบบที่เทียบเท่าเพื่อรับคำแนะนำได้ หากยังยากเกินไป คุณก็ข้ามระยะที่ 2 ไปเลยได้ ระยะที่ 1 ควรให้รางวัลมากพอ
3 มาสร้างเกมแรกกัน
เปิด gemini.google.com แล้วเลือกรุ่นที่ใช้โค้ดได้ เช่น 2.5 ตัวเลือกนี้อาจแตกต่างกันไปตามความพร้อมให้บริการ ค่าใช้จ่าย และวันที่ ตัวเลือกที่ดีที่สุด ณ เวลาที่เขียนบทความนี้ ได้แก่
- Gemini 2.5 Flash (การทำซ้ำที่เร็วขึ้น)
- Gemini 2.5 Pro (เอาต์พุตที่ดีขึ้น)
ดูข้อมูลเพิ่มเติมเกี่ยวกับโมเดล Gemini ได้ที่นี่
พรอมต์เกมแรกของเรา
ดังที่คุณเห็นจากวิดีโอนี้ พรอมต์เริ่มต้นอาจเรียบง่ายเพียงเท่านี้
Make me a captivating endless runner game. Key instructions on the screen. p5js scene, no HTML. I like pixelated dinosaurs and interesting backgrounds.
คุณปรับแต่งข้อความนี้ได้ตามต้องการ
- ฉากยุคกลาง / อนาคต / ไซเบอร์พังก์
- อีโมจิเต็มไปหมด หรือมีอีโมจิเพียงรายการเดียว
- คุณชอบสีเหลืองหรือสีม่วงหลากหลายเฉด
- บุตรหลานของคุณอาจชอบยูนิคอร์น ไดโนเสาร์ หรือโปเกมอน
เมื่อวางพรอมต์ในเบราว์เซอร์แล้ว คุณควรเห็นว่า Gemini กำลังคิด ใช่แล้ว Gemini 2.5 เป็นโมเดลการคิด ดังนั้นจึงจะเริ่มงานหลายรายการที่คุณจะเห็นการเปลี่ยนแปลงเมื่อเวลาผ่านไป คุณสามารถคลิกเมนูแบบเลื่อนลงที่เปลี่ยนแปลงอยู่เพื่อดูสิ่งที่เกิดขึ้น หรือจะรอดูผลลัพธ์ก็ได้
สุดท้าย คุณควรมี JavaScript ที่ใช้งานได้
ตอนนี้คุณคลิกปุ่มคัดลอกที่ด้านบนได้แล้ว
การทดสอบเกมใน p5.js
ตอนนี้ก็ได้เวลาทดสอบเกมแล้ว
- เปิดเครื่องมือแก้ไข p5.js ที่นี่ https://editor.p5js.org/
- เลือกและลบโค้ด sketch.js ที่มีอยู่
- วางโค้ดของคุณ
หน้าเว็บควรมีลักษณะดังนี้
สุดท้าย ให้กดปุ่มเล่น
ตอนนี้จะมี 2 กรณีเกิดขึ้น นั่นคือ โค้ดทำงานหรือไม่ทำงาน มาดูวิธีการสำหรับทั้ง 2 กรณีกัน
- รหัสของคุณใช้งานไม่ได้
- รหัสของคุณใช้งานได้ตั้งแต่ครั้งแรก
มาดูวิธีจัดการทั้ง 2 เงื่อนไขในย่อหน้าถัดไป
(กรณี 1) โค้ดของฉันใช้งานไม่ได้
หากได้รับข้อผิดพลาดเช่นนี้ เพียงคัดลอกและวางลงใน Gemini ให้เขาแก้ไขโค้ดให้คุณ
(กรณี 2) รหัสของฉันใช้งานได้
หากโค้ดใช้งานได้ คุณควรเห็นเกมภาพทางด้านขวาสุดของหน้า
👏 ยินดีด้วย คุณกำลังใช้งานเกม AI เกมแรก
หมายเหตุ: เมื่อคุณมีรหัสแล้ว แอปจะใช้งานได้ในเบราว์เซอร์เท่านั้น หากต้องการแสดงแอปให้ครอบครัวและเพื่อนเห็น คุณต้องมีโซลูชันโฮสติ้ง แต่โชคดีที่เรามีตัวเลือกที่ยอดเยี่ยมให้คุณ อ่านต่อ
ตอนนี้คุณก็พร้อมสำหรับบทถัดไป
การทำซ้ำเพิ่มเติม
ตอนนี้ถึงเวลาบันทึกรหัสไว้แล้ว เผื่อว่าคุณจะลบรหัสไป คุณทำซ้ำได้ 1 ครั้งหากต้องการ ตัวอย่างเช่น ผู้เขียนชอบการกระโดด 2 ครั้งของ Super Mario มาก คุณจึงอาจเพิ่มข้อความประมาณนี้
The game is great, thanks! Please allow for my character to double jump.
คุณปรับแต่งอะไรก็ได้ตามต้องการ เช่น คุณอาจต้องการบันทึกชื่อตัวละครเพื่อให้ได้คะแนนสูงขึ้น หรือเพิ่มความเร็วเมื่อเวลาผ่านไปเพื่อให้ยากขึ้น เป็นต้น พรอมต์ของคุณต้องเป็นภาษาอังกฤษเท่านั้น
เคล็ดลับ: Gemini มีแนวโน้มที่จะแสดงเฉพาะการเปลี่ยนแปลงที่คุณต้องใช้ (เช่น นี่คือการเปลี่ยนแปลงสำหรับฟังก์ชัน XYZ) คุณอาจต้องตั้งค่าพรอมต์ให้แสดงโค้ดที่อัปเดตทั้งหมดแทน โดยเขียนโค้ดประมาณนี้
"Please give me the entire updated code, not just the changed function"
ซึ่งจะช่วยให้คุณตัดต่อได้ง่ายขึ้น
คำเตือน
คุณอาจต้องการบุ๊กมาร์กแชท Gemini คุณอาจต้องการเปลี่ยนชื่อเป็น "p5js my first game" หรือจดลิงก์ถาวรไปยัง Gemini ไว้ใช้ภายหลัง เช่น " https://gemini.google.com/app/abcdef123456789"
4 มาเรียกใช้โค้ดนี้ในเครื่องกัน
ณ จุดนี้ คุณควรมีสิ่งต่อไปนี้
- หน้าต่างเบราว์เซอร์ Gemini ที่เปิดอยู่พร้อมโค้ดที่ใช้งานได้
- หน้าต่างเบราว์เซอร์ p5.js ที่เปิดอยู่ซึ่งมีเกมที่ทำงานอยู่
- สภาพแวดล้อมการเขียนโค้ดในเครื่องที่ติดตั้ง
npm
นี่เป็นส่วนที่ยากกว่าของโค้ดแล็บ ต้องมีประสบการณ์การเขียนโค้ดพื้นฐานบ้าง
ติดตั้งข้อกําหนดเบื้องต้น
หากไม่มี npm และ node วิธีที่ดีที่สุดคือติดตั้ง npm ผ่านเครื่องมือจัดการเวอร์ชัน เช่น nvm ทำตามวิธีการติดตั้งสำหรับระบบปฏิบัติการของคุณ
และเราจะถือว่าคุณใช้ IDE ในการเขียนโค้ดด้วย เราจะใช้โค้ด Visual Studio ในภาพหน้าจอและตัวอย่าง แต่จะใช้อะไรก็ได้
ตั้งค่าสภาพแวดล้อมในเครื่อง
นี่เป็นเวลาที่คุณสามารถสร้างโครงสร้างไฟล์ของคุณเอง
สคริปต์การตั้งค่ามีไว้เพื่อวัตถุประสงค์ในการอธิบาย คุณดำเนินการนี้ด้วยตนเองได้โดยสร้างโฟลเดอร์และไฟล์ ดังนี้
# This works for Mac and Linux. For Windows, please use other tools. mkdir my-first-vibecoding-project/ cd my-first-vibecoding-project/ git init touch README.md PROMPT.md mkdir public/ cd public/ touch index.html sketch.js style.css git add . # Skipping quotes which can be tricky git commit -a -m committing_empty_skeleton
โครงสร้างโฟลเดอร์สุดท้ายควรมีลักษณะดังนี้
my-first-vibecoding-project/
├── PROMPT.md
├── README.md
└── public
├── index.html
├── sketch.js
└── style.css
คุณควรดูข้อมูลนี้ได้ที่นี่
ตอนนี้เปิดเครื่องมือแก้ไขโค้ดที่คุณชื่นชอบ (เช่น code my-first-vibecoding-project/ ) แล้วเริ่มวางเนื้อหาของ editor.p5js.org ลงในไฟล์ 3 ไฟล์ในส่วน public/
README.md← คุณสามารถใส่ลิงก์ถาวรของแชท Gemini ได้ที่นี่ และใส่หน้า Landing Page ของแอปเมื่อเปิดตัวPROMPT.md← คุณอาจต้องการเพิ่มพรอมต์ทั้งหมดที่นี่ โดยคั่นด้วยย่อหน้า H2 หากต้องการอธิบายเหตุผลที่ระบุพรอมต์หนึ่งๆ ให้ใส่เครื่องหมายแบ็กทิก 3 ตัวไว้รอบๆ พรอมต์ ( ตัวอย่าง)- **
public/index.html** ← คัดลอกโค้ด HTML ที่นี่ - **
public/sketch.js** ← คัดลอกโค้ด JS ที่นี่ - **
public/style.css** ← คัดลอกโค้ด CSS ที่นี่
โฟลเดอร์สาธารณะอาจโฮสต์ชิ้นงานเพิ่มเติม เช่น PNG ที่กําหนดเอง
5 ตั้งค่าและทำให้ใช้งานได้ใน Firebase
ตั้งค่า Firebase (ครั้งแรกเท่านั้น)
ตรวจสอบว่าได้ติดตั้ง npm ในเครื่องแล้ว
ในเทอร์มินัล ให้พิมพ์คำสั่งใดคำสั่งหนึ่งต่อไปนี้ (ใช้คำสั่งใดก็ได้)
# to install on the machine (requires privilege) npm install -g firebase-tools # to install locally (low privilege needed but might need to repeat a few times) npm install firebase-tools
ตอนนี้คุณควรเรียกใช้คําสั่ง firebase ได้ หากพบปัญหา โปรดทำตามเอกสารสาธารณะ
การเริ่มต้นใช้งาน Firebase
ในส่วนนี้ เราจะตั้งค่าโฮสติ้งของ Firebase ขั้นตอนนี้ง่ายมาก แต่อาจใช้เวลาสักครู่ในการทำความคุ้นเคยในครั้งแรก
ตรวจสอบว่าคุณอยู่ในไดเรกทอรีที่อยู่เหนือไดเรกทอรี public/ ที่มีไฟล์อยู่โดยตรง ข้อมูล (ls -al หรือ dir) ควรมีลักษณะดังนี้
$ ls PROMPT.md README.md public/
- [ขั้นตอนที่ 1] ในคอนโซล ให้พิมพ์
firebase init
- เลื่อนเคอร์เซอร์ลงไปที่ "โฮสติ้ง: .." แล้วพิมพ์เว้นวรรค จากนั้นพิมพ์ Enter (เพราะเหตุใด เนื่องจากเป็นแบบเลือกหลายรายการ คุณจึงต้องเลือกและไปยังหน้าถัดไป)
- [ขั้นตอนที่ 2] ตอนนี้คุณเลือกโปรเจ็กต์ที่มีอยู่ (ตัวเลือกที่ 1) หรือสร้างโปรเจ็กต์ใหม่ (ตัวเลือกที่ 2) ได้แล้ว
- หมายเหตุ: หากมีโปรเจ็กต์ที่อยู่ในระบบคลาวด์อยู่แล้ว โปรเจ็กต์นั้นอาจไม่ใช่โปรเจ็กต์ Firebase โปรเจ็กต์ Firebase เป็นส่วนหนึ่งของโปรเจ็กต์ GCP คุณต้องทำขั้นตอนเพิ่มเติมเพื่อทำให้โปรเจ็กต์เป็น Firebase ซึ่ง (ตัวเลือก 3) มีไว้สำหรับดำเนินการดังกล่าว
- หากยังไม่แน่ใจ ให้ใช้ "สร้างโปรเจ็กต์ใหม่" แล้วเพิ่มชื่อ เช่น "p5js-YOURNAME-YOURAPP" (เช่น "p5js-riccardo-tetris")
- [step 3]
What would you like to call your project? (defaults to your project ID) (p5js-riccardo-tetris) - กด ENTER
- [step 4]
? What do you want to use as your public directory? (public) - กด ENTER (เราตั้งค่า
public/ไว้โดยตั้งใจ)
- [step 5]
? Configure as a single-page app (rewrite all urls to /index.html)? No - กด ENTER (ไม่)
- [ขั้นตอนที่ 6]
? Set up automatic builds and deploys with GitHub? No - กด ENTER - ไม่
- [ขั้นตอนที่ 7]
? File public/index.html already exists. Overwrite? (y/N) - กด Enter (ไม่)
- คำเตือน การดำเนินการนี้อาจทำให้เกิดข้อผิดพลาด หากคุณเขียนทับ index.html ใหม่ ไฟล์ดังกล่าวจะใช้งานร่วมกับ p5js ไม่ได้
หากทุกอย่างทำงานได้ตามปกติ คุณควรเห็นข้อความต่อไปนี้
การดำเนินการเหล่านี้ควรสร้างไฟล์ 2-3 ไฟล์
.firebaserc .gitignore firebase.json public/404.html
โดยเฉพาะอย่างยิ่ง .firebaserc ควรมีรหัสโปรเจ็กต์ที่คุณดึงข้อมูลแบบเป็นโปรแกรมได้โดยใช้ cat .firebaserc | jq .projects.default -r
คำเตือน: ตรวจสอบ index.html หากมีความยาวเกิน 16 บรรทัด และ/หรือมีคำว่า firebase แสดงว่าคุณเขียนทับไฟล์ p5js โดยไม่ได้ตั้งใจ ไม่มีปัญหา อย่าลืมนำ index.html เดิมกลับจาก git หรือจากเครื่องมือแก้ไข p5js
การทดสอบในเครื่อง
หากต้องการลดความล่าช้าของรายงานความคิดเห็น คุณอาจต้องลองใช้สิ่งต่างๆ ในเครื่องก่อน
โดยลองใช้ชุด CLI ที่มีประสิทธิภาพจากทีม Firebase เช่น
$ firebase emulators:start
ควรเริ่มเว็บเซิร์ฟเวอร์บนพอร์ต 5000 ( http://127.0.0.1:5000/ ) เพื่อให้คุณทดสอบในเครื่องได้ก่อนที่จะพุช
ทำให้ใช้งานได้กับ Firebase
ตอนนี้ถึงเวลาสำหรับคำสั่งสุดท้ายแล้ว
$ firebase deploy
ซึ่งจะทริกเกอร์การดำเนินการหลายรายการ บรรทัดสุดท้าย 2-3 บรรทัดควรมีลักษณะดังนี้
$ firebase deploy [...] ✔ hosting[YOUR_PROJECT]: release complete ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/YOUR_PROJECT/overview Hosting URL: https://YOUR_PROJECT.web.app
ซึ่งจะแสดง URL โฮสติ้ง ลองใช้เลย!
หากการทําให้ใช้งานได้สําเร็จ แต่คุณเห็นหน้าเว็บว่างเปล่าหรือทําให้ใช้งานได้ไม่สําเร็จ ให้ทําตามขั้นตอนต่อไปนี้
- เปิด "เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์" ของเบราว์เซอร์เพื่อค้นหาข้อผิดพลาด แล้วขอให้ Gemini ช่วยแก้ไขด้วยพรอมต์เช่นนี้
I've deployed the script correctly with Firebase, but I now see a blank page with this error: [ paste detailed JS console error ]
♾️ ทำซ้ำ
คุณทำซ้ำขั้นตอนเหล่านี้ได้หลายครั้งตามต้องการ คุณสามารถแสดงข้อความแจ้งต่อจนกว่าจะพอใจกับผลลัพธ์
โปรดทราบว่า
- ลูปการทำซ้ำจะเร็วกว่ามากใน Gemini > p5.js > ลูป Gemini เมื่อเทียบกับใน Gemini > โฮสต์ในเครื่อง > นำไปใช้งานใน Cloud Run > ทดสอบแอปในเบราว์เซอร์ (กดรีเฟรช)
- ใช้ git สำหรับจัดการเวอร์ชันทั้งพรอมต์และโค้ด คุณอาจต้องการกลับไปที่พรอมต์ N และรหัส N โดยเฉพาะอย่างยิ่ง คุณควรใช้ Git Commit กับ
sketch.jsทั้งหมดที่ Push เนื่องจากอาจมีข้อบกพร่องซ่อนอยู่ซึ่งไม่พบ
โปรดทราบว่าเกมบางเกมใช้งานได้ดีกับแป้นพิมพ์ แต่ใช้เมาส์หรือแตะบนโทรศัพท์มือถือไม่ค่อยดี นี่เป็นโอกาสที่ดีในการปรับปรุงโค้ด
6 เคล็ดลับเกี่ยวกับพรอมต์
เคล็ดลับบางส่วนจากการที่เราได้สร้างเกมไว้หลายเกมแล้ว
กำหนดเวอร์ชันพรอมต์
คุณอาจพบข้อผิดพลาดในพรอมต์ต้นฉบับ มีเวอร์ชัน git เส้นทางโค้ดมี 2-3 เส้นทางดังนี้
- หากชอบสิ่งที่เห็นและต้องการนําไปใช้กับ Gemini โดยใช้พรอมต์ย่อยต่อๆ ไป คุณอาจต้องบันทึกพรอมต์ทั้งหมดไว้ (พรอมต์ 1,2,3 - ตัวอย่าง 1 ช็อต 3 รายการ - example2)
- หากไม่สนใจแอปที่สร้างโดยพรอมต์ 1 คุณอาจต้องทำให้พรอมต์สมบูรณ์แบบ ทิ้งโค้ด และเริ่มใหม่ด้วยโค้ดที่แก้ไขแล้ว (พรอมต์ 1 v1, พรอมต์ 1 v2, พรอมต์ 1 v3 ฯลฯ)
คุณใช้ทั้ง 2 วิธีร่วมกันได้
ฟังก์ชันการทำงานบนอุปกรณ์เคลื่อนที่
คุณอาจต้องโต้ตอบกับผู้ใช้บ้าง ทั้งนี้ขึ้นอยู่กับเกมที่สร้าง การโต้ตอบนี้ต้องใช้แป้นพิมพ์ไหม หรือจะใช้ได้ด้วยการแตะหน้าจอเพียงอย่างเดียว (เช่น ใช้กับอุปกรณ์เคลื่อนที่) โปรดระบุข้อมูลนี้อย่างชัดเจนในพรอมต์ คุณอาจต้องสร้างปุ่มบางปุ่มบนแป้นพิมพ์ (ดูตัวอย่าง Tetris 3 มิติ) โปรดดูหัวข้อdungemoji เพื่อความสะดวกในการเข้ากันได้กับอุปกรณ์เคลื่อนที่
แสดงความคิดเห็นเกี่ยวกับข้อผิดพลาด JavaScript / ภาพหน้าจอใน Gemini โดยตรง
เนื่องจาก Gemini ไม่เห็นการโต้ตอบของคุณกับ p5js โปรดวางข้อผิดพลาด Javascript ลงใน Gemini โปรดทราบว่า Gemini เป็นรูปแบบมัลติมีเดีย ดังนั้นหากมีการเปลี่ยนแปลง UI (เช่น ทำให้ชื่อเกมเล็กลงหรือลดคะแนน) คุณจะแนบภาพหน้าจอของเกมได้ด้วย การแสดงความคิดเห็นเกี่ยวกับการเขียนโค้ดไม่เคยสนุกเท่านี้มาก่อน
7 ยินดีด้วย
🎉 ขอแสดงความยินดีที่ทํา Codelab จนเสร็จสมบูรณ์
เราได้เห็นแล้วว่าการสร้างเกมด้วย Gemini นั้นง่ายเพียงใด และ Firebase มีโซลูชันโฮสติ้งที่ใช้งานง่ายเพียงใดในการเก็บรักษาและแชร์เกมกับผู้อื่น
สิ่งที่เราได้พูดถึง
- สร้างเกมผ่าน Gemini 2.5
- เผยแพร่ไปยัง Firebase
ถึงเวลา👥อวดแล้ว อย่าลืมแชร์เกมล่าสุด (your-project.web.app) ใน LinkedIn หรือ Twitter พร้อมแฮชแท็ก #VibeCodeAGameWithGemini (และอาจแท็กผู้แต่งใน LinkedIn) วิธีนี้จะช่วยให้เราทราบว่า Codelab นี้น่าสนใจเพียงใด และอาจเขียน Codelab ประเภทนี้ขึ้นมาอีก
ฉันต้องการดูเพิ่มเติม
หากต้องการแหล่งข้อมูลเพิ่มเติม โปรดดูเกมและพรอมต์ต่อไปนี้
- เขียนโค้ดเกมสำหรับเด็ก 5 เกมด้วย Gemini 2.5 และ p5.js ในช่วงสุดสัปดาห์ บทความนี้จะอธิบายขั้นตอนในการเขียนโค้ดให้เกมมีบรรยากาศด้วยตัวอย่าง 6 รายการ
- palladius/genai-googlecloud-scripts (ที่เก็บ GitHub ที่มีแอปประมาณ 10 แอป - โค้ดและพรอมต์): Tetris, Pacman, Connect 4 และแม้แต่Rogue โคลนสำหรับผู้ที่คิดถึงอดีต ซึ่งจะมีพรอมต์ของเกมทั้งหมดเหล่านี้ เลือกรูปภาพที่ชอบ ปรับแต่งพรอมต์ แล้วสนุกไปกับการแต่งภาพ
หากสิ่งที่คุณทําในวันนี้ดูยุ่งยากเกินไป คุณก็ลองใช้ 🔥 Firebase Studio ได้ด้วย ซึ่งจะรวมขั้นตอนการสร้างแอปตั้งแต่ไอเดีย > พรอมต์ > โค้ด > ลูปแอปไว้ในหน้าต่างเบราว์เซอร์เดียว
ตัวอย่างเกมที่คุณสร้างได้
เกมเวอร์ชันสุดท้ายอาจมีลักษณะดังนี้
- Tetris 3 มิติ
- เกมภาษา
- โคลนที่ทำงานผิดปกติ
- โคลน Pacman
โปรดทราบว่าเราให้บริการเป็นภาษาอังกฤษเท่านั้น
|
|
|
|
|
|
🎉