Trò chơi Cờ vua tĩnh (Static Chess)

 (val.town)
1 điểm bởi GN⁺ 2024-05-14 | 1 bình luận | Chia sẻ qua WhatsApp

Triển khai Static Chess

  • Một bản triển khai cờ vua đơn giản, chỉ có các tính năng thiết yếu
  • Tất cả các trang chỉ được tạo bằng HTML và CSS
  • Mọi nước đi cờ đều được thực hiện bằng cách nhấp vào liên kết
  • Gửi liên kết cho bạn bè, đối phương đi quân rồi gửi lại liên kết để tiếp tục ván đấu
  • Không có các hiệu ứng động không cần thiết hay yếu tố tương tác hào nhoáng làm cản trở việc chơi
  • Tò mò không biết liệu Google có thể tính được mọi nước đi cờ khả dĩ khi lập chỉ mục trang này hay không

Hạn chế tính năng và lỗi

  • Tính năng rất hạn chế và có thể không hoạt động
  • Nếu phát hiện lỗi, vui lòng báo cáo

Ý tưởng truyền cảm hứng

  • Lấy cảm hứng từ cuộc thảo luận trên Hacker News về một trang web hiển thị mọi trạng thái có thể có của trò chơi cờ caro

Kế hoạch sắp tới

  • Có kế hoạch mở rộng để hỗ trợ chơi thực tế
  • Có vẻ nó có thể trở thành một giao diện đơn giản để chơi những ván cờ kéo dài với bạn bè
  • Thêm tính năng đấu với AI tĩnh cũng có thể sẽ rất thú vị
  • Nếu có tính năng nào bạn muốn được bổ sung, rất hoan nghênh PR

Mã chính

class StaticChess { 
  // 생략...
  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>
          {/* 생략... */}
          <div className="board">
            {this.rows.map(row => (
              <div key={row} className="row">{this.squares.map(square => game.squareContent(row, square))}</div>
            ))}
          </div>
          {/* 생략... */}
        </html>
      ),
      { headers: { "content-type": "text/html", "cache-control": "max-age=86400, public" } },
    );
  }
}

class Game {
  // 생략... 
  squareContent(row: number, square: number) {
    // 생략...
    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>;
    })();
    // 생략...
  }
}

Ý kiến của GN⁺

  • Đây là một thử nghiệm thú vị khi triển khai trò chơi cờ vua trên web chỉ bằng HTML/CSS. Tuy nhiên, việc biến mọi trạng thái thành trang tĩnh khiến tính thực tiễn còn gây nghi ngờ.
  • Nếu xét đến khả năng sử dụng thực tế, có lẽ cuối cùng vẫn sẽ cần dạng quản lý trạng thái ở backend và frontend gọi API.
  • Việc tính sẵn mọi trạng thái dưới dạng trang tĩnh là một ý tưởng vui, nhưng có vẻ không mang nhiều ý nghĩa với người dùng thực tế.
  • SSR bằng React là một cách tiếp cận ổn, nhưng dường như vẫn còn nhiều dư địa để cải thiện hiệu năng như caching hay prefetching.
  • Một dự án mã nguồn mở tương tự là lichess. Nó cung cấp tính năng phong phú và UI đẹp, nên khá đáng để tham khảo.
  • Nếu muốn hỗ trợ chế độ AI bằng cách tích hợp với engine cờ vua, cũng có thể cân nhắc tận dụng WASM.

Bài viết liên quan

1 bình luận

 
GN⁺ 2024-05-14
Ý kiến Hacker News
  • Có thể thêm FEN vào URL để chơi Chess960 (cờ vua ngẫu nhiên Fischer) hoặc các biến thể "vị trí khởi đầu tùy chỉnh" khác. Dấu cách phải được thay bằng dấu gạch dưới.
  • Hệ thống phát hiện nước đi hợp lệ nhưng không nhận ra chiếu hết.
    • Ở URL ví dụ, lẽ ra phải hiển thị là chiếu hết.
  • Ở một URL ví dụ khác, ván cờ đã tiến triển thành công đến trạng thái chiếu hết.
  • Đề xuất dùng CDN (ví dụ: Cloudflare) để kiểm tra tỷ lệ cache hit.
  • Một câu đùa rằng họ đã mong đợi một biến thể cờ vua mà hoàn toàn không thể di chuyển quân nào.
  • Dù là một trang web tĩnh và chỉ là một triển khai tối thiểu của cờ vua, nó vẫn ngạc nhiên là có độ trễ.
  • Năm 2006, có người đã triển khai gần như đúng thứ này với trò chơi bàn cờ Reversi để học Python. Đối thủ là AI dựa trên tìm kiếm minimax đơn giản. Khi đó, việc đưa toàn bộ trạng thái vào URL mà không dùng JavaScript là cách tiếp cận rõ ràng hơn.
  • Ngoài FEN, sẽ tốt hơn nếu còn bao gồm lịch sử nước đi theo ký hiệu. Có kèm một URL ví dụ.
  • Vì không có sitemap nên không thể tìm được danh sách mọi trạng thái cờ vua có thể có.
  • Nhờ dự án này mà biết đến hai tài nguyên hữu ích là https://fav.farm và https://val.town.