[HTML] 포켓몬 게임 만들기-1

목차

  1. 게임 설명
  2. 게임화면
  3. 사용한 기술

과제와 시험에 치이느라 올리지 못한 블로그에 제가 해온 과제 결과물을 올려보려합니다.

팀 프로젝트로 2명의 팀원과 함께 HTML을 이용하여 1세대 포켓몬 게임을 구현해보았습니다.

 

제가 담당한 부분은 게임선택창, DB, DBCP로 화면이 총 3가지가 있는데 그중 하나를 맡고 화면들간의 정보를 이어주기 위한 작업을 맡았습니다.

 

1. 게임설명

데이터베이스에 포켓몬의 정보들을 수집하여 저장하고, 플레이어가 포켓몬을 3마리 선택하여 게임시작을 할 시 상대방의 랜덤의 3마리 포켓몬과 턴제 방식으로 배틀하는 방식의 게임입니다.


2. 게임화면

우선 화면이 크게 3종류로, 로그인창, 포켓몬선택창, 배틀창으로 이루어집니다. 인원수에 맞게 각자 1명식 맡아 구현하였습니다.

 

-로그인

로그인창은 지금 구현되어있는 상태에서 게임에 영향을 주는 기능을 하진않습니다.

로그인창

이곳에서 회원가입과 로그인 기능이 이루어집니다.

회원의 정보는 데이터베이스로 관리합니다.

유저 DB

이 DB에 유저의 정보가 있으면 로그인이 가능하며 없을경우 회원가입을 해야합니다.

회원가입한 정보도 DB에 저장되어 가입한 정보로 다시 로그인을 시도하면 정상적으로 로그인이 됩니다.

 

-포켓몬선택(내가 구현한 화면)

포켓몬 선택창

포켓몬 선택창에서는 배틀에 사용할 포켓몬을 3마리 선택합니다.

해당 포켓몬에 마우스를 올리면 ToolTip을 통해 해당 포켓몬의 정보를 볼 수 있고 클릭시 해당 포켓몬이 위에 추가됩니다.

 

선택된 포켓몬의 버튼에는 빨간테두리로 표시를 하고 선택한 포켓몬을 취소하고싶다면 다시 그 포켓몬을 선택하거나 위에서 클릭하면 됩니다.

 

포켓몬DB

 

선택완료버튼을 클릭하면 선택한 포켓몬을 배틀창에 보내게 되는데 이때 DB의 포켓몬 정보를 전송시켜줍니다.

HTML에서 선택된 포켓몬의 정보를 JSP코드로 전송하고 다시 배틀창으로 해당 포켓몬의 정보를 전송합니다.

 

 

 

-배틀창

배틀창

 

배틀창입니다. 저희 팀원중 코딩에 재능있는 친구가 구현하였습니다. 이곳에 선택한 포켓몬으로 상대방의 포켓몬과 배틀을 하게됩니다. 코드를 확인해보니 많이 길고 복잡하더라구요.. 

 

포켓몬의 스킬과 교체및 회복아이템으로 배틀을하여 상대방의 포켓몬들 체력을 0으로 만들면 승리하게 됩니다.

스킬DB

포켓몬의 속성별로 사용가능한 스킬들을 통일시켜주어 구현하였습니다. 스킬은 4개를 가지게되며 속성중에 5개의 스킬이 있으면 랜덤으로 4개를 넣어줍니다.

 


3. 사용한 기술

1. DB / DBCP

- 포켓몬과 유저등의 정보를 넣기 위한 DB를 사용하였고, DB에 필요한 정보를 저장 및 꺼내오기 위해 DBCP(database connect pool)을 사용하였습니다.

 

2. AJAX / Session

- HTML과 JSP간의 정보 전송을 위해 AJAX와 Session을 사용하였습니다.

 

3. Gson

- 포켓몬을 객체화 시켜서 정보를 전송하고싶어서 Gson을 이용하였습니다.

 

 

 

이렇게 웹으로 게임을 구현하였고, 코드와 관련한 정보는 다음 글에 작성하겠습니다.

'프로젝트 > 웹프로그래밍' 카테고리의 다른 글

[THML] 포켓몬 게임 만들기-2 코드편  (1) 2024.01.14