웹 게임 컬렉션
JavaScript로 구현한 인터랙티브 웹 게임들
개발 기간: 2023.01 - 2024.12
기술 스택: HTML5, CSS3, Vanilla JavaScript
특징: 라이브러리 없이 순수 JavaScript로 구현
🎮 프로젝트 개요
프론트엔드 개발 실력 향상과 알고리즘 학습을 목적으로 제작한 다양한 웹 게임 컬렉션입니다. 각 게임은 순수 JavaScript로 구현되어 웹 기반 인터랙티브 애플리케이션의 기본기를 보여줍니다.
💡 관련 프로젝트: 시니어마을 - 시니어 대상 커뮤니티 플랫폼에서 이 게임들이 실제 서비스로 활용되고 있습니다.
🔮 띠별 운세 서비스
프로젝트 개요
seedrandom.js를 활용한 시드 기반 일일 운세 시스템으로, 생년월일을 기반으로 십간십이지를 계산하여 일관된 띠별 운세를 제공하는 웹 애플리케이션입니다. 시니어마을 프로젝트에서 핵심 서비스로 활용되어 매일 수백 명의 시니어들이 이용하고 있습니다.
핵심 기술
- 시드 기반 랜덤 생성: seedrandom.js를 사용한 재현 가능한 일일 운세
- 십간십이지 계산: 정확한 띠 계산 알고리즘
- 한자성어 기반 운세: 20가지 상세 운세 시스템
// 시드 기반 일일 운세 생성
function getZodiacData(birthYear) {
const zodiacIndex = (birthYear - 1900) % 12;
const currentDate = new Date();
const dayOfMonth = currentDate.getDate();
const month = currentDate.getMonth() + 1;
// 생년, 월, 일을 조합한 고유 시드 생성
const uniqueSeed = birthYear * 10000 + month * 100 + dayOfMonth;
Math.seedrandom(uniqueSeed); // 시드 기반 랜덤 고정
const sharedFortune = getSharedFortune(); // 20가지 상세 운세 중 선택
return {
name: zodiacs[zodiacIndex].name,
image: zodiacs[zodiacIndex].image,
fortune: sharedFortune
};
}
// 5개 영역별 상세 운세 (금전운, 매매운, 애정운, 직장운, 건강운)
function getSharedFortune() {
const sharedFortunes = [
`<b>[금전운 : 魚米之齊(어미지제)]</b><br> 물고기와 쌀처럼 서로 도움이 되어야 하는 상황입니다. 혼자서 모든 일을 해결하려 하지 마시고 주변의 도움을 받으세요...`,
`<b>[금전운 : 貴人相助(귀인상조)]</b><br> 도움을 주는 기회가 찾아올 것입니다. 베푸는 마음으로 임하면 뜻밖의 이익이 따를 것입니다...`,
`<b>[애정운 : 和顔悅色(화안열색)]</b><br> 온화한 얼굴과 기쁜 표정으로 사람들을 대하면 좋은 인연을 만날 수 있습니다...`,
// ... 총 20가지 상세 운세
];
const randomIndex = Math.floor(Math.random() * sharedFortunes.length);
return sharedFortunes[randomIndex];
}
주요 기능
- 십간십이지 정확 계산:
(birthYear - 1900) % 12
공식으로 띠 계산 - 일관된 일일 운세: 같은 날짜에는 항상 동일한 운세 제공
- 5개 영역별 운세: 금전운, 매매운, 애정운, 직장운, 건강운
- 한자성어 기반: 전통적인 한자성어와 함께 상세한 해석 제공
- 12개 띠 이미지: 각 띠별 전용 PNG 이미지 파일
🃏 타로 카드 게임
프로젝트 개요
신비로운 타로 카드 점술 게임으로, 사용자가 카드를 선택하면 운세를 확인할 수 있는 인터랙티브 웹 애플리케이션입니다. 시니어마을 프로젝트에서 실제 서비스로 활용되어 시니어들의 일상에 즐거움을 선사하고 있습니다.
핵심 기술
- Fisher-Yates 셔플 알고리즘: 공정한 카드 셔플링 구현
- CSS Keyframe 애니메이션: 부드러운 카드 뒤집기 효과
- DOM 조작: 동적 카드 배치 및 상태 관리
// Fisher-Yates 셔플 알고리즘 구현
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// 카드 뒤집기 애니메이션
function flipCard(cardElement) {
cardElement.style.transform = 'rotateY(180deg)';
cardElement.addEventListener('transitionend', function() {
cardElement.classList.add('revealed');
});
}
주요 기능
- 랜덤 카드 선택: 매번 다른 카드 조합 제공
- 애니메이션 효과: CSS transition을 활용한 카드 뒤집기
- 반응형 디자인: 모바일과 데스크톱 모두 지원
🔢 스도쿠 게임
프로젝트 개요
클래식 스도쿠 퍼즐 게임을 웹으로 구현한 프로젝트입니다. 백트래킹 알고리즘을 사용한 자동 솔버와 실시간 검증 기능을 포함합니다.
핵심 기술
- 백트래킹 알고리즘: 효율적인 스도쿠 해결 알고리즘
- 실시간 검증: 사용자 입력의 즉시 유효성 검사
- ES5 최적화: 브라우저 호환성을 고려한 구현
// 백트래킹 알고리즘을 이용한 스도쿠 솔버
function solveSudoku(board) {
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
if (board[row][col] === 0) {
for (let num = 1; num <= 9; num++) {
if (isValidMove(board, row, col, num)) {
board[row][col] = num;
if (solveSudoku(board)) {
return true;
}
board[row][col] = 0; // 백트래킹
}
}
return false;
}
}
}
return true;
}
// 스도쿠 규칙 검증
function isValidMove(board, row, col, num) {
// 행 검증
for (let x = 0; x < 9; x++) {
if (board[row][x] === num) return false;
}
// 열 검증
for (let x = 0; x < 9; x++) {
if (board[x][col] === num) return false;
}
// 3x3 박스 검증
let startRow = row - row % 3;
let startCol = col - col % 3;
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
if (board[i + startRow][j + startCol] === num) return false;
}
}
return true;
}
주요 기능
- 자동 솔버: 백트래킹 알고리즘으로 퍼즐 해결
- 힌트 시스템: 막힐 때 도움을 주는 힌트 기능
- 난이도 조절: 쉬움/보통/어려움 레벨 선택
- 실시간 검증: 입력 즉시 규칙 위반 확인
➕ 덧셈 카드 게임
프로젝트 개요
수학 학습을 재미있게 만든 교육용 게임입니다. 제한 시간 내에 정확한 덧셈 계산을 통해 점수를 획득하는 게임입니다. 시니어마을 프로젝트에서 인지 향상 프로그램의 일환으로 활용되고 있습니다.
핵심 기술
- 타이머 시스템: 정확한 시간 관리 및 UI 업데이트
- 점수 시스템: 레벨별 점수 계산 및 랭킹
- DOM 실시간 업데이트: 효율적인 화면 갱신
// 게임 타이머 시스템
class GameTimer {
constructor(duration, onTick, onComplete) {
this.duration = duration;
this.remaining = duration;
this.onTick = onTick;
this.onComplete = onComplete;
this.isRunning = false;
}
start() {
this.isRunning = true;
this.timer = setInterval(() => {
this.remaining--;
this.onTick(this.remaining);
if (this.remaining <= 0) {
this.stop();
this.onComplete();
}
}, 1000);
}
stop() {
this.isRunning = false;
clearInterval(this.timer);
}
}
// 점수 계산 시스템
function calculateScore(answer, timeLeft, level) {
const baseScore = 10;
const timeBonus = Math.floor(timeLeft / 2);
const levelMultiplier = level * 1.5;
return Math.floor((baseScore + timeBonus) * levelMultiplier);
}
주요 기능
- 레벨 시스템: 단계별 난이도 증가
- 실시간 피드백: 정답/오답 즉시 표시
- 최고 기록: 로컬 스토리지를 활용한 기록 저장
- 시각적 효과: 정답 시 애니메이션 효과
💡 개발 과정에서 얻은 경험
1. 알고리즘 최적화
- 백트래킹: 스도쿠 솔버를 통한 재귀 알고리즘 학습
- 셔플링: Fisher-Yates 알고리즘으로 진정한 랜덤 구현
- 검색 최적화: 중복 검사 로직의 효율성 개선
2. 사용자 경험 (UX) 설계
- 직관적 인터페이스: 설명 없이도 이해할 수 있는 UI
- 즉시 피드백: 사용자 행동에 대한 실시간 반응
- 접근성: 키보드 네비게이션 및 스크린 리더 지원
3. 성능 최적화
- DOM 조작 최소화: 필요한 부분만 업데이트
- 이벤트 위임: 효율적인 이벤트 핸들링
- 메모리 관리: 불필요한 객체 생성 방지
4. 크로스 브라우저 호환성
- Vanilla JS 사용: 라이브러리 의존성 없는 순수 구현
- ES5 호환: 구형 브라우저까지 고려한 코딩
- Progressive Enhancement: 기본 기능부터 점진적 개선
🔧 기술적 특징
순수 JavaScript 구현
// 라이브러리 없이 구현한 애니메이션
function animateElement(element, property, from, to, duration) {
const start = performance.now();
function animate(currentTime) {
const elapsed = currentTime - start;
const progress = Math.min(elapsed / duration, 1);
const value = from + (to - from) * easeInOutQuad(progress);
element.style[property] = value + 'px';
if (progress < 1) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);
}
function easeInOutQuad(t) {
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
}
모듈 패턴 활용
const GameModule = (function() {
let gameState = {
score: 0,
level: 1,
isPlaying: false
};
function init() {
bindEvents();
resetGame();
}
function bindEvents() {
document.addEventListener('keydown', handleKeyPress);
document.addEventListener('click', handleClick);
}
return {
init: init,
getScore: () => gameState.score,
getLevel: () => gameState.level
};
})();
🎯 학습 성과
이 프로젝트들을 통해 다음과 같은 역량을 개발했습니다:
- 알고리즘 구현 능력: 복잡한 로직을 효율적인 코드로 변환
- 사용자 인터페이스 설계: 직관적이고 반응적인 UI 구현
- 성능 최적화: 브라우저 성능을 고려한 코드 작성
- 크로스 플랫폼 호환성: 다양한 환경에서 동작하는 안정적인 코드
이 웹 게임들은 프론트엔드 개발의 기본기를 탄탄히 다지고, 사용자와 상호작용하는 애플리케이션 개발 경험을 쌓을 수 있었던 의미 있는 프로젝트들입니다.