[HTML] HP 체력바/칸 만들기

HTML과 CSS 그리고 javascript / Jquery를 이용하여

진행바(체력 칸)를 만드는 방법을 알아보겠습니다.

체력바 칸 버튼 생성

먼저 HTML로 HP 칸을 표현할 버튼을 생성합니다.
부트스트랩 링크로 버튼의 CSS가 자동적용되어서 색상이 파란색으로 표시되고있습니다.

일반 버튼을 하셔도 무방합니다.

HTML코드

    <button id="S" type="button" class="btn btn-primary mt-5 S">시작</button>
    <Br>
    <a>HP</a>
    <button id="A" type="button" class="btn btn-primary mt-5 S1">+</button>
    <button id="B" type="button" class="btn btn-primary mt-5 S2">+</button>
    <button id="C" type="button" class="btn btn-primary mt-5 S3">+</button>

---

이벤트 만들기

이제 이벤트를 만들어 보도록 하겠습니다.

진행 순서는 다음과 같습니다.

1. 처음은 "시작" 버튼과 HP 문자만 표시되도록 설정합니다.

2. 시작 버튼을 누를시 HP문자 밑에 체력바 칸이 1칸씩 증가하게 설정합니다.

 

 

3. 모두 증가했다면 버튼을 안보이게 만들도록 합니다.

 

아래는 자바스크립트 소스코드입니다.

주석을 달아두었으니 참조하시면 되겠습니다.

먼저 제이쿼리를 사용하기 위해서 사이에 jQuery 링크를 추가해 주세요.

        <!-- https://code.jquery.com/ -->
        <script  src="http://code.jquery.com/jquery-latest.min.js"></script>

javaScript  / jQuery코드

<script>
    var num = 1; //변수 선언
    $(".S1").hide(); //클래스명 S1을 숨깁니다.
    $(".S2").hide(); //클래스명 S2을 숨깁니다.
    $(".S3").hide(); //클래스명 S3을 숨깁니다.

     $("#S").click(function(){ //ID가 S인 버튼을 클릭시 이벤트
         next(); //함수 next를 실행
     });

     function next() { 
         if (num == 4) { //만약 num이 4가 되면 모든 버튼을 숨김
             $(".S1").hide();
             $(".S2").hide();
             $(".S3").hide();
             $(".S").hide();
         } else {
             $(".S"+num).show(); //class명 S1 ~ S3 까지를 num으로 변경하며 보여줌
             num++; //num을 1증가
         }
     }
</script>

 

<참고>

버튼이 아닌 이미지로 구현해도 동일합니다.

    <button id="S" type="button" class="btn btn-primary mt-5 S">시작</button>
    <Br>
    <a>HP</a>
    <img id="A"  class=" mt-5 S1" src="img/HP.png"></img> 
    <img id="B"  class=" mt-5 S2" src="img/HP.png"></img> 
    <img id="C"  class=" mt-5 S3" src="img/HP.png"></img>

이상으로 체력바, 칸을 만드는 방법에 대해서 알아보았습니다.