Кодирование летающего воздушного шара

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

Взгляните на Js-Fidle-Demo.

Наш игровой объект

У нас есть холст (300 пикселей * 300 пикселей), на котором мы рисуем изображение воздушного шара, положение и размер которого определяются ballon_obj:

// The ballon object
var ballon_obj = {
 x: 125, // start position x
 y: 125, // start position y
 vx: 0, // direction horizontal
 vy: 0, // direction vertical
 width: 31,
 height: 60
};
// The ballon image
var ballon_img = new Image();
ballon_img.width = ballon_obj.width;
ballon_img.height = ballon_obj.height;
ballon_img.src = “https://raw.githubusercontent.com/webarbeit/ballon-game/master/assets/balloon.png";

Теперь я полагаю, вы знаете, как написать функцию draw() самостоятельно. Если нет, просто взгляните на JS-Fiddle code.

Переменные

// The gravity we will apply to the ballon
var gravity = 2;
// The "force" which will rise the ballon
var rise_y = 0;
// The acceleration of the rise/fall of the ballon
var acceleration = 0.1;

Функция updateFly()

Давайте посмотрим на базовую функцию updateFly(), которая вызывается с каждым тиком игрового цикла:

var updateFly = function(dt) {
  ballon_obj.y += ballon_obj.vy * gravity * dt — rise_y;
  /** 
   * The ballon should not fly out of our world (canvas)
   */
  if (ballon_obj.y + ballon_obj.height >= HEIGHT) {
    ballon_obj.y = HEIGHT — ballon_obj.height;
  }
  if (ballon_obj.y <= 0) {
    ballon_obj.y = 0;
  }
};

// Our loop function would look like this:
var loop = function() {
  // ...
  updateFly(dt)
  // ...
};

Если бы мы начали наш игровой цикл сейчас, то шарик просто оставался бы в своей начальной позиции, и он не падал бы и не поднимался, потому что направление вертикального движения равно нулю (ballon_obj.vy), как и наша переменная raise_y равна нулю;

Функция updateFall()

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

var updateFall = function(dt) {
 ballon_obj.vy = 1; // vertical move direction down
 rise_y = 0; // No "rise force"
 updateFly(dt); // Calling our fly fn, which applies the position
};

Вместо вызова updateFly() в нашей функции цикла мы вызываем updateFall():

// We are falling ...
var loop = function() {
  // ...
  updateFall(dt);
  // ...
};

Функция updateRise()

Итак, наша гравитация воздействует на воздушный шар и притягивает его к земле. Но, конечно, мы хотим летать на воздушном шаре и снова подниматься вверх. Чтобы сделать это, мы должны «бороться» с гравитацией и установить для нашего rise_y значение больше 0, а для нашего вертикального движения — «вверх» — то есть минус 1.

var updateRise = function(dt) {
 ballon_obj.vy = -1;
 rise_y += acceleration * dt;
 updateFly(dt);
};

Не устанавливая конкретное значение непосредственно для значения rise_y, мы получили более плавный ускоренный рост.

Элементы управления

Далее мы реализуем обработку ввода с помощью мыши. Когда мы удерживаем левую кнопку мыши на холсте, воздушный шар должен взлететь. Когда мы отпускаем кнопку, то баллон должен утонуть.

canvas.addEventListener(‘mousedown’, function(e) {
 update_fn = updateRise;
});
canvas.addEventListener(‘mouseup’, function(e) {
 update_fn = updateFall;
});

Вместо вызова updateRise() или updateFall() в нашей циклической функции у нас есть переменная update_fn, которая является ссылкой на любой из них. из них и будет устанавливаться в зависимости от нашей обработки ввода.

// Update_fn is either updateRise or updateFall
var loop = function() {
  // ...
  update_fn(dt);
  // ...
};

Вот и все ☺ Так что получайте удовольствие, создавая анимацию или игру с этим ;)

Кодирование летающего воздушного шара