|
|
| 1번째 줄: |
1번째 줄: |
| ==a==
| |
| ==b==
| |
|
| |
|
| <!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>오뎅워들</title>
| |
| </head>
| |
| <body bgcolor="grey">
| |
| <h1 style = "color : white">Wordle!</h1><br>
| |
| <h2 style = "color : white">이 워들은 개쩌는 오뎅이 만든 게임입니다.</h2>
| |
| <h5 style = "color : lightgreen">초록색 : 위치 맞음, 알파벳 맞음</h5>
| |
| <h5 style = "color : lightblue">파란색 : 위치 틀림, 알파벳 맞음</h5>
| |
| <h5 style = "color : orange">주황색 : 위치 틀림, 알파벳 틀림</h5>
| |
| <style>
| |
| input{
| |
| width: 50px;
| |
| height : 50px;
| |
| font-size: 40px;
| |
| text-align: center;
| |
| }
| |
| </style>
| |
| <script>
| |
| var list = ["squid", "donut", "dizzy", "angry", "patch", "match", "hatch", "legit", "pizza", "agree",
| |
| "blind", "blink", "agent", "basic", "alert", "blame", "apply", "shoot", "catch", "apple",
| |
| "blast", "blank", "beast", "least", "polar", "novel", "audio", "avoid", "baker", "birth",
| |
| "blood", "admit", "angle", "alter", "black", "cycle", "aware", "light", "maker", "steak",
| |
| "voice", "white", "wheel", "plane", "yield", "album", "sharp", "write", "train", "urban",
| |
| "stock", "stack", "sorry", "waste", "stuck", "third", "first", "fifth", "union", "twice",
| |
| "still", "solid", "slide", "since", "until", "there", "these", "thing", "socks", "upper",
| |
| "stood", "threw", "throw", "vital", "would", "could", "reset", "fight", "value", "earth",
| |
| "space", "store", "alpha", "omega", "gamma", "phone", "taste", "staff", "taxes", "shock",
| |
| "idiot", "thank", "track", "think", "undue", "panic", "disco", "dress", "radio", "drift",
| |
| "dance", "tough", "sense", "fence", "touch", "batch", "prime", "email", "chair", "royal",
| |
| "legal", "false", "robot", "dream", "cream", "bring", "click", "clear", "clean", "clink",
| |
| "upset", "happy", "canon", "ramen", "rider", "ratio", "scene", "serve", "paste", "rapid",
| |
| "young", "elder", "older", "erase", "magma", "sigma", "glass", "class", "bless", "tower",
| |
| "power", "taboo", "paris", "seoul", "busan", "reach", "death", "index", "slice", "blend",
| |
| "super", "bling", "drill", "grill", "clock", "block", "truck", "route", "meant", "press",
| |
| "phase", "refer", "photo", "layer", "lucky", "mayor", "onion", "never", "month", "north",
| |
| "south", "lower", "money", "logic", "mount", "ought", "often", "label", "title", "width",
| |
| "grass", "fleet", "feast", "green", "fluid", "input", "gross", "eight", "grand", "local",
| |
| "media", "video", "final", "house", "giant", "irony", "metal", "bread", "ninja", "sword",
| |
| "medic", "meant", "ultra", "large", "mouse", "delta", "theta", "lying", "motor", "noise",
| |
| "joint", "china", "korea", "japan", "civil", "chain", "silly", "cable", "after", "coach",
| |
| "cheap", "fully", "eager", "eagle", "enemy", "going", "issue", "known", "grade", "human",
| |
| "morph", "mommy", "daddy", "mouth", "pound", "hanhy", "odang", "melon", "water", "juice",
| |
| "smore", "about", "argue", "beach", "above", "alike", "arise", "began", "abuse", "alive",
| |
| "array", "begin", "actor", "allow", "aside", "begun", "acute", "alone", "asset", "being",
| |
| "along", "below", "adopt", "audit", "bench", "adult", "among", "avoid", "billy", "anger",
| |
| "award", "birth", "again", "badly", "agree", "apart", "blind", "ahead", "bases", "alarm",
| |
| "arena", "basis", "board", "boost", "buyer", "cover", "booth", "chose", "craft", "bound",
| |
| "calif", "brain", "crash", "crime", "cause", "cross", "break", "chain", "crowd", "breed",
| |
| "chair", "crown", "brief", "chart", "curve", "chase", "close", "broad", "daily", "broke"];
| |
| document.write(list.length + '<h6 style = "display:inline">개 단어 등록됨</h6>')
| |
| </script><br>
| |
| <input type = "text" class = "input" maxlength="1" style="background-color: rgb(75, 75, 75); color : white;">
| |
| <input type = "text" class = "input" maxlength="1" style="background-color: rgb(75, 75, 75); color : white;">
| |
| <input type = "text" class = "input" maxlength="1" style="background-color: rgb(75, 75, 75); color : white;">
| |
| <input type = "text" class = "input" maxlength="1" style="background-color: rgb(75, 75, 75); color : white;">
| |
| <input type = "text" class = "input" maxlength="1" style="background-color: rgb(75, 75, 75); color : white;">
| |
| <button>제출 </button><br>
| |
|
| |
| <script>
| |
|
| |
| var x = new Boolean(true);
| |
| var ans = list[Math.floor(Math.random() * list.length)];
| |
| var CapAns = ans.toUpperCase();
| |
| document.querySelector('button').addEventListener('click',
| |
| function(){
| |
|
| |
| var input = document.querySelectorAll('.input');
| |
|
| |
| for (let i = 0; i < 5; i++)
| |
| {
| |
| if(input[i].value == ans[i]){
| |
| input[i].style.background = 'lightgreen';
| |
| } else if(ans.includes(input[i].value)){
| |
| input[i].style.background = 'lightblue';
| |
| } else if(input[i].value == CapAns[i]){
| |
| input[i].style.background = 'lightgreen';
| |
| } else if(CapAns.includes(input[i].value)){
| |
| input[i].style.background = 'lightblue';
| |
| }else if(input[i].value == "" || input[i].value == " "){
| |
| input[i].style.background = 'orange';
| |
| }else{
| |
| input[i].style.background = 'orange';
| |
| }
| |
|
| |
| if(input[0].style.background == 'lightgreen' &&
| |
| input[1].style.background == 'lightgreen' &&
| |
| input[2].style.background == 'lightgreen' &&
| |
| input[3].style.background == 'lightgreen' &&
| |
| input[4].style.background == 'lightgreen'){
| |
| x = false;
| |
| var correct = `<div>
| |
|
| |
| <h1>정답!</h1>
| |
| </div>`;
| |
| document.querySelector('body').insertAdjacentHTML
| |
| ("beforeend", correct);
| |
| }
| |
|
| |
| input[i].classList.remove('input');
| |
| }
| |
|
| |
| if(x == true){
| |
| var template = `<div>
| |
|
| |
| <input type = "text" class = "input" maxlength="1" style="background-color: rgb(75, 75, 75); color : white;">
| |
| <input type = "text" class = "input" maxlength="1" style="background-color: rgb(75, 75, 75); color : white;">
| |
| <input type = "text" class = "input" maxlength="1" style="background-color: rgb(75, 75, 75); color : white;">
| |
| <input type = "text" class = "input" maxlength="1" style="background-color: rgb(75, 75, 75); color : white;">
| |
| <input type = "text" class = "input" maxlength="1" style="background-color: rgb(75, 75, 75); color : white;">
| |
| </div>`;
| |
| document.querySelector('body').insertAdjacentHTML
| |
| ("beforeend", template);
| |
| }
| |
|
| |
| })
| |
| </script>
| |
|
| |
| </body>
| |
| </html>
| |