[RummiKub/JS] 타일 나누기

규칙

- 총 타일 수 : 104 (빨강, 노랑, 파랑, 검정 * 2묶음* 13장씩 / 4 * 2 * 13)

- 나눠가지는 타일 수 : 14

이미지의 오른쪽은 타일 저장한 이름

결과물

HTML

check.html

<body>
    <div class="player-board board">
        <div>플레이어 타일</div>
    </div>
    <div class="AI-board board">
        <div>AI 타일</div>
    </div>
    <div class="main-board">
        <div>남은 타일</div>
    </div>
    <script type="text/javascript" src="js/check.js"></script>
</body>

CSS

check.css

* {
    list-style: none;
    text-decoration: none;
    border-collapse: collapse;
    margin: 0 auto;
    padding: 0;
    color: #000;
}
.tile {
    margin: 5px;
    height: 11vh;
    -webkit-user-drag: none;
    cursor: pointer;
}
.main-board{
    margin: 30px;
    height: 100vh;
    width: 84vw;
    border: 1px solid black;
}
.player-board,
.AI-board{
    margin: 30px;
    height: 30;
    width: 84vw;
    border: 1px solid black;
}

여기까지 적용했다면 이런 모습!!

JS

check.js

1. 타일 준비

// 총 색깔 별로 2묶음 씩 총 8묶음으로 for문을 8번 반복하는데, 1, 2번이 같은 색깔.. 이런식으로 저장
// 1,2 번은 1이고 빨강, 3, 4번은 2이고 2는 노랑 이런식
const tileColor = {
    "1": 1, // 빨
    "2": 1, // 빨
    "3": 2, // 노
    "4": 2, // 노
    "5": 3, // 파
    "6": 3, // 파
    "7": 4, // 검
    "8": 4 // 검
}
//전체 타일을 저장할 배열
const initTile = [];
//타일의 정보를 저장하기 위한 for문
// i : 1 ~ 8까지 타일 묶음 수만큼 반복
// j : 한 묶음 당 13개씩있어서 13번 반복
function inputTile(){
    for (let i = 1; i <= 8; i++) {
        for (let j = 1; j <= 13; j++) {
            initTile.push({
            	//타일마다 고유한 아이디 갖음
                "id": `${i}${tileColor[i]}${j}`, 111 ~ 8413
                //타일의 이미지를 불러올 때 사용할 이름
                "path": `${tileColor[i]}${j}`, //11 ~ 413
                //타일의 번호
                "number": `${j}`, // 1 ~ 13
                //타일의 색깔 (tileColor 배열)
                "color": `${tileColor[i]}` // 1 ~ 8
            })
        }
    }
}
// 타일 섞는 함수
const shuffle = (arr) => {
    arr.sort(() => Math.random() - 0.5);
}
inputTile(); // 타일 등록
shuffle(initTile); // 타일 셔플
shuffle(initTile);
shuffle(initTile);
for(let i = 0; i < 104; i++){console.log(initTile[i])}

for문을 돌려 로그를 찍어보면 타일이 잘 들어가있는 걸 확인할 수 있다.

셔플을 3번한 이유는 1 번만 했을 경우 색깔이 반 이상이 한 색깔인 경우가 자주 발생해 적당히 섞어주었다.

2. 타일 나누기

이 게임은 컴퓨터와 1 대 1로 진행되는 게임이므로 playerTile, AITile, remainTile 총 3개의 배열을 선언한다.

const playerTile = []; // 사용자 타일
const AITile = []; // 컴퓨터 타일
const remainTile = []; // 남은 타일 저장할 배열

function splitTile(){
    // i는 for문 반복 0 ~ 103
    // p는 playerTile, a는 AITile, r는 raminTile
    // for문 내에 선언한 변수의 증가값이 불규칙해 for문 내에서 증가시킴
    for (let i = 0, p = 0, a = 0, r = 0; i < 104;) {
        // 너 하나 나 하나 준다는 느낌으로 14개씩 나눠가짐
        if (i < 28) {
            playerTile[p++] = initTile[i++];
            AITile[a++] = initTile[i++];
        } 
        // 플레이어와 ai가 나눠가지고 남은 타일 저장
        else {
            remainTile[r++] = initTile[i++];
        }
    }
}
console.log(playerTile.length, AITile.length, remainTile.length);

로그를 찍어보면 타일의 길이가 14, 14, 76인걸 확인할 수 있고, 배열을 찍어보면 배열 값들을 확인할 수 있다.

하지만 우리는 타일이 잘 저장되어있는지 눈으로 직접 확인해봅시다 ^^b

3. 타일 띄우기

// querySelector를 이용하여 html 내부에서 클래스로 찾아오기
const playerBoard = document.querySelector('.player-board');
const AIBoard = document.querySelector('.AI-board');
const mainBoard = document.querySelector('.main-board');

function show_player_tile(){
	//타일 수 만큼 반복
    for (let i = 0; i < playerTile.length; i++) {
    	// i번째 타일의 path를 변수에 저장
        let path = playerTile[i].path;
        // innerHTML을 이용하여 playerBoard div 내부에 이미지 붙이기
        playerBoard.innerHTML +='<img src="image/' + path + '.svg" class="tile">';
    }
}

function show_tile(){
    for (let i = 0; i < AITile.length; i++) {
        let id = AITile[i].id;
        let path = AITile[i].path;
        AIBoard.innerHTML +='<img src="image/' + path + '.svg" class="tile">';
    }
    
    for(let i = 0; i < remainTile.length; i++){
        let path = remainTile[i]?.path;
        mainBoard.innerHTML +='<img src="image/' + path + '.svg" class="tile">';
    }
}

show_player_tile();
show_tile();

플레이어 타일은 계속해서 사용할 예정이라 따로 분리하여 함수를 선언했습니다.