我曾尝试搜索类似的问题，但无法找到我的代码在 jfiddle 中运行但在浏览器中不起作用的原因。我还尝试将我的代码从 jfiddle 复制到另一个小提琴项目，但该代码在新项目中不起作用。你可以在这里找到我的项目。我正在制作一个交互式食物游戏，其中有人选择食物，例如橡子南瓜，然后用户可以拖动该图像。

我的第一次尝试是在头部粘贴代码。

<script language="JavaScript">
code
</script>

我需要一个页面加载事件吗？javascript 需要放在一个函数中吗？我是否使用了 jfiddle 框架中没有在我需要调用的本地主机上使用的东西？

下面是我在没有额外食物选项的情况下使用的代码

var stage, layer;

var sources = {
    plate: 'http://www.healncure.com/wp-content/uploads/2014/03/plate1.jpg',
    acornsquash: 'http://www.healncure.com/wp-content/uploads/2014/03/acorn-squash.png',

};
loadImages(sources, initStage);

function loadImages(sources, callback) {
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    // get num of sources
    for (var src in sources) {
        numImages++;
    }
    for (var src in sources) {
        images[src] = new Image();
        images[src].onload = function () {
            if (++loadedImages >= numImages) {
                callback(images);
            }
        };
        images[src].src = sources[src];
    }
}

function initStage(images) {
    stage = new Kinetic.Stage({
        container: 'container',
        width: 936,
        height: 550
    });
    layer = new Kinetic.Layer();
    stage.add(layer);

    // plate
    var plateImg = new Kinetic.Image({
        image: images.plate,
        x: 218,
        y: 20,
        width: 503,
        hei4ht: 502,
        draggable: false,
        visible: true
    });
    layer.add(plateImg);

    // acornsquash
    var acornsquashImg = new Kinetic.Image({
        id: "acornsquash",
        image: images.acornsquash,
        x: 50,
        y: 20,
        width: 134,
        height: 114,
        draggable: true,
        stroke: 'orange',
        strokeWidth: 5,
        strokeEnabled: false,
        visible: false

    });
    layer.add(acornsquashImg);

    layer.draw();

    $(".food").click(function () {
        var node = stage.find("#" + $(this).attr("id"));
        node.show();
        layer.draw();
        console.log($(this).attr("id"));
    });

    document.getElementById('hide').addEventListener('click', function () {
        acornsquashImg.hide();
        layer.draw();
    }, false);
}