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

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

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

  1. 'use strict';
  2. let http = require('http');
  3. let fs = require('fs');
  4. let handleRequest = (request, response) => {
  5. response.writeHead(200, {
  6. 'Content-Type': 'text/html'
  7. });
  8. fs.readFile('./index.html', null, function (error, data) {
  9. if (error) {
  10. response.writeHead(404);
  11. respone.write('Whoops! File not found!');
  12. } else {
  13. response.write(data);
  14. }
  15. response.end();
  16. });
  17. };
  18. http.createServer(handleRequest).listen(3000);
  1. // ----- Start of the assigment ----- //
  2. class ParticleSystem extends PIXI.Container {
  3. constructor() {
  4. super();
  5. // Set start and duration for this effect in milliseconds
  6. this.start = 0;
  7. this.duration = 500;
  8. // Create a sprite
  9. let sp = game.sprite("CoinsGold000");
  10. // Set pivot to center of said sprite
  11. sp.pivot.x = sp.width/2;
  12. sp.pivot.y = sp.height/2;
  13. // Add the sprite particle to our particle effect
  14. this.addChild(sp);
  15. // Save a reference to the sprite particle
  16. this.sp = sp;
  17. }
  18. animTick(nt,lt,gt) {
  19. // Every update we get three different time variables: nt, lt and gt.
  20. // nt: Normalized time in procentage (0.0 to 1.0) and is calculated by
  21. // just dividing local time with duration of this effect.
  22. // lt: Local time in milliseconds, from 0 to this.duration.
  23. // gt: Global time in milliseconds,
  24. // Set a new texture on a sprite particle
  25. let num = ("000"+Math.floor(nt*8)).substr(-3);
  26. game.setTexture(this.sp,"CoinsGold"+num);
  27. // Animate position
  28. this.sp.x = 400 + nt*400;
  29. this.sp.y = 225 + nt*225;
  30. // Animate scale
  31. this.sp.scale.x = this.sp.scale.y = nt;
  32. // Animate alpha
  33. this.sp.alpha = nt;
  34. // Animate rotation
  35. this.sp.rotation = nt*Math.PI*2;
  36. }
  37. }
  38. // ----- End of the assigment ----- //
  39. class Game {
  40. constructor(props) {
  41. this.totalDuration = 0;
  42. this.effects = [];
  43. this.renderer = new PIXI.WebGLRenderer(800,450);
  44. document.body.appendChild(this.renderer.view);
  45. this.stage = new PIXI.Container();
  46. this.loadAssets(props&&props.onload);
  47. }
  48. loadAssets(cb) {
  49. let textureNames = [];
  50. // Load coin assets
  51. for (let i=0; i<=8; i++) {
  52. let num = ("000"+i).substr(-3);
  53. let name = "CoinsGold"+num;
  54. let url = "gfx/CoinsGold/"+num+".png";
  55. textureNames.push(name);
  56. PIXI.loader.add(name,url);
  57. }
  58. PIXI.loader.load(function(loader,res){
  59. // Access assets by name, not url
  60. let keys = Object.keys(res);
  61. for (let i=0; i<keys.length; i++) {
  62. var texture = res[keys[i]].texture;
  63. if ( ! texture) continue;
  64. PIXI.utils.TextureCache[keys[i]] = texture;
  65. }
  66. // Assets are loaded and ready!
  67. this.start();
  68. cb && cb();
  69. }.bind(this));
  70. }
  71. start() {
  72. this.isRunning = true;
  73. this.t0 = Date.now();
  74. update.bind(this)();
  75. function update(){
  76. if ( ! this.isRunning) return;
  77. this.tick();
  78. this.render();
  79. requestAnimationFrame(update.bind(this));
  80. }
  81. }
  82. addEffect(eff) {
  83. this.totalDuration = Math.max(this.totalDuration,(eff.duration+eff.start)||0);
  84. this.effects.push(eff);
  85. this.stage.addChild(eff);
  86. }
  87. render() {
  88. this.renderer.render(this.stage);
  89. }
  90. tick() {
  91. let gt = Date.now();
  92. let lt = (gt-this.t0) % this.totalDuration;
  93. for (let i=0; i<this.effects.length; i++) {
  94. let eff = this.effects[i];
  95. if (lt>eff.start+eff.duration || lt<eff.start) continue;
  96. let elt = lt - eff.start;
  97. let ent = elt / eff.duration;
  98. eff.animTick(ent,elt,gt);
  99. }
  100. }
  101. sprite(name) {
  102. return new PIXI.Sprite(PIXI.utils.TextureCache[name]);
  103. }
  104. setTexture(sp,name) {
  105. sp.texture = PIXI.utils.TextureCache[name];
  106. if ( ! sp.texture) console.warn("Texture '"+name+"' don't exist!")
  107. }
  108. }
  109. window.onload = function(){
  110. window.game = new Game({onload:function(){
  111. game.addEffect(new ParticleSystem());
  112. }});
  113. }
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>A Particular Test</title>
  5. <script src="pixi3.min.js"></script>
  6. <script src="main.js"></script>
  7. </head>
  8. <body>
  9. </body>
  10. </html>

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

暂无答案!

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

相关问题