ctx традиционно обозначают не элемент canvas, а взятый из него context (который бывает 2d, webgl и др. ctx.width = 100;
ctx.height = 100;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));
}<canvas width="450" height="450"></canvas>
canvas: сжать по вертикали и повернуть на 45°. Теперь, если рисовать квадраты — получатся ромбики!
requestAnimationFrame() – что передаётся в него аргументом – это понадобится для реалистичной плавности на всех устройствах от быстрого компа до слабого телефона
requestAnimationFrame() – зависит от устройства, активности/неактивности вкладки и др.
setTimeout(), a именно requestAnimationFrame()requestAnimationFrame() успел сработать дважды во время одного кадра и перерисовки не требуется.
var ts0;
function draw(ts) {
// ...
if(!ts0) ts0 = ts;
const dt = ts - ts0; // сколько прошло миллисекунд
// ...
ctx.translate(500, 180 + Math.sin(dt/352)*3);
ctx.rotate( Math.sin(dt/630) / 40 );requestAnimationFrame() параметром передаётся текущее время, так что можно не заморачиваться с созданием нового объекта Date, а использовать этот параметр.ctx.drawImage(cloud, -350, -250); с размерами картинки определяется центр, относительно которого получится вращение. Желательно его подобрать так, чтобы они приходился на визуальный центр масс тучи.
image.src = 'data:image/png;base64,...
ctx.putImageData(imagedata, dx, dy);
ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);выдрать из него кусочек.. например [0, 0, 10, 10]
var pixels = context.getImageData(0, 0, 320, 240);
var data = pixels.data; // в data попадает одномерный массив.
target.putImageData( pixels, 15, 15, 0, 0, 10, 10);
/*
15, 15 – где разместить (отступив по 15px слева сверху в target'е)
0, 0 – откуда копировать в координатах context'а
10, 10 – ширина, высота региона копирования
*/