[HTML, JAVASCRIPT] 클릭커, 방치형 게임 제작해보기 ( 1 ) _ 기본틀 만들기
안녕하세요.
지금부터 첫 번째 프로젝트인 클릭커 게임(clicker game) 을 제작해 보도록 하겠습니다.
여러 다양한 제작 방법들을 봤지만.. 가장 쉽다고 생각하는 방법으로 제작하겠습니다. 아직 봐도 이해를 못 하겠기에 쉽지만 난잡한 방법으로 가보도록 하겠습니다.
3가지 준비했습니다. 여러분들도 따라 하실 경우 아무렇게나 만드시면 됩니다.
자 이제 시작해 볼까요??
1. HTML 넣기 (뼈대 만들기)
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<input id="countNum" class="counting" disabled type="text" value="0">
<button class="count" onclick="add()"> Click </button>
<script src="app.js"></script>
</body>
input 태그에는 disabled를 넣은 이유는 input 태그를 클릭하거나 입력하거나 건드리지 못하게 하려는 목적입니다.
저렇게 한다고 css가 안 먹거나 그렇지는 않더라고요.
2. CSS 넣기 (보기쉽게 위치변경)
* {
padding: 0;
margin: 0;
}
div {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.counting {
margin: 12vh auto;
text-align: center;
height: 10vh;
font-size: 2em;
width: auto;
font-weight: 800;
}
.count {
font-size: 2em;
width: 15vh;
height: 10vh;
}class 명은 여러분 편하신 거로 하시면 될 것 같아요. 정답은 없습니다.
https://jjaeho.tistory.com/3 들어가시면 3번째 CSS 방법론을 보시면 이름 짜기 편하실 수도 있습니다.
참고하세요~
3. JAVASCRIPT 넣기 (누르면 숫자 상승 만들기)
var score = 0;
function add() {
score = score + 1;
update()
}
function update() {
document.querySelector("#countNum").value = score;
}
const를 사용 시 되지 않으므로, var를 사용하세요. 그냥 오류 나더라구요..
설명할 능력이 부족합니다.. 😊
추후 많은 것을 추가하기 위해 add와 update로 분류하였습니다.
조금씩 하다 보면 줄이 계속해서 쌓이는데 깔끔하게 하는 방법을 찾아보면서 하겠습니다.
코드를 짜면 이런 식의 모습이 나오게 됩니다. Click 버튼을 누르면 바로바로 카운팅 되어 숫자가 올라간답니다.
벌써 끝입니다..
매우 간단하게 클릭커 게임의 처음을 제작했습니다.
다음 편은 웹 로컬에 스코어를 저장하고 로드하여 테스트하며 제작하기 용이한 상황을 만들겠습니다.
'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] 클릭커, 방치형 게임 제작해보기 (3) _ 구매 제작 (0) | 2021.11.04 |
| [HTML, JAVASCRIPT] 클릭커, 방치형 게임 제작해보기 (2) _ Save, Load (2) | 2021.11.03 |
