미니 프로젝트 두 번째 게임으로 다른 색깔 찾기 게임을 만들었습니다.
여러 개의 색 중 다른 색을 찾는 게임입니다.
HTML, CSS, JavaScript를 이용하여 만들었습니다.
이전에 만들었던 가위바위보 게임과 다르게 어떻게 구현해야 할 지 감이 잘 오지 않았습니다.
그래서 게임의 규칙과 만들고 싶은 기능, 방법을 먼저 정리한 후 구현을 시작했습니다.
게임 규칙에 관련된 내용(게임의 시간, 다른 색 클릭 시 시간 감소 등..)은 금방금방 생각이 났는데요.
타겟과 일반 아이템을 구분하는 방법이나
스테이지가 진행될수록 색 구분을 줄이는 방법 같은 경우에는 금방 생각이 나지 않아 고민을 많이 했습니다. 😥
// 타겟 생성
function createTargetItem(paletteSize) {
return Math.floor(Math.random() * paletteSize);
}
타겟은 0부터 게임판 사이즈의 범위 내에서 무작위로 숫자 하나를 뽑아 정했습니다.
HTML로 아이템 생성 시 타겟의 경우에는 id="target"
을 부여했습니다.
(색을 어떻게 만들지 고민하는 내 모습)
처음에는 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의 범위 내에서 값이 나올 수 있도록 했습니다.
opacity 속성을 이용해서 투명도에 차이를 줬습니다.
let targetOpacity = 0.4; // 타겟 아이템 opacity 기본 값
// 사용자가 정답을 맞춘 경우 설정 값 변경
function updateSettings() {
...
// opacity 값 0.02씩 증가 (0.94 이상으로는 증가하지 않음)
if (targetOpacity <= 0.92) {
// 2진수로 실수 계산 시 오차가 생기기 때문에 소수점 셋째자리에서 반올림하도록 처리
targetOpacity = +(targetOpacity + 0.02).toFixed(2);
}
...
}
스테이지가 진행될 때마다 타겟의 opacity가 0.02씩 증가하도록 했습니다.
그리고 0.94 이상으로는 증가할 수 없도록 했습니다.