JS 가위바위보

2021-09-19

가위바위보 구현하기.

자바스크립트 객체는 딕셔너리 자료구조 역할을 할 수 있다. 1:1 매핑을 표현한다.
딕셔너리 자료구조의 형태에서 1:다 형태는 배열로 표시할 수 있다. 보통 다국어시 사용한다.
- ex. rock: [rock, 0, 주먹…]
object.entries(객체)로 객체를 배열로 변경 가능하다.
배열.find는 반복문이지만 원하는 것을 찾으면(return이 true) 멈춘다.
2차원 배열에서 find나 findindex를 많이 사용한다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>가위바위보</title>
    <style>
        #computer {
            width: 400px;
            height: 600px;
        }
    </style>
</head>
<body>
<div id="computer">
    <img src="" alt="">
</div>
<div>
    <button id="scissor" class="btn">가위</button>
    <button id="rock" class="btn">바위</button>
    <button id="paper" class="btn">보</button>
</div>
</body>
</html>

var computer = 0;
var gameInfo = {
    scissor: '0',
    rock: '-200px',
    paper: '-400px'
}

var findArray = object.entries(gameInfo).find(function(v) {
    return v[0] === 'scissor';

});

setInterval(function() {
    if(computer == gameInfo.rock) {
        computer = gameInfo.scissor;
    } else if (computer == gameInfo.scissor) {
        computer = gameInfo.paper;
    } else {
        computer = gameInfo.rock;
    }

    document.querySelector('#computer').style.background = 'url(img.jpg) ' + computer + ' 0';
}, 100);

document.querySelectorAll('.btn').forEach(function(btn) {
    btn.addEventListener('click', function() {
        var mine = this.textContent;
        console.log(mine, game[computer]);
    });
})