服务器不会从html上的javascript文件呈现对象

dzhpxtsq  于 2021-09-23  发布在  Java
关注(0)|答案(0)|浏览(141)

所以我创建了一个服务器。服务器应该做的是打开一个html文件。html文件中的脚本需要另外两个javascript文件。main.js和pixi3.js。当我运行服务器时,没有任何东西显示出来,因为它应该渲染一个对象。每当我在html文件中写入内容时,它就会出现在屏幕上,如 <h1>blah blah blah<h1> . 1:st代码是我的app.js,因为我的项目是一个nodejsonsoleapp,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(props&&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 && 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>

如果有人能帮助我了解问题所在,我将不胜感激。我还认为我可能只是把所有文件分配到了错误的文件夹中,或者服务器属性出了问题。

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题