[Spring] 낚시 이벤트

토이프로젝트의 메인 기능인

낚시 이벤트에 대해서 리뷰해보려고합니다.

 

Fishing Zone

 

저는 낚시 가능 구역을 따로 만들어서

이 구역으로 캐릭터가 들어가서

Space Bar를 누르면 낚시를 하는 방식으로 구현했습니다.

낚시 가능 구역은 div태그로 간단하게 만들었습니다.

 

<div class="fishing-section" id = "fishing-section"><h4 id = "fishing-section-h4">낚시 가능 구역</h4></div>

 

fishing-section이란 클래스를 만들었고

 

.fishing-section {

  position: absolute;

  top: 100px;

  left: 200px;

  width: 300px;

  height: 400px;

  background-color: transparent;

  border-radius: 10%;

  border: 2px solid white;

}

 

다음과 같이 위치와 넓이만 지정해서 간단히 만들었습니다.

 

이제 캐릭터가 이 div안으로 들어갔을 때 어떤 이벤트를 실행해야 하는데요.

먼저 낚시 구역에 들어가면 변경할 변수를 하나 선언해주었습니다.

let isFishingZone = false; //Fishing존에 들어갔는가?

 

다음은 낚시 구역의 위치와 넓이,

캐릭터의 포지션을 가져오는 변수를 선언해주었습니다.

 

let charPosition = $("#down-img").position();

let charTop = charPosition.top;

let charLeft = charPosition.left;

let sectionPosition = $(".fishing-section").position();

let sectionTop = sectionPosition.top;

let sectionLeft = sectionPosition.left;

let sectionWidth = $(".fishing-section").width();

let sectionHeight = $(".fishing-section").height();

 

그리고 낚시 구역에 들어왔을 때

들어왔다는 것을 알리기 위해서

낚시 구역의 css를 jQuery로 변경했습니다.

 //fishing-section의 크기를 가져와서

 if (charLeft + 50 > sectionLeft && charLeft < sectionLeft + sectionWidth && charTop + 50 > sectionTop && charTop < sectionTop + sectionHeight) {

  if (!isFishingZone) {

    //피싱존에 들어왔을 때

      isFishingZone = true;

      $("#fishing-section").css("border","4px solid #578FCA");

      $("#fishing-section-h4").css("color","#D1F8EF");

      $("#status").html("<h3><span class='space-bar'> SpaceBar</span>누르면 낚시 시작</h3>");

  }

 

그리고 여기서 스페이스바를 누르면 낚시를 진행합니다.

 

$(document).one('keydown', function(e) {

  if ((e.keyCode === 32) && !isFishing && !canFightFishing) {

    //스페이스바를 누르면 낚시 시작

      isFishing = true;

      $("#down-img").attr("src", "resources/img/fishing.png");

      $("#status").css("background-color", "#578FCA");

      $("#status").html("");

      $("#status").append("<div class = 'catching-msg'><h3 class = 'fish-typing'>🐟</h3>");

      $("#status").append("<h3 class = 'fish-typing2'>🦑</h3>");

      $("#status").append("<h3 class = 'fish-typing2'>🐠</h3>")

      $("#status").append("<h3 class = 'fish-typing3'>    🦀</h3>");

      $("#status").append("<h3 class = 'fish-typing3'>           🦐</h3>");

      $("#status").append("<h3 class = 'fish-typing3'>🐡</h3></div>");

      //$("#status").css("background-image", "url('resources/img/background/fishing-sea.jpg')");

     $("#status").css("background-image", "url('resources/img/background/sea-in.jpg')");

      $("#status").css("background-color", "#0A3981");

      $("#status").css("background-size", "cover");

      $("#status").css("background-repeat", "no-repeat;");

 

이떄 isFishing 변수는 낚시중일 때 true인 변수이고,

캐릭터의 css를 낚시중인 모습으로 바꿉니다.

그리고 상태창도 css를 변경해줬습니다.

 

낚시중인 캐릭터

 

상태창을 바다 속 모습으로 변경

 

 

이 상태에서 5~10초 사이의 랜덤 초가 지나면

입질이 왔다는 표시로 캐릭터의 css를 변경하고,

변경된 상태에서 Enter를 누르면 캐스팅에 돌입하게 됩니다.

 

let randomTime = Math.floor(Math.random() * (10000 - 5000 + 1)) + 5000;

setTimeout(function() {

    $("#down-img").attr("src", "resources/img/catching.png").stop().animate({

        width: "10%",

        height: "10%",

        opacity: 1

    }, 200, function() {

        $("#status").html("<h3><span class='Enter'>Enter ⏎ </span>누르면 캐스팅 시작</h3>");

        $(this).stop().animate({

            width: "50px",

            height: "50px",

            opacity: 1

        }, 200, function() {

            $(document).one('keydown', function(e) {

                if (e.keyCode === 13) { //엔터키

             

                   $("#status").html("");

                     $("#status").append("<div class = 'catching-msg'><h3 class = 'fish-typing4'>🎣</h3><h3 class = 'fish-typing5'>🎣</h3>");

                     $("#status").append("<h3 class = 'fish-typing2'>🦈 </h3>");

                     $("#status").append("<h3 class = 'fish-typing2'>🐳</h3>");

                     $("#status").append("<h3 class = 'fish-typing3'>   🦑 </h3>");

                     $("#status").append("<h3 class = 'fish-typing3'>       🐡    </h3>");

                     $("#status").append("<h3 class = 'fish-typing3'>🐢</h3></div>");

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

                    isFishing = false;

                    canFightFishing = true;

 

이때 isFishing을 false로 바꾸고

canFightFishing을 true로 바꾸는데

이것은 캐스팅중이라 낚시중인 상태를 꺼놓은 것을 의미합니다.

 

 

캐스팅 상태의 뷰를 먼저 보시겠습니다.

다음과 같이 어떤 이미지가 뜨고

게이지는 점점 감소하는데

a키와 s키를 누르면 게이지가 3씩 증가해서

게이지가 100에 도달할 때

낚시 성공 처리를 했습니다.

 

$("#fight-fishing").css("display", "block");

gagePercent = 30; //캐스팅 게이지 초기화

if (intervalId === null) {

    intervalId = setInterval(function() {

     

      if (gagePercent > 0) { //지속적으로 게이지 5씩 감소

            gagePercent -= 8;

            $("#gage").animate({

                width: gagePercent + "%"

            }, 300);

           

            $("#gage-img").animate({

                marginLeft: gagePercent + "%" // 게이지 길이에 맞춰 그림자 이동

            }, 300)

            if (gagePercent > 70) {

                $("#gage").css("background-color", "green");

                $("#gage-section").html("");

           

                $("#gage-section").append("❤️");

            }else if (gagePercent > 30) {

                $("#gage").css("background-color", "yellow");

                $("#gage-section").html("");

                $("#gage-section").append("⚠️");

         

            }else if (gagePercent <= 30) {

                $("#gage").css("background-color", "red");

                $("#gage-section").html("");

                $("#gage-section").append("🩹");

         

            }

        }

       

       

        //게이지 별 시각 효과

        if (gagePercent <= 30) {

            $("#gage").css("background-color", "red");

        } else if (gagePercent <= 70) {

            $("#gage").css("background-color", "yellow");

        } else {

            $("#gage").css("background-color", "green");

        }

       

       

        $("#fight-fishing-dmg").text(gagePercent + "%")

       

 //캐스팅 시 a키나 s키를 누르면 3씩 데미지

$(document).keydown(function(e) {

  if (canFightFishing) {

      if (e.keyCode === 65) { //a키

          gagePercent = gagePercent + 3 + rodDamage;

          $("#akey").css("opacity", "0.5");

      } else if(e.keyCode === 83){ //s키

          gagePercent =  gagePercent + 3 + rodDamage;

          $("#skey").css("opacity", "0.5");

      }

  }

});

$(document).keyup(function(e) {

  if (canFightFishing) {

      if (e.keyCode === 65) {

          $("#akey").css("opacity", "1");

      } else if (e.keyCode === 83) {

          $("#skey").css("opacity", "1");

      }

  }

});

 

 

이때 keydown과 keyup에

투명도를 부여해서

방향키가 눌리는 것이 보이는 효과를 넣었습니다.

 

게이지가 0이되면 물고기를 놓치게되고,

게이지가 100이되면 물고기를 잡게됩니다.

 

 //물고기 놓쳤을 때

 if (gagePercent <= 0) {

  clearInterval(intervalId);

  intervalId = null;

  $("#fight-fishing").css("display", "none");

  $("#status").html("<h3>놓쳤습니다😥</h3>");

  isFishing = false;

  canFightFishing = false;

  gagePercent = 30;

  $("#gage").css("width", gagePercent + "%");

}

 

물고기를 놓쳤을 때는 

기존 낚시를 하기 전 상태로 모든 상태를 초기화 하고

놓쳤습니다라는 텍스트를 상태창에 띄웁니다.

 

포스팅이 길어져서 

다음 게시물에 물고기를 잡았을 때를 처리해보도록 하겠습니다.

 

 

낚시 영상입니다.