JavaScript не будет загружаться при импорте модуля, который содержит импорт [FIXED / CLOSED] - PullRequest
Новая
       11

JavaScript не будет загружаться при импорте модуля, который содержит импорт [FIXED / CLOSED]

0 голосов
/ 01 марта 2019

В настоящее время я пытаюсь сделать платформерную игру и экспериментировал с canvas, прежде чем начать длинное задание.У меня есть классы player и sprite, в разных модулях.Во время тестирования я использовал var player = new Sprite(img.png); ctx.drawImage(player, 0, 0)

, но теперь я создаю экземпляры класса игрока. В классе плеера я импортирую спрайт , чтобы он работал, конечно, но просто

import Ctx from "./Classes/Ctx.js"; import Player from "./Classes/Player.js";

в main терпит неудачу.У меня есть окно. Ошибка, но даже это не стрельба.Также не было никакого рисования на холсте.

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

Кажется, что это работает, когда я не импортирую Player и не покидаю класс в main.js, но тогда это грязно.

Я путаюсь с ошибкой, а не с остановкойзагрузка JavaScript полностью.Я понятия не имею, что пошло не так как таковое.

Моя файловая система выглядит следующим образом, , а при загрузке страница пуста , когда должен быть контекстный рисунок.Это произошло только тогда, когда я переместил player.js в отдельный файл, требующий импорта спрайта.

Полный код: 

<!DOCTYPE HTML>
<html>
<head>
<script type="module" src="main.js">
</head>
<body></body>
</html>

//main.js

import Ctx from "./Classes/Ctx.js";
import Player from "./Classes/Player.js";

var canv = document.createElement("canvas"); canv.width = "800"; canv.height = "600"; canv.id = "canv";
document.body.appendChild(canv);

const ctx = new Ctx("canv");

ctx.rect({x: 0, y: 0, w: canv.width, h: canv.height, col: "#9f30ba"});

ctx.rect({x: 20, y: 20, w: 20, h: 20, col: "#dedede"});

var player = new Player("Pack.png"); //just any old image works
ctx.drawImg(player.img, player.pos.x, player.pos.x);

console.log(document.body);

//Ctx.js
export default class Ctx { //all this class does is make drawing on the canvas easier
    constructor(canvas) {
        this.canv = document.getElementById(`${canvas}`);
        this.ctx = canv.getContext("2d");
    }
    rect(_rect) {
        this.ctx.fillStyle = _rect.col;
        this.ctx.fillRect(_rect.x, _rect.y, _rect.w, _rect.h);
    }

    drawImg(img, x, y) {
        this.ctx.drawImage(img, x, y);
    }

    clear() {
        this.ctx.clearRect(0, 0, this.canv.width, this.canv.height);
    }
    border(input) {
        this.canv.style.border = `${input}`;
    }
    resetBorder() {
        this.canv.style.border = "none";
    }
}

//player.js
import Sprite from "Sprite.js";

export default class Player {
    constructor(img) {
        this.pos = {x: 0, y: 0}
        this.img = new Sprite(true, img); //this is in the classes folder, so we must take the root of it so we can access the public folder and then the image.
    }
}

//sprite.js
export default class Sprite {
    constructor(isRoot, path) {
        let temp = new Image();
        if(isRoot === true) {
            temp.src = `../Public/${path}`;
        }
        else {
            temp.src = `Public/${path}`;    
        }
        this.sprite = temp;
        return this.sprite;
    }
}

Я немного спешил при создании этого поста, поэтому, если я что-то пропустил, пожалуйста, дайте мне знать.

...