개발

단어게임 예제 본문

Frontend/JavaScript

단어게임 예제

Study 2021. 3. 20. 15:48

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!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>Document</title>
    <style>
        .wrapper{
            width: 500px;
            height: 700px;
            background-color: yellow;
            margin: auto;
        }
        #word-area{
            width: 100%;
            height: 200px;
            font-size: 100px;
            text-align: center;
        }
        #input-area{
            width: 100%;
            height: 150px;
            text-align: center;
        }
        #input-area input{
            width: 98%;
            height: 100%;
            background-color: dodgerblue;
            color: white;
            font-weight: bold;
            font-size: 85px;
            text-align: center;
        }
        #feedback{
            width: 100%;
            height: 200px;
            font-size: 180px;
            color: red;
            font-weight: bold;
            text-align: center;
            background-color: greenyellow;
        }
        #score-area{
            width: 100%;
            height: 150px;
            font-size: 130px;
            color: black;
            font-weight: bold;
            text-align: center;
        }
    </style>
    <script>
        var wordArea;
        var inputArea;
        var feedback;
        var scoreArea;
        var msg;
        var n=0;
        var score=0;
        //문제
        var word=[
            "힉스입자",
            "사건",
            "조각",
            "사고실험",
            "최면",
            "김밥",
            "송진",
            "강림",
            "주식",
            "이변",
            "문제 끝"
        ]
        //엔터키 인식
        function enter(){
            if (event.keyCode==13){
                n++
                printword()
                msg.value="";
            }
        }
        //게임 초기세팅
        function init(){
            wordArea=document.getElementById("word-area");
            input=document.getElementById("input-area");
            msg=document.getElementById("msg");
            feedback=document.getElementById("feedback");
            scoreArea=document.getElementById("score-area");
        }
        //유저가 따라치게될 메세지 초기값
        function printword(){
            if(n<word.length){
                wordArea.innerText=word[n];
                if(msg.value==word[n-1]){
                    score+=10;
                    feedback.innerText="O";
                }else{
                    feedback.innerText="X";
                }
            }
            if(n==word.length-1){
                wordArea.innerText="게임";
                feedback.innerText="종료";
                alert("게임종료");
            }
            scoreArea.innerText=score+"점";
        }
        window.addEventListener("load", function(){
            init()
            printword()
            msg.focus();
        });
    </script>
</head>
<body>
    <div class="wrapper">
        <div id="word-area">단어 출력</div>
        <div id="input-area">
            <input type="text" placeholder="단어 입력" onkeyup="enter()" id="msg">
        </div>
        <div id="feedback"></div>
        <div id="score-area">0점</div>
    </div>
</body>
</html>
 cs

'Frontend > JavaScript' 카테고리의 다른 글

배열을 이용한 좌표녹화, 이동  (0) 2021.03.20
스크롤배너 예제  (0) 2021.03.20
랜덤 조 할당 예제 2  (0) 2021.03.20
랜덤으로 조 할당 예제  (0) 2021.03.20
슬라이드쇼 예제  (0) 2021.03.20
'Frontend/JavaScript' Related Articles more