Блог

Поэтому я создал сервер. Что должен сделать этот сервер, так это открыть html-файл. Для скрипта внутри HTML — файла требуется 2 дополнительных файла JavaScript. main.js и pixi3.js. Когда я запускаю сервер, ничего не появляется, хотя он должен отображать объект. Всякий раз, когда я пишу что-то внутри HTML-файла, оно появляется на экране, например <h1>blah blah blah<h1> . 1:st код-это мой app.js, поскольку мой проект является приложением NodejsConsoleApp, 2:nd-это main.js и последнее-это html-файл.

 'use strict';
let http = require('http');
let fs = require('fs');

let handleRequest = (request, response) => {
    response.writeHead(200, {
        'Content-Type': 'text/html'
    });
    fs.readFile('./index.html', null, function (error, data) {
        if (error) {
            response.writeHead(404);
            respone.write('Whoops! File not found!');
        } else {
            response.write(data);
        }
        response.end();
    });
};

http.createServer(handleRequest).listen(3000);
 

 // ----- Start of the assigment ----- //

class ParticleSystem extends PIXI.Container {
    constructor() {
        super();
        // Set start and duration for this effect in milliseconds
        this.start    = 0;
        this.duration = 500;
        // Create a sprite
        let sp        = game.sprite("CoinsGold000");
        // Set pivot to center of said sprite
        sp.pivot.x    = sp.width/2;
        sp.pivot.y    = sp.height/2;
        // Add the sprite particle to our particle effect
        this.addChild(sp);
        // Save a reference to the sprite particle
        this.sp = sp;
    }
    animTick(nt,lt,gt) {
        // Every update we get three different time variables: nt, lt and gt.
        //   nt: Normalized time in procentage (0.0 to 1.0) and is calculated by
        //       just dividing local time with duration of this effect.
        //   lt: Local time in milliseconds, from 0 to this.duration.
        //   gt: Global time in milliseconds,

        // Set a new texture on a sprite particle
        let num = ("000" Math.floor(nt*8)).substr(-3);
        game.setTexture(this.sp,"CoinsGold" num);
        // Animate position
        this.sp.x = 400   nt*400;
        this.sp.y = 225   nt*225;
        // Animate scale
        this.sp.scale.x = this.sp.scale.y = nt;
        // Animate alpha
        this.sp.alpha = nt;
        // Animate rotation
        this.sp.rotation = nt*Math.PI*2;
    }
}

// ----- End of the assigment ----- //

class Game {
    constructor(props) {
        this.totalDuration = 0;
        this.effects = [];
        this.renderer = new PIXI.WebGLRenderer(800,450);
        document.body.appendChild(this.renderer.view);
        this.stage = new PIXI.Container();
        this.loadAssets(propsamp;amp;props.onload);
    }
    loadAssets(cb) {
        let textureNames = [];
        // Load coin assets
        for (let i=0; i<=8; i  ) {
            let num  = ("000" i).substr(-3);
            let name = "CoinsGold" num;
            let url  = "gfx/CoinsGold/" num ".png";
            textureNames.push(name);
            PIXI.loader.add(name,url);
        }
        PIXI.loader.load(function(loader,res){
            // Access assets by name, not url
            let keys = Object.keys(res);
            for (let i=0; i<keys.length; i  ) {
                var texture = res[keys[i]].texture;
                if ( ! texture) continue;
                PIXI.utils.TextureCache[keys[i]] = texture;
            }
            // Assets are loaded and ready!
            this.start();
            cb amp;amp; cb();
        }.bind(this));
    }
    start() {   
        this.isRunning = true;
        this.t0 = Date.now();
        update.bind(this)();
        function update(){
            if ( ! this.isRunning) return;
            this.tick();
            this.render();
            requestAnimationFrame(update.bind(this));
        }
    }
    addEffect(eff) {
        this.totalDuration = Math.max(this.totalDuration,(eff.duration eff.start)||0);
        this.effects.push(eff);
        this.stage.addChild(eff);
    }
    render() {
        this.renderer.render(this.stage);
    }
    tick() {
        let gt = Date.now();
        let lt = (gt-this.t0) % this.totalDuration;
        for (let i=0; i<this.effects.length; i  ) {
            let eff = this.effects[i];
            if (lt>eff.start eff.duration || lt<eff.start) continue;
            let elt = lt - eff.start;
            let ent = elt / eff.duration;
            eff.animTick(ent,elt,gt);
        }
    }
    sprite(name) {
        return new PIXI.Sprite(PIXI.utils.TextureCache[name]);
    }
    setTexture(sp,name) {
        sp.texture = PIXI.utils.TextureCache[name];
        if ( ! sp.texture) console.warn("Texture '" name "' don't exist!")
    }
}

window.onload = function(){
    window.game = new Game({onload:function(){
        game.addEffect(new ParticleSystem());
    }});
}
 

 <html>

<head>
  <meta charset="utf-8">
  <title>A Particular Test</title>
  <script src="pixi3.min.js"></script>
  <script src="main.js"></script>
</head>

<body>

</body>

</html>
 

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