-
OSI 7계층 - <3> TOP NEW
전송 계층 PDU(Protocol Data Unit/계층의 전송 단위) 프로토콜에 따라 (TCP)Segment 또는 (UDP)Packet(Datagram) 네트워크에서 송신지와 수신지 간의 응용 프로그램 간 통신 서비스(논리적 통신)를 제공함 그럼 네트워크 계층과 다른게 뭐에요? 네트워크 계층은 기기(호스트) 간 연결 이라면, 전송 계층은 기기 내의 프로그램 작업(프로세스) 간의 연결 입니다 (집을 찾는 것과 집 주인을 찾는 게 다른 느낌인 거죠) 포트/포트 번호를 사용하여 여러 네트워크 서비스를 동시에 지원할 수 있음 ( IP Ad... Read More
-
웹소켓을 이용한 웹게임 - <7> TOP NEW
기능 추가 랭킹 시스템 (최고점수 기록) 현재 클라이언트에서는 최고점수를 local.storage에 저장해 불러오는 형식으로 구현이 되어있다 이를 서버에서 최고점수를 관리해 불러오도록 수정할 예정이다. (대신 uuid를 local.storage에 저장해 정보를 가져오자) 서버의 최고 점수 기록 서버에서 유저마다 최고 점수들을 기록하기 위해 user.model에 함수를 추가 해준다. // 최고점수 변경 함수 export const setHighSore = (uuid, highScore) => { const userIdx = users.findInde... Read More
-
웹소켓을 이용한 웹게임 - <6> TOP NEW
Back-End(Node.js) Back-End 생성 서버를 구축하고 websocket을 사용하기 위해 express, socket.io 를 yarn을 통해 프로젝트에 설치해준다! # yarn 초기화 yarn init -y # express, socket.io 설치 yarn add express, socket.io 추가로 유저 아이디를 관리하기 위해 uuid Package도 설치해준다! yarn add uuid init folder socket을 생성하고 express로 연 서버와 연결하기 위해 socket.js를 생성해준다! import { Server as SocketI... Read More
-
웹소켓을 이용한 웹게임 - <5> TOP NEW
Front-End 개발 맵과 카메라 고정 뱀파이어 서바이벌처럼 특정 맵의 크기를 정해주고, 사용자는 가운데에 플레이어가 고정된 화면을 보아야 한다! 화면 고정 player를 중심으로 화면을 고정시키기 위해 플레이어가 이동할 때 화면도 같이 이동하는 것처럼 그리려고 한다! 이를 위해 ctx.translate(x,y)를 사용해본다! (translate를 선언한 후 그려지는 이미지들은 x,y 값만큼 이동한다음 그려지게 된다) class Map { constructor(ctx, width, height, scaleRatio) { this.ctx ... Read More
-
웹소켓을 이용한 웹게임 - <4> TOP NEW
-
웹소켓을 이용한 웹게임 - <3> TOP NEW
Front-End 개발 Back-End 부분은 기존의 자료들을 이용할 예정이기에, Front-End 부분을 먼저 구현하기로 하였다 (Back-End 는 스켈레톤 코드가 있지만 Front-End는 없으니까..) 일단 AI를 통해 스켈레톤 코드를 구성하고, 이를 분석해 가며 원하는 기능들을 추가할 예정이다! Player와 Monster Canvas 일단 플레이어와 적을 그려주기 위해 html의 canvas로 활동영역을 구현해준다. <head> <!-- 브라우저의 최신 표준을 준수하여 렌더링하도록 강제 --> <meta http-equiv="X-UA-Compatible... Read More
-
OSI 7계층 - <2> TOP NEW
Network 계층 PDU(Protocol Data Unit/계층의 전송 단위) : Packet(Datagram) Data의 전송과 이를 위한 길찾기를 담당하며 아래와 같은 기능들을 통해 Data가 효율적으로 전송되도록 함 핵심 기능 Address 지정 네트워크에 연결된 각 장치에 고유한 IP 주소를 할당하여 Packet이 올바른 목적지로 전송되도록 해주는 기능 Routing Router를 사용해 Packet의 경로를 결정하는 기능으로 Routing Protocol을 통해 네트워크의 상태를 파악하고, 최적의 경로를 계산하는 기능 Data 조각화(Pa... Read More
-
웹소켓을 이용한 웹게임 - <2> TOP NEW