[JavaScript] 가위바위보 게임 Object.entries/setInterval/clearInterval/배열.includes/findIndex/find

See the Pen mdObqGx by hyesse (@hyesse) on CodePen.

 

::setInterval()

setInverval(함수,시간)

슬라이드 만들 때 많이 사용했던 setInterval. setInterval함수로 가위바위보 사진을 0.1초마다 계속 돌아가며 보여지게끔 코딩한다. setTimeout()과 차이점은 몇 초 후에 실행할 것이냐, 몇 초마다 반복할 것이냐의 차이이다.

 

setInverval()은 함수를 정해진 시간마다 반복하는 데에 반하여 setTimeout()은 함수를 몇 초가 지난 뒤에 실행할 것인지를 정의한다.

function 인터벌메이커(){
    인터벌=setInterval(function(){
        if(이미지좌표===가위바위보.바위){
            이미지좌표=가위바위보.가위;
        } else if(이미지좌표===가위바위보.가위){
            이미지좌표=가위바위보.보;
        } else{
            이미지좌표=가위바위보.바위;
        }
    
        document.querySelector('#computer').style.background='url("http://en.pimg.jp/023/182/267/1/23182267.jpg") '+이미지좌표+' 0';
    
},100); //1초마다 사진이 정해놓은 좌표값에 맞게 바뀌어 보여진다.


setTimeout(function(){
	인터벌메이커();
},1000); //1초 뒤에 인터벌메이커()함수를 실행함

 

 

::Object.entries()

객체를 배열로 만들 때 사용함.

설명해주실 때 딕셔너리를 배열로 만든다 라고 하셨는데 나는 딕셔너리가 뭔지 모르므로 걍 객체를 배열로 만들 때라고 외움..ㅎ...

var 가위바위보={ //딕셔너리 자료구조
    가위:'-142px',
    바위:'0',
    보:'-284px'
  //key:value값
};

function 컴퓨터의선택(이미지좌표){
    return Object.entries(가위바위보).find(function(v){
        return v[1]===이미지좌표; //v[1]의 위치:좌표값
    })[0];
}

객체를 만들고 안에 있는 value값이 필요해서 객체를 배열로 만든 뒤 v[1], 즉 value 값을 찾는다.

 

::1차원 배열과 2차원 배열에서 사용하는 indexOf / find / findIndex

단순 배열일 때 1차원 배열이라고 하고 이때는 indexOf를 사용해 위치값을 찾아낼 수 있음.

 

그런데 배열 안에 배열이 들어가있는 2차원 배열의 경우에는 find를 이용해서 위치값을 찾아낼 수 있고, findIndex는 위치값의 순번?을 알아낼 수 있다고 한다.

 

jQuery 쓸 때는 find를 html 태그 안에 있는 어떤 요소를 찾을 때(자식요소) 사용했던 기억이 난다.

$('div').find('p');  //div 안에 자식으로 있는 p

 

::querySelector/querySelectorAll

querySelector는 ('#id이름') 같이 css 작성하듯 사용할 수 있는데, 비슷한 태그들을 다 불러오고 싶을 때는 Id로 하면 안되고 class로 해줘야 한다.

document.querySelectorAll('.btn').forEach(function(btn){
    btn.addEventListener('click',function(){
    
    ...

나는 버튼을 세 개 만든 뒤 가위,바위,보를 각각 버튼에 넣어줬기 때문에 버튼들을 다 불러오려면 class로 btn을 명명한 뒤에 자바스크립트 코드에서는 querySelectorAll('.btn')으로 한번에 불러올 수 있었다.

 

그리고 querySelectorAll은 forEach를 사용해서 반복문을 돌릴 수 있음.

 

::[배열].includes()

if함수로 이겼을 때, 졌을 때, 비겼을 때 메시지를 띄워야 하는데 이 때 if문에 들어가는 구절이 너무 길었다.

if(점수차===0){
            console.log('비김');
            var 결과=document.createElement('h2');
            document.body.append(결과);
            결과.textContent="비김";
            
        }else if([-1,2].includes(점수차)){
            console.log('이김');
            var 결과=document.createElement('h2');
            document.body.append(결과);
            결과.textContent="이김";
        }else{
            console.log('짐');
            var 결과=document.createElement('h2');
            document.body.append(결과);
            결과.textContent="짐";
        }


//점수표[나의선택]-점수표[컴퓨터의선택(이미지좌표)]===-1 || 점수표[나의선택]-점수표[컴퓨터의선택(이미지좌표)]===2
//->배열.includes로 줄일 수 있다.

점수표[나의선택]-점수표[컴퓨터의선택(이미지좌표)]===-1 || 점수표[나의선택]-점수표[컴퓨터의선택(이미지좌표)]===2 //비효율적

이럴 때 같은 부분은 제외하고 다른 부분을 배열로 만든 뒤 뒤에 .includes(중복된 부분)을 넣어주면 된다.

[-1, 2].(점수표[나의선택]-점수표[컴퓨터의선택(이미지좌표)])  //이렇게 단순화 할 수 있다.