[Spring] 낚시 상점

토이 프로젝트인 낚시 게임의

최종 기능인 상점 기능을 리뷰해보려고합니다.

 

create table rod(

  r_name varchar2(10 char) not null,

  r_price number(6) not null,

  r_damage number (5) not null

 

  );

 

먼저 낚시대 테이블은 이렇게 구현되어 있습니다.

낚시대 이름, 낚시대 가격, 낚시대 데미지가 DB컬럼으로 지정되어 있고,

상점에서 낚시대를 구입하면

DB에 추가할 예정입니다.

 

그럼 View부터 보여드리겠습니다.

 

<div id="Shop" class="Shop" style="display:none;">

<table id = "ShopTbl" class = "ShopTbl">

<tr><div class = "user-title">Shop👩‍</div></tr>

<div class = "shop-section">

<tr>

<div class = "rod-section">

<td>

<img class = "fishing-rod" src = "resources/img/rod/낡은.png" onclick = "buyOld();"/><p>낡은 낚싯대 </p><p>3000₩</p></td></div>

<div class = "rod-section">

 <td><img class = "fishing-rod" src = "resources/img/rod/좋은.png" onclick = "buyGood();"/><p>좋은 낚싯대 </p><p>5000₩</p></td>

  </div>

  <div class = "rod-section">

  <td> <img class = "fishing-rod" src = "resources/img/rod/대단한.png" onclick = "buyAwesome();"/><p>대단한 낚싯대 </p><p>8000₩</p></td>

</div>

<div class = "rod-section">

<td>

<img  class = "fishing-rod" src = "resources/img/rod/이상한.png" onclick = "buyStrange();"/><p>이상한 낚싯대 </p><p>10000₩</p></td> </div></tr>

<tr><td><img src = "resources/img/rod/luckybox.png" class = "lotto-img" onclick = "buyLotto();"/>

<p>🍀5000₩🍀</p>

</td>

</tr>

<tr><td  id = "shop-money"> </td></tr>

</div>

</table>

</div>

 

상점은 테이블로 구현했으며,

이미지와 텍스트로 보여지게 간단하게 구현했습니다.

그리고 luckybox를 추가해서

5000원짜리를 구입하면 0~10000원을 얻을 수 있게

재미 요소로 넣어봤습니다.

가장 하단에는 유저의 잔고가 나옵니다.

 

낚시 상점

 

낚시대 이름을 어디서 보신적 있으신가요?

제가 포켓몬시리즈를 좋아하기 때문에

포켓몬에서 나오는 낚시대의 이름을 반영했습니다.

 

다음은 낚시대 구입 메소드를 살펴보겠습니다.

 //낚시대 구입 메소드

 function buyOld() {

  const rodName = "낡은";

  const rodPrice = 3000;

  rodDamage = 1;

  damage += rodDamage; //유저 데미지에 구입한 낚시대의 데미지를 추가

  if ((userMoney - rodPrice) >= 0) {

      userMoney -= rodPrice;

      $("#userMoney").html("💵 " + userMoney);

      $("#shop-money").html("💵 " + userMoney);

      updateShop(rodName, rodPrice, rodDamage);

      $("#status").html("<h3><span class='gold'>" + rodName + "</span> 낚싯대를 구입했습니다!</h3>");

      $("#damage-td").html("⚔️전투력 : <span class = 'power-value'>" + (rodDamage + 3) + "</span><br><br>");

      $("#rod-td").html("<div class = 'user-text'><span class = 'sky'>" + rodName + "</span>낚싯대 착용중 </div> ");

  } else {

      $("#status").html("<h3><span class='green'>돈</span>이 부족합니다🙉</h3>");

  }

}

function buyGood() {

  const rodName = "좋은";

  const rodPrice = 5000;

 rodDamage = 2;

 damage += rodDamage;

  if ((userMoney - rodPrice) >= 0) {

      userMoney -= rodPrice;

      $("#userMoney").html("💵 " + userMoney);

      $("#shop-money").html("💵 " + userMoney);

      updateShop(rodName, rodPrice, rodDamage);

      $("#status").html("<h3><span class='gold'>" + rodName + "</span> 낚싯대를 구입했습니다!</h3>");

      $("#damage-td").html("⚔️전투력 : <span class = 'power-value'>" + (rodDamage + 3) + "</span><br><br>");

      $("#rod-td").html("<div class = 'user-text'><span class = 'sky'>" + rodName + "</span>낚싯대 착용중 </div> ");

  } else {

      $("#status").html("<h3><span class='green'>돈</span>이 부족합니다🙉🙉</h3>");

  }

}

function buyAwesome() {

  const rodName = "대단한";

  const rodPrice = 8000;

  damage += rodDamage;

 rodDamage =  3;

  if ((userMoney - rodPrice) >= 0) {

      userMoney -= rodPrice;

      $("#userMoney").html("💵 " + userMoney);

      $("#shop-money").html("💵 " + userMoney);

      updateShop(rodName, rodPrice, rodDamage);

      $("#status").html("<h3><span class='gold'>" + rodName + "</span> 낚싯대를 구입했습니다! (데미지: " + rodDamage + ")</h3>");

      $("#damage-td").html("⚔️전투력 : <span class = 'power-value'>" + (rodDamage + 3) + "</span><br><br>");

      $("#rod-td").html("<div class = 'user-text'><span class = 'sky'>" + rodName + "</span>낚싯대 착용중 </div>>");

  } else {

      $("#status").html("<h3><span class='green'>돈</span>이 부족합니다🙉🙉🙉</h3>");

  }

}

function buyStrange() {

  const rodName = "이상한";

  const rodPrice = 10000;

  damage += rodDamage;

  rodDamage = Math.floor(Math.random() * (5 - 3 + 1)) + 3; //이상한 낚시대의 데미지는 (3~5)

 

  if((userMoney - rodPrice) >= 0){

    updateShop(rodName, rodPrice, rodDamage);

    $("#status").html("<h3><span class = 'gold'>"+rodName +"</span> 낚싯대를 구입했습니다!</h3>");

    $("#damage-td").html("⚔️전투력 : <span class = 'power-value'>" + (rodDamage + 3) + "</span><br><br>");

   

    $("#rod-td").html("<div class = 'user-text'><span class = 'sky'>" + rodName + "</span>낚싯대 착용중 </div> ");

      }else{

        $("#status").html("<h3><span class = 'green'>돈</span>이 부족합니다🙉🙉🙉🙉</h3>");

      }

}

 

 

낚시대마다 메소드를 만들어주었는데

기본 구조는 같습니다.

메소드가 실행되면

해당 낚시대의 가격만큼 유저의 돈을 차감하고,

데미지는 낚시대의 데미지만큼 올리고,

낚시대 이름과 가격, 데미지를 파라미터로 받은

updateShop을 호출합니다.

//로또 구입 메소드 가격 : 5000 (0 ~ 10000)까지 랜덤 머니 획득

function buyLotto() {

  if ((userMoney - 5000) >= 0) {

      userMoney -= 5000;

 

      let RandomMoney = Math.floor(Math.random() * (10000 - 0 + 1)) + 1000;

      userMoney += RandomMoney;

      $("#userMoney").html("💵 " + userMoney);

      $("#shop-money").html("💵 " + userMoney);

     

      $("#status").html("<h3>럭키비키 😽 <span class='green'>" + RandomMoney + "</span>원을 얻었습니다!</h3>");

     

  } else {

      $("#status").html("<h3><span class='gold'>탕진</span>하신 것 같은데요!?</h3>");

  }

}

 

로또를 구입하는 메소드에서는

구매를 진행하면

0~10000까지 랜덤한 숫자의 돈을

유저머니에 추가하고

유저 머니를 업데이트합니다.

 

 //구입 요청 메소드

 function updateShop(rodName,rodPrice, rodDamage) {

  $.ajax({

      url: '/game/buyRod',

      type: 'POST',

      data: { r_name: rodName, r_price: rodPrice, r_damage : rodDamage },

      success: function(response) {

   

         

          console.log("유저 돈 " + userMoney);

         

          $("#userMoney").html("💵 " + userMoney);

          $("#shop-money").html("💵 " + userMoney);

          $("#status").html(

              "<div class='sell-msg'>" +

              "<img src='resources/img/rod/" + rodName + ".png' width='50px' height='50px'>" +

              "<br>" + "<span class = 'blue'>" + rodName+ "</span>" + "낚싯대가 구입되었습니다!<br>" + //css추가

              "구매가: " + "<span class = 'red'>" + rodPrice+ "</span>" +

              "<br><div class='sellMoney'><br>💵 " + Math.floor(userMoney) +

              "</div>" +

              "</div>"

          );

          $("#fight-fishing").append("<h4>userDmg</h4>");

      },

      error: function(xhr, status, error) {

          console.error("구입 실패", error);

      }

  });

}

 

updateShop은 파라미터로 받은 데이터들을

다시 요청파라미터로 보내고,

유저의 돈을 업데이트하고,

상태메세지에 성공적으로 구입되었다는 문구를 출력합니다.

 

 

   @RequestMapping(value = "/buyRod", method = RequestMethod.POST)

   public String addInventory(@RequestParam("r_name") String r_name, @RequestParam("r_price") int r_price,@RequestParam("r_damage") int r_damage, HttpServletRequest req) {

       try {

           rDAO.buyRod(r_name, r_price, r_damage);

       } catch (Exception e) {

           e.printStackTrace();

       }

     

       return "main";  

   }

 

요청은 해당 컨트롤러로 들어오게 되는데

RodDAO의 buyRod라는 메소드를 실행합니다.

 

@Service

public class RodDAO {

 

  @Autowired

  SqlSession ss;

 

 

   public void buyRod(String r_name, int r_price,int r_damage) {

          try {

              Rod r = new Rod();

              r.setR_name(r_name);

             r.setR_price(r_price);

             r.setR_damage(r_damage);

              RodMapper mapper = ss.getMapper(RodMapper.class);

              mapper.buyRod(r);

          } catch (Exception e) {

              e.printStackTrace();

          }

      }

}

 

buyRod역시 insert문이기 때문에

name, price, damage를 Rod 객체의 데이터로 지정하고,

RodMapper의 buyRod 추상메소드를 실행하고

 

<insert id="buyRod" parameterType="com.puft.game.Rod">

INSERT INTO Rod VALUES (#{r_name}, #{r_price}, #{r_damage})

</insert>

 

이 추상메소드는 insert 쿼리문을 실행합니다.

 

 

구입된 낚시대는 U메뉴인 UserInfo에서 확인할 수 있는데

<div id="UserInfo" class="UserInfo" style="display:none;">

<table id = "UserInfoTbl" class = "UserInfoTbl">

<tr><img src = "resources/img/down.png" width = "90px" height = "110px" class = "Profile"></tr>

<tr>

<td class = "user-td">

    User : <span class = "id">${ID}</span><br><br>

</td>

</tr>

<tr>

<td class = "user-td" id = "damage-td">

    ⚔️ 전투력: <span class="power-value">3</span><br><br>

</td>

</tr>

<tr>

<td class = "user-td" id = "rod-td">

    <div class = "user-text">장비 없음💸 </div> <br><br>

</td>

</tr>

</table>

</div>

 

UserInfo 역시 테이블로 구현하였고,

 

$("#status").html("<h3><span class = 'gold'>"+rodName +"</span> 낚싯대를 구입했습니다!</h3>");

$("#damage-td").html("⚔️전투력 : <span class = 'power-value'>" + (rodDamage + 3) + "</span><br><br>");

$("#rod-td").html("<div class = 'user-text'><span class = 'sky'>" + rodName + "</span>낚싯대 착용중 </div> ");

 

각 낚시대 메소드에서 jQuery의 html기능을 써서

User정보를 업데트하였습니다.

 

시현 영상을 끝으로 마무리하도록 하겠습니다.