이 게임의 최종 목적은
물고기를 팔아서 돈을 벌고,
상점에서 낚시대를 사서 데미지를 강화 후
물고기를 쉽게 잡는 것입니다.
그래서 잡은 물고기를 파는 기능이 필요한데
오늘은 그 기능 구현 과정을 리뷰해보려고 합니다.
먼저 인벤토리의 물고기를 누르면
물고기의 상세 정보가 뜨게 됩니다.
저는 이 로직을 파는 로직과 묶어서
구현해봤습니다.
먼저 인벤토리의 물고기를 그냥 눌렀을 때는
//인벤토리 내 물고기 클릭시 showInfo 메소드 실행
function showInfo(fishName, fishPrice, fishSize, event) {
console.log("Fish Size: ", fishSize);
var clickX = event.pageX;
var clickY = event.pageY;
let selected = fishName;
if ($("#info-modal").length > 0) {
$("#info-modal").remove();
return;
}
var infoHtml =
'<div class="info-modal" id="info-modal" style="' +
'display: none;' +
'position: absolute; ' +
'top: ' + clickY + 'px; ' +
'left: ' + (clickX + 20) + 'px; ' +
'text-align: center;' +
'background-color: #6A9AB0;' +
'padding: 20px; ' +
'color: black; ' +
'border-radius: 10px; ' +
'box-shadow: 0px 0px 10px rgba(0,0,0,0.3); ' +
'font-family: \'Jua\', sans-serif;">' +
'<h2 class="info-title">' + fishName + '</h2>' +
'<p class = "mustard"> 💵' + Math.floor(fishPrice * (fishSize / 30)) + ' ₩ </p>' +
'<p class="size"> size: ' + fishSize + '</p>' +
'<br><button class="close-btn" onclick="closeInfo()">✖️</button>' +
'</div>';
이 showInfor를 보여줄려고 하는데요.
이때 event.pageX와 event.pageY라는 jQuery 기능을 사용해서
사용자가 클릭한 x좌표와 y좌표를 가져와서
상세 정보 창을 해당 클릭한 부분 옆에 띄우게 하였습니다.
그리고 판매 모드에 진입했을 때 인벤토리의 물고기를 누르면 팔리게
하고 싶어서 다음과 같이 기능을 구현했습니다.
<div id="sell-button"></div>
먼저 인벤토리에 판매 버튼을 추가하고
$("#sell-btn").click(function() { //택배 아이콘 클릭시
console.log(sellMode);
if (sellMode) {
sellMode = false;
$("#sell-btn").css("background-color", "transparent");
} else {
sellMode = true;
$("#sell-btn").css("background-color", "#B6FFA1");
}
});
판매 버튼을 눌렀을 때
sellMode를 껐다 켰다하고,
css까지 변경해주었습니다.
이 부분은 jQuery로 구현했습니다.
//인벤토리 내 택배 아이콘을 누르면 sellMode가 되고
//sellMode인 상태에서 물고기를 누르면 showInfor가 아닌 판매 로직 진행
if (sellMode) {
$.ajax({
url: '/game/sellFish',
type: 'POST',
data: { f_name: fishName, f_price: fishPrice, f_size: fishSize },
success: function(response) {
fishName = fishName.trim();
var fishId = "#catched-fish-" + fishName + fishSize;
$(fishId).remove();
$("#fish-img-" + fishName + fishSize).remove();
//판매 성공 후 인벤토리 갱신
updateInventory(fishPrice, fishSize, fishName);
},
error: function(xhr, status, error) {
console.error("인벤토리 삭제 실패", error);
}
});
}else{
$("body").append(infoHtml);
}
sellMode라면 sellFish라는 주소에
POST방식으로 요청을 보냅니다.
이때 물고기의 데이터가
Inventroy DB에서 지워지는데
인벤토리에서는 지워지지 않아서
jQuery의 remove기능을 써서
직접 이미지를 삭제했습니다.
@RequestMapping(value = "/sellFish", method = RequestMethod.POST)
public String sellFish(@RequestParam("f_name") String f_name, @RequestParam("f_price") int f_price,@RequestParam("f_size") int f_size, HttpServletRequest req) {
try {
iDAO.sellFish(f_name, f_price, f_size);
fDAO.getAllFish(req);
iDAO.selectAllInventory(req);
} catch (Exception e) {
e.printStackTrace();
}
return "main";
}
sellFish주소에 요청이 들어오면
InventoryDAO의 sellFish 메소드를 실행합니다.
public void sellFish(String f_name, int f_price, int f_size) {
try {
Inventory inventory = new Inventory();
inventory.setF_name(f_name);
inventory.setF_price(f_price);
inventory.setF_size(f_size);
InventoryMapper mapper = ss.getMapper(InventoryMapper.class);
mapper.sellFish(inventory);
} catch (Exception e) {
e.printStackTrace();
}
}
해당 메소드에서는 파라미터로 받은 데이터들을 객체에 넣고
InventoryMapper의 추상메소드인 sellFish를 실행합니다.
이때 Mapper는 MyBatus의 Mapper와 맵핑되어있고,
<delete id="sellFish" parameterType="com.puft.game.Inventory">
DELETE FROM userInventory
WHERE F_NAME = #{f_name}
AND ROWNUM = 1
</delete>
해당 Mapper의 쿼리문을 수행합니다.
쿼리문은 DELETE를써서
이름에 해당하는 파라미터를 받아와서
데이터를 삭제합니다.
판매 요청이 끝나면
갱신 함수를 실행합니다.
function updateInventory(fishPrice, fishSize, fishName) {
$.ajax({
url: '/game/getAllInventory',
type: 'GET',
success: function(response) {
console.log("판매 후 인벤토리 목록 갱신:", response);
//물고기의 가격은 사이즈 별마다 다르게 책정
userMoney += Math.floor( fishPrice * (fishSize / 30));
$("#userMoney").html("💵 " + userMoney);
$("#shop-money").html("💵 " + userMoney);
//판매 후 메세지 출력
$("#status").html(
"<div class='sell-msg'>" +
"<br><img src='resources/img/Fish/" + fishName + ".png' width='30' height='30'>(이)가 판매되었습니다!" +
"<div class='sellMoney'>💵 " + Math.floor(userMoney) + "</div>" +
"</div>"
);
},
error: function(xhr, status, error) {
console.error("판매 후 인벤토리 목록 갱신 실패", error);
}
});
}
userMoney는 전역변수로 설정되어 있어서
userMoney에 물고기 가격에 fishSize를 30으로 나눈 값을 더해서
업데이트합니다.
그리고 상태창에 판매 정보를 띄웁니다.
시현 영상을 보여드리고 마무리 하겠습니다.
