반응형
규칙
- 총 타일 수 : 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();
플레이어 타일은 계속해서 사용할 예정이라 따로 분리하여 함수를 선언했습니다.
여기까지 잘 저장되고 띄어진 타일의 모습을 확인할 수 있습니다 ^^b
다시 한 번 말하자면 아직 js를 배운지 1년도 되지 않았지만 프로젝트를 진행하라 해서 어쩌다보니 루미큐브를 만들게 되었으며 바닐라 js로 라이브러리 없이 만들어야한다는 조건이 있어서... 제이쿼리는 사용하지 않습니다!!
다음 글은 클릭 시 나타나는 효과
반응형
'Project > [JS] RummiKub' 카테고리의 다른 글
[RummiKub/JS] 타일 클릭 시 후광 효과 (0) | 2021.11.18 |
---|---|
[JS] RummiKub 프로젝트 (1) | 2021.11.17 |
댓글