Skip to content

README.md

Latest commit

 

History

History
110 lines (90 loc) · 11.7 KB

README.md

File metadata and controls

110 lines (90 loc) · 11.7 KB
Raw

🪙 Trivia Betting Challenge | เกมทายปัญหาเดิมพันท้าสมอง

เกมทายปัญหาความรู้ทั่วไปในรูปแบบเว็บแอปพลิเคชันหน้าเดียว (Single Page Application) ที่มาพร้อมกับระบบเดิมพันสุดเร้าใจเพื่อเพิ่มความท้าทาย โดยใช้ขุมพลังของ Google Gemini 2.5 Flash API ผ่านระบบหลังบ้านเพื่อสร้างคำถามแบบสุ่มขึ้นมาใหม่และเรียงระดับความยากจากง่ายไปยากโดยเฉพาะ

🎮 กติกาการเล่น (Gameplay Rules)

  1. คะแนนเริ่มต้น: ผู้เล่นเริ่มเกมด้วยคะแนนสะสม 100 คะแนน มีคำถามทั้งหมด 10 ข้อ
  2. เฟสเดิมพัน (Betting Phase - 15 วินาที):
    • ผู้เล่นจะเห็นโจทย์คำถาม แต่จะยังไม่เห็นตัวเลือกคำตอบ
    • ต้องตัดสินใจเลือกวางเดิมพันตามระดับความมั่นใจของตัวเอง (ระบบเดิมพันจะสเกลตามคะแนนคงเหลือของคุณ รวมถึงมีปุ่ม "เทหมดหน้าตัก (All-In)")
    • หากหมดเวลาก่อนวางเดิมพัน ระบบจะเลือกวางเดิมพันด้วยคะแนนต่ำสุดให้อัตโนมัติและสลับไปเฟสถัดไป
  3. เฟสตอบคำถาม (Answering Phase - 15 วินาที):
    • ตัวเลือกตัวอักษร A, B, C, D จะปรากฏขึ้นมา
    • หาก ตอบถูก: จะได้คะแนนสะสมบวกเพิ่มเท่ากับจำนวนแต้มที่เดิมพันไว้
    • หาก ตอบผิด / หมดเวลา: คะแนนสะสมจะโดนหักออกตามจำนวนแต้มที่เดิมพันไว้
  4. จบเกม (Game Over / Victory):
    • หากคะแนนสะสมหมดเกลี้ยง (เหลือ 0 หรือน้อยกว่า) จะ Game Over ทันที
    • หากเล่นได้ครบ 10 ข้อ จะผ่านภารกิจสำเร็จ (Victory) พร้อมสรุปสถิติคะแนนสุดท้าย, อัตราการตอบถูก และคะแนนเดิมพันสูงสุดของคุณ

✨ คุณสมบัติเด่นของเกม (Core Features)

  • 🧠 AI-Generated Global Trivia (เชื่อมต่อ Gemini 2.5 Flash): ดึงคำถามทั่วไปจากประวัติศาสตร์ ภูมิศาสตร์ วิทยาศาสตร์ วัฒนธรรมรอบโลกมาสุ่มใหม่ตลอดเวลาผ่าน AI โดยส่งค่าเป็น JSON ป้อนเข้าสู่หน้าบ้านโดยตรง และคัดกรองให้เรียงลำดับจากง่ายที่สุด (ข้อ 1) ไต่ระดับยากขึ้นเรื่อยๆ จนถึงยากที่สุด (ข้อ 10)
  • 🔌 Secure Serverless Proxy Backend (ซ่อนกุญแจความปลอดภัย): ย้ายการติดต่อสื่อสารกับ Gemini API จากหน้าบ้าน (app.js) ไปไว้ที่ระบบ Serverless Function หลังบ้านผ่าน Vercel (api/questions.js) ป้องกันไม่ให้ผู้ใช้ตรวจหน้าเว็บเพื่อดึงคีย์ส่วนตัวไปใช้ พร้อมรับรองสิทธิ์ CORS ปลอดภัย
  • 🔊 Retro Synthesized Audio (Web Audio API): ใช้เทคโนโลยีสร้างเสียงสังเคราะห์ย้อนยุค (8-Bit Retro) ในตัวเบราว์เซอร์ผ่านโค้ด JavaScript โดยตรง (ไม่ต้องโหลดไฟล์เสียงภายนอก) มีเสียงปุ่มกด, เสียงเหรียญเดิมพัน, เสียงเวลาเดินติ๊กๆ, เสียงตอบถูก/ผิด, และเสียงชนะ/แพ้ ที่สมบูรณ์แบบและเคลียร์หน่วยความจำทันทีหลังเล่นจบหมดกังวลเรื่องเสียงค้าง
  • 🎨 Modern Glassmorphism UI Design: หน้าเว็บตอบสนอง (Responsive) สไตล์ Futuristic Dark Theme ที่สวยงาม มีความโปร่งใสแบบกระจกฝ้า (Frosted Glass), เอฟเฟกต์แสงเงากลิตเตอร์เรืองแสงสีนีออน (Cyan, Purple, Magenta) และแถบจับเวลาสีสันเปลี่ยนสถานะเตือนตามระดับเวลาวิกฤต

📂 โครงสร้างไฟล์ในโครงการ (Project Structure)

├── api/
│   └── questions.js      # Serverless Function บน Vercel คุยกับ Gemini API
├── index.html            # โครงสร้างหน้าเว็บหลักของเกม
├── style.css             # การตกแต่งสไตล์ Glassmorphic UI และอนิเมชันทั้งหมด
├── app.js                # ตรรกะของเกม การสังเคราะห์เสียง และระบบการเล่น
├── README.md             # คู่มือการใช้งานโครงการนี้
└── .gitignore            # ตั้งค่าละเว้นไฟล์ที่ไม่ต้องการขึ้น Git

💻 วิธีการรันบนเครื่องคอมพิวเตอร์ของคุณ (Local Setup)

1. สิ่งที่ต้องมีในเครื่อง (Prerequisites)

  • Node.js ติดตั้งอยู่ในระบบ

2. ขั้นตอนการตั้งค่า

  1. เปิด Command Prompt / Terminal แล้วเข้าไปที่โฟลเดอร์ของโครงการ
  2. ตั้งค่า Environment Variable สำหรับคีย์ API (รับคีย์จาก Google AI Studio)
    • Windows PowerShell: 
      $env:GEMINI_API_KEY="คีย์_GEMINI_ของคุณ"
    • Windows CMD: 
      set GEMINI_API_KEY=คีย์_GEMINI_ของคุณ
    • macOS / Linux Terminal: 
      export GEMINI_API_KEY="คีย์_GEMINI_ของคุณ"
  3. รันตัวเซิร์ฟเวอร์หลังบ้านจำลองผ่าน Vercel CLI (ระบบจะดาวน์โหลดตัวจัดการอัตโนมัติ): 
    npx vercel dev
  4. ระบบจำลองจะเริ่มรันในเครื่องของคุณ (โดยทั่วไปคือ http://localhost:3000) ลองเปิดเล่นผ่านลิงก์ดังกล่าวเพื่อทดสอบการเรียกใช้งาน

🚀 ขั้นตอนการติดตั้งอัปขึ้นใช้งานออนไลน์ (Deployment Guide)

แนวทางที่ 1: ติดตั้งแบบ Vercel ทั้งหน้าบ้านและหลังบ้าน (แนะนำ ⚡)

  1. ทำการ Push ไฟล์ทั้งหมดขึ้นที่คลังข้อมูล GitHub ของคุณ (รวมถึงโฟลเดอร์ api)
  2. สมัครใช้งานหรือเข้าสู่ระบบที่ Vercel.com
  3. กด Add New > Project แล้วกด Import โปรเจกต์จาก GitHub ของคุณ
  4. ไปที่หัวข้อ Environment Variables แล้วระบุตัวแปรดังนี้:
    • Name: GEMINI_API_KEY
    • Value: ใส่คีย์ Gemini API ของคุณที่ได้มาจาก Google AI Studio
  5. กดปุ่ม Deploy
  6. โค้ดหลังบ้านจะถูกติดตั้งที่เซิร์ฟเวอร์ และได้ URL โดเมนใช้งานเล่นเกมได้เลยทันที (เช่น https://trivia-betting.vercel.app)

แนวทางที่ 2: หน้าบ้านบน GitHub Pages + หลังบ้านบน Vercel

หากคุณต้องการแสดงผลหน้าจอเกมหลักบน GitHub Pages แต่ต้องการใช้หลังบ้านในการเก็บคีย์บน Vercel:

  1. ทำตามขั้นตอนของ แนวทางที่ 1 บน Vercel เพื่อเปิดเซิร์ฟเวอร์หลังบ้านก่อน
  2. ในโค้ด app.js บรรทัดที่ 3 ให้กำหนดค่า BACKEND_API_URL ชี้ไปที่ URL ของ Vercel ที่คุณได้ติดตั้ง เช่น: 
    const BACKEND_API_URL = "https://your-project.vercel.app";
  3. นำโค้ดนี้ส่งขึ้น GitHub และตั้งค่าเปิดใช้งาน GitHub Pages ในส่วน Settings ของคลังข้อมูล GitHub
  4. ตัวหน้าเว็บเกมบน GitHub Pages จะทำการยิงเรียกหาข้อมูลคำถามมาใช้จาก Vercel Proxy ภายใต้ระบบรักษาความปลอดภัยอย่างถูกต้องและไม่โดนบล็อก CORS

🛠️ เทคโนโลยีที่เลือกใช้ (Technologies)

  • Frontend: Vanilla HTML5, CSS3 (Glassmorphic variables, Flexbox/Grid), Modern Vanilla JavaScript (ES6 Modules)
  • Backend: Node.js (Vercel Serverless Functions API)
  • AI Integration: Google Gemini 2.5 Flash (generateContent endpoint)
  • Audio synthesis: Native Browser Web Audio API (Oscillators, Gain nodes, AudioContext)

📄 ใบอนุญาต (License)

ผลงานนี้ได้รับอนุญาตภายใต้ใบอนุญาต MIT License - สามารถนำไปศึกษา ดัดแปลง หรือพัฒนาต่อยอดได้อย่างอิสระ