영화제목 맞히기 게임 (javascript)

 

안녕하세요 콥스랩 기술 블로그입니다!

이번 시간엔 자바스크립트를 활용하여 영화제목을 맞히는 게임을 만들어보겠습니다. 오늘의 내용은 다음과 같습니다.

1. 게임 구경해보기
2. 게임 로직에 대해 알아보기
3. 기능별 코드 알아보기

 

1. 게임 구경해보기

1-1) 시작

 

처음 시작화면입니다.

제한시간을 설정한 뒤, 게임시작 버튼을 누르면 게임이 시작됩니다.

사진 삭제

사진 설명을 입력하세요.

1-2) 인플레이

사진 삭제

사진 설명을 입력하세요.

1-3) 정답을 맞혔을 때

정답개수가 1증가하고, 남은개수는 1 감소합니다. 다음 영화를 화면에 보여줍니다.

1-4) 제한시간이 모두 지나갔을 때

사진 삭제

사진 설명을 입력하세요.

남은시간이 0초가 되면 “시간초과” 메시지와 함께, 내가 맞히지 못한 영화의 제목이 **출력(alert)**됩니다.

 

2. 게임 로직

1. 게임시작 버튼을 클릭하는 순간, 제한시간 타이머가 실행되고, 영화의 순서가 랜덤으로 섞입니다.
2. 제한시간 타이머가 0이되면 게임종료 메시지를 출력합니다.
3. “Enter”키를 눌렀을 때, 영화의 제목을 맞혔다면 타이머의 시간을 초기화합니다. (초기에 설정한 제한시간으로) 또한, 맞힌 개수를 1 증가시키고 남은 개수를 1 감소시킵니다. 만약 남은 개수가 1 이상이라면 다음 문제로 넘어갑니다.
4. “Enter”키를 눌렀을 때, 영화의 제목을 맞히지 못하면 아무런 변화도 나타나지 않습니다.
5. 모든 정답을 맞혔다면 승리 메시지를 출력합니다.

 

 

3. 기능별 코드 알아보기

앞서 살펴본 내용에 따라 어떠한 기능들이 필요한지 살펴보고, 기능별 코드를 알아보겠습니다.

본 게임에 필요한 기능을 크게 3가지로 나누자면 다음과 같습니다.

1. 게임시작 버튼을 클릭시 → 게임시작, 초기값 설정
2. 시간제한 타이머 컨트롤
3. 정답 입력 컨트롤 → 답을 입력하고 “Enter”키 누를 시 수행

 

 

0) 초기 변수 설정

 

const path = '../quiz_img/';   // 본 페이지에서 사용할 사진들의 위치 디폴값입니다. 'path + 이미지이름'을 통해 반복적으로 이미지를 활용하기위해 path 변수를 따로 설정합니다.
const totalCount = 30; // 총 30개의 사진을 이용하기위해 totalCount를 사용합니다. 맞힌 개수가 totalCount에 도달하면 게임 승리입니다.
let answerCount = 0; // 현재까지 맞힌 문제의 개수입니다. 초기값을 0으로 설정합니다.
let crntIdx = 0; // 현재 화면에 나오고 있는 영화의 인덱스
let crntMovieName; // 현재 화면에 나오고 있는 영화 이름. 즉, 정답.
let TIMER; // 시간제한 타이머에 들어가는 값 (1초마다 1씩 줄어듦)
let limit; // 초기 설정값

const data = [   //영화의 이름에 있는 모든 공백문자를 제거함. 이유 : 정답을 맞힐 때, 사용자의 답안에 있는 공백문자를 제거하여 정답과 비교하기 위해
    "7번방의선물", "건축학개론", "고지전", "괴물", "극한직업", "기생충", "김씨표류기", "내머리속의지우개",
    "늑대의유혹", "달콤한인생", "더테러라이브", "도둑들", "라디오스타", "롤러코스터",
    "마녀", "마더", "말죽거리잔혹사", "명량", "미녀는괴로워", "범죄와의전쟁",
    "부당거래", "성냥팔이소녀의재림", "아저씨", "알포인트", "올드보이", "왕의남자",
    "친구", "타짜", "태극기휘날리며", "프리즌"
]

 

1) 게임시작 버튼 클릭시 - init() 실행

 

														<!---초기화면 구역--->
<div id="setting_area" class="setting_area">
        <h1>영화제목 맞히기 게임</h1>
        <label style="margin: auto 0">제한시간</label>
        <select id="option">
            <option value="5">5초</option>
            <option value="7">7초</option>
            <option value="10">10초</option>
        </select>
        <input type="button" id="start_button" value="게임 시작" onclick="init()"></input>
        <p>
            사용법 : 제한시간을 설정하고 제한시간 이내에 화면에 비치는 영화 제목을 입력하신 후 "Enter"
            <br>띄어쓰기는 상관 없음. (해도되고 안 해도됨)
        </p>
</div>

														<!---게임 시작시 보이는 구역--->
<div id="container" class="container">
        <p id="time_area">남은시간 :
        <span id="left_time"></span>초
        </p>
        <div class="score_area">
            정답개수: <span id="answer_count"></span>개
            남은개수:<span id="left_count"></span>개
        </div>
        <div class="img_area">
            <img src="#" id="img">
        </div>

        <div class="answer_area">  <!---정답 입력 구간--->
            <h2>정답:</h2>
            <input type="text" id="answer">
            <input type="button" id="enter" value="제출" onclick="send()">

        </div>
        
    </div>

 

function init() {  // 설정 초기화
    shuffleArray(data); // 영화데이터 랜덤으로 섞음
    answerCount = 0;  // 맞힌 개수 0개로 초기화
    crntIdx = 0; // 현재 화면상의 영화 데이터 인덱스
    let imgSrc = path + data[crntIdx] + '.jfif'  // 현재 영화의 이미지 주소
    document.getElementById('img').src = imgSrc; // 영화 사진 화면에 띄움
/*
게임시작 버튼 누를 시
맨 처음 숨겨놓았던 게임진행 화면의	visibility를 visible로 바꿔줌. 
그리고, 세팅화면을 다시 숨김
*/
    document.getElementById('container').style.visibility = 'visible';
    document.getElementById('setting_area').style.visibility = 'hidden';
    document.getElementById('retry').style.visibility = 'visible';

    crntMovieName = data[crntIdx]; //현재 화면에 나오고 있는 영화의 이름
// 현재 문제의 정답을 따로 저장하여 이후 사용자가 적은 정답과 비교하기 위함

    TIMER = parseInt(document.getElementById('option').value); // 초기 설정했던 제한시간
    limit = TIMER;
    document.getElementById('answer_count').innerText = answerCount; //정답개수 0으로 세팅
    document.getElementById('left_count').innerText = totalCount - answerCount; //남은 개수 30으로 세팅

    document.getElementById('answer').focus();  // 바로 정답창으로 커서이동시킴. 이유 : 바로 정답을 타이핑할 수 있도록.
    document.getElementById('left_time').innerText = TIMER; // 남은시간을 초기 설정했던 제한시간으로 세팅.
    countdownTimer(); // 카운트다운 타이머 실행
}

function shuffleArray(array) { // 배열을 넣으면 그 요소를 랜덤으로 뒤섞어줌.
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
}

 

2) 타이머 컨트롤

function countdownTimer() {
    var intervalId = setInterval(function () { // setInterval 함수를 이용하여, 1초마다 아래의 코드가 실행되도록 함.
        if (TIMER == 0) {   //제한시간을 모두 소모하였을 때
            clearInterval(intervalId); // 타이머 끔
            alert(`시간초과!\n정답 : ${crntMovieName}`); // 시간초과 메시지와 사용자가 맞히지 못한 현재의 문제를 출력
            location.reload(); // 페이지 새로고침
        } else {
            TIMER -= 1; // 타이머가 0이 되기 전까진 1초마다 시간을 1씩 줄임
            document.getElementById('left_time').innerText = TIMER; // 시간 초가 변화할 때마다 화면에 새로 세팅
        }
    }, 1000); // 1000ms = 1초 -> 1초마다 함수 실행
}

 

3) 정답 입력 컨트롤

// 사용자가 "Enter"키보드 눌렀을 때 아래의 함수 실행
document.getElementById("answer").addEventListener("keydown", function (event) {
    if (event.key === "Enter") {
        document.getElementById("enter").click(); // enter 버튼 클릭
    }
});

function send() {
    // 제출 동작 실행
    let ans = spaceClear(document.getElementById("answer").value); 
	// spaceClear() : 사용자가 입력한 텍스트의 공백문자를 모두 제거함. (모든 문제 정답엔 공백이 없음)

    if (ans == crntMovieName) { //정답일 경우
        TIMER = limit; // 현재 시간을 다시 limit값으로 초기화
        answerCount += 1; // 맞힌 값 1 증가
        crntIdx += 1; // 현재 인덱스 1 증가
        let imgSrc = path + data[crntIdx] + '.jfif' // 다음 사진으로 교체 준비
        crntMovieName = data[crntIdx]; // 현재 영화이름 초기화
        document.getElementById('img').src = imgSrc; // 다음 사진으로 교체
        document.getElementById('answer_count').innerText = answerCount; // 맞힌 값 대입
        document.getElementById('left_count').innerText = totalCount - answerCount; // 남은 값 대입
        document.getElementById('answer').focus();  // 바로 정답창으로 커서이동시킴
    }
    if (answerCount == totalCount) {
        alert("축하드립니다!! 모두 클리어하셨습니다.");
        location.reload(); // 페이지 새로고침 함수

    }

    document.getElementById("answer").value = ""; 
//정답을 맞히든 틀리든 정답입력 칸을 초기화 시켜 사용자가 편리하게 게임 참여 가능하도록함.
}

 

function spaceClear(name) { //매개변수 name의 모든 띄어쓰기를 없애주는 함수.
    let result = "";
    for (let i = 0; i < name.length; i++) {
        name[i] === " " ? result += "" : result += name[i];
    }
    return result;

}

 

마무리하며

 

자 오늘은 자바스크립트 코드를 통해 웹 페이지로 즐길 수 있는 게임을 만들어보았습니다.

간단한 코드만으로도 꽤 재밌는 게임이 만들어졌는데요, 이런 점을 보면 게임을 구상하는 반짝이는 아이디어가 참 중요한 것 같습니다. 저도 위 게임을 다른 웹사이트에서 아주 재밌게 플레이를 해본 기억이 나는데 직접 만들어본 것은 처음입니다. 평소에 아이디어들을 어디에 적어놓으면 좋겠네요 🙂

눈치 빠르신 분들은 벌써 눈치 채셨을지 모르겠는데, 위 자바스크립트코드를 보시면 유난히 눈에 많이 보이는 메서드가 하나 있습니다. 바로 document.getElementById(””) 메서드인데요. 이 메서드는 DOM의 메서드 중 하나로, 특정 id를 가진 html 엘리먼트 요소를 갖고와서 자바스크립트를 통해 컨트롤할 수 있게합니다. 혹시 여러분들도 위 게임이 재밌고 신기하셨다면, DOM파트를 공부해보시면 좋을 것 같습니다. 저도 다음에 기회가 된다면 DOM에 대해 소개해드리도록 하겠습니다!

지금까지 읽어주셔서 감사합니다 😃