1 сент. 2015 г.

Тетрис для самостоятельного освоения кода

Игра для самостоятельного разбора Тетрис. Скачайте архив по ссылке https://github.com/alexeizuzin/kids-tetris/archive/master.zip, разархивируйте и откройте в браузере файл index.html 


Управление стрелками. Чтобы начать заново - обновите страницу. Для упрощения программного кода сделаны только две фигуры, они появляются поочереди. Повернуть фигуру можно только один раз.

Код программы, как обычно, откомментирован. Разбирайтесь, пробуйте, дорабатывайте.

12 авг. 2015 г.

Игра Космические Захватчики - Space Invaders

Игра для самостоятельного разбора Космические Захватчики. Скачайте архив по ссылке https://github.com/alexeizuzin/space-invaders/archive/master.zip, разархивируйте и откройте в браузере файл index.html 


Управление стрелками, выстрел - пробел. Визуализацию снарядов не делал - представьте, что это лазерный луч. Красный вражеский босс также стреляет лазером.

Код программы полностью откомментирован. Разбирайтесь, пробуйте, изучайте.

26 мая 2015 г.

Игра Арканоид

Игра для самостоятельного разбора Арканоид. Скачайте архив по ссылке https://github.com/alexeizuzin/kids-arkanoid/archive/master.zip, разархивируйте и откройте в браузере файл index.html

Управление стрелочками и пробелом.

Поясню логику выбора направления шарика. Перед каждым передвижением шарика проверяется место перед шариком. Если оно свободно, шарик продолжает движение (1 вариант на картинке).

Если место перед шариком не свободно (2 вариант на картинке), надо определить в какую сторону должен отскочить шарик.


Проверяем, свободно ли место слева (3 вариант): тогда мячик отскакивает влево. Если же занято (вариант 4), отскакивает в другую сторону.

Читайте код, разбирайте каждую строчку, там есть поясняющие комментарии. Попробуйте изменить программу, чтобы убедиться, что поняли верно: ускорьте или замедлите движение шарика, покрасьте какой-нибудь элемент в другой цвет, измените размеры поля, добавьте новый ряд кирпичей и т.д.


1 мая 2015 г.

Проектирование внешнего вида игры

Проектирование внешнего вида помогает в создании html-элементов, визуального представления игры (и вообще любой программы). Эти html-элементы в дальнейшем будут оживляться с помощью программной части.

1. Первый шаг в проектировании собственной игры: найти самые близкие аналоги. Иногда нет ничего похожего, но чаще основные элементы копируются из существующих игр.

2. Продумайте, что в игре самое главное и составьте список.  Он может выглядеть так:
— игровое поле
— игровой персонаж
— выход
— вражеский персонаж
Все второстепенное необходимо убрать. Такие функции игр, как отсчет времени, различные бонусы и усложнения уровней оставляются на будущее.

3. Нарисуйте на бумаге экран игры и представьте, как будут взаимодействовать элементы между собой. На начальных этапах разработки все изображается грубо: квадраты, прямоугольники и круги. Не беспокойтесь о красоте игры, в дальнейшем ее легко можно будет оформить картинками.

Работа программиста в большей степени связана с анализом и планированием, чем с написанием строк кода. Продумайте самостоятельно визуальное представление своих любимых игр.

30 апр. 2015 г.

Игра Бомбермен

Предлагаю простую игру Бомбермен для самостоятельного разбора. Скачайте архив по ссылке https://github.com/alexeizuzin/kids-bomberman/archive/master.zip , разархивируйте и откройте в браузере файл index.html

Управление: стрелки клавиатуры и пробел — положить бомбу. Чтобы начать заново — обновите страницу.

В архиве находится 4 файла:
  document.txt, где я предварительно сделал текстовое описание программы;
  index.html, основной файл, в который подключаются стили и программа;
  style.css со стилями html-элементов;
  script.js с программной частью игры.

Порядок создания игры у меня был такой:

1. Сделал текстовое описание.
2. Создал файлы index.html и style.css и начал поочередно вставлять теги и настраивать стили. Вначале создал поле <div class="pole" id="id_pole"></div> и прикрутил стили, затем все остальные элементы. Когда все элементы были созданы, я скрыл элементы, которые не должны показываться вначале с помощью css-свойства display: none.
3. Создал файл программы (script.css) и начал добавлять туда переменные и функции по плану.
4. Написал комментарии в программе для лучшего понимания кода.

Если появятся вопросы, задавайте — буду рад ответить в комментариях!



24 мар. 2015 г.

Что учить дальше

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

javascript.ru — сайт о языке программирования JavaScript. В разделе http://learn.javascript.ru подробный учебник с примерами.

htmlbook.ru — сайт о HTML и CSS с большим справочником тегов и стилей. Есть учебник по HTML — htmlbook.ru/samhtml и учебник по CSS — htmlbook.ru/samcss.

23 мар. 2015 г.

Циклы и проектирование данных

Для удобства хранения данных используются массивы (списки) и ассоциативные массивы (объекты). Важно использовать их по назначению: в списках хранятся похожие однотипные элементы, а в объектах — элементы, из которых состоит сам объект (например, объект человек состоит из элементов: имя, возраст, пол, профессия и т.д.).

В играх часто требуется проверить, попал ли снаряд в цель. Для этого сравнивают координаты снаряда и множества целей.

Если у элемента1 координаты совпадают с координатами снаряда — элемент1 уничтожен;


Если у элемента2 координаты совпадают с координатами снаряда — элемент2 уничтожен;

Если у элемента3 координаты совпадают с координатами снаряда — элемент3 уничтожен;

...и так много раз. Представляете, как сложно это сделать, когда элементов сотни, тысячи?

Когда однотипных элементов игры много, и с ними должны происходить одновременные действия, надо использовать обычный массив (список). Допустим у нас есть простой массив — список животных spisokZooparka:

spisokZooparka = [ 'lev', 'zebra', 'udav', 'akula', 'pauk' ]

Для того, чтобы узнать первый элемент списка пишем spisokZooparka[0]
А если номер хранится в переменной (например,  x = 2 ) пишем так:
spisokZooparka[x]

Если мы изменим номер в переменной (например,  x = 54 ) и запустим команду spisokZooparka[x] результат будет другой. 

Автоматический перебор элементов массива делается с помощью цикла:
 for ( ключ in массив){ что сделать за один цикл }

Например, для списка животных:

for (x in spisokZooparka){
  console.log(x);
}

Ключ (x) — это переменная, которая в первый цикл равна 0, во второй цикл — 1, и так далее.
Массив (spisokZooparka) — это переменная, в которой хранится массив. Вместо переменной можно прямо вписать и любой массив (но так обычно не делают):

for (x in ['kit', 'osminog']){
  console.log(x);
}

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

Для массива из двух элементов код сработает так:
console.log(0); // первый цикл
console.log(1); // второй цикл

Допустим, нам надо заменить удава на омара (зоопарк приобрел новое животное, а старое продал):

for (x in spisokZooparka){
  if (spisokZooparka[x] == 'udav'){
// если элемент это удав
spisokZooparka[x] = 'omar';
// записали в этот элемент новую информацию
}
}

В этом коде поочередно перебираются ключи. Когда ключ x становится равен 2, и spisokZooparka[x] становится равен 'udav' мы записываем в spisokZooparka[2]  значение  'omar'

 Сделайте самостоятельно цикл, в котором будет проверяться массив odnoklassniki:
odnoklassniki = [
{name: 'Misha', ball: 5 },
{name: 'Tosha', ball: 3 },
{name: 'Gosha', ball: 4 },
{name: 'Masha', ball: 5 },
{name: 'Sasha', ball: 4 }
]
И для элементов с пятью баллами (odnoklassniki[x].ball == 5) выведите сообщение с именем человека.

Перебор элементов ассоциативного массива (объекта) делают точно также, только ключи в цикле становятся не номерами элементов, а текстовыми ключами. Сделайте самостоятельно цикл для перебора элементов объекта:
 sobaka = {name: 'Reks', vozrast: 5, poroda: 'pudel' }
 — и  выведите поочередно все данные из ключей командой console.log()

Функции, условия и циклы являются основой современных языков программирования. Теперь мы готовы к написанию практически любых игр (в упрощенном виде).