Javascript로 음.. 두더지게임을 만들어봤습니다.
그런데, 맥북에 두더지 아이콘을 못찾겠어서, 곱등이로.. 아이콘을 바꿧으니, 곱등이게임이되겠죠?ㅋㅋ
아무튼 !
살펴봅시다 !
0. 곱등이게임영상
1. 순서도
처음에, 틱택토 응용해서 3x3칸을 만들려고했습니다. 그런데, 생각해보니 HTML로 화면을 만들면 훨씬 간편하잖아요?
그래서 굳이, JS로 만들 필요성을 못느껴서, HTML로 직접 만들어주고, 시작했습니다.
2. humble.html (곱등이 = humble);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>곱등이잡기게임</title>
<link rel="stylesheet" href="humble.css">
</head>
<body>
<div class='header'>
<div class='score'>점수표</div>
</div>
<div class='screen'>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</div>
<button class='game_starter'>게임시작 !</button>
<script src="humble.js"></script>
</body>
</html>3 X 3 칸과, 점수를 넣을 칸, 그리고, 게임시작버튼 등을 만들고 humble.js를 임포트 + humble.css를 임포트해왔습니다.
2. humble.js
let score = document.querySelector('.score');
let blanks = document.querySelectorAll('.screen table tr td');
let game_start_btn = document.querySelector('.game_starter');
let score_result = 0;
//게임시작
const 게임시작 = () => {
blanks.forEach((td)=>{
setInterval(()=>{
td.textContent = '';
}, 1000);
});
setInterval(()=>{
let random = Math.floor(Math.random() * 9);
blanks[random].textContent = '🦗';
}, 2000);
}
const 곱등이죽이기 = () => {
blanks.forEach((td)=>{
td.textContent = '';
})
}
const 초기화 = () => {
window.location.reload();
}
//게임진행.
blanks.forEach((td)=>{
td.addEventListener('click', (event)=>{
if(event.currentTarget.textContent === '🦗'){
//두더지를 잡았을 때, 스코어 올리고 -> x를 없애준다.(초기화)
score_result += 1;
score.textContent = `Your Score : ${score_result}`;
곱등이죽이기();
} else {
//두더지를 잡지 못했을 때,
score_result -= 1;
score.textContent = `Your Score : ${score_result}`;
곱등이죽이기();
}
if(score_result < 0){
//게임오버;
alert('Game Over !');
초기화();
}
});
});
//게임시작 버튼을 눌렀을 때,
game_start_btn.addEventListener('click', ()=>{
게임시작();
})우선, 자주 쓰일것 같은, 점수창, 각 td를 선택, 게임스타트버튼, 점수를 기록할 score_result를 변수로 선언해줬습니다.
그리고, 함수형으로 프로그래밍했는데요.
1. 게임시작()함수를 볼까요? setInterval로, 매 1초마다 모든 td를 비워줄 수 있도록 했습니다. 그리고 또, setInterval로 매 2초마다, 곱등이를 등장하게 해줬습니다. 그럼 곱등이가 깜빡깜빡 나타났다가 사라졌다가 하게 할 수 있겠죠?
2. 곱등이죽이기() << 이 함수는, 사용자가 게임중에 곱등이를 두번클릭하면 점수가 여러번 오르는 문제가 있습니다. 따라서, 사용자가 곱등이를 클릭하면, 동시에 곱등이가 죽고 사라져야합니다. 그래서 이 함수에서는 곱등이를 클릭하면, 곱등이를 죽이는 함수를 만들어줬습니다.
3. 초기화() << 초기화함수는, 게임이 끝났을 때, 새로고침하는 함수입니다. window.location.reload() << 명령어를 통해, 새로고침 할 수 있습니다.
**원래 두더지게임을 만들려다가, 아이콘이 없어서 곱등이로 변신한거라.. 곱등이 === 두더지 라고 생각하시면 됩니다.
4. 게임진행. 이부분에서는 모든, td태그들을 가져오고, 클릭 이벤트리스너를 달아줬습니다.
5. 이벤트리스너에는, 만약, currentTarget에 곱등이가 나타난 부분이라면, 점수를 올리고, 그 점수를 반영해 점수표에 넣어주고, 그리고 곱등이죽이기()함수를 이용해서, 곱등이를 사라지게 해줬습니다.
6. 그리고 만약, 곱등이를 잡지 못하고 엉뚱한 화면을 클릭했을 때는 점수를 -1 해주고, 점수를 점수표에 반영해 준뒤, 현재 있는 곱등이를 사라지게 해줬습니다.
7. 지속적으로 score << 점수를 감시하면서, 점수가 0보다 적을 때 '게임오버'할 수 있도록 해주고(alert창), 게임을 초기화(); 즉, 새로고침 시켜줍니다.
8. 게임시작버튼을 누르면, 게임시작()함수를 이용해서, 게임을 시작해줍니다.
3. humble.css
body{
background: url('./forest.jpg');
}
.screen{
display: flex;
justify-content: center;
}
td{
border: 1px solid black;
width: 150px;
height: 150px;
text-align: center;
font-size: 60px;
font-weight: bold;
user-select: none;
}
.game_starter{
background: url('./forest.jpg');
width: 500px;
height: 100px;
font-size: 35px;
text-align: center;
display: block;
margin: 0px auto;
}
.header{
display: flex;
justify-content: center;
}
.score{
display: inline-block;
width: 400px;
border: 1px solid black;
text-align: center;
font-size: 25px;
font-weight: bolder;
}css는 즉흥적으로 찾아보고 한거라 따로 설명드릴 내용이 없을것 같네요 ㅠㅠ..
아무튼, 이렇게해서 곱등이 게임을 완성시켰습니다 ^ㅇ^ !
'Web Development > Front-end' 카테고리의 다른 글
| Reset CSS File (0) | 2020.11.13 |
|---|---|
| 2. CSS (0) | 2020.11.09 |
| [Zerocho-14] EventListener(keyup&down) & 증감연산자(전위형/후위형) & Blocking / Non-Blocking & 이벤트루프 (0) | 2020.10.30 |
| [Javascript] 계산기만들기 (0) | 2020.10.30 |
| [Zerocho-13] 2048 (MouseEvent, Switch) (0) | 2020.10.29 |
