ZeroCho님의 렛츠기릿 자바스크립트 책을 공부하며 작성한 글입니다.

이미지 스프라이트

이미지 스프라이트란 서버에 이미지를 요청하는 횟수를 줄이는 방식을 말한다.
다음의 사진을 가위 / 바위 / 보 로 잘라서 이미지를 사용하면 한 번만 그림을 요청하면 된다.

<div id='computer'></div>

const IMG_URL = './rsp.png';
$computer.style.background = `url(${IMG_URL}) 0 0`; // 가로 세로
$computer.style.backgroundSize = 'auto 200px'; // 가로너비 세로높이

다음과 같이 객체로 묶어서 응용하여 사용할 수 있다.

const rspX = {
        scissors: '0', // 가위
        rock: '-220px', // 바위
        paper: '-440px' // 보
      };

let computerChoice = 'scissors';

const changeComputerHand = () => {
  if (computerChoice === 'rock') {
    computerChoice = 'scissors';
  } else if (computerChoice === 'scissors') {
    computerChoice = 'paper';
  } else if (computerChoice === 'paper') {
    computerChoice = 'rock';
  }
  

  $computer.style.background = `url(${IMG_URL}) ${rspX[computerChoice]} 0`;
  /*
  	rspX.computerChoice로 코드를 작성하면
    rspX['computerChoice'] 처럼 문자열로 작성한 것과 같으므로
    반드시 유의하여 
    rspX[computerChoice]로 작성해야 함!
    (rspX['scissors']와 같은 형태로 동작)
  */
  $computer.style.backgroundSize = 'auto 200px'; // 다시 안써주면 리셋됨
};

setInterval(changeComputerHand, 50);