2018년 6월 14일 목요일

JavaScript course 03-3

<JavaScript basic type & basic grammar utilization> 03-3

Hello Berdo

In the last lesson, we have completed the game start and end and random number generation to start the game.
This time, we will take input from the user, compare it with random number, print out the result, and finish the game.
When the button is clicked like 'Start game' on the button 'Check result' html tag, we will link the event function and create a function in the JavaScript area.





Here's what you should do when the button is pressed:
  1. Is the game started?
  2. Is there a three-digit number entered?
  3. Compares the entered number with the random number. If the same number is the same number, 'strike'. If there is the same number in the other place, save the state as 'ball' and output the result.
  4. If all the digits are equal to random numbers, the game wins and the game ends.
So let's look at the finished code first.



For the first time, use the g_bGameRun global variable to check whether the game is running and, if not,
Use a built-in function called 'alert' to pop up a message box prompting you to start the game first.
Secondly, if the game is started, take the value from 'userinput' and check the length using the if statement if the length is 3 digits.
Likewise, if it is not 3 digits, 'alert' is used to display the message and request to enter again.
To do this, the function should no longer be executed, so we use the keyword 'return' to terminate the button click function.
The third digit is a section that compares the random number with the entered number.
It may seem complicated because it consists of two double for statements, but the principle is simple.
In a for statement that starts with var = i, check the Strike value.
Check the ball value in a for statement that begins with var = j.
The fourth step is to print the results or exit the game.
If the nStrike value is 3, a message will be displayed to end the game, and the game will be re-initialized and the random number value will be initialized.
If the nStrike value is not 3, the number is not correct.
We then use the 'focus ()' method to re-enter the edit so we can re-enter the edit.
If you finish the code to this point and proceed to play the game, you can see that the game is running normally.
I learned how to access the basic html tag values ​​from JavaScript by using basic syntax and Java variable declarations.

Next time I'll talk about how to implement OOP in JavaScript. ^^

The pool source used in the course will be shown back to the source code. ^^



  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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Number Baseball Game</title>

    <style>
        div#GameBoard {
            border: 2px solid gray;
            border-radius: 4px;
            width: 400px;
        }
    </style>
</head>
<body>

    <div id="GameBoard">
        <label> Welcome to Numbers game.</label><br>
        <label> Click Start Game to start the game.</label><br>
        <img src="img/question.png" width="32" height="32">
        <img src="img/question.png" width="32" height="32">
        <img src="img/question.png" width="32" height="32">
        <input id="btnstart" type="button" value="Starting Game" onclick="btnGameStart()"><br><br>
        Enter number: <input type="text" id="userinput" size="3" maxlength="3">
        <input type="button" value="Check the result" onclick="btnMatchCheck()"><br><br>
        Result: <label id="resultout"></label>
    </div>

</body>

<script type="text/javascript">

    var g_sArrQuizNumber = [];
    var g_bGameRun = false;

    function btnGameStart()
    {
        if(!g_bGameRun)
        {
            document.getElementById("btnstart").value = "Game in progress";
            g_bGameRun = true;

            makeRandomNum();
        }
        else
        {
            if(confirm("The game is in progress!\n" + "Are you sure you want to quit?"))
            {                
                document.getElementById("btnstart").value = "Starting Game";
                g_bGameRun = false;
            }
        }
    }

    function btnMatchCheck()
    {
        if(g_bGameRun)
        {
            var sInputValue = document.getElementById("userinput").value;
            console.log("User Input : " + sInputValue);

            if(sInputValue.length != 3)
            {
                alert("You must enter 3 numbers.");
                return;
            }

            var nStrike=0;
            var nBall=0;
            for(var i=0; i<3; i++)
            {
                if(g_sArrQuizNumber[i] == sInputValue.charAt(i))
                    nStrike++;
                else
                {
                    for(var j=0; j<3; j++)
                    {
                        if(g_sArrQuizNumber[j] == sInputValue.charAt(i))
                            nBall++;
                    }
                }
            }

            if(nStrike == 3)
            {
                var sResult = "Congratulations. I won the game !!";
                document.getElementById("resultout").innerHTML = sResult;
                initGameState();
            }
            else
            {
                var sResult = "The results you enter is" + "[ " + nStrike + " Strike ][ " + nBall + " Ball]";
                document.getElementById("resultout").innerHTML = sResult;

                document.getElementById("userinput").value = "";
                document.getElementById("userinput").focus();
            }
        }
        else
        {
            alert("This is not a game. Begin playing the game first. ^^");
        }
    }

    function makeRandomNum()
    {
        var nCurrIdx = 0;
        while (nCurrIdx < 3)
        {
            g_sArrQuizNumber[nCurrIdx] = Math.floor(Math.random() * 10);

            if(g_sArrQuizNumber[nCurrIdx] == 0) continue;

            if(nCurrIdx != 0)
            {
                var bEqualChk = false;
                for (var i=0; i<nCurrIdx; i++)
                {
                    if(g_sArrQuizNumber[i] == g_sArrQuizNumber[nCurrIdx])
                    {
                        bEqualChk = true;
                        break;
                    }
                }

                if(!bEqualChk)
                    nCurrIdx++;
            }
            else
            {
                nCurrIdx++;
            }
        }

        console.log("Random Number :" + "[" + g_sArrQuizNumber[0] +"]" + "[" + g_sArrQuizNumber[1] +"]" + "[" + g_sArrQuizNumber[2] +"]")
    }

</script>

</html>
작성자: 시간:
라벨:

댓글 없음:

댓글 쓰기

피드 구독하기: 댓글 (Atom)