[TIL/31일차] 개인과제 마무리

[오늘의 코딩테스트]

https://ezez99.tistory.com/62

[프로그래머스/JS] 2016년

 

[오늘 한일]

● 아이템 획득 관련 코드 작성 완료

● 클라이언트와 서버요청 나눠서 구현

 

● 아이템 획득 관련 코드 작성 완료

아이템 획득과 관련된 코드를 작성하였다. 아이템 획득과 관련된 코드는 총 3가지로 나눠 분류할 수 있다.

 

1. 아이템을 획득 할 때 점수가 나오는 코드 구현

아이템 획득 할 때 점수가 나오는 코드를 구현하였다.

아이템을 획득하는 직접적인 코드가 있는 getItem(itemcode)를 기반으로 코드를 작성하였는데

item.json 파일을 어제 배운 방법을 통해 import해서 가져와 점수를 아이템의 스코어만큼 score를 더해준다.

 

2. 아이템 별로 획득 점수가 다르게하는 코드 구현

아이템을 가져온 json파일을 기반으로 입력받은 itemid를 기반으로 find함수를 이용하여서 item 값을 찾아준다.

그리고 해당하는 item의 score값을 기본 점수에 더해줘서 itemid를 기반으로 다른 점수를 구현해준다.

const nowItem = items.data.find((itemId) => itemId.id === getitemId);
this.score += nowItem.score;

3. 스테이지 별 다른 아이템 생성하는 코드 구현

스테이지별로 다르게 아이템을 생성하게 하기 위해

우선 item_unlock.json을 손봐준다.

{
  "name": "item_unlock",
  "version": "1.0.0",
  "data": [
    { "id":  101, "stage_id": 1000, "item_id": 1 },
    { "id":  201, "stage_id": 1001, "item_id": 2 },
    { "id":  301, "stage_id": 1002, "item_id": 3 },
    { "id":  401, "stage_id": 1003, "item_id": 4 },
    { "id":  501, "stage_id": 1004, "item_id": 5 },
    { "id":  601, "stage_id": 1005, "item_id": 6 }
  ]
}

다음과 같이 item_unlock을 바꿔주었고, stage_id 와 해당하는 id 값을 가져온다.

그리고 itemController가 아이템을 그려주기 때문에, 이 부분에서 createitem함수를 이용하여서 스테이지별로 아이템을 다르게 구현하게끔 하였다. 

우선 item_unlock의 json파일을 가져오고, 현재 해당하는 nowStage부분을 score에서 전달한 값을 index.js에서 update문을 통해서 현재 stage값을 가져오고 해당하는 stage값을 기반으로 item_id를 해금 해준다.

그리고 item_id 값을 랜덤으로 구해주면된다.

let unlockItem = itemunlock.data.find((stage) => stage.stage_id === nowStage);
const index = this.getRandomNumber(0, unlockItem.item_id - 1);

다음과 같이 item_id를 가져오고 item_id - 1 만큼 하면 

Math.floor(Math.random() * (max - min + 1) + min);

다음과 같은 결과 처럼 item_id 가 해금이 1번까지 되었을 경우 (0 ,1 ) 부터 (0 ~6)까지 랜덤으로 나오게 하였다.

 

● 클라이언트와 서버요청 나눠서 구현

사실 제일 중요한 부분이다. 우선 우리가 서버에서 전달받아야 하는 부분이 아이템을 먹었을 때 아이템을 잘 먹었는가 그 아이템의 점수가 맞게끔 먹었나, 아이템 해금조건에 맞게끔 올바른 스테이지에서 아이템을 먹었나를 체크해볼 수 있고, 해당 데이터를 저장해야한다.

stage 데이터를 저장하기 위해서 스테이지를 이동하는 stage.handler.js를 이용해서 stage을 이동할 때 unlock 데이터도 함께 저장하게 끔 하였다.

그리고 item의 데이터를 저장하기 위한 model을 제작하였다.

// key: uuid, value: array -> item 정보는 배열
const items = {};
const unlockItems = {};

// 스테이지 초기화시 아이템리스트 초기화
export const createItem = (uuid) => {
    items[uuid] = [];
    unlockItems[uuid] = [];
};

export const getItem = (uuid) => {
    return items[uuid];
};

export const eatItem = (uuid, id, timestamp) => {
    return items[uuid].push({id, timestamp});
};

export const getUnlockItem = (uuid) => {
    return unlockItems[uuid];
};

export const unlockItem = (uuid, itemid,stage_id, timestamp) => {
    return unlockItems[uuid].push({itemid, stage_id, timestamp});
};


export const clearItem = (uuid) => {
    return (
        items[uuid] = [],
        items[unlockItems] = []
    );
};

다음과 같이 기본적인 모델을 만들었고, 기존의 stage 데이터를 저장하기 위해서 

    let unlockstage =  itemUnlocks.data.find((item) => item.stage_id === currentStage.id + 1)

    unlockItem(userId, unlockstage.item_id, unlockstage.stage_id ,serverTime);

    if(!stages.data.some((stage) => stage.id === nextstage.id)) {
        return {status: 'fail', message: 'Target stage not found'};
    }

item_unlock 되었을 때의 정보를 담기 위해서 해금조건인 movestage에서 다음과 같은 stage정보를 담았다.

아이템을 먹었을 때 정보값을 저장하는 것도 아이템의 정보값을 확인하고, unlockdata도 정보값을 확인한 후 데이터 값을 저장하게 구현하였다.

그러면 아래와 같이 데이터 정보를 담은 unlock data를 담게 구현하였다.

[프로젝트 결과물]

https://github.com/rladmswlr/websocket_game

GitHub - rladmswlr/websocket_game: 웹소켓 서버를 활용해 만든 런닝게임입니다.

 

[한줄평]

오늘 특강 때 튜터님께서 공부를 열심히해야하는 이유와 여러가지 게임서버에 관한 이야기를 해주셨다. 평소에도 알고리즘, 자료구조 이런 CS공부들은 틈틈히 열심히 해야한다고 평소에도 느끼고 있었지만 나랑 지금 같이 학습하시는 분들이 이 학습이 끝나게 된다면 나와 같이 경쟁을 해야하고 내가 그중에서도 잘해야 좋은 성과를 낼 수 있다는 말을 들었더니 어느새 학습을 해가면서 조금 헤이해졌던 정신이 좀 더 잘 드는 것 같다. 앞으로도 열심히 해서 훌륭한 프로그래머가 되도록 해야지..