[HTML, JAVASCRIPT] 클릭커, 방치형 게임 제작해보기 ( 3 ) _ 구매 아이템 만들기
안녕하세요.
오늘은 구매 가능 아이템을 만들어서 한번 클릭시 추가적으로 클릭하게 해주는 기능을 구현해보도록 하겠습니다. (디자인은 하지않겠습니다.. 이쁘게 할 자신이 없습니다.)
2021.11.03 - [HTML.CSS.JAVASCRIPT] - [HTML, JAVASCRIPT] 클릭커, 방치형 게임 제작해보기 (2) _ Save, Load
[HTML, JAVASCRIPT] 클릭커, 방치형 게임 제작해보기 (2) _ Save, Load
[HTML, JAVASCRIPT] 클릭커, 방치형 게임 제작해보기 ( 2 ) _ 저장, 불러오기 만들기 안녕하세요. 오늘은 저장, 불러오기를 만들어서 새롭게 추가하는 항목들을 좀 더 편하게 테스트 하기 위해 만들
jjaeho.tistory.com
2021.11.01 - [HTML.CSS.JAVASCRIPT] - [HTML, JAVASCRIPT] 클릭커, 방치형 게임 제작해보기 (1) _ 기본 제작
[HTML, JAVASCRIPT] 클릭커, 방치형 게임 제작해보기 (1) _ 기본 제작
[HTML, JAVASCRIPT] 클릭커, 방치형 게임 제작해보기 ( 1 ) _ 기본틀 만들기 안녕하세요. 지금부터 첫 번째 프로젝트인 클릭커 게임(clicker game) 을 제작해 보도록 하겠습니다. 여러 다양한 제작 방
jjaeho.tistory.com
시작해볼까요?
1. 상점을 추가하기 (button 추가하기)
<button class="꾸미기" onclick="store()">Store</button>
style태그는 편하신데로 하시면 되겠습니다. onclick으로 상점 클릭을 구현할예정입니다.
2. 기능 구현하기 (JavaScript 구현하기)
var plusScore = 0;
function store(){
if(score >= 20){
score = score - 20;
plusScore = plusScore + 1;
update();
} else {
alert("저리가");
}
}
이렇게 새로운 항목을 추가해주시면 됩니다. [ 점수 20에 추가 클릭수 1 증가 ] 를 만들었습니다.
끝입니다.
정말 간단하죠?
그럼 새롭게 현재 한번 클릭시 증가하는 Score를 표시하는 칸을 만들어보겠습니다.
3. 추가 클릭수 확인가능한 문구 추가해보기 (메세지 추가)
<div>
<p class="now" id="nowPlusScore">현재 추가 클릭수는 0 입니다.</P>
</div>
HTML파일에 한 줄 추가해주겠습니다. 여기서 끝나면 변경되지 않기에 실시간으로 알기위해서는 자바스크립트로 구현을 해야합니다.
4. 실시간으로 볼 수 있게 바꾸자
// 기존 update 함수에 새로운 항목을 넣으시면 됩니다.
function update(){
document.querySelector("#countNum").value = score;
//저는 여기에 추가하겠습니다.
document.querySelector("#nowPlusScore").innerHTML = "현재 추가 클릭수는 "+ plusSocre + " 입니다.";
}
이렇게 되면 현재 추가로 클릭되는 숫자를 파악할수 있습니다.
 |
 |
구매 전과 후에 사진입니다.
자 여기서 확실히 알고 가셔야 할게 있습니다.
// 저장을 하시고 새로고침을 한 후에 불러오기를 할 경우 Score만 불러오기 성공하고 추가 클릭수는 불러와지지 않습니다. 그 이유는 애초에 저장 항목을 추가해주지 않았기 때문입니다. 새롭게 저장 항목을 추가해주겠습니다.
5. Store도 저장슬릇에 추가해주자
//기존 함수에 추가하시면 됩니다.
function save(){
localStorage.setItem("score",score);
localStorage.setItem("plusScore",plusScore);
}
function load(){
score = localStorage.getItem("score");
score = parseInt(score);
plusScore = localStorage.getItem("plusScore");
plusScore = parseInt(plusScore);
update();
}
정말 간단하지 않습니까?
앞으로는 반복적인 작업만 해주시면 다 만드실 수 있는 실력이 됩니다.
코드를 추가하시고, 클릭을 잔뜩 해보시고 저장하고 불러와보시면 잘 되는 것을 알 수 있습니다.
끝~
앞으로 제작하게 될 부분은 컨셉, 아이템 구매시 요구로 하는 Score 증가 입니다.
* 번외 CSS를 조금 수정했습니다.
+ 종합본 올려드리겠습니다.
- HTML -
<body>
<div>
<button class="saveAndLoad" onclick="save()">저장하기</button>
<button class="saveAndLoad" onclick="load()">불러오기</button>
</div>
<div >
<p class="now" id="nowPlusScore">현재 추가 클릭수는 +0 입니다.</p>
</div>
<div class="position">
<input id="countNum" class="counting" disabled type="text" value="0">
<div class="count" >
<button style="font-size:2em;" onclick="add()">Click</button>
<button style="font-size:2em;" onclick="store()">Store</button>
</div>
</div>
<script src="app.js"></script>
</body>- CSS -
* {
padding: 0;
margin: 0;
}
body {
display: flex;
align-items: center;
flex-direction: column;
}
.saveAndLoad {
width: 10vh;
height: 3vh;
margin: 2vh;
border-radius: 15px;
}
.now {
font-size: 2em;
text-align: center;
}
.position {
display: flex;
flex-direction: column;
}
.counting {
margin: 12vh auto;
text-align: center;
height: 10vh;
font-size: 2em;
width: auto;
font-weight: 800;
}
.count {
display: flex;
justify-content: space-around;
}- JAVASCRIPT -
var score = 0;
var plusScore = 0;
function add() {
score = score + 1 + plusScore;
update()
}
function update() {
document.querySelector("#countNum").value = score;
document.querySelector("#nowPlusScore").innerHTML = "현재 추가 클릭수는 +"+plusScore+" 입니다.";
}
function store(){
if(score >= 20){
score = score - 20;
plusScore = plusScore + 1;
update()
} else {
alert("저리가");
}
}
function save(){
localStorage.setItem("score",score);
localStorage.setItem("plusScore",plusScore);
}
function load(){
score = localStorage.getItem("score");
score = parseInt(score);
plusScore = localStorage.getItem("plusScore");
plusScore = parseInt(plusScore);
update()
}
( 굳이? 이지만 ) 혹시 몰라서 파일 업로드 해두겠습니다. 용량이 매우 작아요~~
'HTML,CSS,JavaScript > HTMLGAME' 카테고리의 다른 글
| [HTML, JAVASCRIPT] 토끼 클릭커를 만들어보자!! ver 0.2 (0) | 2021.11.08 |
|---|---|
| [HTML, JAVASCRIPT] 토끼 클릭커를 만들어보자!! ver 0.1 (0) | 2021.11.07 |
| [HTML, JAVASCRIPT] 클릭커, 방치형 게임 제작하기 (4) _ 조건 증가, 컨셉 정하기 (0) | 2021.11.05 |
| [HTML, JAVASCRIPT] 클릭커, 방치형 게임 제작해보기 (2) _ Save, Load (2) | 2021.11.03 |
| [HTML, JAVASCRIPT] 클릭커, 방치형 게임 제작해보기 (1) _ 기본 제작 (0) | 2021.11.01 |
