Web-Mario-JSP 프로젝트

JSP 기반 슈퍼 마리오 웹 게임 구현 프로젝트

목차

1. 프로젝트 소개
2. 요구사항 분석 및 정의
3. 화면 설계
4. 인터페이스 설계
5. 데이터베이스 설계 및 구축
6. 구현 기능
7. 테스트 계획 및 결과
8. 기술 스택
9. 설치 및 실행 방법
10. 참고 사항

프로젝트 소개

Web-Mario-JSP는 클래식 슈퍼 마리오 게임을 웹 환경에서 즐길 수 있도록 JSP(Java Server Pages)와 서블릿 기술을 활용하여 구현한 프로젝트입니다. 사용자는 웹 브라우저를 통해 마리오 게임을 플레이할 수 있으며, 회원가입과 로그인을 통해 개인 점수를 저장하고 순위를 확인할 수 있습니다.

본 프로젝트는 오픈 소스 JavaScript 기반 마리오 게임을 기반으로 하여 서버 사이드 기능을 추가하고, 사용자 경험을 개선하는 데 중점을 두었습니다.

주요 특징

• JSP 및 서블릿 기반의 웹 애플리케이션
• 사용자 인증 시스템 (회원가입, 로그인)
• 게임 점수 저장 및 순위표 기능
• 반응형 웹 디자인으로 다양한 디바이스 지원

요구사항 분석 및 정의

기능적 요구사항

1. 사용자 관리

   • 회원가입: 사용자는 아이디, 비밀번호, 닉네임으로 계정을 생성할 수 있어야 함
   • 로그인/로그아웃: 사용자는 계정으로 로그인하고 로그아웃할 수 있어야 함
   • 게스트 모드: 비로그인 사용자도 게임을 플레이할 수 있어야 함

2. 게임 기능

   • 게임 실행: 사용자는 웹 브라우저에서 마리오 게임을 실행할 수 있어야 함
   • 게임 조작: 키보드로 마리오를 조작할 수 있어야 함
   • 게임 저장: 게임 진행 상황이나 점수를 저장할 수 있어야 함

3. 점수 관리

   • 점수 저장: 게임 종료 시 사용자의 점수가 데이터베이스에 저장되어야 함
   • 순위표: 전체 사용자의 점수 순위를 확인할 수 있어야 함

비기능적 요구사항

1. 성능

   • 게임은 최소 30fps 이상으로 원활하게 실행되어야 함
   • 페이지 로딩 시간은 3초 이내여야 함

2. 보안

   • 사용자 비밀번호는 암호화되어 저장되어야 함
   • SQL 인젝션 공격에 대한 방어가 구현되어야 함

3. 호환성

   • 주요 웹 브라우저(Chrome, Firefox, Safari, Edge)에서 정상 작동해야 함
   • 모바일 환경에서도 접근 가능해야 함 (반응형 디자인)

화면 설계

주요 화면 구성

1. 메인 화면

   • 게임 시작 버튼
   • 로그인/회원가입 링크
   • 순위표 확인 링크

2. 회원가입 화면

   • 아이디, 비밀번호, 닉네임 입력 폼
   • 가입하기 버튼
   • 뒤로가기 버튼

3. 로그인 화면

   • 아이디, 비밀번호 입력 폼
   • 로그인 버튼
   • 회원가입 링크
   • 뒤로가기 버튼

4. 게임 화면

   • 마리오 게임 캔버스
   • 현재 점수, 코인, 생명 표시
   • 메인화면으로 돌아가기 버튼

5. 순위표 화면

   • 사용자별 최고 점수 목록
   • 순위, 닉네임, 점수, 레벨 정보 표시

인터페이스 설계

사용자 인터페이스

• 네비게이션: 모든 페이지 상단에 일관된 네비게이션 바를 배치
• 색상 테마: 마리오 게임의 전통적인 색상(빨강, 파랑, 초록)을 활용한 디자인
• 반응형 디자인: 모바일, 태블릿, 데스크톱 환경에 맞춘 레이아웃 조정

시스템 인터페이스

• 클라이언트-서버 통신: AJAX를 활용한 비동기 통신으로 점수 저장 및 조회
• 데이터베이스 연결: JDBC를 활용한 MySQL 데이터베이스 연동
• 세션 관리: 서블릿 세션을 활용한 로그인 상태 유지

데이터베이스 설계 및 구축

ERD (Entity-Relationship Diagram)

+---------------+       +----------------+
|     users     |       |  game_scores   |
+---------------+       +----------------+
| id (PK)       |       | id (PK)        |
| username      |       | user_id (FK)   |
| password      |       | username       |
| nickname      |       | nickname       |
| email         |       | score          |
| created_at    |       | level          |
| updated_at    |       | coins          |
+---------------+       | lives          |
                        | created_at     |
                        +----------------+

데이터베이스 구축 SQL

-- 데이터베이스 생성
CREATE DATABASE IF NOT EXISTS mario_db;
USE mario_db;

-- 사용자 테이블 생성
CREATE TABLE IF NOT EXISTS users (
    id BIGINT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL,
    nickname VARCHAR(50) NOT NULL,
    email VARCHAR(100),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

-- 게임 점수 테이블 생성
CREATE TABLE IF NOT EXISTS game_scores (
    id BIGINT AUTO_INCREMENT PRIMARY KEY,
    user_id BIGINT NOT NULL,
    username VARCHAR(50) NOT NULL,
    nickname VARCHAR(50) NOT NULL,
    score INT NOT NULL,
    level VARCHAR(10) NOT NULL,
    coins INT NOT NULL,
    lives INT NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
);

-- 테스트용 사용자 계정 생성
INSERT INTO users (id, username, password, nickname, email) VALUES
(1, 'testuser', 'password', '테스트사용자', 'test@example.com'),
(2, 'mario', 'password', '마리오', 'mario@example.com'),
(3, 'luigi', 'password', '루이지', 'luigi@example.com'),
(999, 'guest', 'guest', '게스트', 'guest@example.com');

-- 테스트용 게임 점수 데이터 추가
INSERT INTO game_scores (user_id, username, nickname, score, level, coins, lives) VALUES
(1, 'testuser', '테스트사용자', 5000, '1-1', 10, 3),
(1, 'testuser', '테스트사용자', 8000, '1-2', 15, 2),
(2, 'mario', '마리오', 12000, '2-1', 25, 5),
(3, 'luigi', '루이지', 9500, '1-4', 18, 4),
(999, 'guest', '게스트', 3000, '1-1', 5, 2);

구현 기능

1. 사용자 관리 기능

• 회원가입 (UserService.java, register.jsp)
• 로그인/로그아웃 (UserService.java, login.jsp, logout.jsp)
• 세션 관리 (game.jsp, index.jsp)

2. 게임 기능

• 마리오 게임 구현 (mario.js, things.js, maps.js 등)
• 게임 조작 (keyboard.js)
• 게임 상태 관리 (data.js)

3. 점수 관리 기능

• 점수 저장 (GameScoreService.java, saveScore.jsp)
• 순위표 표시 (scoreboard.jsp)
• 게임 오버 시 자동 점수 저장 (things.js의 gameOver 함수)

4. 데이터베이스 연동

• JDBC 연결 관리 (DBConnectionManager.java)
• 데이터베이스 초기화 (DatabaseInitializer.java)
• DAO 패턴 구현 (UserDAO.java, GameScoreDAO.java)

테스트 계획 및 결과

단위 테스트

테스트 ID	테스트 항목	예상 결과	실제 결과	비고
UT-01	UserService.registerUser	사용자 등록 성공	성공	-
UT-02	UserService.authenticateUser	로그인 성공	성공	-
UT-03	GameScoreService.saveScore	점수 저장 성공	성공	-
UT-04	DBConnectionManager.getConnection	DB 연결 성공	성공	-

통합 테스트

테스트 ID	테스트 항목	예상 결과	실제 결과	비고
IT-01	회원가입 및 로그인	가입 후 로그인 성공	성공	-
IT-02	게임 플레이 및 점수 저장	게임 오버 시 점수 저장	성공	-
IT-03	순위표 표시	저장된 점수가 순위표에 표시	성공	-

성능 테스트

테스트 ID	테스트 항목	목표	측정 결과	비고
PT-01	페이지 로딩 시간	3초 이내	1.8초	-
PT-02	게임 프레임 속도	30fps 이상	평균 45fps	-
PT-03	DB 쿼리 응답 시간	1초 이내	0.3초	-

호환성 테스트

브라우저	버전	결과	비고
Chrome	95+	정상 작동	-
Firefox	90+	정상 작동	-
Safari	14+	정상 작동	-
Edge	90+	정상 작동	-
Mobile Chrome	95+	정상 작동	일부 UI 조정 필요

기술 스택

• 백엔드

  • Java 11
  • JSP (Java Server Pages)
  • Servlet
  • JDBC (Java Database Connectivity)

• 프론트엔드

  • HTML5
  • CSS3
  • JavaScript
  • Canvas API

• 데이터베이스

  • MySQL 8.0

• 빌드 도구

  • Gradle 7.6

• 서버

  • Tomcat 9 (Gretty 플러그인)

• 개발 도구

  • IntelliJ IDEA / Eclipse
  • Git
  • Docker (개발 환경 구성)

설치 및 실행 방법

필수 요구사항

• JDK 11 이상
• Gradle 7.0 이상
• MySQL 8.0
• Docker (선택사항)

로컬 환경 설정

1. 프로젝트 클론:

   git clone https://github.com/yourusername/web-mario-jsp.git
   cd web-mario-jsp
   

2. 데이터베이스 설정:

   # MySQL 실행 (Docker 사용 시)
   docker-compose up -d mysql
   
   # 또는 로컬 MySQL에서 스크립트 실행
   mysql -u root -p < docker/init.sql
   

3. 애플리케이션 실행:

   ./gradlew appRun
   

4. 웹 브라우저에서 접속:

   http://localhost:8080
   

Docker를 이용한 실행

1. Docker 및 Docker Compose 설치 확인

2. 전체 애플리케이션 실행:

   docker-compose up -d
   

3. 웹 브라우저에서 접속:

   http://localhost:8080
   

참고 사항

• 이 프로젝트는 교육 및 학습 목적으로 개발되었습니다.
• 원본 게임 소스는 Full Screen Mario를 기반으로 하였습니다.
• 게임 이미지와 사운드 파일에 대한 저작권은 Nintendo에 있습니다.

라이센스

이 프로젝트는 MIT 라이센스 하에 배포됩니다. 자세한 내용은 LICENSE 파일을 참조하세요.