자바스크립트프로젝트 - 다른색깔찾기

미니 프로젝트 세번째 게임으로 "틀린글자찾기"에서 변형한 다른색깔찾기를 만들어보겠습니다.

 

---

게임설명

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

 

사용기술

• html, css, javascript 

 

게임 기능

• 다른 색깔 찾기
  • 사용자는 주어진 시간 내에 다른 색을 찾아야 한다.
  • 사용자에게는 제한된 시간(15초)이 주어진다.
  • 색상이 2*2 -> 3*3 -> 4*4 -> 5*5 -> 6*6 순으로 나타난다.
  • 정답을 선택한 경우 다음스테이지로 넘어간다.
  • 오답을 클릭한 경우 처음부터 다시 시작한다. 
• 게임종료후 결과 출력
  • 게임은 제한된 시간이 0초가 되었을 때 종료된다.
  • 게임 종료 시 사용자가 도달한 스테이지 정보를 출력한다. 

 

---

1. 색상

1.1 색상요소생성

색깔을 생성하기 위해 js코드에서 html코드의 색깔이들어갈 영역을 불러와서 js에서 색상을 설정해줘야한다.

그러기위해선 먼저 색상이들어갈 태그를 생성해줘야한다.

 

처음에 태그들을 어떻게 생성할까라는 고민을 하다가 

아래의 코드처럼 생성해주었다. 하지만 이 방법이 효율적일까? 라는 생각을 하다가 InnerHtml도 생각해봤다.

하지만 innerHtml vs createElement에 관한글을 찾아보다가 innerHtml은 별로 효율적이지 못하다는 글을 보아서 createElement로 색상을 만들기로했다. 

function create() //html에 색깔이 들어갈 코드생성
{
    for(let i=0; i<colorsize; i++)
    {
        let line=document.createElement('div');
        line.setAttribute('class', "line");
        palette.appendChild(line);
        for(let j=0; j<colorsize; j++)
        {
            let temp=document.createElement('div');
            temp.setAttribute('class', "color");
            line.appendChild(temp);
        }
    }
}

그리고 해당 색상부분의 영역을 dom객체를 이용해 가져올때 처음에 id로 가져오다가 일일이 id를 설정해주는 것보다 classname을 가져와서 배열형태로 값을 설정해주는게 훨씬 효율적일거 같아서 getElementsByclassName을 사용하였다. 

 

여기부분을 구현하면서  document.getElementsById() , document.getElementsByClassName()의 차이점과 용도에 따라 다르게 사용될 수 있음을 알게되었다. 이론으로 배웠을 때에는 확 와닫지 않았는데 이번에 프로젝트를 하면서 확실히 몸으로 느낄 수 있었다. 

 

 

1.2 색상 생성

색상이 들어갈 요소를 생성한다음 요소에 색깔을 입혀주는 함수를 작성해준다.

색상 중 한개는 다른 색상이들어가야하므로 Math.random()함수를 통해 랜덤으로 범위안에서 인덱스를 생성해주었다.

그리고 생성된 해당인덱스에서만 다른 색상을 리턴하여 값을 넣어주었다. 

function CreateColor()
{
    falsenumber=Math.floor(Math.random()*(colorsize*colorsize)); //다른색상이들어갈넘버
    color = randomcolor();
    falsecolor = randomcolor();
    for(let i=0; i<(colorsize*colorsize); i++)
    {
        if(falsenumber==i) //다른색상지정 
        {  
            if(falsecolor==color) //같은색상이나올경우대비
            {
                falsecolor=randomcolor();
            }
            array[i].style.backgroundColor=falsecolor;
        }
        else
        {
            if(falsecolor==color) //같은색상이나올경우대비
            {
                color=randomcolor();
            }
            array[i].style.backgroundColor=color;      
        }
               
    }
}

 

그리고 색상은 아래와 같이 생성해주었다.

function randomcolor() //랜덤하게 색상생성(헥스코드로반환)
{
  let color_r = Math.floor(Math.random() * 127 + 128).toString(16);
  let color_g = Math.floor(Math.random() * 127 + 128).toString(16);
  let color_b = Math.floor(Math.random() * 127 + 128).toString(16);
  return `#${color_r+color_g+color_b}`;
}

 

1.3 색상이벤트생성

색상을 입혔으면 이제는 각 색상(요소)에 이벤트를 생성해주어야한다. 

이벤트도 색상과마찬가지로 2개로 나눠 이벤트를 생성해주었다. 

function CreateEvent() //각 색상요소들의 클릭이벤트생성 
{
    for(let i=0; i<(colorsize*colorsize); i++)
    {
        if(falsenumber===i) //틀린색상 즉 정답 클릭한경우
        {
            array[i].addEventListener("click", yes);
        }
        else
        {
            array[i].addEventListener("click", no);
        }
    }
}

 

yes함수는 다른색상을 맞췄을때의 이벤트이고

no함수는 틀렸을때의 이벤트이다. 

 

정답을 맞췄을경우(yes)에서는 성공의 modal창을 flex로 설정하여 모달창을 보여준다. stagelevel이 5가되면 게임이 종료되기 때문에 따로 게임성공이라는 모달창을 보여주었다. 

틀린 경우(no)에서는 틀린 modal창을 보여준다. 

function no()
{
    modal.style.display="flex";
    stagescore.innerHTML="기록 : STAGE "+stagelevel;
    clearInterval(time);
    
} 
function yes() 
{
    if(stagelevel==5)
    {
        modal_success.style.display="flex";
        clearInterval(time);
    }
    else
    {
        modal_yes.style.display="flex";
        clearInterval(time);
    }
    
    
}

 

 

1.4 모달창 클릭이벤트

모달창에서 클릭이벤트를 했을경우 실행되는 이벤트들이다.

closeBtn는 시간초가 0이되어 게임이 종료될경우이다. 따라서 x버튼을 클릭하면 다시 게임이 실행되도록 해주었다. 

yes_button은 정답을 맞췄을 때의 확인버튼에 대한 이벤트이다. 이전에 생성한 html요소들을 삭제해주고 size나 update가 필요한 값들을 update해주고 다시 요소생성 -> 색상생성 -> 이벤트생성을 해주었다.

restart_button은 게임을 성공했을 때의 다시하기버튼에 대한 이벤트이다. 

closeBtn.addEventListener("click",e=>{
    
    modal.style.display="none";
    clearInterval(time);
    resetgame();
})

yes_button.addEventListener("click", e=>{
    modal_yes.style.display="none";
    palette.replaceChildren(); //이전생성한 색상삭제(자식노드삭제)
    update(); // 업데이트(color사이즈, 시간초기화, 스테이지레벨증가)
    execute();
})
restart_button.addEventListener("click", e=>{
    modal_success.style.display="none";
    clearInterval(time);
    resetgame();
})

 

update함수이다. 값들을 업데이트해준다. 

function update()
{
    colorsize++;
    timercount=15;
    stagelevel++;
    stage.innerHTML="stage : " + stagelevel;
}

resetegame함수이다. 게임이 처음부터 다시 실행되도록 값들을 초기화해준다. 

function resetgame()
{
    stagelevel=1;
    stage.innerHTML="stage : "+ stagelevel;
    timercount=15;
    colorsize=2;
    palette.replaceChildren();
    execute();
}

 

 

---

2. 타이머생성

게임이 실행되었을때 타이머를 사용자에게 보여주고 싶었다

그래서 setInterval()를 통해 타이머값을 줄여주고 innerHTML을 통해 실시간으로 값을 출력해주었다.

 

시간이 0초가되면 게임이 종료되는 것이기때문에 위에서 정의한 no()함수를 실행시켜주었다. 

function start() //타이머 
{
    time = setInterval(()=>{
        
        timercount--;
        timerword.innerHTML="🕧 "+timercount;
        if(timercount==0)
        {
            no();
        }
    },1000);
}

 

 

---

3. 실행영상

https://youtu.be/U0yy36aIHyA

---

4. 후기

앞으로 더 좋은 퀄리티를 위해 기능들을 추가할 예정입니다.

 

추가하면 좋을 것들

• 2*2 -> 3*3  stage가 진행될수록 색상 size줄이기 
• css 보완 -> timer 나 stage부분 , 배경부분도