1. บทนำ
เมื่อวันที่ 25 มีนาคม 2025 Google ได้เปิดตัว Gemini 2.5 หนึ่งในแง่มุมที่น่าจดจำที่สุดของการเปิดตัวนี้คือการที่ทุกคนได้ลองใช้ฟีเจอร์ "การเขียนโค้ดขั้นสูง" [วิดีโอ]
Gemini 2.5: สร้างเกมไดโนเสาร์ของคุณเองจากพรอมต์บรรทัดเดียว
ใน Codelab นี้ คุณจะได้เรียนรู้เกี่ยวกับ "การเขียนโค้ดตามฟีล" สำหรับแอปง่ายๆ สำหรับเด็ก โดยเริ่มจากพรอมต์ทั่วไปแล้วปรับแต่งตามความชอบของคุณเอง เราจะทดสอบแอปใน p5.js สุดท้าย เราจะพุชการเปลี่ยนแปลงเหล่านี้ไปยัง Firebase Hosting สิ่งที่น่าตื่นตาตื่นใจที่สุดเกี่ยวกับเรื่องนี้คือปัจจุบันทั้งสแต็กไม่มีค่าใช้จ่าย
สิ่งที่คุณจะได้เรียนรู้
- ใช้ Gemini 2.5 เพื่อเขียนโค้ดแอปเกม
- ทดสอบโค้ดใน p5js.org
- วิธีทำซ้ำและปรับแต่งพรอมต์ / แอป
- วิธีโฮสต์แอปพลิเคชันแบบคงที่ใน Firebase
โปรดทราบว่า Codelab นี้ใช้โค้ดที่ AI สร้างขึ้น ซึ่งเป็นแบบไม่กำหนด ดังนั้น Codelab นี้จึงมีหลักเกณฑ์เนื่องจากผู้เขียนไม่ทราบเอาต์พุตของคุณ และโปรดอย่าใช้โค้ดนี้ในเวอร์ชันที่ใช้งานจริง
2. ข้อกำหนดเบื้องต้น
Codelab นี้มี 2 เฟส ดังนี้
- การพัฒนาสำหรับเว็บเท่านั้น ซึ่งเป็นส่วนที่คุณจะสนุกที่สุดและไม่จำเป็นต้องมีความสามารถในการเขียนโค้ด โดยเราจะใช้ UI ของ Gemini ( gemini.google.com) และ p5.js
- สภาพแวดล้อมการเขียนโค้ดในเครื่อง ในขั้นตอนนี้ คุณจะต้องมีทักษะการเขียนโค้ด / สคริปต์เล็กน้อย รวมถึงการติดตั้งและใช้
npm/npxและเครื่องมือแก้ไขในเครื่อง เช่นvscodeหรือ IntelliJ หรือเครื่องมืออื่นๆ ส่วนที่ 2 นี้ไม่บังคับและจำเป็นเฉพาะในกรณีที่คุณต้องการให้แอปพลิเคชันทำงานต่อไปเพื่อให้เพื่อนและครอบครัวเล่นด้วยกันจากอุปกรณ์เคลื่อนที่หรือคอมพิวเตอร์
ข้อกำหนดเบื้องต้นเพียงอย่างเดียวสำหรับระยะที่ 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 ครั้งหากต้องการ เช่น ผู้เขียนชอบท่ากระโดดสองชั้นของ 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 เกมแรกของฉัน" หรือเขียนเพอร์มาลิงก์ไปยัง 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 ในเครื่องแล้ว
ในเทอร์มินัล ให้พิมพ์คำสั่งใดคำสั่งหนึ่งต่อไปนี้ (ใช้ได้ทั้ง 2 คำสั่ง)
# 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
- เลื่อนเคอร์เซอร์ลงไปที่ "โฮสติ้ง: .." แล้วพิมพ์SPACE จากนั้นพิมพ์ ENTER (เพราะเหตุใด เนื่องจากเป็นคำถามแบบหลายตัวเลือก คุณจึงต้องเลือกและไปที่หน้าถัดไป)
- [ขั้นตอนที่ 2] ตอนนี้คุณสามารถเลือกโปรเจ็กต์ที่มีอยู่ (ตัวเลือกที่ 1) หรือสร้างโปรเจ็กต์ใหม่ (ตัวเลือกที่ 2) ได้แล้ว
- หมายเหตุ: หากมีโปรเจ็กต์ Cloud อยู่แล้ว โปรเจ็กต์ดังกล่าวอาจไม่ใช่โปรเจ็กต์ Firebase โปรเจ็กต์ Firebase เป็นส่วนย่อยของโปรเจ็กต์ GCP คุณต้องดำเนินการเพิ่มเติมเพื่อให้เป็นโปรเจ็กต์ Firebase ซึ่งเป็นสิ่งที่ (ตัวเลือกที่ 3) มีไว้สำหรับ
- หากยังไม่แน่ใจ ให้ใช้ "สร้างโปรเจ็กต์ใหม่" แล้วตั้งชื่อ เช่น "p5js-ชื่อของคุณ-แอปของคุณ" (เช่น "p5js-riccardo-tetris")
- [ขั้นตอนที่ 3]
What would you like to call your project? (defaults to your project ID) (p5js-riccardo-tetris) - กด ENTER
- [ขั้นตอนที่ 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 - NO
- [ขั้นตอนที่ 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
ซึ่งจะทริกเกอร์การดำเนินการหลายอย่าง บรรทัดสุดท้ายควรมีลักษณะดังนี้
$ 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ที่คุณพุช เนื่องจากอาจมีข้อบกพร่องซ่อนอยู่โดยไม่ถูกตรวจพบ
โปรดทราบว่าเกมบางเกมอาจทำงานได้ดีกับคีย์บอร์ด แต่ไม่ทำงานได้ดีกับเมาส์หรือการแตะบนโทรศัพท์มือถือ นี่เป็นโอกาสที่ดีในการปรับปรุงโค้ด
6. เคล็ดลับการเขียนพรอมต์
เคล็ดลับบางส่วนจากการสร้างเกมมาแล้วหลายเกม
กำหนดเวอร์ชันพรอมต์
คุณอาจพบข้อผิดพลาดในพรอมต์ต้นฉบับ มีเวอร์ชัน git เส้นทางโค้ดมีดังนี้
- หากคุณชอบสิ่งที่เห็นและต้องการทำซ้ำด้วย Gemini พร้อมพรอมต์ย่อยที่ตามมา คุณอาจต้องติดตามพรอมต์ทั้งหมดไว้ที่ใดที่หนึ่ง (พรอมต์ 1, 2, 3 - ตัวอย่าง 3-shot 1 - example2)
- หากคุณไม่ได้ให้ความสำคัญกับแอปที่สร้างโดยพรอมต์ 1 คุณอาจต้องการปรับแต่งพรอมต์ ทิ้งโค้ด และเริ่มต้นใหม่ด้วยโค้ดที่แก้ไขแล้ว (พรอมต์ 1 v1, พรอมต์ 1 v2, พรอมต์ 1 v3, ..)
แน่นอนว่าคุณสามารถใช้ทั้ง 2 วิธีร่วมกันได้
ฟังก์ชันการทำงานบนอุปกรณ์เคลื่อนที่
คุณอาจต้องมีการโต้ตอบกับผู้ใช้ ทั้งนี้ขึ้นอยู่กับเกมที่คุณสร้าง การโต้ตอบนี้ต้องใช้แป้นพิมพ์ไหม หรือใช้ได้โดยการแตะที่หน้าจอ (เช่น บนอุปกรณ์เคลื่อนที่) โปรดระบุเรื่องนี้อย่างชัดเจนในพรอมต์ คุณอาจต้องสร้างปุ่มบางปุ่มบนแป้นพิมพ์ (ดูตัวอย่าง Tetris 3D ของฉัน) โปรดดูปัญหาเกี่ยวกับ 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 สำหรับผู้ที่ชื่นชอบเกมเก่าๆ ซึ่งมีพรอมต์ของเกมทั้งหมดนี้ หยิบภาพโปรด ปรับพรอมต์ แล้วปล่อยใจไปกับภาพเลย
ตัวอย่างเกมที่คุณสร้างได้มีดังนี้
เกมสุดท้ายอาจมีลักษณะดังนี้
- เททริส 3 มิติ
- เกมภาษา
- โคลนที่ประพฤติมิชอบ
- เกม Pac-Man โคลน
ขอย้ำอีกครั้งว่าภาษาอังกฤษเป็นภาษาที่ใช้ได้
|
|
|
|
|
|
🎉 ขอให้สนุกกับการเขียนโค้ด