Простая игра на HTML5 Canvas - часть 3

Часть 3а. Физика

Потому что физика в StH очень проста, нет никакой необходимости включать какой-то физический движок, как например Box2d (http://box2d-js.sourceforge.net/). Прыжки главного персонажа настолько просты, что реализуются в нескольких строках кода. Давайте разделим его на две несвязанные части - прыжки и падения. Когда объект начинает прыгать, он имеет некоторую начальную скорость, снижающуюся под действием силы тяжести. Это стадия заканчивается, когда эта скорость полностью сводится к нулю и гравитация начинает тянуть объект вниз с нарастающей силой. Это вторая часть прыжка - падение. Научим ангела, как себя вести в таких ситуациях, давайте расширим объект ‘player’ добавив несколько атрибутов

var  player = new (function(){
  var  that = this;
  that.image  = new Image();
  (...)
//новые атрибуты
  that.isJumping  = false;
  that.isFalling  = false;
//состояние объекта в булевых переменных (взлет или падение)?
  that.jumpSpeed  = 0;
  that.fallSpeed  = 0;
  //ускорение взлета и падения
  
  (...) //остальная часть кода
  })();

  Теперь  давайте внедрять методы ответственные за прыжки. Дальнейшее  расширение объекта ‘player’: 

  that.jump = function() {
  //инициализация прыжка
  if (!that.isJumping &&  !that.isFalling) {
  //сначала  проверим - объект не должен находиться в состоянии взлета или падения,
  //чтобы  не подпрыгивать не имея опоры (из воздуха)
  that.fallSpeed = 0;
  that.isJumping = true;
  that.jumpSpeed = 17;
  //начальная скорость
  }
  }
  that.checkJump = function() {
  //начинаем взлетать
  that.setPosition(that.X,  that.Y - that.jumpSpeed);
  //перемещаемся  вверх с приростом на jumpSpeed пикселей
  that.jumpSpeed--;
  //имитируем  гравитацию уменьшая ускорение взлета
  if (that.jumpSpeed == 0) {
  //и  если ускорение взлета упало до нуля, начинаем падать
  that.isJumping = false;
  that.isFalling = true;
  that.fallSpeed = 1;
  }
  }
  that.checkFall = function(){
  //почти  тоже, что и checkJump()
  if (that.Y < height -  that.height) {
  //проверяем,  не достигнут ли нижний край экрана и увеличиваем fallSpeed 
  //(ускорение  свободного падения)...
  that.setPosition(that.X,  that.Y + that.fallSpeed);
  that.fallSpeed++;
  } else {
  //.. иначе – отскок (снова взлетаем) 
  that.fallStop();
  }
  }
  that.fallStop = function(){
  //хватит  падать, пора снова взлетать
  that.isFalling = false;
  that.fallSpeed = 0;
  that.jump();    
  }

Это обязательно обновлять основные функции цикла для перерисовки позиции нашего персонажа во время прыжков и падений. Обновляем GameLoop (игровой цикл) таким кодом, прежде чем перерисовать персонаж:

if (player.isJumping) player.checkJump();
  if (player.isFalling) player.checkFall();

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

player.setPosition(~~((width-player.width)/2),  ~~((height - player.height)/2));
  player.jump(); //здесь

Хорошо, красиво прыгает, фрагмент удивительного псевдо-физического кода. Теперь давайте сделаем некоторые элементы управления. 

Часть 3b. Управление

Главный герой StH может двигаться только вбок. Он подпрыгивает автоматически, вверх/вниз движения будут зависеть от платформ. Пользователь может только командовать ангелу, переместиться влево или вправо. Опять же, это может быть достигнуто путем расширения объекта ‘player’ дополнительными методами. 

var player = new(function(){
  (...)
  that.moveLeft = function(){
  if (that.X > 0) {
  //проверим не вышли ли мы за  область экрана
  that.setPosition(that.X - 5, that.Y);
  }
  }
  that.moveRight = function(){
  if (that.X + that.width < width) {
  // проверим не вышли ли мы  за область экрана
  that.setPosition(that.X + 5, that.Y);
  }
  }
  (...)
  })();

Теперь привяжем функцию к положению курсора мыши (ангел будет следовать за ним).

document.onmousemove =  function(e){
  if (player.X + c.offsetLeft  > e.pageX) {
  //если мышь слева от персонажа сдвигаем его влево.
  player.moveLeft();
  } else if (player.X +  c.offsetLeft < e.pageX) {
  //иначе направо?
  player.moveRight();
  }
  }

Это все на сегодня. В следующей части ​​я покажу рисование платформ и контроль столкновений. Как обычно, результат этой части урока можно посмотреть по адресу: http://jsbin.com/uhaka3/, а скачать исходники тут: http://guthub.com/michalbe/Simple-game-with-HTML5-Canvas

Копирайты.

Автор: Михал Будзинский https://twitter.com/#!/@michalbe

Автор перевода: Андрей Семенов https://twitter.com/#!/a_semenov79