웹 게임 컬렉션

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 구현
  • 성능 최적화: 브라우저 성능을 고려한 코드 작성
  • 크로스 플랫폼 호환성: 다양한 환경에서 동작하는 안정적인 코드

이 웹 게임들은 프론트엔드 개발의 기본기를 탄탄히 다지고, 사용자와 상호작용하는 애플리케이션 개발 경험을 쌓을 수 있었던 의미 있는 프로젝트들입니다.