Home>

Number guessing game
As a practice of javascript, we have created a number guessing game with reference to the above site.
However, instead of pressing numbers 1 to 9 in order as in the above site, 9 numbers are displayed randomly at the start of the game.
(E.g. 2,4,1,5,8,9,7,6,3 etc.)
And I want to touch 3x3 randomly arranged numeric buttons in the order they are displayed.
Random numbers can be placed on the current button, but it is not possible to display random numbers on the HTML side and link the displayed numbers to the numbers written on the buttons .

$('. start'). on ('click', function () {
    $('# board, .duration-line, .result subboard__td--css'). css ('display', 'block');
    initButtons ();
}
);

var startTime;
var isPlaying = false;
var numm;
// Time start
function timerStart () {
    currentNum = 0;
    startTime = (new Date ()). getTime ();
    if (! isPlaying) {
        isPlaying = true;
        runTimer ();
    }
}
function runTimer () {
    document.getElementById ('duration'). innerHTML = (((new Date ()). getTime ()-startTime)/1000) .toFixed (1);
    timer = setTimeout (function () {
        runTimer ();
    }, 100);
}

// Apply a random number to each button
function initButtons () {
     buttons = [];
    for (var i = 1;i<= 9;i ++) {
        var flag = true;
        while (flag) {
            var a = Math.floor (Math.random () * 9);
            if (buttons [a] == undefined) {
                buttons [a] = i;
                document.getElementById ('button_' + a) .value = i;
                 touch_button = document.getElementById ('button_' + a) .value;
                flag = false;
            }
        }
    }
    timerStart ();
    setnum ();
}
//
function setnum () {
 array2 = [];
for (var c = 1;c<= 9;c ++) {
        var flag = true;
        while (flag) {
            var bis = Math.floor (Math.random () * 9);
            if (array2 [bis] == undefined) {
                array2 [bis] = c;
                display_button = $('# arr'). text (array2);
            flag = false;
}
}
}
}

Processing when the/* button is clicked. This does not move. * /
$('. probbtn'). on ('click', function () {
    if (buttons [0] = nummming [0]) {
     touch_button.value = "";
  } else {
      initButtons ();
  }
});


In this part, an integer random value is put in each button and displayed on the HTML side.
In the stage of making this random number button, will the random number string displayed at the start of the game be displayed on the HTML side? Or do I have to create a separate function?

How can I write in the function touched function that if I don't input them in order, the button I clicked so far will be restored and start over from the beginning?
For the time being, HTML is a table-shaped 3x3 as shown below.

<-! below body->
 <body>
    <div>JavaScript</div>
    <button tabindex = "1" accesskey = "c">start</button>
    <p name = "test"></p>
    <table>
        <thead>
            <tr>
                <th colspan = "3"></th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan = "3">
                    Time:
                    <span>0.0</span>(sec)
                </td>
            </tr>
            <tr>
                <td colspan = "3">
                    Result:
                    <span></span>(sec)
                </td>
            </tr>
            <tr>
                <td colspan = "3">
                    <button type = "button" tabindex = "0" accesskey = "c">reset</button>
                </td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>
                    <input type = "button" value = "" onclick = "touched (0);" />
                </td>
                <td>
                    <input type = "button" value = "" onclick = "touched (1);" />
                </td>
                <td>
                    <input type = "button" value = "" onclick = "touched (2);" /><br />
                </td>
            </tr>
            <tr>
                <td>
                    <input type = "button" value = "" onclick = "touched (3);" />
                </td>
                <td>
                    <input type = "button" value = "" onclick = "touched (4);" />
                </td>
                <td>
                    <input type = "button" value = "" onclick = "touched (5);" /><br />
                </td>
            </tr>
            <tr>
                <td>
                    <input type = "button" value = "" onclick = "touched (6);" />
                </td>
                <td>
                    <input type = "button" value = "" onclick = "touched (7);" />
                </td>
                <td>
                    <input type = "button" value = "" onclick = "touched (8);" />
                </td>
            </tr>
        </tbody>
    </table>
</body>

If i have any content, please don't hesitate to ask.
Thank you.
* Fixed

  • Answer # 1

    First, if you want to shuffle the array, the fisher-yates method is easy and fast.
    There are many if you look for it, but here it is functionalized and easy to use.
    Code to shuffle with JavaScript

    Next, prepare the arrayarray_answer = [1,2,3,4,5,6,7,8,9], shuffle it, and press the button In order.
    array_answer should be a global variable.

    If you want to output the correct answer order to HTML, you can turn it with for and write it to some element in order, but the most convenient and appropriate method is to just ram the array.<div id ="answer"/>

    $('# answer'). text (array_answer);


    Regardless of its appearance, it goes in as it is. It will be postponed to fix the appearance.

    The next time the button is pressed. Compare the first element of array_answer with the text of the button.
    If they match, the answer is correct and the first element of array_answer is removed.
    There is no class on the button in the source of the presentation, but here I added a class called probbtn without permission.

    $('. probbtn'). on ('click', function () {
        if (array_answer [0] == $(this) .text ()) {
        $(this) .removeClass ("btn-primary");
        $(this) .addClass ("btn-success");
        array_answer.shift ();
      } else {
          initButtons ();
      }
    });


    In the above source, a bootstrap class is added to express the correct answer.
    If it is wrong, rerun initButtons () and try again.
    If you don't want to change the button layout, you can use another function that removes the in-button text from initButtons.

    Every time you press the correct answer, the array_answer elements decrease by one.
    When the number of elements in array_answer reaches 0, the process is complete.

    There is a result that I made without looking at the source of presentation.
    FYI.