Как адаптировать JS-код под разные устройства?

Question

[Tamokotchi]

Всем привет!
Нашел одну фигуру, выполненную в JS. Добавил ее на свой сайт Тильда, но возникла проблема с адаптацией под разные устройства. В JS я не разбираюсь, есть только база по HTML/CSS. Помогите, пожалуйста, исправить код так, чтобы я мог подогнать размер фигуры под мобилки и планшеты.
Вот ссылка: Codepen

Спасибо!

Comments

[Сергей Сергей]

Framework

Answer 1

[Rst0]

там холст canvas и так адаптируется при инициализации под размеры окна

D.canvas.width = window.innerWidth;
    D.canvas.height = window.innerHeight;

можно добавить событие на ресайз окна в код js

window.addEventListener('resize', function(event) {
    D.Init();
}, true);

будет заново инициализировать при любом изменении размера или повороте

Comments

[Tamokotchi]

Я вот здесь увеличил значения radius и circle, чтобы на ПК шарик был крупнее. Но на мобильном и планшете шарик выходит за границы экрана и хотелось бы, чтобы эти значения уменьшались при необходимости.
data: new Array(15),
points: 200,
radius: 80,
speed: 0.05,
circle: 65,

[Rst0]

тогда поменяйте значения в функции перед вызовом D.init

window.addEventListener('resize', function(event) {
/* рассчитать параметры в зависимости от  window.innerWidth */
D.data = new Array(15);
D.points = 200;

/* пример установки радиуса в зависимости от ширины окна */
if( window.innerWidth < 768 ){
    D.radius =  60;
}else if ( window.innerWidth < 415 ){
    D.radius =  40;
} else{
    D.radius =  80;
}

D.speed = 0.05;
D.circle = 65;

/* init */
D.Init();
}, true);

[Rst0]

те же действия нужны и перед вызовом начального D.init
поэтому уместно вынести в отдельную функцию объекта D:

D.calcSize = function(){
   /* рассчитать параметры в зависимости от  window.innerWidth */
   D.data = new Array(15);
   D.points = 200;

   /* пример установки радиуса в зависимости от ширины окна */
   if( window.innerWidth < 768 ){
       D.radius =  60;
   }else if ( window.innerWidth < 415 ){
       D.radius =  40;
   } else{
       D.radius =  80;
   }

   D.speed = 0.05;
   D.circle = 65;
}
  D.calcSize(); // вычисляем вначале
  D.Init();

window.addEventListener('resize', function(event) {
    D.calcSize(); // вычисляем по надобности
    D.Init();
}, true);

[Rst0]

ну и window.innerHeight тоже можно использовать в условиях совместно с window.innerWidth

[Tamokotchi]

Rst0, спасибо большое!