<button id="scissors" class="btn">가위</button>
<button id="rock" class="btn">바위</button>
<button id="paper" class="btn">보</button>
</div>
<div id="score">0</div>
<script>
const $computer = document.querySelector('#computer');
const $score = document.querySelector('#score');
const $rock = document.querySelector('#rock');
const $scissors = document.querySelector('#scissors');
const $paper = document.querySelector('#paper');
const IMG_URL = './rsp.png';
$computer.style.background = `url(${IMG_URL}) 0 0`;
$computer.style.backgroundSize = 'auto 200px';
</script>
</body>
</html>
프로그램에 사용할 가위, 바위, 보 이미지는 https://raw.githubusercontent.com/ZeroCho/es2024-webgame/master/rsp.png에서 내려받을 수 있습니다. 해당 링크로 가서 화면에 보이는 이미지에 마우스를 올리고 오른쪽 버튼을 클릭합니다. 메뉴에서 이미지를 다른 이름으로 저장을 선택하고, rsp.html 파일과 같은 폴더에 rsp.png라는 이름으로 저장합니다.