Phaser 3 / JavaScript Import ReferenceError - PullRequest
Новая
       21

Phaser 3 / JavaScript Import ReferenceError

0 голосов
/ 29 сентября 2019

Я нашел какой-то код на Github для игры в Phaser 3, и мне было трудно просто запустить его. Код выглядит нормально, и на короткое время у меня появился экран заголовка. Первоначальный разработчик использовал ExpressJS и имел сервер, но он не работал "из коробки", поэтому я решил убрать часть жира и просто использовать XAMPP на своем локальном компьютере и запустить его в браузере в Chrome,Таким образом, я могу использовать debugger; в VS Code, когда мне это нужно.

Использование debugger; показало, что один из классов, которые должны импортироваться, не импортируется. Что странно, два других импортируемых класса появляются в Chrome Dev Tools в разделе Модули. Итак, IDK, почему Chrome видит только 2 из 3 классов, которые я пытаюсь импортировать. Я даже посмотрел на файлы .js для классов, которые появляются, и они идентичны тем, которые не импортируются и выдают ошибку. Самое главное, что в этом проекте так много файлов (и еще больше, которые будут созданы после того, как я преодолею эти ошибки), я могу себе представить, что эту ошибку я буду часто видеть. Так что мне нужна помощь с пониманием, почему эта ошибка выдается. Должно быть проблема с тем, как я импортирую / экспортирую файлы.

Это оригинальная ссылка на Github. В конечном счете, я просто пытаюсь заставить эту вещь работать так, как я могу. Я хотел что-то более простое, чем сервер узлов, поэтому я использовал XAMPP и использовал файл index.html. Если кто-нибудь может указать мне правильное направление или сказать мне лучший способ сделать это круто.

https://github.com/jamesOreilly27/Space-Shooter

Ошибка в Chrome

enter image description here

enter image description here

На втором изображении вы видите PlayerLaser и Shield распознаются как импортированные, но «Корабль» не появляется, поэтому ошибка возникает на следующем шаге, если я перемещаюсь вперед по debugger; и генерирует ошибку на рисунке 1.

Вот мой index.html файл 

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <title>EOS Space Force</title>
</head>
<body>
    <script type="module" src="src/phaser.min.js"></script>
    <script type="module" src="src/index.js"></script>
    <script type="module" src="src/UI/UpgradeButton.js"></script>
    <script type="module" src="src/UI/UpgradeContainer.js"></script>
    <script type="module" src="src/UI/UpgradeCountContainer.js"></script>
    <script type="module" src="src/UI/UpgradeCounter.js"></script>
    <script type="module" src="src/scenes/Background.js"></script>
    <script type="module" src="src/scenes/Battlefield.js"></script>
    <script type="module" src="src/scenes/Death.js"></script>
    <script type="module" src="src/scenes/Title.js"></script>
    <script type="module" src="src/scenes/UpgradeShop.js"></script>
    <script type="module" src="src/scenes/utils.js"></script>
    <script type="module" src="src/scenes/utils/battlefield.js"></script>
    <script type="module" src="src/scenes/utils/collisions.js"></script>
    <script type="module" src="src/scenes/utils/enemies.js"></script>
    <script type="module" src="src/scenes/utils/itemDrop.js"></script>
    <script type="module" src="src/scenes/utils/upgradeShop.js"></script>
    <script type="module" src="src/scenes/utils/levels/Level1.js"></script>
    <script type="module" src="src/sprites/Bomb.js"></script>
    <script type="module" src="src/sprites/Chaser.js"></script>
    <script type="module" src="src/sprites/Divebomber.js"></script>
    <script type="module" src="src/sprites/DivebomberLaser.js"></script>
    <script type="module" src="src/sprites/Explosion.js"></script>
    <script type="module" src="src/sprites/Fighter.js"></script>
    <script type="module" src="src/sprites/FighterLaser.js"></script>
    <script type="module" src="src/sprites/Laser.js"></script>
    <script type="module" src="src/sprites/LaserPowerup.js"></script>
    <script type="module" src="src/sprites/PatrolShip.js"></script>
    <script type="module" src="src/sprites/PatrolShipLaser.js"></script>
    <script type="module" src="src/sprites/Player.js"></script>
    <script type="module" src="src/sprites/PlayerLaser.js"></script>
    <script type="module" src="src/sprites/Powerup.js"></script>
    <script type="module" src="src/sprites/Shield.js"></script>
    <script type="module" src="src/sprites/ShieldPowerup.js"></script>
    <script type="module" src="src/sprites/Ship.js"></script>
    <script type="module" src="src/sprites/utils.js"></script>
    <script></script>
</body>
</html>

Вот пример других файлов. Player.js, где происходит ошибка. PlayerLaser.js появляется Ship.js нет.

Player.js - источник ошибки 

import { Ship } from '../sprites/Ship.js';
import { Shield } from '../sprites/Shield.js';
import { PlayerLaser } from '../sprites/PlayerLaser.js';

//debugger;
export class Player extends Ship {
  constructor(config) {
    super(config)
    this.shieldLevel = config.shieldLevel
    this.laserLevel = config.laserLevel
    this.speed = config.speed
    this.fireRate = config.fireRate
    this.moveUpgrades = config.moveUpgrades,
    this.fireRateUpgrades = config.fireRateUpgrades
    this.laserUpgrades = config.laserUpgrades
    this.upgradeCount = config.upgradeCount
    this.nextFire = 0
    this.body.setCollideWorldBounds(true)
  }

PlayerLaser.js - отображается в Chrome 

import { Laser } from '../sprites/Laser.js'

export class PlayerLaser extends Laser {
  constructor(config) {
    super(config)
    let laserLevel = config.scene.player.laserLevel
    if(laserLevel === 2) {
      this.scaleX = .5
      this.scaleY = .5
    } else if(laserLevel === 3 || laserLevel === 4) {
      this.scaleX = .7
      this.scaleY = .7
    }
  }

  update() {
    super.update()
    if(this.active && !this.body.velocity.y) this.body.setVelocityY(-600)
  }
}

Ship.js - не отображается в Chrome 

import { shouldDrop, choosePowerup } from '../scenes/utils/itemDrop.js';
//export { Ship }; 

export class Ship extends Phaser.GameObjects.Sprite {
  constructor(config) {
    super(config.scene, config.x, config.y, config.key, config.speed, config.fireRate, config.shieldLevel, config.laserLevel, config.moveUpgrades, config.fireRateUpgrades, config.laserUpgrades, config.upgradeCount, config.path, config.left)
    this.scene.physics.world.enable(this)
    this.scene.add.existing(this)
    this.key = config.key
    this.scaleX = .4
    this.scaleY = .4
    this.speed = 0
    this.bulletSpeed = 0
    this.fireRate = 0
  }
...