Архив за месяц: Июль 2016

Обучение JS и разработка игры Самолётик. Шаг 2.

В подготовительной части  мы подгружали 2 JS файла:

<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript" src="js/step1.js"/></script>

Если про 1 я упоминал — это сам 3D фреймфорк, то файл «step1.js», то то что нам предстоит создать.

Преступим.

Из чего должна состоять игра самолётик? Вполне логично предположить что из самого самолетика, поля над котором он должен лететь, облаков для антуража, топливо ( в последующем мы его заменим на буквы) для полета, которое нужно собирать ну и препятствий, которые нужно облетать.

Нам нужно создать соответствующие объекты. three.js содержит «по умолчанию» ряд стандартных графических объектов, такие как шар, куб, цилиндр, пирамида и тд. — подробнее можно глянуть в описании ФВ.

Итак с объектами разобрались — но игра это не только объекты, это и «камера» от лица который мы видим «сцену» , так же это освещение и управление объектами. Для удобства создания и обновления всех объектов создадим «основной» модуль-функцию, пусть называется  «init»:

window.addEventListener('load', init, false);

function init() {
	// тут создаем сцену - камеру
	createScene();

	// тут добавляем свет, а то темно будет
	createLights();

	// тут появляются чать наших объектов, 
        // еще не все что нужно, но уже что-то
        // Сам самолетик / поверхность для полета будет море / облака
	createPlane();
	createSea();
	createSky();

	// здесь в зависимости от "контроллов",
        // мы будем менять положение наших объектов 
	// а так же генерировать изменения ландшавта
	loop();
}

 

Давайте начнем с самого простого и понятного — наших 3D объектов :

Самолетик:

 

Обучение JS и разработка игры Самолётик. Шаг 1.

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

Итак ШАГ 1.

Создаем папку «Самолетик», я это сделал на рабочем столе.

В этой папке создаем файл index.html

Делаем в нем следующий код:

<!DOCTYPE html>
<html lang="en" class="no-js">
 <head>
 <meta charset="UTF-8" />
 <title>Самолетик: Часть 1 </title>
 <link rel="stylesheet" type="text/css" href="css/styles.css" />
 <script type="text/javascript" src="js/three.js"></script>
 <script type="text/javascript" src="js/step1.js"/></script>
 </head>
 <body>
 <div class="world" id="world"></div>
 </body>
</html>

Потом внутри делаем еще 2 папки «css» и «js», и

Идем на сайт http://threejs.org/build/three.min.js и скачиваем последнюю версию самого фреймворка или скачиваем ее ОТ МЕНЯ  (версия скачана 12.07.2016), чтобы точно работало, и кидаем ее в папку «js» (имя должно быть three.js)

В папке «css» создаем файл  styles.css, со след наполнением (ОН ЖЕ,только с заготовкой для 2 части):

.world {
 position: absolute;
 width: 100%;
 height: 100%;
 overflow: hidden;
 background: -webkit-linear-gradient(#e4e0ba, #f7d9aa);
 background: linear-gradient(#e4e0ba, #f7d9aa);
}

Это наш «мир» а именно, фон.

Итак подготовка сделана. Осталось творить — ШАГ 2.

Статья для habrahabr

Решил попробовать стать полноценным жителем habrahabr.ru. Для получения заветного «ключа» нужно представить относительно полезную/интересную статью или ее перевод, или обзор по технологии — в общем что-то связанное с IT и не слишком «замыленное» на Habre.

Так как сейчас начал изучать JavaScript  в виду его активного роста, простоты изучения и увеличения возможностей за счет различный фреймворков, для создания web приложений — ориентир на SPA ( SPA в WiKi )

Кстати для начала разработки SPA сайтов и приложений кроме JS нужно еще знание HTML / HTML5 , CSS, AJAX.

После изучения базовых основ, а для этого мне очень помогла статьи на Habre, направляя на пусть истинный:

Как стать профессиональным веб-разработчиком: практическое руководство

А для «набивания руки» в JS использовал игру codecombat.com , которая вплоне дает понимания как основ программирования , так и использования JS в принципе. PS.  в CodeCombat можно выбрать не только JavaScript, но и например Phyton, для изучения — вперед дерзайте!

PS. Так же у каждого разработчика должна быть под рукой статься с Более 350 бесплатных инструментов для разработчиков так же на Habre.

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

Делаем игру «Самолетик» используя Three.js

Раз пример будет использовать Three.js, то соответственно наш путь идет на  http://threejs.org/ — где имеется полное описание для данного FW с примерами. Туду нужно заглянуть тем кто заинтересуется как работают «потрошки».

В рамках обучения лучше не просто повторить, то что уже кто-то сделал, а попробовать немного изменить и посмотреть что получиться. Сразу же возникло желание немного её упростить и переделать на «ловить» буквы и составлять из них слова — само собой расчет на аудиторию в 4-6 лет.

Ну как говориться если хочешь чему то научиться, попытайся обучить этому другого)…

Итак ШАГ 1.