-1

在 Javascript 游戏引擎 Turbulenz 中开始一个新项目时，网站上的一个示例在包含在 index.html 的脚本标签中时运行良好。但是，我将该代码移动到外部 .js 文件的任何尝试都会导致移动的代码无法运行。

这是我的程序（运行的版本）：

<!doctype html5>

<html>

<head>
  <title>Blockhead</title>
  <script src="jslib/debug.js"></script>
  <script src="jslib/webgl/turbulenzengine.js"></script>
  <script src="jslib/webgl/graphicsdevice.js"></script>
  <script src="jslib/draw2d.js"></script>
  </head>

<body>
  <canvas id="canvas" width="400px" height="600px"/>
  <script>
     TurbulenzEngine = WebGLTurbulenzEngine.create ({canvas: document.getElementById("canvas")});

     var graphicsDevice = TurbulenzEngine.createGraphicsDevice({});

     var draw2D = Draw2D.create({graphicsDevice: graphicsDevice});

     var r = 1.0, g = 1.0, b = 0.0, a = 1.0;
     var bgColor = [r, g, b, a];

     var x1 = 50;
     var y1 = 50;
     var x2 = graphicsDevice.width - 50;
     var y2 = graphicsDevice.height - 50;

     var rectangle = [x1, y1, x2, y2];

     var drawObject =
       {
       color: [1.0, 0.0, 0.0, 1.0],
       destinationRectangle: rectangle
       };

     var sprite = Draw2DSprite.create
       ({
       width: 100,
       height: 100,
       x: graphicsDevice.width / 2,
       y: graphicsDevice.height / 2,
       color: [1.0, 1.0, 1.0, 1.0],
       rotation: Math.PI / 4
       });

     var texture = graphicsDevice.createTexture
       ({
       src: "particle_spark.png",
       mipmaps: true,
       onload: function (texture)
         {
         if (texture)
           {
           sprite.setTexture(texture);
           sprite.setTextureRectangle([0, 0, texture.width, texture.height]);
           }
         }
       });

     var PI2 = Math.PI * 2;
     var rotateAngle = Math.PI / 32;

     function update ()
       {
       b += 0.01;
       bgColor[2] = b % 1; // Clamp color between 0-1
       sprite.rotation += rotateAngle;
       sprite.rotation %= PI2; //Wrap rotation at PI * 2
       if (graphicsDevice.beginFrame())
         {
         graphicsDevice.clear(bgColor, 1.0);
         /* Rendering code goes here */
         draw2D.begin(); // Opaque
         draw2D.draw(drawObject);
         draw2D.end();

         draw2D.begin('additive'); // Additive
         draw2D.drawSprite(sprite);
         draw2D.end();
         graphicsDevice.endFrame();
         }
       }

     TurbulenzEngine.setInterval(update, 1000 / 60);

  </script>
</body>
</html>

这是不运行的版本（唯一的变化是包含新的脚本标签和所有内部 js 到该文件的移动）：

<!doctype html5>

<html>

<head>
  <title>Blockhead</title>
  <script src="jslib/debug.js"></script>
  <script src="jslib/webgl/turbulenzengine.js"></script>
  <script src="jslib/webgl/graphicsdevice.js"></script>
  <script src="jslib/draw2d.js"></script>
  <script src="javascript/blockhead.js"></script>
  </head>

<body>
  <canvas id="canvas" width="400px" height="600px"/>
</body>
</html>

最后，这是演练来自他们网站的页面：

http://docs.turbulenz.com/starter/getting_started_guide.html

必须有一种方法可以将程序拆分为多个文件，否则项目将变得几乎无法管理。

4

1 回答 1

2

这应该有效：

  <canvas id="canvas" width="400px" height="600px"/>
  <script src="javascript/blockhead.js"></script>
</body>

因为

document.getElementById("canvas")

执行时canvas元素不存在，它必须在canvas元素定义后执行。

如果您在 chrome 中打开页面，您可以按 f12 打开开发人员工具或使用带有 firebug 扩展的 Firefox。控制台应该会显示一个错误，您可以设置断点或使用 console.log 来检查某些变量

于 2014-10-26T10:24:00.970 回答