본문 바로가기
알토르

알토르 1주차 - Typing Game 4

orkrro 2025. 8. 13. 09:56 
const wordDisplay = document.querySelector('.word-display');
const wordInput = document.querySelector('#word-input');
const score = document.querySelector('.score');
const time = document.querySelector('.time');
const DEFAULT_TIME = 8;
let wordList = ['apple', 'banana', 'cherry', 'pale', 'blueberry'];
alert(wordList.length);
let count = 0;
let time_left = DEFAULT_TIME;
console.dir(score, time);


wordDisplay.innerText = wordList[0];
time.innerText = DEFAULT_TIME;

wordInput.addEventListener("keydown", function(event) { 
    if(event.key === 'Enter') {
        if (wordInput.value === wordDisplay.innerText) {
            count++;
            if ( count === wordList.length ) {
                alert ("Game Over");
                wordInput.disabled = true;
                score.innerText = count;
                clearInterval(timeInterval); // 카운트 타운 정지
                return;                      // 뒤에 있는 소스 진행 막기 위해 종료
            }
            wordDisplay.innerText = wordList[count]; // 다음 단어 보이도록
            wordInput.value='';                      // 사용자가 input태그에 작성한 값을 빈값으로 변경
            score.innerText= count;                  // score값에 count값 대입
            time.innerText = DEFAULT_TIME;           // time값에 Default_time 대입
            time_left = DEFAULT_TIME;                // 남은 시간 초기화
            }
        }
})

const timeInterval = setInterval(function(){  // 비동기 실행 1초에 한번씩 함수 실행
    time_left--;                            // 남은 시간 1초 감소
    time.innerText = time_left;             // time값에 time_left 값으로 대입
    if (time_left === 0) {                  // 남은 시간 0인 경우 setinterval 종료
        clearInterval(timeInterval);
    }
}, 1000)​
wordInput.addEventListener("keydown", function(event) { 
    if(event.key === 'Enter') {
        if (wordInput.value === wordDisplay.innerText) {
            count++;
            if ( count === wordList.length ) {
                alert ("Game Over"); <<<<<<<<<<<< 게임 오버 알림
                wordInput.disabled = true; <<<<<< 텍스트 입력 비활성화
            }
            wordDisplay.innerText = wordList[count];
            wordInput.value='';
            score.innerText= count;
            time.innerText = DEFAULT_TIME;
            time_left = DEFAULT_TIME;
            }
        }
})​
const wordDisplay = document.querySelector('.word-display');
const wordInput = document.querySelector('#word-input');
const score = document.querySelector('.score');
const time = document.querySelector('.time');

console.log(time);

let wordList = ['apple', 'banana', 'cherry', 'pale', 'blueberry',];
let count = 0;
let tume_left = 10;
console.dir(score, time);


wordDisplay.innerText = wordList[0];
time.innerText = 10;

wordInput.addEventListener("keydown", function(event) { 
    if(event.key === 'Enter') {
        if (wordInput.value === wordDisplay.innerText) {
            count++;
            wordDisplay.innerText = wordList[count];
            wordInput.value='';
            score.innerText= count;
            }
        }
})

let timeInterval = setInterval(function(){
    console.log("1초마다 실행중```");
}, 1000)

 

 

 

 

 

 

 

const score = document.querySelector('.score');
const time = document.querySelector('.time');


wordDisplay.innerText = wordList[0];
time.innerText = 10;

wordInput.addEventListener("keydown", function(event) { 
    if(event.key === 'Enter') {
        if (wordInput.value === wordDisplay.innerText) {
            count++;
            wordDisplay.innerText = wordList[count];
            wordInput.value='';
            score.innerText= count;
            }
        }
})

let timeInterval = setInterval(function(){
    time_left--;
    console.log(time_left);
    time.innerText = time_left;
}, 1000)

 

 

 

 

 

 

 

 

 

const wordDisplay = document.querySelector('.word-display');
const wordInput = document.querySelector('#word-input');
const score = document.querySelector('.score');
const time = document.querySelector('.time');
let wordList = ['apple', 'banana', 'cherry', 'pale', 'blueberry'];
<<<
let count = 0;
let time_left = 10;
<<<


wordDisplay.innerText = wordList[0];
<<<
time.innerText = 10;
<<<
wordInput.addEventListener("keydown", function(event) { 
    if(event.key === 'Enter') {
        if (wordInput.value === wordDisplay.innerText) {
            count++;
            wordDisplay.innerText = wordList[count];
            wordInput.value='';
            score.innerText= count;

<<<		time.innerText = 10;
<<<         time_left = 10;
            }
        }
})

<<<<
let timeInterval = setInterval(function(){
    time_left--;
    time.innerText = time_left;
    if (time_left === 0) {
        clearInterval(timeInterval);
    }

 

 

 

 

 

 

 

 

 

 

const wordDisplay = document.querySelector('.word-display');
const wordInput = document.querySelector('#word-input');
const score = document.querySelector('.score');
const time = document.querySelector('.time');
const DEFAULT_TIME = 10; <<<<<------>>>>>
let wordList = ['apple', 'banana', 'cherry', 'pale', 'blueberry',];
let count = 0;
let time_left = DEFAULT_TIME;<<<<<<<
console.dir(score, time);


wordDisplay.innerText = wordList[0];
time.innerText = DEFAULT_TIME; <<<<<<<<<<<

wordInput.addEventListener("keydown", function(event) { 
    if(event.key === 'Enter') {
        if (wordInput.value === wordDisplay.innerText) {
            count++;
            wordDisplay.innerText = wordList[count];
            wordInput.value='';
            score.innerText= count;
            time.innerText = DEFAULT_TIME;<<<<<<<<<<<
            time_left = DEFAULT_TIME;<<<<<<<<<<
            }
        }
})

let timeInterval = setInterval(function(){
    time_left--;
    time.innerText = time_left;
    if (time_left === 0) {
        clearInterval(timeInterval);
    }
}, 1000)

 

 

DEFAULT_TIME = 설정으로 1번만 수정 시 전체 변경 가능

 

 

 

 

wordList 마무리 시, 게임 종료 선언 필요

 

 

 

    <input type="text" id="word-input" placeholder="Type here..." disabled >
    
    disabled 시 INPUT TEXT 비활성화

 

 

종료 시 비활성화 조건 필요
조건 탐색

 

if ( count === wordList.length ) {

    /// disabled 처리

 

}

 

 

let wordList = ['apple', 'banana', 'cherry', 'pale', 'blueberry'];
alert(wordList.length);

 

 

    

 

 

 

 

 

 

 

wordInput.addEventListener("keydown", function(event) { 
    if(event.key === 'Enter') {
        if (wordInput.value === wordDisplay.innerText) {
            count++;
            if ( count === wordList.length ) {
                alert ("Game Over");
            }
            wordDisplay.innerText = wordList[count];
            wordInput.value='';
            score.innerText= count;
            time.innerText = DEFAULT_TIME;
            time_left = DEFAULT_TIME;
            }
        }
})

 

 

 

 

 

 

 

wordDisplay.innerText = wordList[0];
time.innerText = DEFAULT_TIME;

wordInput.addEventListener("keydown", function(event) { 
    if(event.key === 'Enter') {
        if (wordInput.value === wordDisplay.innerText) {
            count++;
            if ( count === wordList.length ) {
                alert ("Game Over");         <<<<<<< 게임 오버 알림
                wordInput.disabled === true; <<<<<<< 텍스트 인풋 비활성화 / 타입 안정성 === 사용 권장
            	return false;                <<<<<<< 함수 종료 후 fasle 값 반환 / 점수: 4로 멈춤 
            }                                <<<<<<< 게임 종료 상태를 false로 즉,종료로 전달 
            								 <<<<<<< return true인 경우, 게임 진행 상태로 전달
            wordDisplay.innerText = wordList[count];
            wordInput.value='';
            score.innerText= count;
            time.innerText = DEFAULT_TIME;
            time_left = DEFAULT_TIME;
            }
        }
})

 

게임 오버 알림 후 텍스트 인풋 비활성화 확인

 

 

 

wordInput.addEventListener("keydown", function(event) { 
    if(event.key === 'Enter') {
        if (wordInput.value === wordDisplay.innerText) {
            count++;
            if ( count === wordList.length ) {
                alert ("Game Over");
                wordInput.disabled = true; <<<< 텍스트 비활성화
                score.innerText = count;   <<<< 최종 점수 표시 
                return;                    <<<< 아무 값 반환하지 않고 함수 종료
            }

 

 

 

 

 

const wordDisplay = document.querySelector('.word-display');
// 클래스가 word-display인 태그를 잡아서 박스에 넣음
const wordInput = document.querySelector('#word-input');
// 아이디가 word-input인 태그를 잡아서 박스에 넣음
const score = document.querySelector('.score');
// 클래스가 score인 태그를 잡아서 박스에 넣음
const time = document.querySelector('.time');
// 클래스가 time인 태그를 잡아서 박스에 넣음
const DEFAULT_TIME = 8;
// 기본시간을 DEFAULT_TIME에서 관리
let wordList = ['apple', 'banana', 'cherry', 'pale', 'blueberry'];
// wordList 박스에 배열형태가지고 문자열값 저장
alert(wordList.length);
let count = 0;
// count 변수는 wordList에 있는 값 접근 위해
// 
let time_left = DEFAULT_TIME;
// 카운트다운 되는 숫자 저장 위한 박스
console.dir(score, time);


wordDisplay.innerText = wordList[0];
// 기본값 선언 -> '단어'에 wordList[0] 배열 값 대입
time.innerText = DEFAULT_TIME;
// 기본값 선언 -> 남은 시간에 텍스트값을 디폴트 타임 변수에 설정한 값으로 대입

wordInput.addEventListener("keydown", function(event) { 
// input 태그에 keydown이라는 이벤트 발생 여부 리스너 추가 -> fuction  실행
    if(event.key === 'Enter') { // event라는 오브젝트 안에 key,code값이 Enter 여부 체크
        if (wordInput.value === wordDisplay.innerText) {
            count++;
            if ( count === wordList.length ) {
                alert ("Game Over");
                wordInput.disabled = true;
                score.innerText = count;
                return;
            }
            wordDisplay.innerText = wordList[count];
            wordInput.value='';
            score.innerText= count;
            time.innerText = DEFAULT_TIME;
            time_left = DEFAULT_TIME;
            }
        }
})

let timeInterval = setInterval(function(){
    time_left--;
    time.innerText = time_left;
    if (time_left === 0) {
        clearInterval(timeInterval);
    }
}, 1000)
    
    


// wordInput.addEventListener("keydown", function() {
//    alert("pressed"); 
// })

 

 

추가 예정)

1. 타임 아웃 시 -> 게임 오버

2. reset버튼 시 -> 게임 리셋

3. 디폴트 시간 점점 줄이기

 

 

 

const wordDisplay = document.querySelector('.word-display');
const wordInput = document.querySelector('#word-input');
const score = document.querySelector('.score');
const time = document.querySelector('.time');
const DEFAULT_TIME = 8;
let wordList = ['apple', 'banana', 'cherry', 'pale', 'blueberry'];
alert(wordList.length);
let count = 0;
let time_left = DEFAULT_TIME;
console.dir(score, time);


wordDisplay.innerText = wordList[0];
time.innerText = DEFAULT_TIME;

wordInput.addEventListener("keydown", function(event) { 
    if(event.key === 'Enter') {
        if (wordInput.value === wordDisplay.innerText) {
            count++;
            if ( count === wordList.length ) {
                alert ("Game Over");
                wordInput.disabled = true;
                score.innerText = count;
                clearInterval(timeInterval);
                return;
            }
            wordDisplay.innerText = wordList[count];
            wordInput.value=''; // 사용자가 input태그에 입력한 값을 빈값으로 대입
            score.innerText= count; 
            time.innerText = DEFAULT_TIME; // 시간을 DEFAULT_TIME으로 대입
            time_left = DEFAULT_TIME; // 남은 시간 초기화
            }
        }
})

const timeInterval = setInterval(function(){
      time_left--;
      time.innerText = time_left;
      if (time_left === 0) {
         clearInterval(timeInterval); // setInterval 종료
    }
}, 1000)
    
    


// wordInput.addEventListener("keydown", function() {
//    alert("pressed"); 
// })
저작자표시 비영리 변경금지 (새창열림)

'알토르' 카테고리의 다른 글

알토르 1주차 Cusor AI  (4) 2025.08.13
알토르 1주차 - API  (1) 2025.08.13
알토르 1주차 ES6  (5) 2025.08.12
알토르 1주차 - Typing game 3  (0) 2025.08.12
알토리 1주차 Typing game -2  (0) 2025.08.12

'알토르' Related Articles

티스토리툴바