가위바위보(이미지스프라이트)

Rock Scissor Paper using image sprite

//0.1초마다 백그라운드 이미지를 바꿔준다.
var left = 0;
setInterval(function() {
    if(left === 0) {
        left = '-142px';
    } else if (left === '-142px') {
        left = '-284px';
    } else {
        left = 0;
    }
    document.querySelector('#computer').style.background = 'url(https://en.pimg.jp/023/182/267/1/23182267.jpg) ' + left + ' 0 ';
},100);//0.1초마다 계속 실행한다.
//가위 바위 보 다 선택할 수 있다.querySelectorAll을 유사배열처럼 사용하여 반복문을 사용할 수 있다.
// for(var i = 0; i < document.querySelectorAll('.btn');i += 1) {
//     document.querySelectorAll('.btn')[i].addEventListener('click',function(){
//     console.log(this.textContent);
//     });
// }
//위처럼 반복문을 사용할 수도 있지만 querySelectorAlldms forEach를 지원한다.
document.querySelectorAll('.btn').forEach(function(btn){
    addEventListener('click',function() {
        console.log(this.textContent);
    });
})