我有一个 javascript 游戏，它使用拖放图像来创建单词。目前，如果这个词有重复的字母，我必须以不同的方式命名这些字母：
Example word: Alphabet,
images: a.png, l.png, p.png, h.png, a1.png, b.png, e.png and t.png.
正如您可以想象的那样，当您拖动a.png来拼写单词时，它必须位于自己定义的块上，否则它不会锁定到位。
我如何编辑脚本以多次使用相同的图像并能够拖动任何正确的位置。
请参阅此小提琴的演示：http: //jsfiddle.net/Q89Ck/
<script defer="defer">
function loadImages(sources, callback) {
var assetDir = 'http://kidnplay.co.uk/spelling/alphabet/';
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(animal, outline) {
var a = animal;
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, backImg, text) {
var canvas = background.getCanvas();
var context = background.getContext();
context.drawImage(backImg, 0, 0);
context.font = '18pt georgia,palatino';
context.textAlign = 'center';
context.fillStyle = 'white';
context.fillText(text, background.getStage().getWidth() / 2, 32);
}
function initStage(images) {
var stage = new Kinetic.Stage({
container: 'container',
width: 940,
height: 600
});
var background = new Kinetic.Layer();
var animalLayer = new Kinetic.Layer();
var animalShapes = [];
var score = 0;
// image positions
var animals = {
a: {
x: 50,
y: 70
},
e: {
x: 150,
y: 70
},
b: {
x: 250,
y: 70
},
t: {
x: 350,
y: 70
},
a2: {
x: 450,
y: 70
},
p: {
x: 550,
y: 70
},
l: {
x: 650,
y: 70
},
h: {
x: 750,
y: 70
},
};
var outlines = {
a_black: {
x: 30,
y: 300
},
l_black: {
x: 135,
y: 300
},
p_black: {
x: 240,
y: 300
},
h_black: {
x: 345,
y: 300
},
a2_black: {
x: 450,
y: 300
},
b_black: {
x: 555,
y: 300
},
e_black: {
x: 660,
y: 300
},
t_black: {
x: 765,
y: 300
},
};
// create draggable animals
for(var key in animals) {
// anonymous function to induce scope
(function() {
var privKey = key;
var anim = animals[key];
var animal = new Kinetic.Image({
image: images[key],
x: anim.x,
y: anim.y,
draggable: true
});
animal.createImageHitRegion();
animal.on('dragstart', function() {
this.moveToTop();
animalLayer.draw();
});
/*
* check if animal is in the right spot and
* snap into place if it is
*/
animal.on('dragend', function() {
var outline = outlines[privKey + '_black'];
if(!animal.inRightPlace && isNearOutline(animal, outline)) {
animal.setPosition(outline.x, outline.y);
animalLayer.draw();
animal.inRightPlace = true;
if(++score >= 8) {
var text = 'Well done! The correct word is alphabet!'
drawBackground(background, images.back, text);
}
// disable drag and drop
setTimeout(function() {
animal.setDraggable(false);
}, 50);
}
});
// make animal glow on mouseover
animal.on('mouseover', function() {
animal.setImage(images[privKey + '_glow']);
animalLayer.draw();
document.body.style.cursor = 'pointer';
});
// return animal on mouseout
animal.on('mouseout', function() {
animal.setImage(images[privKey]);
animalLayer.draw();
document.body.style.cursor = 'default';
});
animal.on('dragmove', function() {
document.body.style.cursor = 'pointer';
});
animalLayer.add(animal);
animalShapes.push(animal);
})();
}
// create animal 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
});
animalLayer.add(outline);
})();
}
stage.add(background);
stage.add(animalLayer);
drawBackground(background, images.back, 'Rearrange the letters to spell the word');
}
var sources = {
back: 'back.png',
a: 'a.png',
a_glow: 'a-glow.png',
a_black: 'a-black.png',
b: 'b.png',
b_glow: 'b-glow.png',
b_black: 'b-black.png',
e: 'e.png',
e_glow: 'e-glow.png',
e_black: 'e-black.png',
h: 'h.png',
h_glow: 'h-glow.png',
h_black: 'h-black.png',
l: 'l.png',
l_glow: 'l-glow.png',
l_black: 'l-black.png',
p: 'p.png',
p_glow: 'p-glow.png',
p_black: 'p-black.png',
t: 't.png',
t_glow: 't-glow.png',
t_black: 't-black.png',
a2: 'a2.png',
a2_glow: 'a2-glow.png',
a2_black: 'a2-black.png',
};
loadImages(sources, initStage);
</script>