[자바스크립트] 가위바위보

kim seung chan·2021년 3월 22일
0

가위바위보 게임을 만들어 보았다. 이미지는 이미지스프라이트와 객체 딕션너리를 이용해 보았다. 그리고 다양한 객체들을 이용하여 시간차를 조절해 보았다.

1. 이미지 좌표와 딕셔너리 및 객체 배열로 바꿔주기

var 이미지좌표 = 0;

var 가위바위보 ={
    바위: '0',
    가위: '-142px',
    보: '-284px'
};

function 바꿔주기(이미지좌표){
    return Object.entries(가위바위보).find(function(v){
        return v[1] === 이미지좌표;
    })[0];
};

이미지 스프라이트를 사용하기 위해 우선 이미지 좌표를 만들어 주었다. 그 후 가위바위보 객체를 만들어 이미지에 맞게 이미지 좌표 값을 잡아 주었다.

그후 함수를 만들어 주었는데 Object.entries를 통하여 객체 값을 2차원 배열로 바꿔주었고 find를 이용하여 값을 찾으면 함수를 중단하게 만들었다.

사용 메소드

  • Object.entries를 통하여 객체를 2차원 배열로 바꿔줌
  • find를 통하여 값을 찾으면 함수가 중단되게 만들었다.

2. setInterval & clearInterval & setTimeout 사용

var 랜덤;
function 랜덤시간(){
   랜덤 = setInterval(function(){
     if(이미지좌표  === 가위바위보.바위 ){
            이미지좌표  = 가위바위보.가위;
        }
        else if(이미지좌표  === 가위바위보.가위){
            이미지좌표  = 가위바위보.보;
        }
        else{
            이미지좌표  = 가위바위보.바위;
        }
        
        document.querySelector('#computer').style.background = 
            'url(https://en.pimg.jp/023/182/267/1/23182267.jpg)' + 이미지좌표  + ' 0';
        }, 100);
};

랜덤시간();

document.querySelectorAll('.btn').forEach(function(i){
    i.addEventListener('click', function(){
        var 나의선택 = this.textContent;

        clearInterval(랜덤);
        setTimeout(function (){
            랜덤시간();        
        },1000);

        console.log(나의선택, 바꿔주기(이미지좌표));

var 랜덤 변수를 만든 랜덤에 setInterval을 저장한 후에 나중에 clearInterval에 넣기 위해서고 함수를 만든 이유는 이미지를 랜덤하게 계속해서 돌아가기 하기 위해서 이다. 그리고 url을 사용한 이후 ' 0'을 사용한 이유는 띄어쓰기를 안하면 이미지좌표0 이렇게 붙어버리기 때문이다. 함수를 선언한 이후 랜덤시간(); 함수를 실행시켜 주었다.

querySelectorAll이후 forEach을 사용한이유는 DOM선택자에서 class를 사용하였기 때문에 forEach을 사용하였고 clearInterval(랜덤); 과 setTimeout을 통해 이미지를 1초간 멈추었다가 다시 실행되게 만들었다.

사용 메소드

  • setInterval 로 계속적으로 이미지가 반복해서 나오게 하였다.
  • clearInterval로 이미지를 멈추었다.
  • setTimeout 1초후 다시 이미지가 setInterval을 통해 실행되게 하였다.

3. 가위바위보 승리 체크

if(나의선택 === '가위'){
            if(바꿔주기(이미지좌표)=== '가위'){
                console.log("비겼습니다.");
            }
            else if(바꿔주기(이미지좌표)==='바위'){
                console.log("컴퓨터가 이겼습니다.");
            }
            else if(바꿔주기(이미지좌표) === '보'){
                console.log("본인승리");
            }
        }

        if(나의선택 === '바위'){
            if(바꿔주기(이미지좌표)=== '가위'){
                console.log("본인승리");
            }
            else if(바꿔주기(이미지좌표)==='바위'){
                console.log("비겼습니다.");
            }
            else if(바꿔주기(이미지좌표) === '보'){
                console.log("컴퓨터가 이겼습니다.");
            }
        }

        if(나의선택 === '보'){
            if(바꿔주기(이미지좌표)=== '가위'){
                console.log("컴퓨터가 이겼습니다.");
            }
            else if(바꿔주기(이미지좌표)==='바위'){
                console.log("본인승리");
            }
            else if(바꿔주기(이미지좌표) === '보'){
                console.log("비겼습니다.");
            }

if문을 사용하여 승리를 체크 할 수 있게 만들었다.

4. 전체코드

var 이미지좌표 = 0;

var 가위바위보 ={
    바위: '0',
    가위: '-142px',
    보: '-284px'
};

function 바꿔주기(이미지좌표){
    return Object.entries(가위바위보).find(function(v){
        return v[1] === 이미지좌표;
    })[0];
};

var 랜덤;
function 랜덤시간(){
   랜덤 = setInterval(function(){
     if(이미지좌표  === 가위바위보.바위 ){
            이미지좌표  = 가위바위보.가위;
        }
        else if(이미지좌표  === 가위바위보.가위){
            이미지좌표  = 가위바위보.보;
        }
        else{
            이미지좌표  = 가위바위보.바위;
        }
        
        document.querySelector('#computer').style.background = 
            'url(https://en.pimg.jp/023/182/267/1/23182267.jpg)' + 이미지좌표  + ' 0';
        }, 100);
};

랜덤시간();

document.querySelectorAll('.btn').forEach(function(i){
    i.addEventListener('click', function(){
        var 나의선택 = this.textContent;

        clearInterval(랜덤);
        setTimeout(function (){
            랜덤시간();        
        },1000);

        console.log(나의선택, 바꿔주기(이미지좌표));

        if(나의선택 === '가위'){
            if(바꿔주기(이미지좌표)=== '가위'){
                console.log("비겼습니다.");
            }
            else if(바꿔주기(이미지좌표)==='바위'){
                console.log("컴퓨터가 이겼습니다.");
            }
            else if(바꿔주기(이미지좌표) === '보'){
                console.log("본인승리");
            }
        }

        if(나의선택 === '바위'){
            if(바꿔주기(이미지좌표)=== '가위'){
                console.log("본인승리");
            }
            else if(바꿔주기(이미지좌표)==='바위'){
                console.log("비겼습니다.");
            }
            else if(바꿔주기(이미지좌표) === '보'){
                console.log("컴퓨터가 이겼습니다.");
            }
        }

        if(나의선택 === '보'){
            if(바꿔주기(이미지좌표)=== '가위'){
                console.log("컴퓨터가 이겼습니다.");
            }
            else if(바꿔주기(이미지좌표)==='바위'){
                console.log("본인승리");
            }
            else if(바꿔주기(이미지좌표) === '보'){
                console.log("비겼습니다.");
            }
        }
    });
});

5. 부족했던 부분

  1. clearInterva 부분에 변수로 지정해서 넣어야하는데 setInterval을 함수로 만들고 변수로 넣는 과정에서 조금 시간이 걸렸다.

  2. if문 부분을 더 간단히 만들 수있었는데 이 부분을 규칙을 찾아 리팩토링 해야될 꺼 같다.

0개의 댓글