JavaScript. Подробное руководство, 6-е издание

Флэнаган Дэвид

// состоянием: смотрите комментарий в функции newgame.

// Нет необходимости вызывать display здесь.

history.replaceState(state, "", "#guess" + state.guessnum);

}

};

// Этот обработчик событий вызывается всякий раз, когда пользователь вводит

число.

// Он обновляет состояние игры, сохраняет и отображает его.

function handle6uess {

// Извлечь число из поля ввода

var g = parseInt(this.value);

// Если это число и оно попадает в требуемый диапазон

if ((g > state.low) && (g < state.high)) {

// Обновить объект состояния для этой попытки

if (g < state.n)

state.low = g;

else

if (g > state.n) state.high = g;

state.guess = g;

state.guessnum++;

// Сохранить новое состояние в истории посещений

save(state);

// Изменить документ в ответ на попытку пользователя

display(state);

}

else { // Ошибочная попытка: не сохранять новое состояние

alert("Please enter a number greater than " + state.low +

" and less than " + state.high);

}

}

// Изменяет документ, отображая текущее состояние игры,

function display(state) {

// Отобразить заголовок документа

ui.heading.innerHTML = document.title =

"I'm thinking of a number between " + state.low +

" and " + state.high + "."

//

Отобразить диапазон чисел с помощью таблицы

ui.low.style.width = state.low + "%";

ui.mid.style.width = (state.high-state.low) + "%";

ui.high.style.width = (100-state.high) + "%";

// Сделать поле ввода видимым, очистить его и установить фокус ввода

ui.input.style.visibility = "visible";

ui.input.value = "";

ui.input.focus;

// Вывести приглашение к вводу, опираясь на последнюю попытку

if (state.guess === undefined)

ui.prompt.innerHTML = "Type your guess and hit Enter:";

else if (state.guess < state.n)

ui.prompt.innerHTML = state.guess + " is too low. Guess again:";

else if (state.guess > state.n)

ui.prompt.innerHTML = state.guess + " is too high. Guess again:";

else {

// Если число угадано, скрыть поле ввода и отобразить кнопку

// Play Again (Играть еще раз).

ui.input.style.visibility = "hidden"; // Попыток больше не будет

ui.heading.innerHTML = document.title = state.guess + " is correct!";

ui.prompt.innerHTML =

"You Win! <button onclick='newgame(true)'>Play Again</button>“;

}

}

</script>

<style> /* CSS-стили, чтобы придать игре привлекательный внешний вид */

#prompt { font-size: 16pt; }

table { width: 90%; margin:10px; margin-left:5%; }

#low, «high { background-color: lightgray; height: 1em; }

#mid { background-color: green; }

</style>