[HTML, JAVASCRIPT] 토끼 클릭커를 만들어보자!! ver 0.3

[HTML, JAVASCRIPT]  를 이용하여 토끼 클릭커를 만들어보자!!

ver 0.3

 

안녕하세요. 2일차 바로 진행하도록 하겠습니다. 꼭 저번편을 보셔야 연결이 된답니다.

 

2021.11.08 - [HTML.CSS.JAVASCRIPT] - [HTML, JAVASCRIPT] 토끼 클릭커를 만들어보자!! ver 0.2

 

[HTML, JAVASCRIPT] 토끼 클릭커를 만들어보자!! ver 0.2

2021.11.07 - [HTML.CSS.JAVASCRIPT] - [HTML, JAVASCRIPT] 토끼 클릭커를 만들어보자!! ver 0.1

 

[HTML, JAVASCRIPT] 토끼 클릭커를 만들어보자!! ver 0.1

 

Start 3일차

 

 

연습용 설명은 https://jjaeho.tistory.com/7 가시면 보실수 있습니다.

 

- - - - 결과물 - - - -

 

01

 

 이번에는 당근으로 은을 구매하고 은으로 인력 보충(클릭수 증가)을 해줄 수 있는 아이템을 추가해보았습니다. 여기서 중요한 점은 은은 계속해서 구매해야 하는 부분이기에 가격 증가는 없습니다. 대신 토끼는 영입하면 영입할수록 필요로 하는 은의 갯수가 증가합니다. 그리고 한번 클릭하면 증가하는 수를 머리칸에 추가했습니다. 

 

1. 일꾼 토끼 영입하기

 

 기존에 있던 .carrotSell 속에 추가해주었습니다.

 

 

이것 외에 수정된 부분이 있으므로 코드를 파일로 해서 올려놓겠습니다. 

 

 

 시세는 본인이 원하는 값으로 하시면 될 것 같습니다. 밸런스는 알아서 맞추시면 됩니다. 이렇게 추가하시면 가로 스크롤을 적용해 놓았기 때문에 옆으로 아이템이 늘어납니다. 

 

<div class="carrotSell">
 .
 .
 <div class="store-block">
  <p class="title-font">은으로 토끼 영입</p>
  <p id="needRabbit"class="title-font">시세 : 5 은</p>
  <p id="nowRabbit" class="small-font">보유 : 0 토끼</p>
  <img src="rabbit32px.png" alt="rabbit">
  <button onclick="buyRabbit()"> 구매 </button>
 </div>
 <div class="store-block">
  <p class="title-font">은으로 거대 토끼 영입</p>
  <p id="needBigRabbit"class="title-font">시세 : 25 은</p>
  <p id="nowBigRabbit" class="small-font">보유 : 0 토끼</p>
  <img src="rabbitbig.png" alt="bigrabbit">
  <button onclick="buyBigRabbit()"> 구매 </button>
 </div>
</div

 

 이제 아이템을 만들었으니 구매 할 수 있는 스크립트를 넣어보겠습니다.

 

 

function buyRabbit(){
    if(silver >= 5*(rabbit+1)){
        silver = silver - 5*(rabbit+1);
        rabbit = rabbit + 1;
    } else {
        alert("은이 부족해!");
    }
    update()
}

function buyBigRabbit(){
    if(silver >= 25*(bigRabbit+1)){
        silver = silver - 25*(bigRabbit+1);
        bigRabbit = bigRabbit + 1;
    } else {
        alert("은이 부족해!");
    }
    update()
}

 

 함수 속에 if부분에서 5*(rabbit + 1)을 해줘야 필요로 하는 은과 가지고 있어야 하는 은의 갯수를 맞춰서 증가 시킬 수 있습니다. 윗줄 아랫줄 같이 적용해 주어야 합니다. 

 

 역시 밸런스는 알아서 맞추시면 됩니다.

 

그리고 실시간 변화는 무조건 update()를 통해 해줘야합니다.

 

혹시 변수를 만들지 않으셨다면 꼭 만드셔야합니다.✌️

 

var rabbit = 0;
var bigRabbit = 0;

function update(){
    .
    .
    document.querySelector("#nowRabbit").innerHTML= "보유 : "+rabbit + " 토끼";
    document.querySelector("#needRabbit").innerHTML= "시세 : "+ 5*(rabbit+1) + " 은";
    document.querySelector("#nowBigRabbit").innerHTML= "보유 : "+bigRabbit + " 토끼";
    document.querySelector("#needBigRabbit").innerHTML= "시세 : "+ 25*(bigRabbit+1) + " 은";
}

 

2. 구매 후 클릭당 증가하는 수 설정

 

 클릭하면 수가 증가하는 함수 add()입니다. 맨 처음 제작한 함수였습니다. 이것을 수정해주었습니다. 일반 토끼는 1마리 고용할 때마다 +1씩 증가하고, 거대 토끼는 +3씩 증가하게 해두었습니다.

 

이것 또한 밸런스는 여러분이 맞추시면 됩니다.😎

 

 

function add(){
    carrot = carrot + 1 + rabbit + (bigRabbit*3);
    update()
}

 

 

3. 머리에 현재 클릭 당 증가수 표시

 

<p id="click" class="title-font">+1 Click</p>

 

저는 상단에 추가해주었습니다. 어디에 추가하든 상관없습니다.👍

 

update()에 한줄 추가 해주었습니다. 실시간으로 토끼를 구매하면 알아서 상승합니다.

 

function update(){
    document.querySelector("#click").innerHTML = "+" + (1 + rabbit + bigRabbit*3) + " Click";
    .
    .
    }

 

 

CSS부분은 직접 한번 변경해보시거나 올려드린 파일을 참고하시면 되겠습니다.

(조금 변경된 부분이 있습니다.)

 

 

 

이미지 파일은 필요하실 경우 올리겠습니다.(파일들 용량이 매우 작아 0.00MB로 표시됩니다.)

 

app.js

0.00MB

index.html

0.00MB

style.css

0.00MB

 

오늘은 코드들을 잘라서 올려보았습니다.

보기 더 불편할 경우 다시 통으로 올리는 식으로 하겠습니다. 🙌