JS Перемещение функции-прототипа за пределы «Сцены» - PullRequest
Новая
       10

JS Перемещение функции-прототипа за пределы «Сцены»

0 голосов
/ 16 октября 2018

Я пишу основную игру для обеспечения точности мыши в JS и пытаюсь переместить как можно больше кода на глобальный уровень, чтобы его можно было использовать в нескольких сценах.Игра включает в себя перемещение перекрестия (с помощью мыши) и нажатие на квадраты (свойства и методы которых представлены объектом Trgt), которые немного уменьшаются в каждом кадре.

Объект Trgt хранит информацию о целях (насколько они велики, как быстро они исчезают), а также о том, что происходит с целями (например, они сжимаются, их ударяют / нажимают и т. д.).

См. мой проект на JSFiddle .

В игре есть 4 сцены, которые запускаются в следующем порядке: Intro -> Play -> (Win OR Lose).

Я написал конструктор для объекта Trgt в начале кода,Конструктор объявляется на глобальном уровне, а не внутри сцены.

Методы добавляются к прототипу Trgt в пределах 'Play'scene, но я хотел бы переместить все методы, связанные с прототипомза пределами игровой сцены, под конструктором, чтобы он выглядел аккуратнее и чтобы эти методы можно было использовать в последующих сценах (например, если я хочу добавить больше уровней).

Когда я пытаюсь переместить его, то нетмоего кода, кажется, работает.Меня встретил пустой экран.Что я здесь не так делаю?

Я также хочу переместить обработчик щелчка мыши из сцены «Воспроизведение» за пределы этой сцены (как я успешно сделал для обработки щелчка мыши для всех других сцен,и те, и до, и те, что после сцены Play).

Я подозреваю, что моя проблема может быть связана с использованием «this», но я уже давно с этим играюсь и довольно озадачен.

Код метода, который находится внутри сцены воспроизведения, выглядит следующим образом: 

  Trgt.prototype = {
    shrinkTypeChooser: function() {
      this.shrinkType = Math.floor(Math.random() * 5) + 1; //random integer beween 1 & 5
    },
    shrink: function() {
      this.s -= this.shrinkRate;
      switch (this.shrinkType) {
        case 1: //shrink from top left
          break;
        case 2: //shrink from top right
          this.x += this.shrinkRate;
          break;
        case 3: //shrink from bottom right
          this.x += this.shrinkRate;
          this.y += this.shrinkRate;
          break;
        case 4: //shrink from bottom left
          this.y += this.shrinkRate;
          break;
        case 5: //shrink to centre
          this.x += this.shrinkRate / 2;
          this.y += this.shrinkRate / 2;
          break;
      }
    },

    hit: function() {
      clicks++;
      score++;

      this.reset();
      this.shrinkRate *= this.shrinkMult;
    },
    miss: function() { //called when a click DOES NOT hit a target
      clicks++;
    },
    diss: function() { //called when a target disapears
      disses++;
      this.reset();
    },
    reset: function() { //reset trgt size to base values and chooses a new random position
      trgt.shrinkTypeChooser();
      this.s = Math.floor(Math.random() * this.sUpper) + this.sLower; //random trgt size
      this.x = Math.floor(Math.random() * (canvas.width - this.s));
      this.y = Math.floor(Math.random() * (canvas.height - this.s));
    },
    chooseColor: function() {
      if (hair.x >= trgt.x && hair.x <= (trgt.x + trgt.s) && hair.y >= trgt.y && hair.y <= (trgt.y + trgt.s)) {
        //inside target
        trgt.fillColor = 'red'
      } else {
        //outside target
        trgt.fillColor = 'blue'
      }
    },
    draw: function() {
      this.chooseColor();
      ctx.beginPath();
      ctx.rect(this.x, this.y, this.s, this.s);
      ctx.fillStyle = this.fillColor;
      ctx.fill();
    }
  }
...