Гама на 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-координата игрового поля
