Разработка игр

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

Создаем персонажа в игре на HTML 5. Создаем игру. Часть 3

Сегодня мы создадим врага для нашего персонажа (синего квадрата :) и оживим его. Начало тут и тут. Файл index.html мы трогать не будем. Будем дополнять файл game.js, который находится у нас в папке js. Заставим врага двигаться справа налево по координате X и исчезать, если он дошел до конца.

Создаем персонажа в игре на HTML 5. Создаем игру. Часть 2

Сегодня мы рассмотрим движение нашего персонажа (синего прямоугольника :). Начало тут Создаем игру. Часть 1. Файл index.html мы трогать не будем. Все будем писать в файле game.js, который находится у нас в папке js. Добавим в игру параметр скорость и с помощью jQuery сделаем реакцию на события клавиатуры (onKeypress).
var WIDTH = 640; // Ширина Canvas
var HEIGHT = 480; // Высота Canvas

var WIDTH_HERO = 64; // Ширина персонажей
var HEIGHT_HERO = 64; // Высота персонажей

var textX = 50; // Начальная позиция персонажа

Создаем персонажа в игре на HTML 5. Создаем игру. Часть 1

Сегодня я рассмотрю создание персонажа для игры на HTML 5. Сегодня рассмотрим просто вывод персонажа в окно браузера. Сначала создадим файлы и структуры папок для дальнейшего развития игры. Создаем папки и файлы: img, js, index.html:

img
js
- game.js
- jquery-1.4.2.min.js
index.html
Файл index.html с Canvas, на котором мы будем рисовать и делать игру

canvasExample

canvas{
border: 1px solid black;
}

Игровые движки HTML 5. HTML5 Game Engines

Если Вы хотите начать разработку HTML 5 игр, то сейчас без игровых движков Вам не обойтись... И сейчас их очень много! И это хорошо! :) Есть из чего выбрать и что поизучать... Сегодня начну цикл статей по игровым движкам и как всегда дам необходимые ссылки для самостоятельного изучения... Но статьи будут писаться по мере свободного времени... Надеюсь Вам будет это интересно.
А теперь полезные ссылки сами движки (HTML5 Game Engines):
ImpactJS
Цена: 99$
http://www.impactjs.com

Crafty
Цена: Free
http://www.craftyjs.com

Pixi.js
Цена: Free
http://www.pixijs.com/

Melonjs

Полезные ссылки для разработчиков на Flash и Flex

  • http://www.actionscript.org/ - Много исходников на ActionScript 2 и ActionScript 3 для разработчиков на Flash и Flex. Язык английский
  • http://www.freeactionscript.com/ - готовые примеры движений персонажей, физики, столкновений на ActionScript 3. Язык английский
  • http://www.republicofcode.com/ - Много примеров для ActionScript 2 и SctionScript 3. Работа с XML, видео, AIR. Язык английский
  • http://www.photonstorm.com/ - Примеры игр на игровом движке Flixel. На английском!

Полезные ссылки для разработчиков игр и приложений для iOS

  • http://www.flashburn.info/ -Интересный блог "Разработка игр и приложений для iOS" Евгения "FlashBurn" Квасова. iOS-разработчика из Минска.
  • http://flexfactory.ru/ - Блог начинающего Flex/Air разработчика. Есть несколько примеров.

Блоги Flash разработчиков игр

http://niacrisss.blogspot.com - Интересный блог молодого flash разработчика
http://refaller.blogspot.com/2010/08/blog-post_30.html - еще один блог разработчика на flash
http://ransom00.blogspot.com/
http://pro-gram-err.blogspot.com/2010/07/my-first-tutorial-how-to-make-s... - Блог индийского flash разработчика
http://kushagragour.in/blog/ - Новый блог предыдущего разработчика
http://www.emanueleferonato.com - СУПЕР! блог итальянского flash разработчика игр с примерами кода и исходниками

Добавленно недавно... :)

Поворот персонажа. ActionScript 3

Основная идея поворота персонажа состоит в том, что меняется угол относительно оси Х, согласно положению (позиции) мыши. Чтобы вычислить угол поворота персонажа, используется функцию atan2, которой в качестве параметров передаются координаты мыши X и Y.

radians1 = Math.atan2(a1, b1);

Угол, полученный функцией atan2 в радианах. Для перевода его в градусы, вставте в код следующую строку:

degrees1 = radians1 / (Math.PI / 180);

Теперь зададим угол поворота персонажа:

person.rotation = degrees1;

И весь код:

  

События клавиатуры (Перемещение персонажа) на ActionScript 3

Пишу скорее для себя, чтобы не забыть. Всегда (ну или почти всегда) требуется сделать на ActionScript перемещение персонажа в Flash игре.
Код ниже просто перемещает персонажа клавишами-стрелками:

// Скорость перемещения
var speed:Number = 5;

// слушатель событий нажатия клавиш.
stage.addEventListener(KeyboardEvent.KEY_DOWN, f_player);

// функция выполняющаяся при нажатии клавиш
function f_player(e:KeyboardEvent):void
{
 if (e.keyCode == Keyboard.UP)
 {
  	mytank.y -= speed;  
 }
 if (e.keyCode == Keyboard.DOWN)
 {
	 mytank.y += speed;  
 }
RSS-материал