BLOG
Html,Css,JavaScript

Html로 만든 Wordle(워들) 게임

March 19, 2024, 11:30 p.m.

이 게임도 군대 시절 심심해서 만들었던 워들 게임입니다.

다섯글자로 된 영어단어를 맞추는 숫자야구와 비슷한 게임이라고 보시면 됩니다.

각 input에 글자를 입력하면 다음 input으로 자동으로 초점이 옮겨가게 하는게 조금 어려웠네요.

WORDLE 게임하기 깃허브 링크

밑은 코드 전문입니다. 첨부파일과 깃허브 링크도 있으니 참고하시길 바랍니다.

<html>
<head>
<title>WORDLE</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</head>
<body>
<style>
.wordle
{
    text-transform: uppercase;
    text-align: center;
    width : 60px;
    height: 60px;
    font-weight:bold;
    font-size: 40px;
    border-radius: 5%;
    border: solid;
    border-width: medium;
    border-color: white;
}
</style>
<h1 style="font-weight: bold; font-size: 40px;"class="text-center">WORDLE</h1>
<div class="container my-3">
    <form method="post" action="javascript: submit();"class="post-form text-center" id="a" autocomplete="off">
        <input type="text" size="1" maxlength="1" class="wordle" name="1" required autofocus onkeyup="moveToNext(this, 0)">
        <input type="text" size="1" maxlength="1" class="wordle" name="2" required onkeyup="moveToNext(this, 1)">
        <input type="text" size="1" maxlength="1" class="wordle" name="3" required onkeyup="moveToNext(this, 2)">
        <input type="text" size="1" maxlength="1" class="wordle" name="4" required onkeyup="moveToNext(this, 3)">
        <input type="text" size="1" maxlength="1" class="wordle" name="5" required onkeyup="moveToNext(this, 4)">
        <input type="submit" value="" style="display:none;">
    </form>
    <form method="post" action="javascript: submit();"class="post-form text-center" id="b" autocomplete="off">
        <input type="text" size="1" maxlength="1" class="wordle" name="1" required autofocus onkeyup="moveToNext(this, 0)">
        <input type="text" size="1" maxlength="1" class="wordle" name="2" required onkeyup="moveToNext(this, 1)">
        <input type="text" size="1" maxlength="1" class="wordle" name="3" required onkeyup="moveToNext(this, 2)">
        <input type="text" size="1" maxlength="1" class="wordle" name="4" required onkeyup="moveToNext(this, 3)">
        <input type="text" size="1" maxlength="1" class="wordle" name="5" required onkeyup="moveToNext(this, 4)">
        <input type="submit" value="" style="display:none;">
    </form>
    <form method="post" action="javascript: submit();"class="post-form text-center" id="c" autocomplete="off">
        <input type="text" size="1" maxlength="1" class="wordle" name="1" required autofocus onkeyup="moveToNext(this, 0)">
        <input type="text" size="1" maxlength="1" class="wordle" name="2" required onkeyup="moveToNext(this, 1)">
        <input type="text" size="1" maxlength="1" class="wordle" name="3" required onkeyup="moveToNext(this, 2)">
        <input type="text" size="1" maxlength="1" class="wordle" name="4" required onkeyup="moveToNext(this, 3)">
        <input type="text" size="1" maxlength="1" class="wordle" name="5" required onkeyup="moveToNext(this, 4)">
        <input type="submit" value="" style="display:none;">
    </form>
    <form method="post" action="javascript: submit();"class="post-form text-center" id="d" autocomplete="off">
        <input type="text" size="1" maxlength="1" class="wordle" name="1" required autofocus onkeyup="moveToNext(this, 0)">
        <input type="text" size="1" maxlength="1" class="wordle" name="2" required onkeyup="moveToNext(this, 1)">
        <input type="text" size="1" maxlength="1" class="wordle" name="3" required onkeyup="moveToNext(this, 2)">
        <input type="text" size="1" maxlength="1" class="wordle" name="4" required onkeyup="moveToNext(this, 3)">
        <input type="text" size="1" maxlength="1" class="wordle" name="5" required onkeyup="moveToNext(this, 4)">
        <input type="submit" value="" style="display:none;">
    </form>
    <form method="post" action="javascript: submit();"class="post-form text-center" id="e" autocomplete="off">
        <input type="text" size="1" maxlength="1" class="wordle" name="1" required autofocus onkeyup="moveToNext(this, 0)">
        <input type="text" size="1" maxlength="1" class="wordle" name="2" required onkeyup="moveToNext(this, 1)">
        <input type="text" size="1" maxlength="1" class="wordle" name="3" required onkeyup="moveToNext(this, 2)">
        <input type="text" size="1" maxlength="1" class="wordle" name="4" required onkeyup="moveToNext(this, 3)">
        <input type="text" size="1" maxlength="1" class="wordle" name="5" required onkeyup="moveToNext(this, 4)">
        <input type="submit" value="" style="display:none;">
    </form>

    <h1 class="text-center text-success" id="clear" style="display:none;">Clear!</h1>
    <h1 class="text-center text-warning" id="warn" style="display:none;">Failed....</h1>
</div>

<script>
var ANSWERS = [
'STAND', 'ROUND', 'SPACE', 'TODAY', 'QUEST', 'ORDER', 'BRAND', 'KOREA',
'FOUND' ,'TREND', 'BRAVO', 'ALPHA', 'GREAT', 'PROUD', 'SCENT', 'POUCH', 'WHITE',
'ZEBRA', 'LATEX', 'CROWN', 'START', 'SMILE', 'STAND', 'ALERT', 'CLEAR', 'PHONE',
'RETRO', 'BRICK', 'WORLD', 'SMITE', 'FLASH', 'INPUT', 'TASTY', 'SPEND', 'FALSE',
'PUNCH', 'BREAK', 'SPIKE', 'PRIDE', 'HOUSE', 'CRASH', 'CRUSH', 'HYPER', 'BONUS',
'BROWN', 'FLAKE', 'EIGHT', 'WIDTH', 'CHAOS', 'ANGLE', 'MARCH', 'PAUSE', 'STACK',
'GUIDE', 'INPUT', 'VALUE', 'BLOCK', 'SCORE', 'STORE', 'SOUTH', 'NORTH', 'PLACE',
];

var ANSWER = ANSWERS[Math.round(Math.random()*ANSWERS.length)-1];
var idxs = 'abcde';
var idx = -1;
var clear = document.querySelector('#clear');
var warn = document.querySelector ('#warn');
var OFFSET = 0;
getForm();
function next ()
{
    console.log("hello");
}
function getForm()
{
    if (idx<4)
    {
        idx++;
        form = document.querySelector('#'+idxs[idx]);
        inputs = form.getElementsByTagName("input")
        for(var i =0; i<5; i++)
        {
            inp = inputs[i];
            inp.readOnly = false;
            inp.style.borderColor = "gray";
        }
    }
    else
    {
        warn.style.display = "block";
    }
}
function submit()
{
    var CLEAR = true;

    for(var i = 0; i<5; i++)
    {
        inp = inputs[i];
        tar = inp.value;
        tar = tar.toUpperCase();
        inp.readOnly=true;

        if (tar==ANSWER[i])
        {
            inp.style.backgroundColor = "#4ad964";
            inp.style.borderColor = "#4ad964";
        }
        else
        {
            CLEAR = false;
            for (var j=0; j<5; j++)
            {
                inp.style.backgroundColor = "gray";
                inp.style.borderColor = "gray";
                if(ANSWER[j]==tar)
                {
                    inp.style.backgroundColor = "#ead24a";
                    inp.style.borderColor = "#ead24a";
                    break;
                }
            }
        }
    }
    btn = inputs[5];
    btn.remove();

    OFFSET += 5;
    if (OFFSET < 25)
    {
        var winputs = document.querySelectorAll('input.wordle');
        winputs[OFFSET].focus();
    }

    if (CLEAR)
    {
        clear.style.display = "block";
    }
    else
    {
        getForm();
    }
}
function moveToNext(current, nextIndex) {
    if (current.value.length === current.maxLength) {
        const inputs = document.querySelectorAll('input.wordle');
        if (nextIndex < 4) {
            inputs[nextIndex + 1 + OFFSET].focus();
        }
    }
}
</script>
</body>
</html>

Html Canvas 게임

Download: wordle.html

Html,Css,JavaScript 의 다른 글 보기
Search