Question

我一直在为我尝试加载到var manifest中的图像文件获取Resource Not Found。无法弄清楚什么是错的，我最好能告诉我我正在严格遵循教程代码......

(function () {
  "use strict";

  WinJS.Binding.optimizeBindingReferences = true;

  var app = WinJS.Application;
  var activation = Windows.ApplicationModel.Activation;

  var canvas, context, stage;
  var bgImage, p1Image, p2Image, ammoImage, p1Lives, p2Lives, title, endGameImage;
  var bgBitmap, p1Bitmap, p2Bitmap, ammoBitmap;
  var preload;

  var SCALE_X = window.innerWidth / 800;
  var SCALE_Y = window.innerHeight / 480;
  var MARGIN = 25;
  var GROUND_Y = 390 * SCALE_Y;

  app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !==  activation.ApplicationExecutionState.terminated) {
            // TODO: This application has been newly launched. Initialize
            // your application here.
        } else {
            // TODO: This application has been reactivated from suspension.
            // Restore application state here.
        }
        args.setPromise(WinJS.UI.processAll());
    }
};



function intialize() {

    var manifest = [
        { id: "screenImage", src: "images\Backgrounds\gameplay_screen.png" },
        { id: "redImage", src: "images\Catapults\Red\redIdle\redIdle.png" },
        { id: "blueImage", src: "images\Catapults\Blue\blueIdle\blueIdle.png" },
        { id: "ammoImage", src: "CatapultGame\images\Ammo\rock_ammo.png" },
        { id: "winImage", src: "images\Backgrounds\victory.png" },
        { id: "loseImage", src: "images\Backgrounds\defeat.png" },
        { id: "blueFire", src: "images\Catapults\Blue\blueFire\blueCatapult_fire.png" },
        { id: "redFire", src: "images\Catapults\Red\redFire\redCatapult_fire.png" }
    ];

    canvas = document.getElementById('gameCanvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    context = canvas.getContext("2d");



    stage = new createjs.Stage(canvas);

    //Preload Images
    preload = new createjs.PreloadJS();
    preload.onComplete = prepareGame;     

    preload.loadManifest(manifest);
    }


function prepareGame() {

    bgImage = preload.getResult('screenImage').result;
    bgBitmap = new createjs.Bitmap(bgImage);
    bgBitmap.scaleX = SCALE_X;
    bgBitmap.scaleY = SCALE_Y;
    stage.addChild(bgBitmap);

    stage.update;
}

function gameLoop() {
    update();
    draw();
}

function draw() {

}

function update() {

}

app.oncheckpoint = function (args) {
    // TODO: This application is about to be suspended. Save any state
    // that needs to persist across suspensions here. You might use the
    // WinJS.Application.sessionState object, which is automatically
    // saved and restored across suspension. If you need to complete an
    // asynchronous operation before your application is suspended, call
    // args.setPromise().
};

document.addEventListener("DOMContentLoaded", intialize, false);
app.start();

})();

Answer 1

如果您将目录结构发送给我们，

图片会更加清晰：现在，您可以尝试此代码

var manifest = [
        { id: "screenImage", src: "/images/Backgrounds/gameplay_screen.png" },
        { id: "redImage", src: "/images/Catapults/Red/redIdle/redIdle.png" },
        { id: "blueImage", src: "/images/Catapults/Blue/blueIdle/blueIdle.png" },
        { id: "ammoImage", src: "/CatapultGame/images/Ammo/rock_ammo.png" },
        { id: "winImage", src: "/images/Backgrounds/victory.png" },
        { id: "loseImage", src: "/images/Backgrounds/defeat.png" },
        { id: "blueFire", src: "/images/Catapults/Blue/blueFire/blueCatapult_fire.png" },
        { id: "redFire", src: "/images/Catapults/Red/redFire/redCatapult_fire.png" }
    ];

Answer 2

您必须记住，无论何时运行javascript，路径都相对于当前运行脚本的页面，与CSS或HTML不同，其中路径是相对于位置的文件。因此，使用相对路径会导致头痛。

但是，您可以创建对图像路径的全局引用。

有关更多详细信息和工作解决方案，请参阅此帖子：

Relative Paths in Javascript in an external file

Javascript无法找到图像文件

2 个答案: