私はこの問題を解決するためにあらゆることを試みましたが、何も機能していません。ここに投稿するのが私の最後の手段です。
単純なcanvas要素をコーディングしてすべてを動的にロードしようとしていますが、何も機能していません。game.js：33のGoogleコンソールで「UncaughtReferenceError：ctxisnotdefined」というエラーが発生し続けます。
もともとcommon.jsが他の2つのjavascriptファイルの後にロードされているためだと思っていたので、各JSファイルを好きな順序でロードするローダーファイルを作成しました。$ .getScript（）と$ .when（）関数を使用してこれを行いました。残念ながら、これは機能しませんでした。したがって、ctx varがロードされていますが、何らかの理由でエラーが発生します。
以下のファイルを含めました。助けてくれてありがとう。
編集：私はちょうど個々のJSファイルからすべてのコードを取り出して、それらが意図されている順序で同じものにそれらを配置しようとしました、そしてそれは今うまくいきます。しかし、なぜそれがまったく機能しなかったのかを知ることは素晴らしいことです。すべてのコードを1つのファイルに収めるのは非常に忙しくなります。ありがとうございました。
index.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 }
});
graphics.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();
}
});
game.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);
}
});