Как правильно импортировать переменные и функции в угловых машинописных файлах?

Question

Итак, я делаю html-игру на холсте на английском языке, в которой будет много файлов сценариев, и я хочу сделать ее с оптимальной читабельностью и производительностью.

Вот мой код:

import { Component, OnInit } from '@angular/core';
import { Player } from './scripts/entities';
declare let $: any;

@Component({
  selector: 'app-game-screen',
  templateUrl: './game-screen.component.html',
  styleUrls: ['./game-screen.component.scss']
})
export class GameScreenComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    //Draw canvas
    let sw = $("#container").width(); // Screen width
    let sh = $("#container").height(); // Screen height

    //Player canvas
    let canvas: any = document.querySelector("#gameScreen");
    canvas.width = sw;
    canvas.height = sh;
    let ctx = canvas.getContext("2d");

    //Test canvas
    let testCanvas: any = document.querySelector("#testScreen");
    testCanvas.width = sw;
    testCanvas.height = sh;
    let test = testCanvas.getContext("2d");

    //function to clear canvas
    function clearCanvas(screen) {
      screen.clearRect(0, 0, canvas.width, canvas.height);
    }
    //!Draw canvas

    // Entities - player, enemies, bosses
    const player = new Player('Player', sw / 2, sh / 2, sw / 10, sh / 7, ctx);
    player.draw();

    const posMarker = new Player('Position indicator', sw / 2, sh / 2, 5, 5, test);
    posMarker.boxColor = 'red';
    posMarker.draw();

    // ! Entities - player, enemies, bosses

    //Controls
    document.addEventListener('keydown', keyDownHandler, false);
    document.addEventListener('keyup', keyUpHandler, false);

    let rightPressed = false;
    let leftPressed = false;
    let upPressed = false;
    let downPressed = false;

    function keyDownHandler(event) {
      if (event.keyCode == 39) {
        rightPressed = true;
      }
      else if (event.keyCode == 37) {
        leftPressed = true;
      }
      if (event.keyCode == 40) {
        downPressed = true;
      }
      else if (event.keyCode == 38) {
        upPressed = true;
      }
    }

    function keyUpHandler(event) {
      if (event.keyCode == 39) {
        rightPressed = false;
      }
      else if (event.keyCode == 37) {
        leftPressed = false;
      }
      if (event.keyCode == 40) {
        downPressed = false;
      }
      else if (event.keyCode == 38) {
        upPressed = false;
      }
    }

    function controlMove() {
      clearCanvas(ctx);
      if (rightPressed) {
        player.x += 10;
      }
      else if (leftPressed) {
        player.x -= player.speed;
      }
      if (downPressed) {
        player.y += player.speed;
      }
      else if (upPressed) {
        player.y -= player.speed;
      }
      //Border limitations
      if (player.x - player.w / 2 < 0) { player.x = player.w / 2 }
      if (player.x + player.w / 2 > sw) { player.x = sw - player.w / 2 }
      if (player.y - player.h / 2 < 0) { player.y = player.h / 2 }
      if (player.y + player.h / 2 > sh) { player.y = sh - player.h / 2 }
      //!Border limitations
      player.draw();
      requestAnimationFrame(controlMove);
    }
    controlMove();
    // ! Controls

  }

}

Допустим, мне нужна вся эта часть об элементах управления в другом внешнем файле. Как бы я продолжил делать это?

    //Controls
    document.addEventListener('keydown', keyDownHandler, false);
    document.addEventListener('keyup', keyUpHandler, false);

    let rightPressed = false;
    let leftPressed = false;
    let upPressed = false;
    let downPressed = false;

    function keyDownHandler(event) {
      if (event.keyCode == 39) {
        rightPressed = true;
      }
      else if (event.keyCode == 37) {
        leftPressed = true;
      }
      if (event.keyCode == 40) {
        downPressed = true;
      }
      else if (event.keyCode == 38) {
        upPressed = true;
      }
    }

    function keyUpHandler(event) {
      if (event.keyCode == 39) {
        rightPressed = false;
      }
      else if (event.keyCode == 37) {
        leftPressed = false;
      }
      if (event.keyCode == 40) {
        downPressed = false;
      }
      else if (event.keyCode == 38) {
        upPressed = false;
      }
    }

    function controlMove() {
      clearCanvas(ctx);
      if (rightPressed) {
        player.x += 10;
      }
      else if (leftPressed) {
        player.x -= player.speed;
      }
      if (downPressed) {
        player.y += player.speed;
      }
      else if (upPressed) {
        player.y -= player.speed;
      }
      //Border limitations
      if (player.x - player.w / 2 < 0) { player.x = player.w / 2 }
      if (player.x + player.w / 2 > sw) { player.x = sw - player.w / 2 }
      if (player.y - player.h / 2 < 0) { player.y = player.h / 2 }
      if (player.y + player.h / 2 > sh) { player.y = sh - player.h / 2 }
      //!Border limitations
      player.draw();
      requestAnimationFrame(controlMove);
    }
    controlMove();
    // ! Controls

Что мне делать с моими функциями, ссылающимися на переменные, такие как player.x и player.y (при попытке сохранить производительность)?

И можно ли инициализировать эти прослушиватели событий не так, как в основном файле, чтобы уменьшить беспорядок.

document.addEventListener('keydown', keyDownHandler, false);
document.addEventListener('keyup', keyUpHandler, false);

Answer 1

Во-первых, используйте стратегию обнаружения изменений OnPush. Особенно в игре, в которой вы хотите оптимизировать производительность.

@Component({
  selector: 'app-game-screen',
  templateUrl: './game-screen.component.html',
  styleUrls: ['./game-screen.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class GameScreenComponent implements OnInit {

Для этого может потребоваться, чтобы вы сами инициировали обнаружение изменений, поэтому вам лучше взглянуть на эту статью, в которой это объясняется.

https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

Если вы хотите разделить элементы управления в отдельный файл, то вам, вероятно, следует просто создать один одноэлементный сервис (он же GameStore), который содержит ваши player.x и player.y и другие данные приложения, а затем другой сервис, который получает доступ к значениям игрока GameStore, обнаруживает или ожидает уведомления о нажатиях клавиш и обрабатывает их (также известный как GameController).

Я обычно использую Observables в своих магазинах, aka.

export class GameStoreService {

    private _player: BehaviorSubject<PlayerModel> = new BehaviorSubject(null);

    setPlayer( _player: PlayerModel ) {
        this._player.next( _player );
    }

    get player() {
        return this._player.asObservable();
    }
}

На который любой может подписаться и нажать на.

Относительно слушателей во всем, кроме основного файла

document.addEventListener('keydown', keyDownHandler, false);
document.addEventListener('keyup', keyUpHandler, false);

Используйте для них HostListeners, но вы не можете установить их ни в одном файле, я думаю, что этот поток SO имел хорошее объяснение того, что происходит

Можно ли использовать HostListener в Сервисе?