안녕하세요. 환영합니다! ??
오늘 저는 SuperViz를 사용하여 멀티플레이어 체스 게임을 구축하는 방법을 안내하는 튜토리얼을 가져왔습니다. 멀티플레이어 게임에는 플레이어 간 실시간 동기화와 상호 작용이 필요하며 SuperViz 기능을 활용하는 이상적인 애플리케이션입니다.
이 튜토리얼에서는 두 플레이어가 실시간으로 서로 대결하여 서로의 움직임을 볼 수 있는 체스 게임을 만드는 방법을 보여줍니다.
react-chessboard 라이브러리를 사용하여 체스판을 설정하고, chess.js로 게임 상태를 관리하고, SuperViz로 플레이어 동작을 동기화하는 방법을 시연해 보겠습니다. 이 설정을 통해 여러 참가자가 체스 게임에 참여하고, 움직이고, 원활하고 대화형 체스 게임 환경을 경험할 수 있습니다. 시작해 보세요!
이 튜토리얼을 따르려면 SuperViz 계정과 개발자 토큰이 필요합니다. 이미 계정과 개발자 토큰이 있다면 다음 단계로 넘어갈 수 있습니다.
계정을 만들려면 SuperViz 등록으로 이동하여 Google이나 이메일/비밀번호를 사용하여 계정을 만드세요. 이메일/비밀번호를 사용할 때 계정 확인을 위해 클릭해야 하는 확인 링크를 받게 된다는 점에 유의하는 것이 중요합니다.
SDK를 사용하려면 개발자 토큰을 제공해야 합니다. 이 토큰은 SDK 요청을 계정과 연결하는 데 필수적입니다. 대시보드에서 개발 및 프로덕션 SuperViz 토큰을 모두 검색할 수 있습니다. 이 튜토리얼의 다음 단계에서 필요하므로 개발자 토큰을 복사하여 저장하세요.
시작하려면 SuperViz를 통합할 새 React 프로젝트를 설정해야 합니다.
먼저 Create React App with TypeScript를 사용하여 새로운 React 애플리케이션을 만듭니다.
npm create vite@latest chess-game -- --template react-ts cd chess-game
다음으로 프로젝트에 필요한 라이브러리를 설치합니다.
npm install @superviz/sdk react-chessboard chess.js uuid
이 튜토리얼에서는 Tailwind CSS 프레임워크를 사용합니다. 먼저 tailwind 패키지를 설치하세요.
npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p
그런 다음 템플릿 경로를 구성해야 합니다. 프로젝트 루트에서 tailwind.config.js를 열고 다음 코드를 삽입하세요.
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
그런 다음 tailwind 지시문을 전역 CSS 파일에 추가해야 합니다. (src/index.css)
@tailwind base; @tailwind components; @tailwind utilities;
프로젝트 루트에 .env 파일을 만들고 SuperViz 개발자 키를 추가하세요. 이 키는 SuperViz 서비스로 애플리케이션을 인증하는 데 사용됩니다.
VITE_SUPERVIZ_API_KEY=YOUR_SUPERVIZ_DEVELOPER_KEY
이 단계에서는 SuperViz를 초기화하고 실시간 체스 동작을 처리하는 기본 애플리케이션 로직을 구현하겠습니다.
src/App.tsx를 열고 SuperViz를 사용하여 기본 애플리케이션 구성 요소를 설정하여 공동 작업 환경을 관리하세요.
import { v4 as generateId } from 'uuid';
import { useCallback, useEffect, useRef, useState } from "react";
import SuperVizRoom, { Realtime, RealtimeComponentEvent, RealtimeMessage, WhoIsOnline } from '@superviz/sdk';
import { Chessboard } from "react-chessboard";
import { Chess, Square } from 'chess.js';
설명:
API 키, 룸 ID, 플레이어 ID에 대한 상수를 정의하세요.
const apiKey = import.meta.env.VITE_SUPERVIZ_API_KEY as string; const ROOM_ID = 'chess-game'; const PLAYER_ID = generateId();
설명:
체스 이동 메시지를 처리하기 위한 유형을 만듭니다.
type ChessMessageUpdate = RealtimeMessage & {
data: {
sourceSquare: Square;
targetSquare: Square;
};
};
설명:
메인 App 구성 요소를 설정하고 상태 변수를 초기화합니다.
export default function App() {
const [initialized, setInitialized] = useState(false);
const [gameState, setGameState] = useState<Chess>(new Chess());
const [gameFen, setGameFen] = useState<string>(gameState.fen());
const channel = useRef<any | null>(null);
설명:
Create an initialize function to set up the SuperViz environment and configure real-time synchronization.
const initialize = useCallback(async () => {
if (initialized) return;
const superviz = await SuperVizRoom(apiKey, {
roomId: ROOM_ID,
participant: {
id: PLAYER_ID,
name: 'player-name',
},
group: {
id: 'chess-game',
name: 'chess-game',
}
});
const realtime = new Realtime();
const whoIsOnline = new WhoIsOnline();
superviz.addComponent(realtime);
superviz.addComponent(whoIsOnline);
setInitialized(true);
realtime.subscribe(RealtimeComponentEvent.REALTIME_STATE_CHANGED, () => {
channel.current = realtime.connect('move-topic');
channel.current.subscribe('new-move', handleRealtimeMessage);
});
}, [handleRealtimeMessage, initialized]);
Explanation:
Create a function to handle chess moves and update the game state.
const makeMove = useCallback((sourceSquare: Square, targetSquare: Square) => {
try {
const gameCopy = gameState;
gameCopy.move({ from: sourceSquare, to: targetSquare, promotion: 'q' });
setGameState(gameCopy);
setGameFen(gameCopy.fen());
return true;
} catch (error) {
console.log('Invalid Move', error);
return false;
}
}, [gameState]);
Explanation:
Create a function to handle piece drop events on the chessboard.
const onPieceDrop = (sourceSquare: Square, targetSquare: Square) => {
const result = makeMove(sourceSquare, targetSquare);
if (result) {
channel.current.publish('new-move', {
sourceSquare,
targetSquare,
});
}
return result;
};
Explanation:
Create a function to handle incoming real-time messages for moves made by other players.
const handleRealtimeMessage = useCallback((message: ChessMessageUpdate) => {
if (message.participantId === PLAYER_ID) return;
const { sourceSquare, targetSquare } = message.data;
makeMove(sourceSquare, targetSquare);
}, [makeMove]);
Explanation:
Use the useEffect hook to trigger the initialize function on component mount.
useEffect(() => {
initialize();
}, [initialize]);
Explanation:
Return the JSX structure for rendering the application, including the chessboard and collaboration features.
return (
<div className='w-full h-full bg-gray-200 flex items-center justify-center flex-col'>
<header className='w-full p-5 bg-purple-400 flex items-center justify-between'>
<h1 className='text-white text-2xl font-bold'>SuperViz Chess Game</h1>
</header>
<main className='w-full h-full flex items-center justify-center'>
<div className='w-[500px] h-[500px] shadow-sm border-2 border-gray-300 rounded-md'>
<Chessboard position={gameFen} onPieceDrop={onPieceDrop} />
<div className='w-[500px] h-[50px] bg-gray-300 flex items-center justify-center'>
<p className='text-gray-800 text-2xl font-bold'>Turn: {gameState.turn() === 'b' ? 'Black' : 'White'}</p>
</div>
</div>
</main>
</div>
);
Explanation:
Here's a quick overview of how the project structure supports a multiplayer chess game:
To run your application, use the following command in your project directory:
npm run dev
This command will start the development server and open your application in the default web browser. You can interact with the chessboard and see moves in real-time as other participants join the session.
Dans ce tutoriel, nous avons construit un jeu d'échecs multijoueur en utilisant SuperViz pour la synchronisation en temps réel. Nous avons configuré une application React pour gérer les mouvements d'échecs, permettant à plusieurs joueurs de collaborer de manière transparente sur un échiquier partagé. Cette configuration peut être étendue et personnalisée pour s'adapter à divers scénarios où une interaction de jeu est requise.
N'hésitez pas à explorer le code complet et d'autres exemples dans le référentiel GitHub pour plus de détails.
위 내용은 React를 사용하여 멀티플레이어 체스 게임을 구축하는 방법 알아보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
