Как заставить двигаться картинку в Canvas при нажатии на клавишу?

Question

[krilovek]

Всем доброго времени суток. Изучаю JS, решил пробовать написать маленькую игру с помощью Canvas. Но столкнулся с проблемой, мне необходимо что бы при каждом нажатии на клавишу "призрак" подпрыгивал вверх на 1, а потом под силой тяжести опускался (как в Flappy Birds), но получается что первые два клика отрабатывают нормально, а дальше при нажатии "призрак" перемещается вверх на намного большее расстояние, посмотрел много материалов и кажется делаю все правильно, но все равно не работает. Дошло до того что решил в первый раз обратиться сюда, не судите строго)

//Подключение 
const canvas = document.getElementById('game');
const context = canvas.getContext('2d')

//Загрузка изображений
const fonImg = new Image();
fonImg.src = 'img/25.jpg';

const ghostImg = new Image();
ghostImg.src = 'img/ghost.png'

const platformImg = new Image();
platformImg.src = 'img/platform.png'


//Создание координат
var ghost = { x: 0, y: 650, dx: 4, dy: 0 }



// Запуск Игры
fonImg.onload = function () {
   game();
}
// Основной игровой цикл
function game() {
   update();
   render();

   requestAnimFrame(game);
}

function update() {
   //Физика
   document.addEventListener('keydown', moveUp);

   //Постоянное движение
   ghost.y = ghost.y + 4;
   // Функция Прыжка
   function moveUp() {
      ghost.y -= 1;
   }
   //Границы  
   if (ghost.x >= 900)
      ghost.x = 900;
   else if (ghost.x <= 0)
      ghost.x = 0;

   if (ghost.y >= 650)
      ghost.y = 650;
   else if (ghost.y <= 0)
      ghost.y = 0
}

function render() {
   context.drawImage(fonImg, 0, 0, 1000, 800);
   context.drawImage(ghostImg, ghost.x, ghost.y, 100, 100)
   context.drawImage(platformImg, 550, 500, 200, 100)
}

//Функция цикла
var requestAnimFrame = (function () {
   return window.requestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.oRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function (callback) {
         window.setTimeout(callback, 1000 / 2)
      }
})();

Comments

[Александр Шипин]

Посмотрите пример подобного тут, сравните с вашим решением, попробуйте и то и то, найдите различия из-за которых что-то идёт не так у вас, исправьте, пользуйтесь :)

Answer 1

[Сергей Соколов]

Вспоминаем физику: там, вроде, были всякие скорости и ускорения )

Отпускаешь птичку — она падает, ускоряясь. Её скорость растёт на постоянную величину за ед. времени. По нажатию на кнопку «вверх», птичка перемещается выше и её скорость сбрасывается на 0, падение начинается с начала.

Надо запоминать время последнего нажатия, и дальше положение птички считать относительно этого момента и текущего времени. h = g * t^2 / 2, где g — постоянная, ускорение свободного падения. В игре не метры, а пиксели, и надо подобрать значение константы, чтобы не слишком быстро, не слишком медленно ускорялось тело. На глаз.

Ну и конечно, ошибкой было добавлять слушателя события снова и снова в ф-ии update(). Это достаточно сделать только 1 раз.

let startTime = Date.now();

// Функция Прыжка
const moveUp = () => {
  ghost.y -= 50;
  startTime = Date.now();
};

document.addEventListener('keydown', moveUp);

function update() {
  // Физика
  const dt = Date.now() - startTime;
  ghost.y += dt ** 2 / 100; //  подобрать число

  // Границы  
  ghost.x = Math.min(900, Math.max(0, ghost.x));
  ghost.y = Math.min(650, Math.max(0, ghost.y));
}