[HTML, JAVASCRIPT] 클릭커, 방치형 게임 제작해보기 (2) _ Save, Load

 [HTML, JAVASCRIPT]  클릭커, 방치형 게임 제작해보기 ( 2 ) _ 저장, 불러오기 만들기  

 

안녕하세요.

 

 오늘은 저장, 불러오기를 만들어서 새롭게 추가하는 항목들을 좀 더 편하게 테스트 하기 위해 만들어 두겠습니다. (디자인은 하지않겠습니다.. 이쁘게 할 자신이 없습니다.)

 

 

2021.11.01 - [HTML.CSS.JAVASCRIPT] - [HTML, JAVASCRIPT] 클릭커, 방치형 게임 제작해보기 (1) _ 기본 제작

 

[HTML, JAVASCRIPT] 클릭커, 방치형 게임 제작해보기 (1) _ 기본 제작

 

 

 저번편을 이어서 시작해보겠습니다. 저장, 불러오기는 간편하게 Local Storage에 저장하고 불러오기로 하겠습니다.

 Local Storage는  F12 > Application > Storage > Local Storage로 들어가시면 볼 수 있습니다.

 

 

저기 있는 공간에 앞으로 저장이 될 예정입니다. 

 * 서버 개념이 아니기에 다른 pc또는 모바일에서는 불러오기를 할 수 없습니다. 

 

1. 저장, 불러오기 (Button 추가하기)

 

<button>저장하기</button>
<button>불러오기</button>

 

버튼 두개만 넣어주시면 됩니다. 정말 간단하죠?

 

2. 함수를 넣어주겠습니다. (저장하기, 불러오기 활성화)

 

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

function load(){
   localStorage.getItem("score",score);
   update();
}

 이렇게 하면 끝? 이라고 생각하실수도 있습니다. 위에 button 부분에 활성화 하기 위해 추가해주어야 하는 것이 있습니다.

 

 

3. button에 onclick 추가해주기

 

<button onclick="save()">저장하기</button>
<button onclick="load()">불러오기</button>

 

바로 onclick을 추가해주셔야 활성화가 됩니다.

 

 저장하고 불러오기가 아주 잘됩니다. 그런데 여기서 문제가 발생하죠. 불러오기를 한 뒤에 Click을 클릭하는 순간 51, 511, 51111 이런식으로 뒤에 숫자가 붙습니다. 

 그렇기 때문에 자바스크립트를 수정해줘야하는데요.

 

4. 자바스크립트 수정해주기

 

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

function load(){
   localStorage.getItem("score",score);
   // 추가
   score = parseInt(score);
   
   update();
}

 

parseInt를 추가해주시면 됩니다. 

parseInt = 문자열을 숫자로 변경하는것입니다. 

 

5. 테스트하기

 

매우 잘 됩니다. 끝!

 

다음 편은 클릭한 수로 아이템을 구매하고 한번 클릭시 증가하는 양을 늘려보겠습니다.

그리고 클릭커게임 컨셉을 정하여 픽셀 이미지도 제작해보겠습니다.

 

 

훈수와 틀린부분 지적은 환영합니다. 😘