Blockdit Logo (Mobile)
เพราะผิดพลาด จึงมีวันนี้ที่อยากดีขึ้น
•
19 มี.ค. เวลา 07:37 • ไลฟ์สไตล์

ลองใช้ AI ทำเกม เตตริส โดยใช้ Grok 3 โหมด Code กับ Gemini โหมด Canvas #เพราะผิดพลาด #PaFun_Plus

เริ่มต้นลองไปเล่นได้ที่ กดปุ่ม Run สีแดงแล้วเริ่มเล่นได้เลย
จาก Grok3 ใช้รูปแบบวิธีแบบว่ามีกรอบการทำงาน
ภาพหน้าจอในการเล่น ทำแบบมีโหมดพิเศษเมื่อคะแนนครบทุก 1000
จาก Gemini โหมด Canvas ลองเล่นได้ที่
1 Ptompt
มาลงรายละเอียดขั้นตอนทำงาน เริ่มจากเมื่อวานตอนใกล้เลิกงานอยากลอง grok3 ว่าโหมดเขียน code เก่งแค่ไหน เลยมีไอเดียว่า ให้ทำเกมเตตริสดีกว่า และร่างความต้องการเกมไปว่า
Help me: อ้างอิง https://tetris.com/games-content/play-tetris-content/index-mobile.php อยากได้เกมแบบนี้แต่มารันใน https://onecompiler.com/html มีโจทย์
1. ตัวบล๊อค 7 แบบ หมุนบล๊อคได้
2. เมื่อเรียงแถวครบสำเร็จต้องมีการลบบล๊อคแถวที่เรียงได้
3. เพิ่มปุ่มสัมผัส เพื่อรองรับทัชสกีน (ระบบรองรับทั้งคีย์บอร์ด ปุ่มทิศทางซ้าย ปุ่มทิศทางขวา ปุ่มทิศทางลง และใช้ spacebar ในการหมุน (กด spacebar 1 ครั้ง หมุน 1 ครั้ง) และปุ่มเสมือนทัชสกีน)
4. เพิ่มเมนูคะแนน โดยทุกการลบบล๊อค
4.1 ลบ 1 แถวได้ 100 คะแนน
4.2 ลบ 2 แถวได้ 300 คะแนน
4.3 ลบ 3 แถวได้ 700 คะแนน
4.4 ลบ 4 แถว ได้ 1000 คะแนน
5. มีปุ่ม สตาร์เริ่มเกม พร้อมคำแนะนำการเล่น (คำแนะนำการเล่นจะหายไปเมื่อเข้าสู่เกม) (เพิ่มลดความผิดพลาดใช้เป็นตัวอักษรแทนสัญลักษณ์)
6. เมื่อแถวเรียงไม่ได้จนบล๊อคสุดเพดานขึ้นเกมโอเวอร์
7. เมื่อเก็บคะแนนครบทุก 1000 คะแนน จะเข้าเป็นโหมดพิเศษ 7 วินาที (มีการแสดงเวลานับถอยหลัง) ในช่วงนั้น คะแนนจะคูณ 2 และถ้ายังทำคะแนนได้ทุกๆ 1000 คะแนน จะบวก 7 วินาที ทุกครั้ง
8. ในระบบตามข้อ 7 จะมีตัวเลขแสดงเวลาอย่างชัดเจน และการแสดงผลของเกมที่แตกต่างจากปกติ สวย ตื่นเต้นขึ้น เช่นกรอบเปลี่ยนสี (ความสนุกคือการที่สามารถทำลายบล๊อคเพิ่มให้มีจำนวนวินาทีมากขึ้น และคะแนนที่ได้จะมากขึ้น)
9. ทำให้สวยทันสมัย ใช้สีสันสดใสแบบไล่เฉดในพื้นหลัง (แต่กล่องเล่นเกมให้ชัดแยกกับพื้นหลัง ไม่กลืนสีพื้นหลัง กล่องพื้นที่เล่นใช้เป็นสีดำอ่อนที่ไล่เฉดสี) และบล็อกมีหลายสีแบบสุ่ม
10. ใส่เอฟเฟกต์สวยๆ ตอนลบแถวได้ ให้รู้สึกสะใจ (เอฟเฟกมีเฉพาพบล๊อกที่ลบ ไม่เกิดขึ้นกับบล๊อกที่กำลังลงมา)
11. วางหน้าจอการเล่นใหม่
10.1 ส่วนบนสุด จากกรอบในการเล่นเกม เป็นคะแนน และ การแสดงนับถอยหลังเมื่อเข้าโหมดพิเศษ
10.2 ส่วนล่าง ถัดจากกรอบเล่นเกม แสดงเป็น 2 แถว
แถวแรก แสดงปุ่ม ซ้าย ล่าง ขวา
แถวสอง ปุ่มหมุนบล๊อค ขนาดยาว ประมาณรวม 3 ปุ่มด้านบน
12. เวลากดปุ่มเสมือนทัชสกีน เลื่อนซ้าย ขวา ลง สามารถกดค้างได้
Grok เขียน Code เรียบร้อย พร้อมสรุปผลลัพธ์ตามโจทย์
ก็ได้เอาไป Run และพบว่า เจอบัคและแก้ในหลายรอบ ในแต่ละรอบเจอประเด็นและมี Prompt
แก้ไขครั้งที่ 1 ออกแบบปุ่มไม่สวย และระบบที่คิดไว้เล่นจริงไม่สนุก -.-"
ปรับเพิ่มอีกนิด
1. ปุ่มที่เป็นทัชสกีนออกแบบไม่สวยเลย แก้ใหม่
2. โหมดพิเศษเปลี่ยนจาก 7 วินาที เป็น 15 วินาที
แก้ไขครั้งที่ 2 ปุ่มเสมือนมีประเด็นในการกดทีละครั้ง กับกดค้าง รวมถึงโหมดพิเศษไม่ตื่นเต้นให้น่าเล่น
พบบัคเล็กน้อย ตอนเล่นโหมดทัสสกีน ปุ่มหมุน กดแล้วมีการเด้งกลับ ไม่หมุน (เป็นเด้งไปมา) ที่เหลือทำได้ดีแล้ว อยากให้พอเข้าโหมดพิเศษ กรอบของเกมดูตื่นเต้นกว่านี้ หรือแบบฉากหลังเปลี่ยนให้น่าสนใจขึ้น สร้างสรรค์ที
แก้ไขครั้งที่ 3 จากประเด็นในการออกแบบเลยพอมีให้แก้ Code ทำให้บางส่วนที่เดิมโอเค ไม่โอเค เลยมีแนะนำไอเดียในการแก้ไขให้เทสว่าถ้าเปลี่ยนวิธีคิด ผลลัพธ์จะเปลี่ยนไปไหม
ลองเช็คใหม่โหมด พิเศษหายไป คิดว่า ตัวเลขของโหมดพิเศษ ควรมีพื้นที่แสดงเลย เช่นคะแนนทาง ซ็าย และโหมดพิเศษเวลานับถอยหลังทางขวา จะได้เช็คง่ายเวลาคะแนนครับ 1000 แล้วเวลาขึ้นนับถอยหลัง หากเก็บคะแนนเพิ่มในจังหวะนั้นที่คะแนนคูนสอง จะได้เห็นเวลาพิเศษที่เพิ่มขึ้นได้ และน่าจะง่ายในการแก้ code
แก้ไขครั้งที่ 4 ตั้งสมมติฐานใหม่ และเสนอวิธีการแก้ไข ให้ลองไปเขียน code ใหม่
ลองจัดวางคะแนนด้านบนให้สวยงามเช่นทำเป็น 2 บรรทัด บรรทัดนึงคำอธิบาย บรรทัดนึง คะแนน หรือ เวลา และเช็คเงื่อนไขโหมด ทัชสกีน ทำไมยังมีบัค ทั้งการไม่หมุน การหมุนและเด้งกลับ หรือ กดค้างไม่ไป คิดว่า เพราะปุ่มซ้าย ขวา ลง กดค้างได้ แต่ปุ่ม spacebar ไม่รองรับการกดค้าง ต้องแยกเขียน code ตรงนี้ออกจากกัน ไม่งั้นในมือถือเปิดทัชสกีนรวน
แก้ไขครั้งที่ 5 เจอบัคในโหมดพิเศษที่เงื่อนไขไม่ถูกต้อง
เช็คเงื่อนไขโหมดพิเศษใหม่ที ทำไมเกิดแค่ครั้งเดียว ต้องมีอะไรผิดพลาดตรงไหน แน่ๆๆ มันต้องเกิด เมื่อคะแนนครบ 1000 คะแนนนะ แล้วจะคะแนนคูน 2 เป็นเวลา 15 วิ แต่ถ้าแบบยังทำคะแนนได้เกิน ก็ทบวินาทีไป
รายละเอียดในการแก้ไข และ prompt ที่ปรับเปลี่ยนต่างๆ มีข้อมูลอ้างอิงที่
ก็ใช้การแก้ไข 5 ครั้ง ทำทั้งหมดไม่ถึงชั่วโมง เสร็จเรียบร้อย
ชอบโทนสีที่ออกมาจัง โดยส่วนตัวชอบทั้งสี และความ minimal มากๆ
เช้ามาเข้าใช้งาน Gemini เห็นว่ามีไอคอน "Canvas" ขึ้นมา และเห็นมีข่าวอธิบาย
เลยลองใหม่เป็นว่า ถ้าเป็น 1 Prompt จะทำเกมออกมาสำเร็จไหม โดยใช้ prompt ว่า
ขอเกม เตตริส รันได้บน https://onecompiler.com/html
สั้นกระชับเท่านี้เลย
และจะได้เป็นวิธีแชร์ของ Gemini เป็น
เล่นได้เลยไม่มีบัค Q(^^Q)
แต่ Prompt เดียวก็อาจไม่ตรงใจ การมีกรอบไอเดียมาพัฒนาทำให้รู้สึกสนุก และภูมิใจกับผลงานมากกว่า
ก่อนหน้านั้นเคยลองเล่นให้ AI มาลองเขียนเกมแบบ 1 Prompt เช่น เกมงู แบบโนเกียสมัยก่อน
ส่วนอันนี้น่าเป็นเกมต่อไปที่อยากไปลองแก้ของเดิมที่เคยโพส
โดยอยากเปลี่ยนมาเป็นแบบ web ให้มีหน้าจอประมาณในรูป เหลือทำให้สวยกว่านี้กับแก้บัค
https://onecompiler.com/html/438ra2hdx (มีบัคอยู่ เกมส์เล่นชนะบอสใหญ่เกมส์ดันไม่จบ -.-" และบัคประปราย จนยังไม่ได้ลองเทสจนสมบูรณ์)
หวังว่าจะมีเวลาและได้ลองจนสำเร็จ
ก็เป็นอะไรใหม่ที่ในยุคนี้ ความเป็นเด็กมีไอเดียอยากทำอะไร แล้ว AI มาช่วย Co Create ให้ความฝันกลายเป็นจริง ช่วงนี้เห็นคนแชร์ AI ช่วยขึ้นโมเดล 3 มิติ ต่อไปก็อาจจะมีเกมส์ที่ AI ช่วยสร้างแบบ 3 มิติได้ต่อไป

ดูเพิ่มเติมในซีรีส์

โฆษณา