所以我创建了一个服务器。服务器应该做的是打开一个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>
如果有人能帮助我了解问题所在,我将不胜感激。我还认为我可能只是把所有文件分配到了错误的文件夹中,或者服务器属性出了问题。
暂无答案!
目前还没有任何答案,快来回答吧!