JavaScript - Repetition(Guess the Number Game)

Exercises for Programmers

開発環境

• OS X El Capitan - Apple (OS)
• Emacs (Text Editor)
• JavaScript (プログラミング言語)
• Safari(Web browser)
• JavaScript 第6版 (David Flanagan(著)、村上 列(翻訳)、オライリージャパン)(参考書籍)
• JavaScriptリファレンス 第6版(David Flanagan(著)、木下 哲也(翻訳)、オライリージャパン)(参考書籍)

Exercises for Programmers: 57 Challenges to Develop Your Coding Skills (Brian P. Hogan 著、Pragmatic Bookshelf)のChapter 6(Repetition)、32(Guess the Number Game)を取り組んでみる。

32(Guess the Number Game)

コード(Emacs)

<div id="output0"></div>

<script src="array.js"></script>
<script src="sample32.js"></script>

(function () {
    'use strict';
    var level,
        answer,
        guess_max,
        guess_count = 0,
        div_output = document.querySelector('#output0'),
        nl = '<br>',
        input_level,
        input_guess,
        input_play,
        play,
        getLevel,
        getGuess,
        playAgain;

    play = function () {
        div_output.innerHTML =
            "Let's play Guess the Number." + nl +
            '<label for="level0">' +
            'Pick a difficulty level (1, 2, or 3): ' +
            '</label>' +
            '<input id="level0" type="number" min="1" max="3" step="1">' + nl;
        input_level = document.querySelector('#level0');
        input_level.onchange = getLevel;
    };
    getLevel = function () {
        level = parseInt(input_level.value, 10);

        if (level === 1) {
            guess_max = 10;
        } else if (level === 2) {
            guess_max = 100;
        } else if (level === 3) {
            guess_max = 1000;
        }
        answer = Math.floor(Math.random() * guess_max) + 1;    
        div_output.innerHTML +=
            '<label for="guess0">' +
            "I have may number. What's your guess? </label>" +
            '<input id="guess0" type="number" min="1" max="' +
            guess_max + '" step="1">' + nl;
        input_guess = document.querySelector('#guess0');
        input_guess.onchange = getGuess;
    };
    getGuess = function () {
        var guess;

        guess = parseInt(input_guess.value, 10);
        guess_count += 1 / 2;
        console.log(guess, guess_count);
        if (guess === answer) {
            guess_count += 1 / 2;
            div_output.innerHTML +=
                'You got it in ' + guess_count + ' guesses!' + nl;
            guess_count -= 1 / 2;
            if (guess_count === 1) {
                div_output.innerHTML += "You;re a mind reader!" + nl;
            } else  if (guess_count <= 4) {
                div_output.innerHTML += 'Most impressive.' + nl;
            } else if (guess_count <= 6) {
                div_output.innerHTML += 'You can do better than that.' + nl;
            } else {
                div_output.innerHTML += 'Better luck next time.' + nl;
            }
            div_output.innerHTML +=
                '<label for="play0">Play again?</label> '+
                '<input id="play0" type="text" size="3" placeholder="y/n">' +
                nl;
            input_play = document.querySelector('#play0');
            input_play.onchange = playAgain;
        } else {
            if (guess < answer) {
                div_output.innerHTML += 'Too low. ';
            } else if (guess > answer) {
                div_output.innerHTML += 'Too high. ';
            }
            div_output.innerHTML +=
                '<label for="guess' + guess_count +
                '">Guess again: </label>' +
                '<input id="guess' + guess_count +
                '" type="number" min="1" max="' +
                guess_max + '" step="1">' + nl;
            input_guess = document.querySelector('#guess' + guess_count);
            input_guess.onchange = getGuess;
        }    
    };
    playAgain = function () {
        if (input_play.value === 'y') {
            guess_count = 0;
            play();
        } else {
            div_output.innerHTML += 'Goodbye!';
        }
    };

    play();
}());