이전 글에서 화면은 완성했기 때문에
이번 글부터는 javascript를 이용해서 기능을 넣어 볼 것이다
우선은 처음 게임이 시작할 때 주어지는 단어와 시간 그리고 점수를 화면에 그려 줄 것이다
index.html 이 있는 경로에 가서 js라는 폴더를 만든 후 game.js라는 파일을 만들어 준 뒤 index.html 에 js 파일을 추가해 준다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="main">
<div class="keyWord"></div>
<input type="text" id="word" autocomplete="off">
<div class="timeZone"></div>
<div class="point">
<span>점수 : </span>
<span id="point"></span>
</div>
</div>
<script src="js/game.js"></script>
</body>
</html>저번 글에서 작성했던 html 파일 하단 부분에 game.js 를 추가해 주었다
그다음 game.js를 아래와 같이 작성한다
const startWords = ["우리말", "끝말잇기", "게임"]
const index = Math.floor(Math.random() * 3)
let word = startWords[index]
const keyWord = document.querySelector(".keyWord")
let time = 10
const timeZone = document.querySelector(".timeZone")
const input = document.querySelector("#word")
const pointZone = document.querySelector("#point")
let point = 0
keyWord.innerHTML = word
pointZone.innerHTML = point
input.focus()
const timeCheck = () => {
timeZone.innerHTML = time
if(time === 0) {
clearInterval(start)
input.setAttribute("disabled", true)
alert(`Game Over \npoint : ${point}`)
} else {
time -= 1
}
}
timeCheck()
let start = setInterval(timeCheck, 1000)
ES6부터는 변수 선언에 var가 아닌 let(변수)과 const(상수)를 사용하길 권장한다
우리가 변수를 한번 선언한 뒤 값이 추후에 변할 가능성이 있는 건 let으로 선언하고
한번 선언한 뒤 값이 변하지 않은 것은 const로 선언해 주면 된다
어떤 경우에 써야 하는지 잘 모를 때는 일단은 const로 선언하는 게 좋다
우선 startWords에 처음 시작할 단어를 배열로 생성해준다 우리는 여기에 "우리말", "끝말잇기", "게임"이라는 세 단어를 배열에 추가시켜 줬다
그다음 index라는 변수는 startWords라는 배열에 시작점을 랜덤으로 하기 위해 랜덤 값을 0 ~ 2까지 나오게 만들었다
배열의 시작은 0부터 시작하기 때문이다
시작 단어와 시작할 순번을 정한 뒤 랜덤으로 뽑은 단어를 word라는 변수에 저장시켜 주면 우리는 페이지를 새로 고침 할 때마다 새로운 단어로 게임이 시작되는 걸 확인할 수 있다
그리고 우리가 만들어놓은 html 화면을 컨트롤하기 위해 keyWord, timeZone, input, pointZone이라는 변수에 html로 그려놓은 DOM을 생성해 주고 time이라는 변수에 10이라는 시간을 주고 10초가 지나면 게임이 종료되게 만들 것이다
point라는 변수에는 시작 점수를 입력해 우리가 처음 게임 시작할 때는 0점으로 시작하게 만들었다
그다음 생성한 DOM을 활용해 innerHTML로 화면에 그려 준 뒤 input창에 포커스를 주게 되면 바로 단어를 타이핑할 수 있는 상태가 된 것이다
timeCheck라는 변수에는 시간이 1초씩 감소하며 시간이 0이 됐을 때는 input창을 disabled 상태로 만들고 clearInterval을 이용해 interval을 종료 한 뒤 alert창에 게임이 종료됐다는 문구와 현재 점수가 표시되게 했다
이제 처음 화면에 들어오면 timeCheck()를 호출해 시간을 그려주고 start라는 변수에 setInterval을 줘 1초마다 timeCheck를 호출하게 하면 시간이 1초씩 줄어들고 게임이 자동으로 종료될 것이다
현재는 게임의 시작과 종료만 구현이 된 상태이고 input창에 단어를 입력해도 아무런 동작을 하지 않는다
점수 또한 0점인 상태를 그대로 유지 중이다
다음 글에서는 게임이 제대로 동작하기 위해 API 연동을 진행해 볼 것이다
[javascript] API를 활용해서 컴퓨터와 하는 끝말잇기 게임 만들기(1)
[javascript] API를 활용해서 컴퓨터와 하는 끝말잇기 게임 만들기(1)
javascript와 API를 활용해 컴퓨터와 하는 끝말잇기 게임을 만들어 볼 것이다 위 동영상처럼 잘못 입력하면 재입력을 받고 맞는 단어를 말하면 다음 턴으로 컴퓨터로 넘어가며 내가 말한 단어의 글
ldevlog.tistory.com
[javascript] API를 활용해서 컴퓨터와 하는 끝말잇기 게임 만들기(3)
[javascript] API를 활용해서 컴퓨터와 하는 끝말잇기 게임 만들기(3)
저번 글에서 게임의 시작과 종료를 구현했다 이제는 API를 이용해 단어가 정말 있는 단어인지 아닌지를 확인해서 게임의 기능을 구현할 것이다 우선 API 가져오기 위해 우리말샘이라는 API 제공
ldevlog.tistory.com
'프로그래밍 > javascript' 카테고리의 다른 글
| [javascript] 기명 함수와 익명 함수의 차이점 (feat. 호이스팅) (1) | 2021.08.08 |
|---|---|
| [javascript] API를 활용해서 컴퓨터와 하는 끝말잇기 게임 만들기(3) (1) | 2021.06.28 |
| [javascript] API를 활용해서 컴퓨터와 하는 끝말잇기 게임 만들기(1) (0) | 2021.06.25 |
