-1

Javascript ゲーム エンジン Turbulenz で新しいプロジェクトを開始すると、Web サイトの例が 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")

キャンバス要素は実行時に存在しません。キャンバス要素が定義された後に実行する必要があります。

ページを chrome で開いた場合は、f12 を押して開発者ツールを開くか、firebug 拡張機能を備えた Firefox を使用できます。コンソールにエラーが表示され、ブレークポイントを設定するか、console.log を使用して特定の変数を調べることができます。

于 2014-10-26T10:24:00.970 に答える