다중 실시간 우물 글자 게임과 콘센트를 구축하다.io 및 Vue

본 논문에서 우리는 Vue를 사용하여 처음부터 tic-tac-toe 게임을 개발할 것이다.우리는 실시간 기능과 socket을 결합시킬 것이다.io, 이렇게 하면 두 명의 유저가 서로 다른 브라우저에서 동시에 게임을 할 수 있다.

비디오 자습서

프로젝트 작성

먼저 응용 프로그램에 빈 Vue 항목을 만듭니다.vue, Hello World 구성 요소를 삭제하고 격자에 html을 추가합니다.나는 여기서 CSS를 복사했다.
블록당 9개의 id가 Block 0인 블록부터 8개의 id가 Block 8인 블록까지 정의합니다.

너는 이런 결과를 보게 될 것이다.

지금까지 이 지점에서 Github 코드를 찾을 수 있습니다

클릭하여 X와 O 그리기

이제 데이터 부분에서 두 개의 변수를 정의합니다:

내용
회전

내용은 길이가 9인 수조로 각 html 블록은 하나의 요소에 대응하고 빈 문자열로 초기화됩니다.블록을 눌렀을 때, 내용 인덱스에 있는 값을 변경할 것입니다.@click 함수를 정의하고 사용하십시오.

내용 배열에 따라 X와 O를 그릴 것입니다. 누르면 블록마다 그리기 기능을 터치합니다.

지금methodsection에서draw 함수를 정의합니다.만약turn의 값이 진짜라면, 우리는 X를 그릴 것입니다. 그렇지 않으면 우리는 O를 그리고 turn의 값을 바꿀 것입니다.그래서 먼저 X를 클릭하고 가짜로 전환한다.그래서 두 번째 클릭할 때 우리는 O를 그리고 진짜로 전환한다. 이런 식으로 유추한다

Calculate Winner

현재draw 함수를 호출할 때마다 게임이 끝났는지 계산해야 합니다.만약 완성된다면, 우리는 누가 이긴 사람인지 찾아서 그것을 보여줄 수 있다

데이터 섹션에서 세 변수를 더 설명하겠습니다

템플릿 부분에서 우리는 두 개의 h2 라벨을 추가하여 우승자나 무승부를 발표할 것이다

현재, 우리는calculate 위너 함수를 정의할 준비가 되어 있습니다.논리는 같은 줄, 같은 열 또는 같은 대각선이 같은 유저에게 점령당하면 그/그녀가 승리합니다

그림을 그릴 때마다 우리는 함수라고 부른다

Calculate Tie

지금tie 함수를 정의합니다.논리는 빈 블록이 있어도 게임은 무승부가 되지 않는다는 것이다

우리는 이 함수를 방법 부분으로 정의하고draw 방법에서 호출할 것이다.

지금까지 스크립트 전체 부분

Reset Board

지금, 시합이 무승부 또는 끝날 때, 우리는 바둑판을 리셋하는 옵션을 표시해야 합니다

다음에 resetBoard 함수를 정의합니다.우리는 내용 배열과 모든 다른 변수를 초기화합니다

Github 코드 지금까지

Multiplayer mode Using Socket.io

이제 이 프로젝트를 Socket과 통합합니다.io, 이렇게 하면 두 명의 유저가 동시에 게임을 할 수 있습니다.한 유저가 X를 눌렀을 때 두 번째 유저의 화면에 나타나야 하고 두 번째 유저가 O를 눌렀을 때 첫 번째 유저의 화면에 나타나야 한다.구현 방법

여기socket.IO가 편해요.파일에서

동영상 강좌를 보고 싶으면 위의 지점을 다운로드하고 동영상을 35:42분으로 빨리 들어갈 수 있습니다

<br>

Set up server for socket.io

먼저 Vue 프로젝트 외부에 폴더를 만듭니다.파일 서버를 만듭니다.js는 폴더에 있습니다.폴더에express 서버를 만들 것입니다

npm init를 실행합니다.그것은 포장을 설치할 것이다.json 파일

하고 뛰기

npm i 콘센트.목위일

소켓을 설치합니다.나는 이 프로젝트에 참여했다

server.js

지금.서버를 만들고 플러그인을 통합합시다.이오

우리는 우리의 vue를 위해 cors 규칙을 제정할 것이다.8080 포트에서 실행되는 js 항목은 서버에 접근할 수 있습니다.

서버에서 이벤트를 보냅니다. Vue 클라이언트가 이를 감청하고 받아야 합니다.

다음 명령을 사용하여 서버를 실행합니다.

노드 서버.js

App.vue

지금 우리는 소켓을 설정할 것입니다.io가 클라이언트에 있음

뛰기

npm i 콘센트.io 클라이언트

vue 내부에 있습니다.터미널의 js 항목

import io from ‘socket.io-client’
const socket = io(“[http://localhost:3000](http://localhost:3000)")

스크립트 섹션에서

창설된 갈고리에서 이벤트를 들을 것입니다

콘솔에서'유튜브 튜토리얼'을 볼 수 있습니다

클라이언트도 같은 방식으로 서버와 통신할 수 있습니다

Game Logic with Socket.io

draw 함수를 호출하면player1 클라이언트가 서버에 이벤트를 발송합니다
서버가 그것을 수신하면 플레이어 2
유저2가 그리드를 업데이트합니다
그리고 유저2는 O를 클릭하고draw 함수를 호출하여 이벤트를 서버에 전송합니다
서버에서 재생기에 방송합니다1

경기는 계속 이렇게 진행됩니다

>#draw 함수에 drawFromOther 매개 변수를 전달해야 합니다.이 표지에 근거하여 우리는 다시 사건을 보낼 것이다.drawFromOther 로고가false로 설정된 경우 재생 이벤트를 보냅니다.

이제 템플릿을 업데이트합니다.DrawFromOther를 false로 보냅니다. 이는 이벤트가 서버로 전송됨을 의미합니다.

서버.JS에서 이벤트를 수신하고 브로드캐스트합니다

이제 클라이언트는 생성된 갈고리에서 이벤트를 수신합니다

이벤트를 수신하고 색인에 그립니다. 그러나 drawFromOther 매개 변수를true로 전달하면 이벤트가 서버에 다시 전송되지 않습니다.

Complete code of App.vue

이렇게다중 게임 준비됐습니다.두 개의 다른 브라우저에서 localhost: 8080을 열고 번갈아 누르십시오.이 게임은 쓸모가 있을 것이다.