[JavaScript] 이미지 스프라이트

이미지 스프라이트: 이미지가 50개정도 대량의 이미지가 되면, 한번에 화면에 뿌려주기 위해 작은 이미지를 하나로 합쳐서 좌표를 통해 보여주는 기술

 

ex) 가위바위보, 지뢰찾기에 사용할 수 있다. 

var 이미지좌표 = '0';

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

// Object.entries(가위바위보); // object.entries(객체) -> 객체를 배열로 바꿀 수 있다. 

function 컴퓨터의선택(이미지좌표){
    return Object.entries(가위바위보).find(function(v){ //배열.find는 반복문이지만 원하는 것을 찾으면(return 이 true) 멈춘다.
        console.log(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);
}

맨 처음에 가위바위보 딕셔너리 속성(키: 속성)을 통해 좌표를 설정하고 

setInterval 함수를 통해 비동기로, 가위바위보를 무한으로 표시해준다.