据我所知,我已经成功预加载了所有图像。在 FireFox 中,一切都呈现得很好,但它拒绝在 Chrome 中显示。我已经在使用 webkit 浏览器时遇到过其他随机的怪癖,我认为这只是其中之一。这是适用的代码(我为篇幅道歉,只是冗长。我向你保证,其中大部分都很简单)。
initResources() 从 $(document).ready() 函数调用,其中画布也被正确初始化。
具体问题似乎是游戏板。X 和 O(它是 tictactoe...)看起来不错,但游戏板拒绝单独出现在 Chrome 的画布上。适用于所有其他浏览器。Chrome 的开发者工具坚称它们是通过网络选项卡加载的,控制台显示了它应该显示的所有内容。谢谢你。
[编辑:刚刚在 Firefox 中也失败了。可能是缓存问题,此时我更加困惑]
var canvas, context, playerPiece, aiPiece;
var x = new Image();
var o = new Image();
var gameBoard = new Image();
var numResources = 3; // Total number of resources to wait for loading
var curResources = 0;
function initResources() {
// Get all our resources ready to go
x.height = 130;
x.width = 130;
x.onload = isLoaded();
x.src = "images/gamepieceX.png";
o.height = 130;
o.width = 130;
o.onload = isLoaded();// = curResources++;
o.src = "images/gamepieceO.png";
gameBoard.height = 500;
gameBoard.width = 500;
gameBoard.onload = isLoaded(); //= curResources++;
gameBoard.src = "images/gameBoard.png";
}
function isLoaded() {
curResources++;
console.log("Loaded resource! Total: " + curResources);
if(curResources == numResources) {
console.log("All loaded up! Moving on!");
gameSetup();
}
}
function gameSetup() {
// Draw our board and assign a piece
console.log("Setting up game!");
playerPiece = x;
aiPiece = o;
// Draw gameboard
context.drawImage(gameBoard, 0, 0);
console.log(gameBoard);
canvas.addEventListener ("mousedown", mouseClicked, false);
}