Гама на JavaScript прямо в онлайне

Спецвыпуск хакер, номер #002, стр. 002-060-1

Алекс Масанов (alex.masanov@mtu-net.ru)

Дарова, перец! :) Ну как, черпаешь инфу из нашего Х? То-то же. Ну, предположим, изваял ты себе крутую пагу с клевым дизигном, сидишь, и думаешь: чего б такого туда еще запихнуть-то? Чтоб оно и процесс загрузки паги не тормозило, и прикольно было. Я вот решил тебе мазу подкинуть: а почему бы тебе не написать гаму на Яве? Простую, конечно, но настоящую? Что, интересно? Тогда мотай на ус.

Давай изваяем следующую фишку: в игровом поле будет летать и отражаться от стенок импровизированный "мячик", а от нижней границы его надо отбить, перемещая ракетку с помощью мыши или клавиатуры. И чтобы жизнь малиной не казалась, после каждых пяти "возвратов" скорость мяча будет возрастать. По-русски это, по-моему, называлось "Арканоид" и было на писюках лет десять назад. Но поверь мне, пельмень, это было супер-круто и не растеряло своей крутизны даже сейчас. Посмотрим теперь, как это работает на JavaScript.

Ява наносит ответный удар

Вначале определимся со средством вывода на экран. Ясно, что с помощью кучи разных переменных можно описать процесс любой, на фиг, сложности. Но как увидеть результат всего этого: ведь JavaScript-то, козлина эдакая, не располагает средствами графического вывода на экран? Обойти этот подводный камень можно посредством использования формы и текстового поля для ввода (под этим громоздким названием я имею в виду тэг <TEXTAREA>). Самое важное при этом то, что текстовое поле (получая значение как показано ниже) само форматит полученную строку. Зырь, короче, на следующий пример:

Пример 1: Использование <TEXTAREA> для вывода:

<HTML>

<HEAD>

<TITLE>Пример 1</TITLE>

</HEAD>

<BODY>

<FORM name =TestForm1>

<TEXTAREA cols = 15 name = TestArea1 rows = 10>

</TEXTAREA>

</FORM>

</BODY>

<SCRIPT LANGUAGE=JavaScript>

<!--

var string ="Это длинная строка. При выводе она будет автоматически перенесена";

// Объявляем тестовую переменную

TestForm1.TestArea1.value=string; // Выводим в поле TestArea1 переменную string

//-->

</SCRIPT>

</HTML>

Объявляя в этом примере форму и текстовое поле, мы с тобой, доктор Перец, задаем параметр name (для FORM это TestForm1, для TEXTAREA - TestArea1). Посредством этого имени мы затем обращаемся к самому элементу: TestForm1.TestArea1.value=string. Заметь, что поле для ввода само выполняет перенос. То есть, если мы в поле размером 30х20 запишем строку размером в 600 символов, то поле само разобьет ее на 20 строк по 30 символов в каждой.

Таким образом, вывод нашей программы сводится к формированию одной длинной строки игрового поля, которая будет затем записана в TEXTAREA.

Теперь нам осталось только создать тот механизм, который позволит изменять данную строку так, чтобы все выглядело как настоящая игра. Что ж, приступим. Вначале создай 13 переменных (конечно, уже внутри тэга <SCRIPT language = JavaScript>), которые и будут отвечать за все внутренности игры:

Шаг 1: Инициализация переменных:

var fieldx=1; // X-координата игрового поля

var fieldy=1; // Y-координата игрового поля

Содержание  Вперед на стр. 002-060-2

ttfb: 2.7210712432861 ms