画像のドラッグアンドドロップを使用して単語を作成する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>