[HTML, JAVASCRIPT] 를 이용하여 토끼 클릭커를 만들어보자!!
ver 0.2
안녕하세요. 2일차 바로 진행하도록 하겠습니다. 꼭 저번편을 보셔야 연결이 된답니다.
2021.11.07 - [HTML.CSS.JAVASCRIPT] - [HTML, JAVASCRIPT] 토끼 클릭커를 만들어보자!! ver 0.1
[HTML, JAVASCRIPT] 토끼 클릭커를 만들어보자!! ver 0.1
[HTML, JAVASCRIPT] 를 이용하여 토끼 클릭커를 만들어보자!! ver 0.1 안녕하세요. 오늘부터 토끼 클릭커를 제대로 만들어보겠습니다. 그리고 꾸미기도 하면서 잘 까먹거나, 헷갈릴 수 있는 코드들은 따
jjaeho.tistory.com
Start 2일차
연습용 설명은 https://jjaeho.tistory.com/7 가시면 보실수 있습니다.
- - - - 결과물 - - - -
일단 당근으로 구매 할 수 있는 아이템을 2가지 추가했습니다. 금과 은을 구매하고 추가적으로 금과 은을 사용하여 다른 아이템을 구매 할 수 있는 아이템으로 활용할 예정입니다.
가운데 정렬이 안된 부분은 스크롤을 추가해서 옆으로 넘기기를 만들기를 할 예정이기 때문입니다.
1. HTML
기존에 있는 태그에 새롭게 추가해보았습니다. 중간마다 style이 들어간 경우가 있는데 태그 하나하나에 class를 넣어줄까 하다가 바로 style로 넣어버렸습니다. 여러분들은 이렇게 안하셔도 됩니다.👍
아직도 CSS를 깔끔하게 정리하는 방식이 익숙하지 않네요. 😢
새롭게 추가된 부분은 아이템칸입니다. div태그를 하나에 설명 2줄과 이미지 하나, 버튼하나를 넣어 묶었습니다. 그렇게 해야 한 아이템 같아서 앞으로 다 저렇게 할 예정입니다.
<body>
<div class="app">
<div class="saveOrload">
<button onclick="save()">SAVE</button>
<button onclick="load()">LOAD</button>
</div>
<a href="javascript:void(0);" class="rabbit" onclick="add()"><img src="./rabbit1000.png" alt="rabbit"></a>
<div class="title-score">
<img src="carrot.png" alt="당근">
<input id="carrotCount" class="score" type="text" value="0" disabled>
<p style="font-size: 1.2em;font-weight: 800;">현재</p>
</div>
<div class="store">
<p class="title">시장</p>
<div class="carrotSell">
<div class="store-block">
<p class="title-font">당근으로 금 구매</p>
<p class="title-font">시세 : 50 당근</p>
<p id="nowGold" class="title-font">보유 : 0 금</p>
<img src="gold.png" alt="gold">
<button onclick="buyGold()"> 구매 </button>
</div>
<div class="store-block">
<p class="title-font">당근으로 은 구매</p>
<p class="title-font">시세 : 25 당근</p>
<p id="nowSilver" class="title-font">보유 : 0 은</p>
<img src="silver.png" alt="silver">
<button onclick="buySilver()"> 구매 </button>
</div>
</div>
</div>
<div>
<p style="background-color:bisque;text-align:center;font-weight: 800;font-size: 1.2em;">Rabbit Clicker ver 0.2</p>
</div>
</div>
<script src="app.js"></script>
</body>
2. CSS
정말 많은 부분을 고치거나 추가한 것 같습니다. 😂
평소에 class 이름을 저렇게 짜진 않는데.. 무엇인가 보여주기로 짜야한다는 생각때문에 더 꼬인 것 같습니다.. 다음에는 늘 하는 방식으로 이거보다 깔끔하게 짜보겠습니다... 개인적으로 마음에 안듭니다. (지금꺼를 고치면 되지 않느냐? 귀찮습니다.)
중간마다 box-shadow를 사용했는데 있고 없고 차이가 미세하지만 있습니다. 쉐도우 디자인은 다른 곳에서 참고해서 가져온 것이기에 개인적으로 깔끔합니다.
:hover에서 cursor:pointer를 주면 좀더 클릭하는 느낌이 드니깐 사용해줬습니다.
" hover가 뭐지? ( 마우스를 올렸을 때 이미지의 변화,전환되게 되는 것이라고 생각하면 쉽네요.) "
중간에 store에 white-space : nowrarp; overflow-x : auto; 을 사용해서 html에 태그가 계속 쌓이면 가로 스크롤을 사용하게 해서 옆으로 넘길 수 있게 하기 위함입니다. 아직은 금과 은 뿐이기 때문에 스크롤이 보이지 않는 것입니다.
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background-color: black;
}
.saveOrload {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
padding: 5px;
}
.saveOrload > button {
width: 100px;
height: 30px;
font-size: 1.25em;
font-weight: 800;
background-color: coral;
border-radius: 15px;
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(50, 50, 93, 0.11);
}
.saveOrload > button:hover {
font-size: 1.3em;
font-weight: 900;
cursor: pointer;
}
.app {
background-color: white;
width: 400px;
height: 819.1px;
margin: 0 auto;
}
.rabbit {
width: 400px;
}
.rabbit img {
width: 400px;
}
.title-score {
display: flex;
justify-content: space-around;
align-items: center;
padding: 0.2vh;
background-color: #d7e9c6;
}
.score {
width: 250px;
text-align: center;
font-size: 2em;
font-weight: 800;
background-color: #b3d493;
color: white;
border-top: 1px solid rgb(104, 104, 104);
border-bottom: 1px solid rgb(104, 104, 104);
border-radius: 15px;
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(50, 50, 93, 0.11);
}
.store {
width: auto;
height: auto;
white-space: nowrap;
overflow-x: auto;
background-color: rgb(174, 173, 173);
}
.store .title {
text-align: center;
font-size: 1.2em;
font-weight: 800;
background-color: #ecf3e5;
}
.title-font {
font-size: 1.1em;
font-weight: 600;
}
.carrotSell {
display: flex;
}
.carrotSell > .store-block {
display: grid;
gap: 3.4px;
text-align: center;
justify-items: center;
padding: 1vh;
margin: 1.5vh;
align-items: center;
width: 130px;
height: auto;
background-color: #ecf3e5;
border-radius: 15px;
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(50, 50, 93, 0.11);
}
.carrotSell > .store-block > button {
font-size: 1.2em;
background-color: #b3d493;
font-weight: 500;
width: 60px;
border-top: 1px dotted black;
border-bottom: 1px dotted black;
border-radius: 15px;
}
.carrotSell > .store-block > button:hover {
font-size: 1.2em;
background-color: #9dc07b;
font-weight: 600;
width: 60px;
border-top: 1px dotted black;
border-bottom: 1px dotted black;
border-radius: 15px;
cursor: pointer;
}
3. javascript
변수 gold와 silver를 추가해주었습니다. 함수로 buyGold,Silver를 만들었는데 거기에 if문을 꼭 넣어줘야합니다. 정리하자면
( 만약 당근이 50개보다 같거나 많으면 50개를 지우고 금을 1개 추가한다. 당근이 50개보다 적다면 "당근이 부족해!" 라고 경고창이 뜬다. )
정리 : 앞으로 계속 추가해줄 요소들은 전부 변수를 추가해주고, 구매 물품일 경우 if문을 사용해줘야하며, if문에 마무리는 항상 update()를 해줘야 계속해서 최신화가 된다. 그리고 save와 load를 사용하려면 모든 변수(var)를 저장해줘야한다. parseInt를 사용해야 불러오기할 경우 NaN이 뜨지않는다.
var carrot = 0;
var gold = 0;
var silver = 0;
function update(){
document.querySelector("#carrotCount").value = carrot.toLocaleString();
document.querySelector("#nowSilver").innerHTML= "보유 : "+silver + " 은";
document.querySelector("#nowGold").innerHTML= "보유 : "+gold + " 금";
}
function add(){
carrot = carrot + 1;
update()
}
function buyGold(){
if (carrot >= 50){
carrot = carrot - 50;
gold = gold + 1;
} else {
alert("당근이 부족해!");
}
update()
}
function buySilver(){
if(carrot >=25){
carrot = carrot - 25;
silver = silver + 1;
} else {
alert("당근이 부족해!");
}
update()
}
function save() {
alert("저장 성공!");
localStorage.setItem("carrot", carrot);
localStorage.setItem("gold", gold);
localStorage.setItem("silver", silver);
}
function load() {
alert("불러오기 성공!");
carrot = localStorage.getItem("carrot");
carrot = parseInt(carrot);
gold = localStorage.getItem("gold");
gold = parseInt(gold);
silver = localStorage.getItem("silver");
silver = parseInt(silver);
update()
}
이렇게 2일차 제작이 끝이 났습니다. 👍
점점 코드가 길어지면 길어질수록 게시물 올리면 보시는 분들이 눈이 아플 것 같습니다..
특히 CSS는 엄청 길어질 것 같아서 CSS는 파일으로 올릴까도 생각중입니다.
일단 앞으로 조금씩 잘라서 올려보도록 하겠습니다.
잘라서 올리게 되면 꾸준히 전편을 참고하셔야 합니다. 😎
'HTML,CSS,JavaScript > HTMLGAME' 카테고리의 다른 글
| [HTML, JAVASCRIPT] 토끼 클릭커를 만들어보자!! ver 0.4 (0) | 2021.11.10 |
|---|---|
| [HTML, JAVASCRIPT] 토끼 클릭커를 만들어보자!! ver 0.3 (0) | 2021.11.09 |
| [HTML, JAVASCRIPT] 토끼 클릭커를 만들어보자!! ver 0.1 (0) | 2021.11.07 |
| [HTML, JAVASCRIPT] 클릭커, 방치형 게임 제작하기 (4) _ 조건 증가, 컨셉 정하기 (0) | 2021.11.05 |
| [HTML, JAVASCRIPT] 클릭커, 방치형 게임 제작해보기 (3) _ 구매 제작 (0) | 2021.11.04 |
