НОУ ИНТУИТ | Введение в современные веб-технологии. Лекция 9: Сценарии Javascript

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Сибирский федеральный университет

Опубликован: 01.09.2010 | Доступ: свободный | Студентов: 4013 / 428 | Оценка: 4.08 / 3.78 | Длительность: 11:06:00

Темы: Интернет-технологии, Программирование

Специальности: Разработчик интернет-проектов

|

Вам нравится? Нравится 74 студентам

| Поделиться |

Поддержать курс

| Скачать электронную книгу

Объектная модель создана, и мы можем ее использовать. Сохраним весь вышеприведенный код в файле 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 в браузере.

Вопросы

Какое назначение имеет язык Javascript?
Каким образом сценарий Javascript вставляется в HTML-документ?
Как объявляется переменная? Какие имена недопустимы?
Какие типы данных имеются в Javascript?
Как создаётся массив? С чего начинается нумерация элементов массива?
Перечислите и охарактеризуйте управляющие структуры Javascript.
Какие существуют в Javascript варианты синтаксиса создания функций?
Как создать несколько однотипных пользовательских объектов?
Как добавить метод к типу объекта?
Как создаётся объект при отсутствии необходимости определения его типа?

Дальше >>

Авторизоваться

Введение в современные веб-технологии

Сценарии Javascript

Вопросы

Вопросы и ответы