Блог

Я пытаюсь создать игру в ES6. Я уже создал несколько файлов. Основной файл, в котором я собираю всю информацию из разных объектов, файл, в котором я собираюсь создать символ, и файл, который имеет свойства canvas.

проблема в том,: В файле walter.es6 есть квадрат, который будет перемещаться слева направо. Итак, я запускаю draw(); of walter.es6 в script.es6 (основной файл). Но файлу walter.es6 требуется ctx из файла canvas.es6.

Я думаю, это потому, что walter.es6 не знает, что canvas.es6 существует. Но для сохранения чистоты кода необязательно, чтобы они знали друг друга (это то, что было сказано мне раньше). должно быть другое решение, чтобы walter.es6 знал, что такое ctx mains.. но как?

Я надеюсь, что кто-нибудь сможет мне помочь. Заранее благодарю вас.

Вот файлы, о которых я говорил:

script.es6

     const WalterPlayer = require('./walter.es6')
    const DeaEnemy = require('./dea.es6')
    const Wereld = require('./level.es6')
    const Canvas = require('./canvas.es6')


    class Hoofdclass {
        constructor() {
            this.walter = new WalterPlayer();
            this.enemy = new DeaEnemy();
            this.wereld = new Wereld();
            this.canvas = new Canvas();
            this.draw();
        }
        draw(){
            this.walter.draw();

            //alles in beweging zetten
            window.requestAnimationFrame(this.draw.bind(this));
    }
    }

    document.addEventListener("DOMContentLoaded", function(event) {
        let t = new Hoofdclass();
    });
  

walter.es6

 class Walter {
    constructor() {
        this.x = 250;
        this.y = 200;
        this.height = 10;
        this.width = 10;
        console.log(this.canvas)
    }
    draw(){
         this.ctx.clearRect(0,0,500,400)
         this.ctx.beginPath();
         this.x  = 1;
         this.y  = 0.25;
         this.ctx.fillRect(this.x, this.y, this.height, this.width);
         this.ctx.closePath();
    }
}

module.exports = Walter;
  

canvas.es6

 class Canvas {
    constructor(c, ctx) {
        this.c = document.getElementById("canvas");
        this.ctx = this.c.getContext("2d");
        console.log("pieppiep")
    }
}

module.exports = Canvas;
  

Просто передайте необходимый объект объектам, которым это требуется. Либо при создании экземпляра, либо по мере необходимости.

При необходимости, например

 this.walter.draw(this.canvas.ctx); // in draw loop
  

и в walter.

 draw(ctx){
     ctx.clearRect(0,0,500,400);
     ... etc
  

Или создание экземпляра

 this.walter = new WalterPlayer(this.canvas.ctx); // instantiation
  

и в конструкторе

 class Walter {
    constructor(ctx) {
         this.ctx = ctx;
  

Очевидно, вам нужно создать Walter после canvas.

Или очень ленивый способ — сделать объекты, которыми вы хотите поделиться, глобальными (хотя некоторые могут сказать, что этого не нужно, это будет зависеть от контекста, в котором вы планируете запускать, и потребностей приложения в производительности).