이것은 네 부분으로 구성된 시리즈 이야기의 첫 부분으로, 나는 내가 어떻게 간단한 다중 온라인 게임을 구축하는지 묘사했다.

간단한 소개

한 번은 뱀 게임을 작성하는 업무 면접 임무를 받았는데 결과가 좋았다githubcodepen.
그리고 나는 노드로 그것을 온라인 멀티플레이어로 바꾸면 어떨까 생각했다.js와 웹소켓?어디 보자...

왜'간단해'?누가 게임을 제어합니까?

나는 이 게임을 어떻게 실현하고 싶은지 생각하기 시작했다. 첫 번째 문제는'누가 이 게임을 컨트롤합니까?'우리는 모든 게임 관리와 업무 논리를 클라이언트에 두고 서버를 메시지 방송의 중심으로 사용합니까?또는 우리는 서버에 게임을 제어하도록 하고 클라이언트는 서버의 설명에 따라 그립니다.
커닝은 그만두고 클라이언트에서 모든 것을 실현하는 것은 훨씬 간단하다. 왜냐하면 나는 이미 실행 중인 뱀 게임이 있기 때문이다.하지만...이것은 진정한 온라인 게임이 아니기 때문에 나는 서버를 왕으로 만들기로 결정했다.
그러나 만약에 서버가 게임을 제어한다면 이것은 뱀(클라이언트에서)이 움직일 수 없다는 것을 의미한다. 서버가 뱀의 방향을 바꾸려면 서버의 응답을 기다려야 한다는 것을 알려줄 때까지 뱀은 매우 정체된 게임을 초래할 수 있다.
'클라이언트 예측'과'서버 조정'here이라는 개념을 읽은 후에 저는'간단한'게임부터 시작하기로 결정했습니다. 이것은 랜에서 완벽하게 실행할 수 있는 게임이고 광역 인터넷에서도 실행할 수 있다는 것을 의미합니다. 이렇게 하면 아직도 배워야 할 부분이 많고 고급 개념을 추가하면 나중에 완성할 수 있다고 믿습니다.
그래서...너는 Heroku에서 이 게임을 할 수 있다. 뚜렷한 정체는 분명하지만, 그렇게 나쁘지는 않다...

용어

뱀격투는 일반적인'뱀'게임으로 유저 1과 유저 2가 작은 공을 쟁탈하고 매 경기가 60초 지속되며 더 많은 공을 수집한 유저가 승리한다.물론 일반적인 뱀 규칙도 적용된다.

게임은 다음과 같은 "게임 개체"로 구성됩니다.

회로판 - 이것은 모든 일이 발생하는 곳이다. 우리는 회로판을 하나의 격자로 나누는데 이것은 회로판의 모든 원소가 일치하는 것을 확보하는 데 도움을 줄 것이다.간단하게 보기 위해서, 우리는 0에서 단원격을 인덱스한 다음에, 우리는 모든 단원격 인덱스를 캔버스 x/y로 변환할 수 있으며, 반대로도 마찬가지이다

단원/박스 - 고정된 크기의 직사각형으로 회로판의 모든 원소는 한 단원에 적합해야 한다

뱀-뱀은'부분'으로 구성되어 있으며, 그 중 첫 번째 부분은'뱀머리'라고 불리며, 우리는 잠시 후에 뱀과 몸의 다른 부분의 차이를 볼 수 있다.모든 뱀 모양 부분에는 판 단원의 크기가 있다.

작은 공 - 이것은 뱀의 생장에 필요한 음식으로 판잣집 크기도 있다.

상태막대 - 게임이 끝날 때까지 점수와 시간을 저장합니다.

고급 디자인

우리가 말한 바와 같이 이것은 상당히 간단한 게임이다. 서버는 게임을 관리하고 클라이언트는 게임 상태를 보여주며 서버에 명령을 보내는 것을 책임진다.
다음은 게임 프로세스의 모드입니다.

다음은 클라이언트 및 서버의 주요 클래스를 포함하는 차트입니다.

합의

프로토콜은 클라이언트와 서버 사이의 메시지의 외관을 결정한다. 나의 첫 번째 생각은 간단하게 json을 사용하는 것이다. 그러나 json은 두 가지 문제가 나를 괴롭힌다.

낭비 프로토콜

parse/stringify는 빠르지만 서버가 부하 상태에 있을 때 맞춤형 프로토콜을 더욱 잘 할 수 있습니다.
예를 들어, 다음 업데이트 메시지를 살펴보겠습니다(초당 10개의 업데이트 메시지가 있음을 기억하십시오).

var updMessage = {
    type: 5,                     // Message type
    timeToEnd: 53,               // Time to game end
    directions: [ '6', '4' ],    // The directions each snake is heading
    sizes: [ 6, 6 ],             // The snake sizes
    pellets: [ 34, 21, 67, 54 ], // The cell indices where we have pellets
    score: [ 6, 5 ]              // The players score
};
var encoded = JSON.stringify(updMessage); // encoded.length = 100

다른 한편, 사용자 정의 프로토콜을 사용하면 다음과 같은 문자열을 얻을 수 있습니다.

var encoded = '5#53#6,4#6,6#34,21,67,54#6,5'; // encoded.length = 28

성능 측면에서 볼 때 JSON.stringify 83% 느린 것은 매우 큰 차이점이다. 특히 만약에 우리가 앞으로 업데이트 속도를 10/초에서 30/초 정도로 향상시키고 싶다면...

됐어, 그만해. 두 번째 부분에서 우리는 코드를 깊이 연구할 거야...