เกมหมากรุกแบบสแตติก (Static Chess)

 (val.town)
1 คะแนน โดย GN⁺ 2024-05-14 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

การสร้าง Static Chess

  • การสร้างหมากรุกแบบเรียบง่ายที่มีเฉพาะฟังก์ชันจำเป็น
  • ทุกหน้าประกอบด้วย HTML และ CSS เท่านั้น
  • การเดินหมากทั้งหมดทำผ่านการคลิกลิงก์
  • ส่งลิงก์ให้เพื่อน จากนั้นอีกฝ่ายเดินหมากแล้วส่งลิงก์กลับมา เป็นวิธีการเล่นของเกมนี้
  • ไม่มีแอนิเมชันที่ไม่จำเป็นหรือองค์ประกอบอินเทอร์แอ็กทีฟที่หวือหวาซึ่งรบกวนการเล่น
  • สงสัยว่าเวลาที่ Google ทำดัชนีเว็บไซต์นี้ จะสามารถคำนวณการเดินหมากรุกที่เป็นไปได้ทั้งหมดได้หรือไม่

ข้อจำกัดของฟังก์ชันและบั๊ก

  • ฟังก์ชันยังมีข้อจำกัดมากและอาจทำงานไม่ถูกต้อง
  • หากพบบั๊ก กรุณาแจ้งเข้ามา

ไอเดียที่เป็นแรงบันดาลใจ

  • ได้แรงบันดาลใจจากการพูดคุยบน Hacker News เกี่ยวกับเว็บไซต์ที่แสดงทุกสถานะที่เป็นไปได้ของเกม Tic-tac-toe

แผนในอนาคต

  • มีแผนจะขยายให้รองรับการเล่นจริง
  • ดูเหมือนว่าน่าจะกลายเป็นอินเทอร์เฟซเรียบง่ายสำหรับเล่นกระดานยาวกับเพื่อนได้
  • การเพิ่มฟังก์ชันสู้กับ AI แบบสแตติกก็น่าจะสนุกดี
  • หากมีฟังก์ชันที่อยากให้เพิ่ม ยินดีรับ PR

โค้ดหลัก

class StaticChess { 
  // omitted...
  async fetch(req: Request): Promise<Response> {
    const gameInfo = parseURL(req.url); 
    if (gameInfo === undefined) {
      return new Response("Not Found", { status: 404, headers: { "cache-control": "max-age=86400, public" } }); 
    }
    const game = new Game(gameInfo.game, gameInfo.selected);
    return new Response(
      renderToString(
        <html>
          {/* omitted... */}
          <div className="board">
            {this.rows.map(row => (
              <div key={row} className="row">{this.squares.map(square => game.squareContent(row, square))}</div>
            ))}
          </div>
          {/* omitted... */}
        </html>
      ),
      { headers: { "content-type": "text/html", "cache-control": "max-age=86400, public" } },
    );
  }
}

class Game {
  // omitted... 
  squareContent(row: number, square: number) {
    // omitted...
    const squareContent = (() => {
      if (this.selectable.includes(pos)) { 
        return <a href={`/${this.fen}/${pos}`}>{pieces[this.board[row][square]?.type]}</a>;
      }
      const nextMove = this.nextMoves[pos];
      if (nextMove !== undefined) {
        return (
          <a href={`/${nextMove.after.replaceAll(" ", "_")}/`}>
            {pieces[this.board[row][square]?.type]} 
          </a>
        );
      }
      return <span>{pieces[this.board[row][square]?.type]}</span>;
    })();
    // omitted...
  }
}

ความเห็นของ GN⁺

  • การสร้างเกมหมากรุกบนเว็บด้วย HTML/CSS เท่านั้นเป็นความพยายามที่น่าสนใจ แต่การทำให้ทุกสถานะเป็นหน้าสแตติกยังน่าสงสัยในแง่ความใช้งานจริง
  • หากคำนึงถึงการใช้งานที่สมจริง ท้ายที่สุดก็น่าจะต้องเป็นรูปแบบที่แบ็กเอนด์จัดการสถานะ และฟรอนต์เอนด์เรียกใช้ API
  • การคำนวณทุกสถานะล่วงหน้าเป็นหน้าแบบสแตติกนั้นเป็นไอเดียที่สนุก แต่สำหรับผู้ใช้จริงดูเหมือนจะไม่ได้มีความหมายมากนัก
  • การทำ SSR ด้วย React เป็นแนวทางที่โอเค แต่ก็น่าจะยังมีช่องให้ปรับปรุงประสิทธิภาพได้อีกมาก เช่น caching หรือ prefetching
  • โปรเจกต์โอเพนซอร์สที่คล้ายกันมี lichess ซึ่งมีฟังก์ชันครบและ UI สวยงาม จึงน่าลองดูเป็นตัวอย่าง
  • หากจะรองรับโหมด AI ด้วยการเชื่อมต่อกับ chess engine ก็อาจพิจารณาใช้ WASM ได้เช่นกัน

บทความที่เกี่ยวข้อง

  • Click (2016)
    1 คะแนน · 1 ความคิดเห็น · 2 시간 전
  • CSS Minecraft
    26 คะแนน · 7 ความคิดเห็น · 2025-05-27

1 ความคิดเห็น

 
GN⁺ 2024-05-14
ความคิดเห็นบน Hacker News
  • สามารถเพิ่ม FEN ลงใน URL เพื่อเล่น Chess960 (Fischer Random Chess) หรือรูปแบบ "ตำแหน่งเริ่มต้นแบบกำหนดเอง" อื่น ๆ ได้ โดยต้องแทนช่องว่างด้วยขีดล่าง
  • ระบบตรวจจับการเดินที่ถูกต้องได้ แต่ไม่รู้จักเช็กเมต
    • ใน URL ตัวอย่างควรจะแสดงว่าเป็นเช็กเมต
  • ในอีก URL ตัวอย่างหนึ่ง เกมดำเนินไปจนถึงเช็กเมตได้สำเร็จ
  • มีข้อเสนอให้ลองใช้ CDN (เช่น Cloudflare) เพื่อตรวจสอบอัตรา cache hit
  • มีมุกว่าตอนแรกคาดว่าจะเป็นรูปแบบหมากรุกที่ขยับหมากไม่ได้เลย
  • แม้จะเป็นหน้าเว็บแบบสแตติกและเป็นการทำหมากรุกแบบขั้นต่ำที่สุด แต่ก็น่าแปลกที่ยังมีอาการหน่วง
  • ในปี 2006 เคยทำสิ่งที่แทบจะเหมือนกันทุกอย่างกับบอร์ดเกม Reversi เพื่อใช้ฝึก Python โดยคู่ต่อสู้เป็น AI แบบง่ายที่อิงกับการค้นหา minimax ตอนนั้นการใส่สถานะทั้งหมดไว้ใน URL โดยไม่ใช้ JavaScript เป็นแนวทางที่ชัดเจนกว่า
  • นอกจาก FEN แล้ว น่าจะใส่ประวัติการเดินแบบเป็นชิ้นส่วนย่อยด้วย และมีการให้ URL ตัวอย่างไว้
  • ไม่มี sitemap เลยหาไม่เจอว่ามีรายการสถานะหมากรุกที่เป็นไปได้ทั้งหมดอยู่ที่ไหน
  • โปรเจ็กต์นี้ทำให้ได้รู้จักทรัพยากรที่มีประโยชน์อย่าง https://fav.farm และ https://val.town.