TIL 06. JavaScript 미니게임 만들기(컴퓨터와 가위바위보하기)

JavaScript로 미니게임을 만들어보았다.
코드를 정리해보자..
핵심 로직은, 비동기 처리 방식이 어떻게 구현되느냐이다.

비동기처리란?

자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미한다. 로직이 끝날 때까지 기다리지 않고, 나머지 코드를 먼저 실행하는 것!
참고

대표적으로 ajax 통신 사례가 있는데, 이건 다음에 다룰 거라 패스

결과물 !

뿌이..!
저 가위바위보 이미지가 빠르게 우다다다 돌아가고
사용자가 밑에 버튼을 클릭하면, 그림이 멈추고 alert로 이겼는지 졌는지 띄워준다.

이렇게 !

구현순서는
1. 가위바위보 이미지 스프라이트(하나의 이미지에 여러 개 이미지들이 포함되어 있는 것. 해당 부분의 이미지만을 사용. 웹 사이트의 로딩 시간을 줄이기 위해 사용)
setinterval method를 이용해 가위, 바위, 보의 사진이 빠르게 돌아가도록 구현
2. 사용자가 버튼을 누르면 사진이 멈추며 사진과 사용자가 누른 버튼 비교해서
3. 결과값 alert로 띄워주기

🐣 가위바위보 이미지 스프라이트 코드 + interval method 이용하기

var imagePosition = 0;
var RSP = {
    '바위': '0',
    '가위': '-142px',
    '보': '-284px'
};
// 가위, 바위, 보가 한번에 있는 그림을 짤라서 각각 가위, 바위, 보만 보여지게 한다.


// Object.entries() --> 주어진 객체의 키/값을 각각의 2차원 배열로 바꿔준다.
// Object.entries()를 이용해서 컴퓨터가 받아들이는 좌표값을 가위, 바위, 보로 바꾼다.
// find: 배열에서 안에 있는 것을 찾아주는 메서드
function comSelect(imagePosition) {
    return Object.entries(RSP).find(function (v) {
        return v[1] === imagePosition;
        // 
    })[0];
}
// index값에서 find이용해서 가위, 바위, 보 중에 찾고자하는거 찾는 함수 !
// 컴퓨터가 셀렉한 값을 문자로 추출하는 함수

// console.log(Object.entries(RSP)); 
// var 찾기=Object.entries(RSP).find(function(v){
//     return v[0]=='가위';
// });
// console.log(찾기);


var interval = setInterval(function () {
    if (imagePosition === RSP.바위) {
        imagePosition = RSP.가위;
        // 바위-0, 가위--142, 보--284
    } else if (imagePosition === RSP.가위) {
        imagePosition = RSP.보;
    } else {
        imagePosition = RSP.바위;
    }
    document.querySelector('#computer').style.background =
        'url(https://en.pimg.jp/023/182/267/1/23182267.jpg) ' + imagePosition + ' 0';
}, 100);
// querySelector: html의 엘리먼트를 가져와 html태그를 컨트롤 할 수 있게 한다.
// 1000 --> 약 1초

🐣 버튼클릭이벤트 add하고 결과값 alert로 띄워주기

document.querySelectorAll('.btn').forEach(function (btn) {
    btn.addEventListener('click', function () {
        // addEventListener: 
        clearInterval(interval);
        // 인터벌 중지하는 함수
        setTimeout(function () {
            interval = setInterval(function () {
                if (imagePosition === RSP.바위) {
                    imagePosition = RSP.가위;
                    // 바위-0, 가위--142, 보--284
                } else if (imagePosition === RSP.가위) {
                    imagePosition = RSP.보;
                } else {
                    imagePosition = RSP.바위;
                }
                document.querySelector('#computer').style.background =
                    'url(https://en.pimg.jp/023/182/267/1/23182267.jpg) ' + imagePosition + ' 0';
            }, 100);
        }, 1000);
        // 인터벌 다시 시작하는 함수
        
        var myselect = this.textContent;
        console.log(myselect, comSelect(imagePosition));
        if (myselect === "가위") {
            if (comSelect(imagePosition) === "가위") {
                alert("비겼습니다.");
            } else if (comSelect(imagePosition) === "바위") {
                alert("졌습니다. ㅠㅠ")
            } else {
                alert("이겼습니다!")
            }
        } else if (myselect === "바위") {
            if (comSelect(imagePosition) === "바위") {
                alert("비겼습니다.");
            } else if (comSelect(imagePosition) === "보") {
                alert("졌습니다. ㅠㅠ")
            } else {
                alert("이겼습니다!")
            }
        } else if (myselect === "보") {
            if (comSelect(imagePosition) === "보") {
                alert("비겼습니다.");
            } else if (comSelect(imagePosition) === "가위") {
                alert("졌습니다. ㅠㅠ")
            } else {
                alert("이겼습니다!")
            }
        }
    });

• 참고: 인프런