어디서든 게임을 할 수 있도록 JavaScript로 Tic Tac Toe 알고리즘을 만들었습니다. 어디에서나 이 알고리즘(JavaScript 클래스에서 뒤틀림)을 React, Angular, React Native, 심지어 웹 콘솔에서도 사용할 수 있습니다.
Wanna try?

작동 원리

새 클래스class를 정의하기만 하면 클래스methods를 사용하여 게임을 플레이할 수 있습니다.
다음은 예입니다.

let game = new GameBoard(PLAYER_ONE, PLAYER_TWO);

여기서 PLAYER_ONE와 PLAYER_TWO는 게임을 할 플레이어의 이름을 의미합니다. 이제 새 클래스를 정의했습니다. 당신은 다른 방법을 호출하여 게임을 할 수 있습니다. 예를 들어 콘솔에서 다음을 수행할 수 있습니다.


따라서 이제 인터페이스를 생성하고 game로 작업을 수행하기만 하면 결과가 반환됩니다. JavaScript 코드를 실행할 수 있는 모든 곳에서 구현할 수 있습니다. 오른쪽?
이를 사용하여 자신만의 게임 버전을 만들 수 있습니다. Here's the code . 클래스를 가져오고 기능 구현을 시작하십시오.

Firebase로 구현

그래서 Firebase와 함께 이것을 사용하여 이 게임의 온라인 버전을 만들기로 했습니다.
다음과 같이 작동합니다.

방을 만듭니다.

방 ID를 친구와 공유하세요.

친구가 방에 들어오고 이제 둘 다 게임을 할 수 있습니다.

예. 😃 채팅도 가능합니다!

무대 뒤에서는 간단합니다. 이를 위해 Firebase 실시간 데이터베이스를 사용했습니다. game 변수는 게임 상태에 대한 정보를 포함하는 개체가 됩니다. 그것은 누가 차례인지, 보드의 상태는 무엇이며 누가 이기고 있는지에 대한 속성을 가지고 있습니다.

프로그램은 매번 이 개체를 Firebase에 계속 저장합니다. 반면에 실시간으로 데이터를 계속 읽고 변경 사항을 다른 플레이어에게 보여줍니다.

firebase.database().ref(roomID).on('value', (snap) => {
    const dataFromServer = snap.val();
    // just use above object to show values on UI
});

game 개체에는 모든 데이터가 포함되어 있으므로 승자, 패자, 차례 및 기타 모든 것을 나타냅니다. 프로그램은 Firebase 원격 서버에서 플레이어의 로컬 장치로 데이터를 업데이트하기만 하면 됩니다.

채팅은 간단한 용어로도 작동합니다. 하지만 저는 이 목적으로 Firestore를 사용했습니다. GitHub에서 코드를 볼 수 있습니다. 꽤 간단합니다.

누군가 내 코드를 검토하고 그 안에서 버그를 발견하면 정말 좋겠습니다 💫.

와시프 / 틱택토 챔피언

친구들과 함께 할 수 있는 온라인 tic tac toe 게임!

온라인 박하 사탕 발가락

친구들과 놀아요!





온라인 방을 만들고 친구를 초대하여 온라인으로 tic tac toe를 플레이하세요!

기여

이 앱을 개선하고 새로운 기능을 추가하기 위한 기여는 언제나 환영합니다.
앱을 로컬로 설치하려면:

저장소 포크

저장소 복제https://github.com/MuhammadWasif/tic-tac-toe-champ.git

cd tic-tac-toe-champ

달리다 npm install

달리다 npm start

Node and npm should be installed in the system

내장

React

Firebase

행복한 코딩 ❤️





View on GitHub



별표를 주는 것을 잊지 마세요. 다음은 배포 링크입니다.
https://tic-tac-toe-fin.netlify.app/