Опубликован: 01.09.2010 | Уровень: для всех | Доступ: платный | ВУЗ: Сибирский федеральный университет
Лекция 9:

Сценарии Javascript

Объектная модель создана, и мы можем ее использовать. Сохраним весь вышеприведенный код в файле blackjack.js. Создадим HTML-документ ( blackjack.htm ):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>BlackJack</title>

  <script type="text/javascript" src="blackjack.js"></script>

  <link href="blackjack.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <!-- Весь пользовательский интерфейс располагается здесь -->

  <div class="Hand" id="dealer">
  </div>

  <div id="result">
  </div>

  <div id="player" class="Hand">
  </div>

  <div>
    Баланс: $<span id="balance"></span> Ставка: $<span id="bet"></span><br />
    Очки: <span id="sum"></span>
  </div>

  <input type="button" onclick="bet()" value="увеличить ставку" id="btnBet" />
  <input type="button" onclick="nextCard()" value="взять карту" id="btnRun" />
  <input type="button" onclick="finish()" value="Крупье" id="btnFinish" />
</body>
</html>

Стилевая информация хранится в отдельном файле blackjack.css. Вот примерное содержание:

body
{
    background-color: Green;
    color: White;
    font-family: Comic Sans MS;
    font-size: 14px;
    text-align: center;
}
.Card
{
    border: solid 1px #000;
    margin: 6px;
}
.Hand
{
    height: 120px;/* Делаем достаточно высоким, чтобы поместилась карта */
}
#result
{
    height: 30px;
}

Остается создать игроков, инициализировать колоду карт и обработать события нажатия на кнопки.

//задаем функцию, выполняемую при загрузке страницы
    window.onload = function() {
      Deck.init(); //заполняем колоду картами
      player = new Hand(); //игрок объявлен глобально
      dealer = new Hand(); //крупье объявлен глобально

      //кнопки "Взять карту" и "крупье" изначально недоступны
      document.getElementById('btnRun').disabled = true;
      document.getElementById('btnFinish').disabled = true;
      //вспомогательная функция Show() определена ниже
      Show();
    }
    //обрабатываем нажатие кнопки "увеличить ставку"
    function bet() {
      dealer.init(); //сбросить карты у крупье
      player.init(); //сбросить карты у игрока
      Deck.shuffle(); //перетасовать колоду
      //очищаем окно от карт и результата
      document.getElementById('player').innerHTML = '';
      document.getElementById('dealer').innerHTML = '';
      document.getElementById('result').innerHTML = '';
      document.getElementById('sum').innerHTML = '';
      if (player.bet()) {
        // нет необходимости писать if (player.bet() > 0)
        // 0 == false, любое другое число == true
        document.getElementById('btnRun').disabled = false;
      }
      Show();
    }
    //обрабатываем нажатие кнопки "взять карту"
    function nextCard() {
      var oTest = document.getElementById('player');
      var oSum = document.getElementById('sum');

      //берем карту и показываем ее в окне браузера
      oTest.appendChild(player.nextCard().img);
      var s = player.calc(); //подсчитываем очки
      oSum.innerHTML = s; //показываем очки
      //делаем доступной карту "Крупье"
      document.getElementById('btnFinish').disabled = false;
      if (s > 21 && player.cards.length > 2) {
        //у игрока перебор. нет смысла продолжать
        document.getElementById('result').innerHTML = 'Не повезло';
        player.currentBet = 0;
        document.getElementById('btnFinish').disabled = true;
        document.getElementById('btnRun').disabled = true;
      }
      Show();
    }
    //обрабатываем нажатие кнопки "крупье"
    function finish() {
      document.getElementById('btnRun').disabled = true;
      document.getElementById('btnFinish').disabled = true;
      //находим элемент с id="dealer"
      var oDealer = document.getElementById('dealer');
      //таково внутреннее правило казино - рисковать до 16 очков
      while (dealer.calc() < 17) {
        //добавляем карты крупье и отображаем их
        oDealer.appendChild(dealer.nextCard().img);
      }
      switch (player.compare(dealer)) {
        case 1:
          document.getElementById('result').innerHTML = '!!! Победа !!!';
          player.balance += player.currentBet * 2;
          player.currentBet = 0;
          break;
        case -1:
          document.getElementById('result').innerHTML = 'Не повезло';
          player.currentBet = 0;
          break;
        default: // 0 - ровно
          document.getElementById('result').innerHTML = '??? Ровно ???';
          break;
      }
      Show();
    }
    //вспомогательная функция
    function Show() {
      //находим элемент с id='balance' и показываем баланс игрока
      //у крупье баланс не ограничен
      document.getElementById('balance').innerHTML = player.balance;
      document.getElementById('bet').innerHTML = player.currentBet;
    }

Этот код можно добавить в файл blackjack.js. Сохраните все файлы в одной папке. Откройте файл blackjack.htm в браузере.

Вопросы

  1. Какое назначение имеет язык Javascript?
  2. Каким образом сценарий Javascript вставляется в HTML-документ?
  3. Как объявляется переменная? Какие имена недопустимы?
  4. Какие типы данных имеются в Javascript?
  5. Как создаётся массив? С чего начинается нумерация элементов массива?
  6. Перечислите и охарактеризуйте управляющие структуры Javascript.
  7. Какие существуют в Javascript варианты синтаксиса создания функций?
  8. Как создать несколько однотипных пользовательских объектов?
  9. Как добавить метод к типу объекта?
  10. Как создаётся объект при отсутствии необходимости определения его типа?
Юрий Шах
Юрий Шах

Профессиональный веб-дизайн: Введение в современные веб-технологии
Самостоятельная работа 4

"3. Создание внешней таблицы.

Теперь создайте таблицу с двумя строками. Во второй строке создайте две ячейки - в первую переместите таблицу цифр, а во вторую - таблицу знаков."

Как в ячейку <td> поместить таблицу? Таблица же сама состоит из ячеек. Исходя из задания следует, что <td> может быть родителем для <td>, но это противоречит правилам HTML?
Если не прав - поправьте.
Также прошу разъяснить, как именно выполнить занное условие - поместить в табличную ячейку таблицу цифр, а в другую ячейку - таблицу знаков? 

Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Nat Ves
Nat Ves
Израиль
Татьяна Орлова
Татьяна Орлова
Россия, Воронежская область