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

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

ver 0.4

 

안녕하세요. 벌써 4일차를 돌입했습니다. 오늘은 자동으로 증가하는 시스템을 구축해보겠습니다. 

 

전편을 꼭 참고 하시기 바랍니다. 

 

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

 

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

 

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 4일차

 

 

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

 

시작해보겠습니다.

 

- - - - 결과물 - - - -

 

01

 

1.  이제 금을 사용하는 아이템을 추가 해주겠습니다.

 

<div class="store-block">
  <p class="title-font">금으로 텃밭 구매</p>
  <p id="needFarm"class="title-font">시세 : 5 금</p>
  <p id="nowFarm" class="small-font">보유 : 0 텃밭</p>
  <img src="farm.png" alt="farm">
  <button onclick="buyFarm()"> 구매 </button>
</div>

 

 어디에 추가할지는 전편을 보셨다면 충분히 이해했다고 생각하고 넘기겠습니다. 정말 간단하죠?

 

 html 부분은 정말 간단하기 때문에 javascript 부분을 열심히 만들어주겠습니다.

 

2. javascript로 추가해주기

 

var farm = 0;

function update(){
    document.querySelector("#needFarm").innerHTML = "시세 : " + 5 + " 금";
    document.querySelector("#nowFarm").innerHTML = "보유 : "+ farm + " 텃밭";
}

 

update에 추가해주는 거 다들 알고 계실거라 생각합니다. 

 

이제 여기서 중요합니다. 

 

function buyFarm(){
    if(gold >= 5*(farm+1)){
        gold = gold - 5*(farm+1);
        farm = farm + 1;
    } else {
        alert("금이 부족해!");
    }
    update()
}

 

 아이템 구매방식은 기존에 다른 아이템 구매방식과 같습니다. 그러므로 간략하게 보고 넘어가겠습니다.

 

 지금 작성 할 것은 바로 텃밭을 구매하면 초당 당근을 추가해주는 시스템입니다.

 

function time(){
    carrot = carrot + (1*farm);
    update()
}

setInterval(time, 1000)

 

 

정말 간단하죠?

 

 setInterval은 자동으로 실행하게 해주는 코드입니다. 시간은 1000 으로 해두었습니다. 1초와 같습니다.

 

 time 함수를 1초에 한번씩 실행 시키도록 했습니다. farm을 구매하지 않았을 때도 실행이 되지만 숫자는 증가하지 않게 해두었습니다. 그러다 farm을 구매하면 증가하는 방식입니다. 

 

 다른 방식이 있다면 추후에 수정하고 올리겠습니다.

 

3. 상태 표시하기

 

<p id="clickSec" class="title-font">+0 Click/sec</p>

 

아직 구매전 이기 때문에 0으로 시작하겠습니다. 전편 Click 표시줄 밑에 추가해주시면 됩니다.

 

function update(){
    document.querySelector("#clickSec").innerHTML = "+" + (1*farm) + " Click/sec";
}

이제 상단부분에 + 1 click/sec가 잘 뜰 예정입니다.

 

 

4. 저장 불러오기 설정해주겠습니다.

 

 저장하고 불러오기는 무한반복이기에 이제는 자동으로 추가하실 수 있으실 겁니다.

 

function save() {
    localStorage.setItem("farm",farm);
}


function load() {    
    farm = localStorage.getItem("farm");
    farm = parseInt(farm);
    update()
}

 

 

오늘 4일차로 클릭커 만들기를 끝내겠습니다.

 

계속해서 만드는 것은 딱히 의미가 없을 것 같습니다.

 

무한 반복으로 새로운 거만 추가하는 것이라 여러분들이 보고 만드실 수 있을 겁니다.

 

저는 급 떠오른 아이디어가 있어서 그것을 제작하도록 하겠습니다.

 

좀 정리되면 그것도 한번 올려보도록 하겠습니다.

 

 

여기까지 만든 토끼클릭커 올려드리며 이만 인사드리겠습니다.

https://brave-murdock-5a3a0d.netlify.app/

Rabbit