7

我已经尝试了一切来解决这个问题,但没有任何效果。在这里发帖是我最后的手段。

我正在尝试编写一个简单的画布元素并动态加载所有内容,但没有任何效果。我不断在 game.js:33 上的 Google 控制台“未捕获的 ReferenceError:ctx 未定义”中收到错误消息。

我最初认为这是因为 common.js 是在其他 2 个 javascript 文件之后加载的,所以我制作了一个加载器文件,它按照我想要的顺序加载每个 JS 文件。我使用 $.getScript() 和 $.when() 函数来做到这一点。不幸的是,这没有奏效。所以正在加载 ctx var,但由于某种原因它给了我错误。

我已包含以下文件。提前感谢您的帮助。

编辑:我只是尝试从每个单独的 JS 文件中取出所有代码,并将它们按照它们应该在的顺序放在同一个文件中,现在它工作正常。但是很高兴知道为什么它根本不起作用。因为将我的所有代码都放在一个文件中会变得非常忙碌。谢谢你。

索引.php

<!doctype>
<html>
<head>
   <title>Game - Unknown</title>
   <link rel="stylesheet" href="./assets/css/default.css">
   <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
   <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.3.min.js"></script>
   <!--<script src="./assets/js/loader.js"></script>-->
   <script src="./assets/js/common.js"></script>
   <script src="./assets/js/graphics.js"></script>
   <script src="./assets/js/game.js"></script>
</head>
<body>
<canvas id="viewport"></canvas>
</body>
</html>

common.js

   $(document).ready(function(){

      // Setup the canvas game context for 2D
      var canvas = document.getElementById("viewport");
      var ctx = canvas.getContext("2d");

      // Update the canvas dimensions to match window size when changed
      $(window).resize(function(){canvasResize()}); canvasResize();

      function canvasResize(){
         var cWidth = window.innerWidth;
         var cHeight = window.innerHeight;

         canvas.width = cWidth;
         canvas.height = cHeight;

         ctx.clearRect(0, 0, canvas.width, canvas.height);
         ctx.fillStyle = '#000';
         ctx.fillRect(0, 0, cWidth, cHeight);
      }

      // Get center of things - Useful for centering images on canvas
      function getCenter(dim){ return dim / 2 }

   });

图形.js

   $(document).ready(function(){

      function gfxTile(x, y, w, h, r, g, b, a)
      {
         ctx.fillStyle = "rgb(60, 60, 100)";
         ctx.beginPath();
         //ctx.moveTo(x + h / 2, y + w / 2);
         ctx.moveTo(10, 10);
         ctx.lineTo(105, 25);
         ctx.lineTo(25, 105);
         ctx.lineTo(25, 105);
         ctx.closePath();
         ctx.fill();
      }

   });

游戏.js

   $(document).ready(function(){

      // START TEMPORARY
      var mapSizeX = 10;
      var mapSizeY = 10;
      var mapArray = new Array();

      function createMap()
      {
         for(x = 0; x < mapSizeX; x++)
         {
            mapArray[x] = [];

            for(y = 0; y < mapSizeY; y++)
            {
               mapArray[x][y] = 0;
            }
         }
      }
      // END TEMPORARY

      setInterval(mainLoop, 50);

      function mainLoop()
      {
         //gfxTile(10, 10, 40, 40, 50, 50, 50, 100);
         ctx.clearRect(0, 0, canvas.width, canvas.height);
      }

   });
4

2 回答 2

3

var ctx = canvas.getContext("2d");创建了一个ctx在您传入的函数范围内调用的变量$(document).ready();

当 game.js 中的函数执行时,ctx其作用域或父作用域window.

一个简单的解决方法是改变

var ctx = canvas.getContext("2d");

window.ctx = canvas.getContext("2d");
于 2013-03-24T21:06:35.140 回答
0

您的 ctx 变量已经在可访问的名称空间上,您的问题基本上是加载文件没有顺序和优先级的结果。但是,您可以使用脚本加载器来解决问题,并确保在使用之前已经定义了您的变量。

在这个例子中,我使用了head.js脚本加载器。

<script src="js/head.js"></script>
<script>
head.js(
"http://code.jquery.com/jquery-1.9.1.min.js",
    "http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.3.min.js", 
    "js/common.js", 
    "js/graphics.js", 
    "js/game.js"
); 

您可以使用requireJS进一步优化您的代码,以仅公开您想要的命名空间。去看一下。

于 2013-03-24T21:57:16.300 回答