05 августа 2010

Игры в браузере: Налаживаем контакт

Привет. Если у вас когда-нибудь возникало желание или потребность написать не тривиальный код на JavaScript, вам наверняка приходилось его отлаживать.

Да, современные браузеры дают возможность выполнять их по шагам, но это долго и утомительно, и зачастую не всегда удобно. Использование функции alert, не удобно и не всегда возможно, например когда нам нужно реагировать на ввод пользователя, для игры это важно. В общем, не подходит эта функция для отладки игры. Что же делать?

Что же делать? Решение на самом деле очень простое.

<html>
  <head>
    <!-- скрипт который мы пишем -->
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <center>
      <!-- вот она, наша палочка-выручалочка -->
      <textarea id="log" value="" readonly="true" cols="80" rows="30">
    </center>
   </body>
</html>

В скрипт достаточно поместить простую функцию, которая будет делать то, что нам нужно.

/* script.js */
function writeLog(str) {
    var log = document.getElementById('log');
    log.value = str + "\n" + log.value;
}

/*
 * Так-как JavaScript загружается раньше, чем тег <textarea>, важно
 * дождаться загрузки всего документа, прежде чем вызывать нашу
 * функцию.
 */
window.onload = function () {
    writeLog("Hello, world!");
    writeLog("It work!");
}

Вот так, ничего изощренного. Для удобство использования, новые сообщения дописываются в начало. Все.

Дополнение:

Спасибо анониму! Совсем забыл сказать, что если есть возможность пользоваться встроенным отладчиком в браузере, то он, скорее всего, поддерживает объект console.

Если нет возможности воспользоваться отладчиком, бывает такое, если бы не бывало, я бы этот велосипед бы не делал. Так вот. Если нет возможности воспользоваться объектом console, можно пользоваться выводом в textarea.

У меня возникла идея использовать textarea, потому что туда выводиться и информация для игрока. Если веских причин не использовать console нет, используйте его, не пожалеете. Поверьте, это удобнее моего велосипеда.