바닐라 자바스크립트 타자게임

바닐라 자바스크립트로 구현해본 타자게임!

 

자바스크립트의 능력을 위해 따라해보며 배운 코드

 

js 

js코드

let score=0;
const GAME_TIME=5;
let isPlaying=false;
let timeInterval;
let words=[];
let checkInterval;

const wordInput=document.querySelector('.word-input');			//단어 입력 input
const wordDisplay=document.querySelector('.word-display');		//단어 보여주는 div
const scoreView=document.querySelector('.score');				//점수
const timeView=document.querySelector('.time');					//시간
const button=document.querySelector('.button');					//시작 버튼


init();
//맨처음 실행될
function init(){
	buttonChange('게임로딩중...')
	getwords()	
	wordInput.addEventListener( "input",checkMatch);
}

//버튼 클릭시 시작
function run(){	
	if(isPlaying){
		return;
	}
	isPlaying=true;
	time=GAME_TIME;
	wordInput.focus();
	timeInterval=setInterval(countDown,1000);
	checkInterval=setInterval(checkStatus,50);
	buttonChange('게임중');
}

// setInterval에서 체크할 현 상황
function checkStatus(){
	if(!isPlaying && time===0){
		buttonChange('게임시작');
		clearInterval(checkInterval);
	}
}


// 단어 불러오기
function getwords(){
axios.get('https://random-word-api.herokuapp.com/word?number=100')  // 단어 랜덤 api
  .then(function (response) {
  	response.data.forEach((word)=>{
  	if(word.length<10){
  		words.push(word);
  	}
  	})
    // handle success
   buttonChange('게임시작');
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
	
}
// 단어 일치 체크
function checkMatch(){
	if(wordInput.value.toLowerCase() === wordDisplay.innerText.toLowerCase()){
		wordInput.value="";
		if(!isPlaying){
			return;
		}
		score++;
		scoreView.innerText=score;
		time=GAME_TIME;
		const randomIndex= Math.floor( Math.random()*words.length);
		wordDisplay.innerText=words[randomIndex];
}
}


//초 계산
function countDown() {
	time>0?time--:isPlaying=false;
	if(!isPlaying){
		clearInterval(timeInterval);
	}
	timeView.innerText=time;
}

// 버튼 이름 및 클래스 추가,삭제
function buttonChange(text){
	button.innerText=text;
	text==='게임시작'? button.classList.remove('loading'):button.classList.add('loading');
}

 

 

설명을 해보자면

 

 init 실행으로 인해 buttonChange함수에 게임로딩중으로 변경하여 loding 클래스 추가(css에서 loading클래스에 cursor:not-allowd)

 

그후 api 통해 단어를 받아오는 getwords 실행 다 받아오게 되면 게임시작으로 buttonChange함수 실행 loding 클래스 삭제

 

wordinput input이 오면 실행중이 아니면 return

 

버튼 클릭시 run 실행

 

true로 변경하고 카운트다운, 현상황 setInterval로 확인 buttonChange 게임중으로 변경