2021/10/19 ~ 2021/10/21
스낵 게임은 별도의 설치 없이 언제 어디서든 이용 가능한 무료 미니 게임입니다.
어렸을 때 하던 스낵 게임을 자바스크립트로 구현해보며 프로그램 구현 실력을 향상 시켰습니다.
저는 지뢰 찾기 게임을 설계 및 구현과 전체적인 디자인 시안을 맡아 진행하였습니다.
// 이벤트
window.addEventListener('DOMContentLoaded', minesweeperGame.renderNewGame);
// minesweeperGame
renderNewGame() {
gameBoard = createBoard(SQUARE.NORMAL);
mineInfoBoard = createBoard(0);
plantMineInGameBoard();
renderGameBoard();
}
gameBoard
: 플레이어의 게임 상태를 저장할 배열mineInfoBoard
: 지뢰의 위치와 지뢰 개수 정보를 저장할 배열plantMineInGameBoard
: gameBoard 배열에 지뢰를 저장하는 함수renderGameBoard
: 플레이어에게 게임판을 렌더할 함수// 우클릭
document.querySelector('.minesweeper-board').oncontextmenu = e => {
e.preventDefault();
const $col = e.target.closest('.col');
if (!$col) return;
minesweeperGame.handleRightClick($col);
};
oncontextmenu
: 우클릭 이벤트handleRightClick
: 우클릭을 처리할 함수// 좌클릭
document.querySelector('.minesweeper-board').onclick = e => {
const $col = e.target.closest('.col');
if (!$col) return;
minesweeperGame.handleLeftClick($col);
};
handleLeftClick
: 좌클릭을 처리할 함수// 모드 선택
document.querySelector('.game-mode').onclick = e => {
if (!e.target.classList.contains('game-mode-button')) return;
minesweeperGame.changeMode(e.target.dataset.mode);
[...document.querySelectorAll('.game-mode-button')].forEach($button =>
$button.classList.toggle('current-mode', e.target === $button)
);
minesweeperGame.renderNewGame();
};
changeMode
: 모드를 바꿔주는 함수renderNewGame
: 새로운 게임 시작하는 함수// Mode
const MODE = {
EASY: { ROW: 10, COL: 10, MINE_NUM: 10 },
NORMAL: { ROW: 20, COL: 20, MINE_NUM: 60 },
HARD: { ROW: 25, COL: 25, MINE_NUM: 140 }
};
// state
let { ROW, COL, MINE_NUM } = MODE.NORMAL;
changeMode(mode) {
const codeMode = mode.toUpperCase();
({ ROW, COL, MINE_NUM } = MODE[codeMode]);
}
document.querySelector('.restart').onclick = minesweeperGame.renderNewGame;
renderNewGame
: 새로운 게임 시작하는 함수⇒ 1,2 번의 어려움은 앞으로 개인적인 미니 프로젝트를 진행하면서 연습하며 해결해나갈 계획이다.
🚩 미니프로젝트 주제 모음
const SQUARE = {
NORMAL: -1, // 닫힌칸, 지뢰X
FLAG: -2, // 닫힌칸, 지뢰X, 깃발
MINE: -3, // 닫힌칸, 지뢰O
FLAG_MINE: -4, // 닫힌칸, 지뢰O, 깃발
OPENED: 0 // 열린칸
};
여러가지 기능을 구현하며 구현 능력을 향상시킬 수 있었다.
객체 디스럭처링의 재할당시 명시적으로 표현식임을 알려야 함을 알 수 있었다.
Audio()
Web API 를 사용해서 이벤트가 발생했을 때, 소리가 재생되도록 사용해볼 수 있었다.