밑의 글로 내려가기전 이 글을 먼저 읽어보는걸 추천 드립니다.
게임 만들며 자바스크립트 배우기(0/7)
웹 개발을 독학하며 배우고 있습니다. FreeCodeCamp 커리큘럼을 따라가고 있고, 6개의 인증서를 다 받으면 풀스택이 될 수 있다고 하네요. 2번째 인증서까지 받았고 다음 부트스트랩으로 넘어가기전
forgottenknowledge.tistory.com
이번에 만든 게임은 두더지잡기(Whack a mole)을 변형한 모기잡기(Whack a mozzie) 입니다.
모기를 너무 싫어한 나머지 두더지 대신 모기를 집어넣었습니다.
결과물
코딩에 들어가기전 준비물
두더지, 모기, 과일, 생선 등 원하는 테마 생각. 여기선 모기잡기로 설명합니다
1. 정사각형 모기 이미지 사이즈 :150x150px 이상
2. 정사각형 배경 2000x2000px 썼습니다.
총 2개의 이미지를 코딩을 하게될 폴더에 images 폴더를 새로만들어서 넣어두면 준비끝!
밑의 함수들을 사용하게 됩니다.
미리 알고 있으면 편하게 볼 수 있을거에요
• querySelector()
• addEventListener()
• setInterval()
• classList
• forEach()
• Arrow functions
그럼 HTML 부터 시작합니다.
HTML
<html>
<head>
<meta charset="utf-8">
<title>WHACK A MOZZIE!</title>
//CSS 연결은 위에서, script 연결은 맨 하단
<link rel="stylesheet" href="style.css">
</head>
<body>
//글자색 바꾸기 위해 클래스 지정
<h1><span class="red">WHACK</span><span class="blue"> A </span><span class="red">MOZZIE</span></h1>
//시간과 점수가 표시될 거에요
<div id="status">
<h2>Seconds left: <span id="time-left">10</span></h2>
<h2>Your Score: <span id="score">0</span></h2>
</div>
//게임시작 버튼을 누르면 mozzieMove() 시작. 자바스크립트 파일에서 확인
<button onclick="mozzieMove()">GAME START</button>
//모기가 나올 곳 만들어주기
<div class="grid">
<div class="square" id="1"></div>
<div class="square" id="2"></div>
<div class="square" id="3"></div>
<div class="square" id="4"></div>
<div class="square" id="5"></div>
<div class="square" id="6"></div>
<div class="square" id="7"></div>
<div class="square" id="8"></div>
<div class="square" id="9"></div>
<div class="square" id="10"></div>
<div class="square" id="11"></div>
<div class="square" id="12"></div>
<div class="square" id="13"></div>
<div class="square" id="14"></div>
<div class="square" id="15"></div>
<div class="square" id="16"></div>
</div>
</body>
//html보다 더 늦게 실행되야 되어서 제일 하단에 연결
<script src="script.js" charset="utf-8"></script>
</html>
CSS
//margin과 padding을 리셋(0으로) 해주고, 글씨체 바꾸기
//원하는 글씨체로 바꾸면 됩니다.
*{
margin: 0;
padding: 0;
font-family: "Comic Sans MS", cursive, sans-serif;
}
//화면 중앙으로 정렬
body{
text-align: center;
}
//제목 (WHACK A MOZZIE)
h1 {
margin: 15px;
font-size: 42px;
}
//모기가 들어갈 사각형
.square {
width: 150px;
height: 150px;
border-style: solid;
border-color: #000;
border-width: 2px;
}
//버튼 사이즈 조정
button {
font-size: 30px;
}
//시간과 점수가 표시될 곳. 모기가 나오는 곳과 가로 사이즈 동일
#status {
width: 616px;
display: flex;
justify-content: space-between;
margin: 10px auto;
}
//시간과 점수 글씨
#status h2{
border: solid;
width: 300px;
padding: 10px 0;
font-weight: 900;
}
//타이틀에 색상
.red {
color: #c92828;
}
.blue {
color: #223999;
}
//모기가 나오는 곳. 배경 이미지, flex로 정렬, margin으로 화면 가운데 정렬
.grid {
background: url("familyFeet.jpg");
background-size: contain;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
width: 616px;
height: 616px;
margin: 10px auto;
}
//images 폴더에 있는 모기 아이콘을 가져와서 사각형크기에 맞게 cover 이용
.mozzie{
background-image: url("mozzieColor.png");
background-size: cover;
}
JAVASCRIPT
//사용할 클래스, 아이디를 변수에 저장해놓기
//querySelector는 class, id 등 css를 지정한다.
const square = document.querySelectorAll('.square');
const mozzie = document.querySelectorAll('.mozzie');
const timeLeft = document.querySelector('#time-left');
let score = document.querySelector('#score');
//모기를 잡을 때 마다 올라가는 스코어를 위해
let result = 0;
//현재 타임은 미리 html에 60을 적어놓아서 textContent로 currentTime에 저장
let currentTime = timeLeft.textContent;
//클릭 된 위치와 비교 될 변수
let hitPosition;
//모기를 랜덤한 위치에 만들어 주는 함수
function randomSquare() {
//모든 위치에서 모기를 지워주는 반복문을 forEach로 실행
//모기가 한 마리씩 나오기 때문에 항상 리셋해주는 것
square.forEach(className => {
className.classList.remove('mozzie');
})
//0~15까지 16개의 정수를 만들어 square에 저장
let randomPosition = square[Math.floor(Math.random() * 16)];
//해당 위치에 classList로 'mozzie' 클래스를 만들어준다.
//예를들어 square[5]가 앞에 저장됬으면 해당 square[5] class='mozzie'가 되는것
randomPosition.classList.add('mozzie');
//앞의 예를 이어서 square[5]면 square에 id 6이 저장된다. 배열은 0부터 시작하니까
hitPosition = randomPosition.id;
}
//클릭된 곳이 모기가 있으면 점수를 올려주는 부분
square.forEach(id => {
//네모에 클릭이 되면 실행되는 이벤트
id.addEventListener('mouseup', () =>{
//id의 id와 앞에서 저장된 모기의 위치가 같으면 밑의 내용을 실행
if(id.id === hitPosition) {
//result에 1을 올리고, 보여지게 될 score에 입력
result = result + 1;
score.textContent = result;
//잡은 모기는 화면에서 없애준다.
id.classList.remove('mozzie');
}
})
})
//timerId 변수를 만들어주고
let timerId = null;
//앞에까진 함수만 넣은거고 이제는 지정된 시간마다 모기가 나오게 도와줄 함수
function mozzieMove() {
//1000(1초) 마다 randomSquare(), countDown()실행.
timerId = setInterval(function() {
randomSquare();
countDown();
}, 1000);
}
//카운트다운 해주는 함수
function countDown() {
//1 빼주고. textContent를 이용해서 화면에 출력
//위의 mozzieMove()에서 1초에 한번씩 실행하라고 했으니 계속 1씩 마이너스
currentTime--;
timeLeft.textContent = currentTime;
//1초씩 빠지다가 0에 도달하면 실행
if(currentTime === 0){
//1초씩 실행하는 Interval을 없애주는 clearInterval
clearInterval(timerId);
//전체 얻은 점수를 alert에 띄운다
alert('Game over. Your score is ' + result);
}
}
'Web Dev > JavaScript :: 자바스크립트' 카테고리의 다른 글
| [Javascript] 클로저 closure 이란? (0) | 2020.06.21 |
|---|---|
| 자바스크립트로 게임만들기 (4/7) 뱀 게임 - 뭘 배웠지? (0) | 2020.06.04 |
| [Javascript] 반올림 함수 Math.round() (0) | 2020.04.27 |
| [Javascript] Arguments 배열로 만드는 3가지 방법 (0) | 2020.04.21 |
| [Javascript] Math.pow() 는 제곱 해준다 (0) | 2020.04.19 |