Как сделать тетрис на js с учётом размера экрана?

Question

[Igor Mestakhov]

не работал плотно с js, поиск в гугле ничего не дал
задача сделать тетрис (фиксированный фон, уже отрисованы фигурки), но так чтобы в мобильной версии ничего не поехало, на маленьких экранах тоже пропорционально уменьшилось изображение, а скорость движения фигурок не изменилась. была идея использовать для передвигания фигурок изменения х и у у элемента нарисованного на фиксированное значение пикселей, но тогда на маленьких экранах всё будет быстро двигаться
как поступить? может есть какой-то инструмент для того чтобы можно посчитать размеры дива в пропорциях от максимального и тогда двигать фигурку уже не на 5 (к примеру) пикселей, а на 5*N%

Answer 1

[Dark Hole]

Для начала задам вопрос: на чем вы это делаете?
Если вы это собираетесь делать на HTML, то вы в неправильном направлении. Это лучше всего делать на Canvas.

А что касается резиновости, то тут все просто: мы вычисляем размер canavas, на основании этих размеров высчитываем все нужные нам значения.
Пример
Пусть у нас Тетрис 10х10 клеток, а размеры Canvas - 640х480. Мы хотим, что бы у нас все было по минимальному измерению Canvas. Тогда мы находим его

var min = (canvas.width < canvas.height) ? +canvas.width : +canvas.height

делим его на 10, что бы получить клетку
var size = min / 10
и на основании этого размера делаем передвижение фигур и т.д.

function move(time) {
  var realtime = time - lasttime;
  realtime = realtime - realtime % ourInterval;
  figure.y += (realtime == 0) ? 0 : realtime / ourInterval * size;
  lasttime += realtime;
}

Comments

[Дмитрий Беляев]

добавлю, что если канвасу прописать одни параметры width и height, а стилями задать другие, то внешний размер будет от стилей, а внутренний от параметров
P.S. для ретины по идее они должны различаться на window.devicePixelRatio для лучшего отображения, но в принципе можно выставлять что угодно, главное соблюдать пропорции

Answer 2

[Sn0wSky]

Ну дак может возьмете какую-нибудь собственную единицу myUnit, которая будет зависить от ширины экрана/контейнера, 1% (0.01*ширина экрана), например, и все размеры прописывайте через неё, в том числе и высоты. Размер клетки 5*myUnit x 5*myUnit, скорость 10*myUnit и т.д.