Возможно ли полностью избавиться от глобальных переменных?

Question

[zlodiak]

Есть 2D-игровое поле на основе html canvas. При помощи rxjs я создал два потока:
1 - для отслеживания нажатий клавиш
2 - для хранения координат игрового объекта

Проблема в том, что из тела оператора map, в котором происходит пересчёт координат мне приходится обращаться к глобальной переменной canvasWidthPx чтобы объект на вышел за пределы игрового поля.

const keys$ = fromEvent(document, 'keydown').pipe(
  startWith({ key: '' }),
  map((e: KeyboardEvent) => e.key),
);

const tank$ = of(tankInit);

const player$ = combineLatest(tank$, keys$).pipe(
  map(([tank, key]) => {
    switch (key) {
      case 'ArrowUp':
        if(tank.y >= tank.step) { tank.y -= tank.step; }
        break;
      case 'ArrowRight':
        if(tank.x <= canvasWidthPx - tankSizePx - tank.step) { tank.x += tank.step; }
        break;
      case 'ArrowDown':
        if(tank.y <= canvasHeightPx - tankSizePx - tank.step) { tank.y += tank.step; }
        break;
      case 'ArrowLeft':
        if(tank.x >= tank.step) { tank.x -= tank.step; }
        break;    
    } 

    return tank;
  })  
);

С точки зрения функционального подхода это неправильно потому то функция перестаёт быть чистой. Подскажите пожалуйста как можно избежать использования глобальных переменных для моего случая. И возможно ли это вообще?

Если важно, то полный код тут.

Comments

[2CHEVSKII]

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

[zlodiak]

2CHEVSKII, Разве так? Но если функция использует внешнюю переменную, которая может поменять своё значение от любого воздействия, то функция не сможет возвращать один и тот же результат для одних и тех же параметров...

[2CHEVSKII]

zlodiak, я имел ввиду константы, т.к. думал, что у вас размер канваса постоянен. Ну, в таком случае - передавайте размеры канваса, как параметры. Хотя, я никак не могу взять в толк - зачем вам эта муть?

Answer 1

[Антон Швец]

combineLatest([tank$, keys$, canvasSizes$])
же

А вообще непонятно, это же у вас реакция на нажатия кнопок?
Тогда инициатором потока должны быть только кнопки, а при изменении канваса и танка поток дергаться не должен.
Т.е. надо

keys$.pipe(
 withLatest(tank$),
 withLatest(canvasSizes$), 
)

А еще почему танк в потоке тоже непонятно.

Comments

[Антон Швец]

добавлю еще, что движение по координате можно сделать попроще

tank.x = Math.min(tank.x + tank.step, canvasWidthPx - tankSizePx)

Но конечно и тут коробку пространства для танка надо рассчитать заранее, а не отмерять ширину танка при каждом нажатии.