setTimeout, clearTimeout

setTimeout : n초 뒤 setTimeout 내부의 interval이 다시 동작하게 할 때 사용한다.

clearTimeout : setInterval을 멈춘다.

//0.1초마다 백그라운드 이미지를 바꿔준다.
var 이미지좌표 = 0;
//자료구조의 일종으로 자바스크립트 객체는 딕셔너리 자료구조 역할을 할 수 있다. 1:1 매칭을 표현한다.
var 딕셔너리 = {
    //1:다를 매칭할 수도 있다. 예를 들어 한국어를 다른 언어들로 표현하고 싶을 때
    //바위 : ['0','바위','rock'],
    // 바위 : { 객체로 만들 수도 있다.
    //     한국어 : '바위',
    //     영어 : 'rock',
    //     값 : '0',
    // }
    바위 : '0',
    가위 : '-142px',
    보 : '-284px',
}
/*값이 전환이 안 되기 때문에 같은 딕셔너리를 2개 만들고 값이 바뀔 때마다 수동으로 바꿔줘야한다.
var 딕셔너리2 = {
    '0' : '바위',
    '-142px' : '가위',
    '-284px' : '보',
}*/
//Object.entries(객체)로 객체를 2차원 배열로 바꿀 수 있다.
//console.log(Object.entries(딕셔너리));//[ "키": "값"],[ "키": "값"],[ "키": "값"] 각각 [0][1][2] 로 나온다.
function 컴퓨터의선택(이미지좌표) {
    return Object.entries(딕셔너리).find(function(v){//배열.find는 반복문이지만 원하는 것을 찾으면 멈춘다.(return이 true). 1차원 배열에서 indexOf를 썼다면 2차원배열에서는 find와findIndex를 잘 쓴다.
    //console.log(v);다쓴 콘솔로그는 다 지우고.코드 깔끔하게.
    return v[0] === '이미지좌표';//0번째가 이미지좌표인 애를 찾는다.반복되는 변수와 그것을 일반화하여 매개변수로.
    })[0];
}


var 인터벌;
function 인터벌메이커() {
    인터벌 = setInterval(function() {//setInterval과 이벤트리스너 콜백함수와 같은 비동기는 코드 마지막에 있다고 생각
    if(이미지좌표 === 딕셔너리.바위) {
        이미지좌표 = 딕셔너리.가위;
    } else if (이미지좌표 === 딕셔너리.가위) {
        이미지좌표 = 딕셔너리.보;
    } else {
        이미지좌표 = 딕셔너리.바위;
    }
    document.querySelector('#computer').style.background = 'url(https://en.pimg.jp/023/182/267/1/23182267.jpg) ' + 이미지좌표 + ' 0 ';
},100);//0.1초마다 계속 실행한다.
}
인터벌 = 인터벌메이커();
//가위 바위 보 다 선택할 수 있다.querySelectorAll을 유사배열처럼 사용하여 반복문을 사용할 수 있다.
// for(var i = 0; i < document.querySelectorAll('.btn');i += 1) {
//     document.querySelectorAll('.btn')[i].addEventListener('click',function(){
//     console.log(this.textContent);
//     });
// }
//위처럼 반복문을 사용할 수도 있지만 querySelectorAlldms forEach를 지원한다.
document.querySelectorAll('.btn').forEach(function(btn){
    btn.addEventListener('click',function() {//가위 0 바위 -1 보 1 숫자로 만들어서 규칙을 만들어내면 코드가 짧아진다.
        clearInterval(인터벌);//setInterval을 멈춘다.
        setTimeout(function() {
            인터벌메이커();
        },1000);
        var 나의선택 = this.textContent;
        console.log(나의선택,컴퓨터의선택(이미지좌표));
        //가위바위보 비교
        if(나의선택 === '가위' {
            if(컴퓨터의선택(이미지좌표) === '가위') {
                console.log('비겼습니다');
            } else if(컴퓨터의선택(이미지좌표) === '바위') {
                console.log('졌습니다ㅠㅠ');
            } else {
                console.log('이겼습니다!!');
            }
        } else if(나의선택 === '바위') {
            if(컴퓨터의선택(이미지좌표) === '가위') {
                console.log('이겼습니다!!');
            } else if(컴퓨터의선택(이미지좌표) === '바위') {
                console.log('비겼습니다');
            } else {
                console.log('졌습니다ㅠㅠ');
            }

        } else if(나의선택 === '보') {
            if(컴퓨터의선택(이미지좌표) === '가위') {
                console.log('졌습니다ㅠㅠ');
            } else if(컴퓨터의선택(이미지좌표) === '바위') {
                console.log('이겼습니다');
            } else {
                console.log('비겼습니다!!');
            }
        }
    });
})