[JavaScript] 요즘 유행하는 Wordle 따라 하면서 만들어 보기-1

JavaScript

[JavaScript] 요즘 유행하는 Wordle 따라 하면서 만들어 보기-1

애드망3 2022. 3. 11. 08:30

※ 처음은 다른 사람이 만들어 놓은 것을 토대로 만들고 그 이후에는 있었으면 하는 기능과

부족한 점 혹은 문제점을 고치는 식으로 해서 점점 자기만의 것으로 만들어 가는 과정입니다

코드의 소스는 유튜브 코딩 애플 님이 올린 영상 중

"JavaScript로 요즘 유행하는 Wordle 게임 만들기 (개 쉬움)"을 참고해서 만들 예정입니다

구성

게임 소개
게임 규칙
소스 설명
실제 게임 화면
문제점
개선

게임 소개

워들이란?

위키백과
워들(Wordle)은 2021년 10월 조시 워들(Josh Wardle)이 공개한 영어 단어 맞추기 게임이다.
게임 이름은 '단어'를 뜻하는 Word와 자신의 성 Wardle을 섞어 지은 것이다.

게임 규칙

위키백과
게임의 궁극적인 목표는 프로그램이 원하는 다섯 글자 영어 단어를 추측해 맞추는 것이다.
플레이어는 6번의 기회가 주어지며, 각 시행마다 온전한 다섯 글자 단어를 제출하면 된다.
게임 시작 시 공백의 30칸짜리 퍼즐판이 나타난다.
정답 단어는 24시간마다 갱신되며, 모든 플레이어에게 동일하게 적용된다.
정답 단어는 미국 영어 스펠링을 따른다.
플레이어가 답안을 제출하면 프로그램이 정답과 제출된 단어의 각 알파벳 종류와 위치를 비교해 판별한다.
판별 결과는 흰색의 타일이 세 가지 색(초록/노랑/회색) 중 하나로 바뀌면서 표현된다.
모든 타일이 초록색으로 바뀌면 정답을 맞힌 것이다.

초록색: 정답 단어의 알파펫 종류와 위치가 모두 일치
(예시 - 3차 시행: RULES / 정답: REBUS)
노란색: 정답 단어에 들어가는 알파펫이지만 위치가 불일치
(예시 - 3차 시행: RULES / 정답: REBUS)
회색: 정답 단어에 없는 알파벳
(예시 - 3차 시행: RULES / 정답: REBUS)

소스 설명

소스의 구성은 간단하게 html 파일 안에 CSS와 JS가 있고

CSS는 input 크기 조절 이외에는 사용을 안 합니다

JS는 input 창의 값을 가져오고 정답과 비교해서 색상을 표시해주는 용도입니다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wordle</title>
</head>
<body>

    <style>
        input {
            width: 50px;
            height: 50px;
            font-size: 40px;
            text-align: center;
        }
    </style>

    <input type="text" class="input">
    <input type="text" class="input">
    <input type="text" class="input">
    <input type="text" class="input">
    <input type="text" class="input">
    <button>제출</button>

    <script>
        //정답
        const answer = 'basic';

        document.querySelector('button').addEventListener('click', () => {

            let input = document.querySelectorAll('input');

            for(let i = 0; i < 5; i++){
                if(input[i].value == answer[i]){
                    input[i].style.background = 'green';
                }else if(answer.includes(input[i].value)){
                    //includes 문자열 검사
                    input[i].style.background = 'yellow';
                }else{
                    input[i].style.background = 'lightgrey';
                }
                //input class 제거
                input[i].classList.remove('input');
            }//for
            
            //제출 버튼 눌렀을 경우 새로운 input 5개 생성
            var template = `<div>
                                <input type="text" class="input">
                                <input type="text" class="input">
                                <input type="text" class="input">
                                <input type="text" class="input">
                                <input type="text" class="input">
                            </div>`;

            document.querySelector('body').insertAdjacentHTML('beforeend', template);
        })
    </script>

</body>
</html>

CSS는 <body> 태그 사이에 위치한 <style></style> 태그 안에 있는 것으로

input {
            width: 50px;
            height: 50px;
            font-size: 40px;
            text-align: center;
        }

input 태그의 너비와 높이를 50px 크기로 지정하고 글씨(font) 크기(size)를 40px 설정합니다

글자의 정렬은 가운데로 위치합니다

<input type="text" class="input">
<input type="text" class="input">
<input type="text" class="input">
<input type="text" class="input">
<input type="text" class="input">
<button>제출</button>

input 태그에 글자를 입력하고 제출 버튼을 클릭할 수 있게 만들었습니다

//정답
const answer = 'basic';

document.querySelector('button').addEventListener('click', () => {

let input = document.querySelectorAll('input');

for(let i = 0; i < 5; i++){
    if(input[i].value == answer[i]){
        input[i].style.background = 'green';
    }else if(answer.includes(input[i].value)){
        //includes 문자열 검사
        input[i].style.background = 'yellow';
    }else{
        input[i].style.background = 'lightgrey';
    }
        //input class 제거
        input[i].classList.remove('input');
}//for

//제출 버튼 눌렀을 경우 새로운 input 5개 생성
var template = `<div>
            		<input type="text" class="input">
                    <input type="text" class="input">
                    <input type="text" class="input">
                    <input type="text" class="input">
                    <input type="text" class="input">
                </div>`;

document.querySelector('body').insertAdjacentHTML('beforeend', template);
})

위에서부터 해석하면

answer 변수는 정답을 의미합니다

제출 버튼을 클릭하면 input 태그 전부를 불러옵니다

불러온 정보로 for문을 돌려서 입력 값이 정답의 글자와 위치가 같으면 green

정답의 단어 안에 입력 값이 있으면 yellow

없으면 lightgrey 색상으로 배경색을 변경합니다

for문이 종료되면 input 이름의 클래스명을 제거합니다

그리고 template 변수를 통해서 새로운 input 창을 만들고

body 태그 안의 맨 뒤에 넣어줍니다

그러면 제출 버튼 뒤에 새로운 input 생깁니다

실제 게임 화면

Wordle

문제점

하나의 답만 가지고 있습니다

입력 칸에 두 글자 이상 입력 가능합니다

두 번째 입력부터 색상 변경을 안 합니다

개선

여러 답안을 가지도록 변경합니다

입력 칸에는 한 글자만 입력되도록 합니다

두 번째 입력에도 색상 변경이 되도록 합니다

저작자표시