[javascript] addEventListener keydown으로 간단 게임구현하기(1)
[javascript] addEventListener keydown으로 간단 게임구현하기(1) — #javascript #addEventListener #keydown 학습목표 HTML속성중 onclick속성이 있다. 이 속성 안에 js...
#Languages#Naver Blog
#javascript #addEventListener #keydown
학습목표
HTML속성중 onclick속성이 있다. 이 속성 안에 js로 함수를 만들어 좋아요 클릭시 발생하는 이벤트를 만들어 볼 것 이다.
첨부파일
js game layout
.zip
//gif - 내일 올리기
- 위에 제시된 단어와 동일하게 단어를 입력했을 경우 점수를 +1, 틀렸을 경우 -1 하도록 구현할 것이다.
- 각 단어마다 시간은 10초로 세팅하고 맞을 경우 다시 10초 부터 시작하도록 구현할 것이다.
- 0초가되면 오버되면 GAME OVER메세지가 뜨도록 구현할 것이다.
단어 제시하기
HTML
| <div class="word-display"> 단어 </div> | .word-disply 단어를 제시하는 공간 |
|---|
JS
| const wordDisplay = document.querySelector(".word-display");let wordList = \["apple","banana","orange","mango"\];let count = 0; wordDisplay.innerText = wordList\[count\]; | DOM.word-diplay를 찾아준다.Array(배열)wordList 배열을 만들어 단어를 넣어준다.속성변경wordDisplay안의 글자를 wordList배열의 count 번째 요소로 표기한다. |
|---|
input요소 제어하기
HTML
| <input type="text" class="word-input"> | input.word-input으로 class명을 붙여준다. |
|---|
JS
| const wordInput = doocument.querySelector(".word-input");wordInput.addEventListener('keydown',function(){ }) | DOM.word-input 을 찾아준다.DOM.addEventListener keydown을 활용하여 함수를 실행한다. |
|---|
function (1)ENTER 입력감지
| if(~~event~~.code === "Enter") |
|---|
input에 작성된 텍스트가 저장되는 곳
| wordInput.value | input 텍스트 박스에 사용자가 입력하는 값이 저장되는 곳 |
|---|
function (2)입력값 = 제시단어 판별
| if(wordInput.value === wordDisplay.innerText){ }; | 조건: 사용자의 입력값과 제시된 단어의 글자가 같나요? |
|---|
if 조건문 true일 경우 점수 추가
HTML
| <div class="game-info"> <p>점수 : <span class="score">0</span>점</p> </div> | 점수가 표기될 곳에 <span>으로 묶기점수에 클래스 추가 = .score |
|---|
if조건이 true일 경우 1).score
| const score = document.querySelector('.score'); let score\_count = 0; if(event.code === "Enter"){ if(wordInput.value === wordDisplay.innerText){ score\_count++; score.innerText = score\_count; }; } | DOM.score 찾아주기score\_count = 0; 으로 주기if문 실행score\_count ++; => 입력값 =제시단어 일때 점수 1점씩.score 글자 변경 |
|---|
10초 카운트 다운 구현
HTML
| <p>남은시간: <span class="time">0</span>초 </p> | 남은 초가 표기될 곳에 <span>span에 .time 클래스 추가 |
|---|
JS - setInterval
| const time = document.querySelector('.time');let DEFAULT\_TIME = 10;let time\_left = DEFAULT\_TIME;let timeInterval = setInterval(function(){ time\_left--; time.innerText= time\_left;}, 1000) | DOM.time 찾아주기DEFAULT\_TIME = 10으로 주기 ->자주쓰일거라서time\_left줘서 남는시간 표시setInterval함수를 특정시간 뒤에 실행하는 기능(비동기)1000 = 1s를 의미 , <- 잘 보기1초마다 -1씩 감소한다. |
|---|
0초시 초기화 + "GAME OVER!!" 경고창 띄우기
| if(time\_left === 0){ clearInterval(timeInterval); alert("GAME OVER!!"); } | clearIntervalsetInterval을 초기화 시키는 함수alert 경고창 추가 |
|---|
정답시 시간초 초기화
if(제시어=입력어) function안으로 가서 초기화 해주기
| wordInput.addEventListener('keydown',function(){ if(event.code === "Enter"){ if(wordInput.value === wordDisplay.innerText){ time.innerText = DEFAULT\_TIME; time\_left = DEFAULT\_TIME; }; }}) | time.innerText -> 단순 눈에 보이는 글자만 변경time\_left -> 변수 변경 (진짜시간)모두 DEFAULT\_TIME(=10)으로 설정 |
|---|