yahtzee 점수판 만들기

주사위는 있는데 점수판 만들기가 귀찮을 때 사용할 야찌 점수판을 만들어보려고 한다.

실제 야찌 점수판

 

야찌 규칙과 점수판 기록법

https://namu.wiki/w/%EC%95%BC%EC%B0%8C

야찌 - 나무위키

 

규칙과 구현해야 할 기능

1. 5개의 주사위 눈을 입력한다
   • 5개의 주사위의 눈을 입력받는다(모두 입력해야 한다)
   • 1~6 사이의 숫자가 아니면 입력받지 않는다.
2. 원하는 주사위를 남겨두고 나머지 주사위들을 다시 던진다. 한 라운드에 두 번 까지 가능하며, 던지지 않았던 주사위들도 원한다면 다시 던질 수 있다.
   • 주사위를 다시 던진다
   • 한 라운드에 두 번 까지 다시 던질 수 있다.
   • 그 이상 던질 시 메시지를 띄우고, 반드시 점수칸을 선택하도록 한다.
3. 나온 값들을 반드시 점수판들 중 한 곳에 기록해야 한다. 기록할 칸이 없는 경우는 아무 칸에 0으로 기록한다.
   (보너스 칸에는 채울 수 없다.)
   • 기록할 칸을 선택하기 전에 미리 점수를 계산해준다.
   • 점수를 클릭하면 확정된다.
   • 보너스 칸은 선택할 수 없다.
   • 확정된 곳의 점수는 새롭게 주사위를 굴려도 변하지 않고, 알아보기 쉽게 스타일을 바꾼다.
   • upper section의 합이 63점 이상이 되면, 자동으로 bonus 35점을 추가한다.
   • upper section bonus까지 몇 점이 남았는지 알려준다.
   • 게임 진행중에 현재까지의 점수들의 총점을 알려준다.
   • yahtzee칸을 50점으로 채운 뒤, 추가적으로 yahtzee를 하면 보너스 점수가 100점씩 추가된다.
   • yahtzee칸을 0점으로 채운 뒤 새롭게 야찌가 나오면 보너스 점수를 받을 수 없다. 
4. 13라운드를 하면 게임이 끝나고, 점수판의 총합으로 승패를 결정한다.
   • 채울 수 있는 칸을 모두 선택하고 나면 자동으로 다음 게임으로 넘어간다.
5.  기타
   • 총 3라운드가 가능하도록 점수판을 만든다.
   • 칸을 모두 채우지 않았어도 게임을 중단하고 다시 시작할 수 있도록 한다. - NextGame btn
   • 모든 칸을 지우는 기능을 만든다. - Reset btn
   • 다음 게임으로 넘어갈 때, 모든 칸을 지울 때, 3라운드를 모두 진행 후 새로운 게임을 시작할 때 확인하는 메시지가 뜨도록 한다.
   • (새로고침해도 점수가 남아있도록 한다.)

사용하는 언어

• HTML
• CSS
• Javascript

 

https://github.com/purple402/yahtzee

purple402/yahtzee

 

 

06.03

되도록 깔끔하게 만들어봤다. 

그런데 모바일로 보기에 길어서 한 눈에 들어오지 않을 것 같아서 배치를 바꾸며 javascript 코드를 좀 더 깔끔하게 만들어보려고 한다.

 

06.16

규칙에 대해 알아보다 보니 yahtzee가 여러 번 나왔을 때 규칙이 따로 있었다.

바로 코드를 작성하려고 하다보니 헷갈려서 순서도를 만들어봤다.

(규칙 참고 : https://winning-moves.com/images/YAHTZEERULESv2.pdf)

1. yahtzee가 나왔는데 yahtzee칸이 0 또는 50으로 이미 기록되어 있을 때

2. upper section의 해당 칸이 이미 기록되어 있을 때 (4/4/4/4/4 가 나온 경우 fours칸이 이미 기록되어 있는 경우)

두 가지 조건 모두 만족해야 Joker Rule이 가능하다.

 

작성 코드

switch(largestCount) {
   /* 생략됨 */
    case 5:
        // check yahtzee bonus / Joker Rule
        // 1. yahtzee칸에 점수가 채워져있는지 확인
        if(!gameScore[12].classList.contains(FILLED)) {
            // 비어있는 경우, 첫 번째 yahtzee
            showScore(7, chance);
            showScore(8, chance);
            showScore(12, 50);
        } else {
            // yahtzee칸이 0 또는 50으로 이미 기록되어 있을 때
            // upper section의 해당 칸이 이미 기록되어 있을 때
            // 두 가지 조건을 모두 만족하면 joker rule가능
            // 2. yahtzee count 확인
            if(yahtzeeCount !== 0) {
                // yahtzee칸에 50점을 채운 경우 yahtzee bonus 획득 가능
                showScore(7, chance);
                showScore(8, chance);
                gameScore[12].innerText = `${50 + 100*yahtzeeCount}`;
                ++yahtzeeCount;
            } else {
                // yahtzee칸을 0으로 채운 상태
                showScore(7, chance);
                showScore(8, chance);
            }
            // 3. upper section 확인
            number = diceValue[0] -1;
            if(gameScore[number].classList.contains(FILLED)) {
                // 이미 채워져 있는 경우
                showScore(9, 25);
                showScore(10, 30);
                showScore(11, 40);
            }
            // upper section 비워져 있는 경우는 이미 위의 코드에서 채워짐
        }
        break;
   /* 생략됨 */
}

 

테스트 해보기

야찌 칸이 50으로 채워진 경우

야찌 칸이 0점으로 채워진 경우

 

06.19

최고기록을 저장해두기 위해 localStorage를 이용함

새로운 값과, 브라우저에 저장되어 있는 값을 비교하고

큰 값을 저장, 화면에 나타내는 것 까지 한 함수에서 처리하려고 했다.

	새로운 점수 있음	새로운 점수 없음 (맨 처음 브라우저 로딩할 때)
기존 BestRecord 존재	두 점수를 비교해서 새로운 값이 크면 업데이트, 기존값이 크면 유지	BestRecord 화면 표시
기존 BestRecord 없음	새로운 점수 저장 새로운 점수 화면 표시	'기록이 없습니다' 출력

그런데 이렇게 나눠보니 bestRecord나 새로운 점수 중 하나라도 없을 땐 에러가 나고 코드를 짜기에 애매했다. 오히려 더 복잡해지는 것 같아서 함수를 두 개로 나눴다.

 

displayBestRecord()

입력값 없음, localStorage에 저장된 bestRecord가 있는지 확인하고 있으면 화면에 출력, 없으면 초기값을 저장해준다.

compareScores(newRecord)

입력받은 새로운 점수와 localStorage의 bestRecord와 비교한다.

맨 처음 페이지를 로딩할 때 displayBestRecord()를 통해 저장된 값이 없으면 초기값을 localStorage에 저장해줘서 bestRecord가 없어도 에러가 뜨지 않는다.

 

function displayBestRecord() {
    try {
        bestRecord = JSON.parse(localStorage.getItem('bestRecord'));
    } catch {
        localStorage.setItem('bestRecord', JSON.stringify({ date : 0000-00-00, score : 000 }))
        return;
    }
 
    recordDate.innerHTML = bestRecord.date;
    recordScore.innerHTML = `${bestRecord.score}점`;
}
 
function compareScores(newRecord) {
    bestRecord = JSON.parse(localStorage.getItem('bestRecord'));
 
    if(newRecord.score > bestRecord.score) {
        localStorage.removeItem('bestRecord');
        localStorage.setItem('bestRecord', JSON.stringify(newRecord));
    }
}

06.21

모바일로 사용하려고 만든거라서 핸드폰에서 한번 실행해봤다.

핸드폰에서 답답해보일까봐 카테고리를 적는 칸을 크게 만들었는데 생각보다 불편하지 않았다.

오히려 폭이 커서 화면 안에 표가 다 나오지 않아서 수정할 필요가 있었다.

그리고 생각보다 아래의 여백이 많이 남았다.

이정도면 원래 만들었던 여러판을 기록할 수 있는 점수판이 더 나은 것 같기도 하고...

 

06.25

크기를 줄였는데도 핸드폰으로 확인해보니 오른쪽이 짤렸다.

grid 크기를 px단위가 아닌 fr단위로 바꿈

 

 

07.14

한판짜리 이름 지우는 버튼 만듬

 

여러판짜리

https://yahtzee.purple402.repl.co/

Yahtzee

한판짜리

https://yahtzeeone.purple402.repl.co/

야찌 점수판