[JavaScript] 미니게임 프로젝트 | 다른 색깔 찾기🎨

승연·2022년 7월 15일

토이프로젝트

Game World

목록 보기

3/6

Game World

미니 프로젝트 두 번째 게임으로 다른 색깔 찾기 게임을 만들었습니다.

🙋‍♀️ 게임 설명 좀 해주세요

여러 개의 색 중 다른 색을 찾는 게임입니다.

🤔 어떤 기능이 있나요?

다른 색깔 찾기
- 사용자는 주어진 시간 내에 다른 색을 찾아야 한다.
- 사용자에겐 15초가 주어진다.
- 2x2 크기의 게임판으로 시작한다.
- 정답을 선택하는 경우 다음 스테이지로 넘어간다.
- 스테이지가 두 단계씩 넘어갈 때마다 게임판 행, 열 사이즈가 1씩 늘어난다.
- 스테이지가 진행될수록 색 차이는 줄어든다.
- 오답을 클릭하는 경우 남은 시간에서 3초가 줄어든다.
게임 종료 후 결과 출력
- 게임은 남은 시간이 0초가 됐을 때 종료된다.
- 게임 종료 시 사용자가 도달한 스테이지 정보를 출력한다.

🔎 사용 기술은 무엇인가요?

HTML, CSS, JavaScript를 이용하여 만들었습니다.

🙊 어디서 해볼 수 있나요?

https://sypear.github.io/game-world/game-fdc.html

Game World - 다른 색깔 찾기🎨

1. 게임 규칙 정리

이전에 만들었던 가위바위보 게임과 다르게 어떻게 구현해야 할 지 감이 잘 오지 않았습니다.

그래서 게임의 규칙과 만들고 싶은 기능, 방법을 먼저 정리한 후 구현을 시작했습니다.

게임 규칙에 관련된 내용(게임의 시간, 다른 색 클릭 시 시간 감소 등..)은 금방금방 생각이 났는데요.

타겟과 일반 아이템을 구분하는 방법이나
스테이지가 진행될수록 색 구분을 줄이는 방법 같은 경우에는 금방 생각이 나지 않아 고민을 많이 했습니다. 😥

2. 타겟 생성하기

2-1. 랜덤으로 타겟 생성

// 타겟 생성
function createTargetItem(paletteSize) {
    return Math.floor(Math.random() * paletteSize);
}

타겟은 0부터 게임판 사이즈의 범위 내에서 무작위로 숫자 하나를 뽑아 정했습니다.

2-2. 타겟이랑 일반 아이템이랑 어떻게 구분할까?

HTML로 아이템 생성 시 타겟의 경우에는 id="target"을 부여했습니다.

3. 아이템에 색 입히기

3-1. 색을 어떻게 만들까?

(~~색을 어떻게 만들지 고민하는 내 모습~~)

처음에는 color 값을 저장하는 배열을 만들어서 색을 넣어놓을까? 이런 생각을 했었습니다.
그렇게 한다 치면.. 몇 개의 색을 넣어놔야 하지..? 어떤 색을 넣어야 하지..?

끝나지 않는 고민이 이어지다가 타겟을 생성할 때 랜덤 함수를 썼던 게 생각이 났습니다!

아하! 색도 랜덤으로 만들면 되는구나!

그래서 랜덤 함수를 이용해서 R, G, B에 대입할 색을 숑숑숑숑 만들었습니다.

let color = {}; // 팔레트 아이템 색상 (red, green, blue 값을 저장하는 object)

// 랜덤 색상 생성
function createColor(color) {
    // 너무 어둡거나 너무 밝은색이 나오지 않도록 범위를 100 ~ 200으로 지정
    color.red = Math.floor(Math.random() * 101) + 100;
    color.green = Math.floor(Math.random() * 101) + 100;
    color.blue = Math.floor(Math.random() * 101) + 100;

    return color;
}

너무 어두운색이나 밝은색이 나오면 구분이 어렵기 때문에 100~200의 범위 내에서 값이 나올 수 있도록 했습니다.

3-2. 타겟에는 다른 색을 줘야 하는데..🤔

opacity 속성을 이용해서 투명도에 차이를 줬습니다.

3-3. 게임 진행률에 따라 색 차이 줄이기

let targetOpacity = 0.4; // 타겟 아이템 opacity 기본 값

// 사용자가 정답을 맞춘 경우 설정 값 변경
function updateSettings() {
    ...
    // opacity 값 0.02씩 증가 (0.94 이상으로는 증가하지 않음)
    if (targetOpacity <= 0.92) {
        // 2진수로 실수 계산 시 오차가 생기기 때문에 소수점 셋째자리에서 반올림하도록 처리
        targetOpacity = +(targetOpacity + 0.02).toFixed(2);
    }
	...
}