[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 - 내일 올리기

단어 제시하기

HTML

<div class="word-display"> 단어 </div>	.word-disply 단어를 제시하는 공간

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명을 붙여준다.

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)으로 설정