我不能为我的生活了解这里的问题是什么。
我已从以下链接逐字复制代码：http://www.html5canvastutorials.com/labs/html5-canvas-animals-on-the-beach-game-with-kineticjs/
在这样做之后，我用我自己的（和创建我自己的图像）替换了一些变量用于自定义交互：
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
background: #06F;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
<script defer>
function loadImages(sources, callback) {
var assetDir = 'http://www.darnellcreates.com/GeneralTesting/DCSummer/works/interactive/img/';
var images = {};
var loadedImages = 0;
var numImages = 0;
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 = assetDir + sources[src];
}
}
function isNearOutline(puzzlepiece, outline) {
var a = puzzlepiece;
var o = outline;
var ax = a.getX();
var ay = a.getY();
if(ax > o.x - 20 && ax < o.x + 20 && ay > o.y - 20 && ay < o.y + 20) {
return true;
}
else {
return false;
}
}
function drawBackground(background, tableImg, text) {
var context = background.getContext();
context.drawImage(tableImg, 0, 0);
context.setAttr('font', '20pt Calibri');
context.setAttr('textAlign', 'center');
context.setAttr('fillStyle', 'white');
context.fillText(text, background.getStage().getWidth() / 2, 40);
}
function initStage(images) {
var stage = new Kinetic.Stage({
container: 'container',
width: 600,
height: 500
});
var background = new Kinetic.Layer();
var puzzlepieceLayer = new Kinetic.Layer();
var puzzlepieceShapes = [];
var score = 0;
// image positions
var puzzlepieces = {
piece1: {
x: 10,
y: 70
},
piece2: {
x: 90,
y: 70
},
piece4: {
x: 275,
y: 70
},
piece3: {
x: 400,
y: 70
},
};
var outlines = {
piece1_black: {
x: 275,
y: 350
},
piece2_black: {
x: 390,
y: 250
},
piece4_black: {
x: 300,
y: 420
},
piece3_black: {
x: 100,
y: 390
},
};
// create draggable puzzlepieces
for(var key in puzzlepieces) {
// anonymous function to induce scope
(function() {
var privKey = key;
var piece = puzzlepieces[key];
var puzzlepiece = new Kinetic.Image({
image: images[key],
x: piece.x,
y: piece.y,
draggable: true,
brightness: 0,
blurRadius: 0
});
puzzlepiece.cache();
puzzlepiece.drawHitFromCache();
puzzlepiece.filters([
Kinetic.Filters.Blur,
Kinetic.Filters.Brighten
]);
puzzlepiece.on('dragstart', function() {
this.moveToTop();
puzzlepieceLayer.draw();
});
/*
* check if puzzlepiece is in the right spot and
* snap into place if it is
*/
puzzlepiece.on('dragend', function() {
var outline = outlines[privKey + '_black'];
if(!puzzlepiece.inRightPlace && isNearOutline(puzzlepiece, outline)) {
puzzlepiece.setPosition({x:outline.x, y:outline.y});
puzzlepieceLayer.draw();
puzzlepiece.inRightPlace = true;
if(++score >= 4) {
var text = 'You win! Enjoy your booty!'
drawBackground(background, images.table, text);
}
// disable drag and drop
setTimeout(function() {
puzzlepiece.setDraggable(false);
}, 50);
}
});
// make puzzlepiece glow on mouseover
puzzlepiece.on('mouseover touchstart', function() {
puzzlepiece.blurRadius(1);
puzzlepiece.brightness(0.3);
puzzlepieceLayer.draw();
document.body.style.cursor = 'pointer';
});
// return puzzlepiece on mouseout
puzzlepiece.on('mouseout touchend', function() {
puzzlepiece.blurRadius(0);
puzzlepiece.brightness(0);
puzzlepieceLayer.draw();
document.body.style.cursor = 'default';
});
puzzlepiece.on('dragmove', function() {
document.body.style.cursor = 'pointer';
});
puzzlepieceLayer.add(puzzlepiece);
puzzlepieceShapes.push(puzzlepiece);
})();
}
// create puzzlepiece outlines
for(var key in outlines) {
// anonymous function to induce scope
(function() {
var imageObj = images[key];
var out = outlines[key];
var outline = new Kinetic.Image({
image: imageObj,
x: out.x,
y: out.y,
draggable: true,
});
puzzlepieceLayer.add(outline);
})();
}
stage.add(background);
stage.add(puzzlepieceLayer);
drawBackground(background, images.table, 'Ahoy! Put the puzzlepieces on the table!');
}
var sources = {
table: 'Help-Grid.png',
piece1: 'piece1.png',
piece1_black: 'piece1-black.png',
piece3: 'piece3.png',
piece3_black: 'piece3-black.png',
piece4: 'piece4.png',
piece4_black: 'piece4-black.png',
piece2: 'piece2.png',
piece2_black: 'piece2-black.png',
};
loadImages(sources, initStage);
</script>
</body>
</html>
现在，说到这里，一切都应该检查出来。我使用http://esprima.org/demo/validate.html验证了javascript，并且它没有错误地传递。与插件相同......
奇怪的是，它在我上面和Adobe Dreamweaver中提供的实际链接中工作得很好......但是在任何浏览器中都没有！即使你把页面保存为HTML，也要相应地将所有路径关联到css / js，没有结果......有人在这里有任何想法吗？
PS：我已经尝试了不同版本的Kinetic.js插件（从最新到最旧）并且似乎无效...... [1]: http://www.html5canvastutorials.com/labs/html5-canvas-animals-on-the-beach-game-with-kineticjs/
答案 0 :(得分：0)
易。
复制这行代码并将其放在上面代码中的第40或41行。
console.log(ax, o.x, ay, o.y);
在函数＆＃39; isNearOutline＆＃39;
的变量定义之后