Почему именно Java Script(JS)?
Написать программу можно в блокноте и запустить тут же в браузере - не надо устанавливать никаких пакетов для разработки и язык программирования достаточно простой, и позволяет сделать как простые так и сложные программы, сайты. Можно запустить на любом браузере, у кого угодно как на компьютере, так и на телефоне. Можно сделать интерактивную открытку, игру, программу для себя за час. Можно делать и более серьёзные вещи.
Напишем игру, но пока без игрока - в игре некий NPC будет просто сам по себе двигаться по игровому полю.
Для демонстрации возможностей, пользуясь самыми простыми средствами - блокнот, paint, любой браузер(IE, google chrome).
Из чего будет состоять программа т.е. план:
1) Несколько строк html кода, которые просто показывают браузеру, что это JS - просто скопировать строки - они стандартные;
2) Вывод картинки игрового поля;
3) Команда указывающая браузеру создать таймер - запускать много раз в секунду одну процедуру;
4) Вывод, отображение NPC на игровом поле.
5) Процедура, в которой NPC и решает куда ему двигаться;
Начинаем...
Создаём файл с расширением htm. Например "Наша игра.htm". Можно разными способами. Например создать текстовый файл на рабочем столе, открыть его в блокноте и сохранить под именем "Наша игра.htm".
Копирует в блокнот строки для пункта (1) плана - это простая структура пустой html странички. Можно сохранить и двойным щелчком мыши на файле открыть файл в браузере - будет просто пустая страница.
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language=JavaScript>
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Пункт 2 плана.
Надо добавить изображение игрового поля на эту страницу.
У нас будет очень простая игра и очень простое поле - рисуем его в графическом редакторе - можно просто в paint.
Надо сразу определиться с размерами изображения чтобы потом учитывать это в игре. Открываем paint и создаём рисунок с размерами 600 на 600 - в paint размеры можно задать по пункту меню "свойства".
Я нарисовал так - картинку с кирпичами нашёл в интернет и вырезал квадрат внутри так чтобы.
Толщина кирпичей должна быть везде по 30 пикселей. Потом этот размер я буду использовать в программе чтобы не заходить за границы.
Как выглядит моя картинка:
Картинку сохранил как "map1.jpg" в ту же папку где сохранён файл с игрой
Теперь в секцию body добавляю тег для отображения картинки "<IMG src="map1.jpg" style="POSITION: absolute; LEFT: 0px; TOP: 0px">".
Программа в блокноте выглядит так:
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language=JavaScript>
</SCRIPT>
</HEAD>
<BODY>
<IMG src="map1.jpg" style="POSITION: absolute; LEFT: 0px; TOP: 0px">
</BODY>
</HTML>
Если запустить программу в браузере, то отобразится картинка
Пункт (3) плана
В секции SCRIPT добавляем пока пустую процедуру
В тег BODY добавляем команду создания таймера setInterval('GoNPC()',10). Запускать процедуру GoNPC() постоянно каждые 10 мс.
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language=JavaScript>
function GoNPC() {
}
</SCRIPT>
</HEAD>
<BODY onload="setInterval('GoNPC()',10)">
<IMG src="map1.jpg" style="POSITION: absolute; LEFT: 0px; TOP: 0px">
</BODY>
</HTML>
Пункт (4) плана
В paint рисуем картинку NPC с размерами 30 на 30
Фон у картинки надо сделать, или прозрачным, или таким же как на игровом поле. Прозрачный фон можно сделать в paint.net. Я нарисовал шар на таком же песочном фоне как и у игрового поля.
Добавляем теперь тег для изображения нашего NPC
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language=JavaScript>
</SCRIPT>
</HEAD>
<BODY>
<IMG src="map1.jpg" style="POSITION: absolute; LEFT: 0px; TOP: 0px">
<IMG id=npc1 src="npc1.jpg" style="POSITION: absolute; LEFT: 30px; TOP: 30px">
</BODY>
</HTML>
Как выглядит страница после запуска
"id=npc1" - для того чтобы позже обращаться к этой картинке из программы
Пункт (5) плана
В функции GoNPC() описывается поведение нашего NPC - как ему реагировать и что делать.
Смысл данной процедуры чтобы NPC двигался сам по себе и не заходил за границы поля
1. Определяем переменные "var x = 30, y = 30, decision = 0, decisionTime = 0;". x и y это координаты NPC. decision - это номер принятого решения от 0 до 8. Если решение 0, то NPC идёт в лево и в верх. decisionTime - это время(во сколько) когда можно принять следующее решение в секундах
2. В процедуре GoNPC() определяем выбор решения куда идти NPC и решение хранится 3 секунды.
3. В процедуре GoNPC() определяем выбор направления движения в зависимости от decision. Меняем координаты x и y
4. Надо предотвратить заход NPC за границы поля. Если координаты больше, или меньше границ поля, то меняем их на границы
5. Устанавливаем координаты x и y объекту html - нашей картинке - чтобы менялось изображение style.left = x и style.top = y
В результате должно получится так - шарик плавно перемещается, то в одну сторону, то в другую по игровому полю, и не заходя за границы.
Поведение NPC можно определять как угодно по своему - хоть по кругу пусть летает.
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language=JavaScript>
var x = 30, y = 30, decision = 0, decisionTime = 0;
function GoNPC() {
//NPC случайным образом принимает решение
//куда ему идти
//и 3 секунды его придерживается
Today = new Date();
seconds = Today.getHours()*60 + Today.getMinutes() * 3600
+ Today.getSeconds();
if (seconds > decisionTime) {
decision = Math.floor(Math.random()*9);
decisionTime = seconds + 3;
}
//Эти блоки if определяют как меняются координаты
//в зависимости от принятого решения
if (decision == 0) {
x -= 1;
y -= 1;
}
if (decision == 1) y -= 1;
if (decision == 2) {
x += 1;
y -= 1;
}
if (decision == 3) x -= 1;
if (decision == 5) x += 1;
if (decision == 6) {
x -= 1;
y += 1;
}
if (decision == 7) y += 1;
if (decision == 8) {
x += 1;
y += 1;
}
//предотвращение захода NPC за границы поля
if (x < 31) x = 31;
if (x > 539) x = 539;
if (y < 31) y = 31;
if (y > 539) y = 539;
//Устанавливаем координаты нашей картинке NPC
document.getElementById("npc1").style.left = x;
document.getElementById("npc1").style.top = y;
}
</SCRIPT>
</HEAD>
<BODY onload="setInterval('GoNPC()',10)">
<IMG src="map1.jpg" style="POSITION: absolute; LEFT: 0px; TOP: 0px">
<IMG id=npc1 src="npc1.jpg" style="POSITION: absolute; LEFT: 30px; TOP: 30px">
</BODY>
</HTML>
Если будут заинтересованные в материале, подписавшиеся и лайки, то сделаю следующую часть - продолжение.