好的，所以我正在为我的大师们创建一个项目，以便在实验室设置中引起挫折，我正在使用这个插件来拼图：https://goodies.pixabay.com/jquery/snap-puzzle/demo.html
我想做的是让拼图在最后一块上“打破”以引起挫折，所以他们必须先点击它才能将它拖到它的插槽中5次。我对Javascript并不是很棒，而且功能有点复杂，所以我对如何做到这一点感到有点失落，似乎有更多的帮助来摆脱多次点击而不是造成它们。
据我所知 - 最后在jquery.snap-puzzle.js文件中定义了最后一个插槽填充时的操作，我已经尝试了几次调整但是我一直在打破它...任何人都有关于如何在移动最后一块之前需要5次点击的任何想法？
如果它有很大的不同，我正在使用Angular作为我的前端......
**编辑：根据@Martieva的建议，我添加了一个点击增量器，如下所示：
(function($){
$.fn.snapPuzzle = function(options){
var o = $.extend({ pile: '', containment: 'document', rows: 5, columns: 5, onComplete: function(){} }, options);
// public methods
if (typeof options == 'string') {
this.each(function(){
var that = $(this),
o = that.data('options'),
pieceWidth = that.width() / o.columns,
pieceHeight = that.height() / o.rows,
pile = $(o.pile),
maxX = pile.width() - pieceWidth,
maxY = pile.height() - pieceHeight,
puzzle_offset = that.closest('span').offset(),
pile_offset = pile.offset();
if (options == 'destroy') {
$('.'+o.puzzle_class).remove();
that.unwrap().removeData('options');
pile.removeClass('snappuzzle-pile');
} else if (options == 'refresh') {
$('.snappuzzle-slot.'+o.puzzle_class).each(function(){
var x_y = $(this).data('pos').split('_'), x = x_y[0], y = x_y[1];
$(this).css({
width: pieceWidth,
height: pieceHeight,
left: y*pieceWidth,
top: x*pieceHeight
});
});
$('.snappuzzle-piece.'+o.puzzle_class).each(function(){
if ($(this).data('slot')) {
// placed on slot
var x_y = $(this).data('slot').split('_'), slot_x = x_y[0], slot_y = x_y[1],
x_y = $(this).data('pos').split('_'), pos_x = x_y[0], pos_y = x_y[1];;
$(this).css({
width: pieceWidth,
height: pieceHeight,
left: slot_y*pieceWidth+puzzle_offset.left-pile_offset.left,
top: slot_x*pieceHeight+puzzle_offset.top-pile_offset.top,
backgroundPosition: (-pos_y*pieceWidth)+'px '+(-pos_x*pieceHeight)+'px',
backgroundSize: that.width()
});
} else {
// placed anywhere else
var x_y = $(this).data('pos').split('_'), x = x_y[0], y = x_y[1];
$(this).css({
width: pieceWidth,
height: pieceHeight,
left: Math.floor((Math.random()*(maxX+1))),
top: Math.floor((Math.random()*(maxY+1))),
backgroundPosition: (-y*pieceWidth)+'px '+(-x*pieceHeight)+'px',
backgroundSize: that.width()
});
}
});
}
});
return this;
}
function init(that){
var puzzle_class = 'sp_'+new Date().getTime(),
puzzle = that.wrap('<span class="snappuzzle-wrap"/>').closest('span'),
src = that.attr('src'),
pieceWidth = that.width() / o.columns,
pieceHeight = that.height() / o.rows,
pile = $(o.pile).addClass('snappuzzle-pile'),
maxX = pile.width() - pieceWidth,
maxY = pile.height() - pieceHeight;
o.puzzle_class = puzzle_class;
that.data('options', o);
for (var x=0; x<o.rows; x++) {
for (var y=0; y<o.columns; y++) {
$('<div class="snappuzzle-piece '+puzzle_class+'"/>').data('pos', x+'_'+y).css({
width: pieceWidth,
height: pieceHeight,
position: 'absolute',
left: Math.floor((Math.random()*(maxX+1))),
top: Math.floor((Math.random()*(maxY+1))),
zIndex: Math.floor((Math.random()*10)+1),
backgroundImage: 'url('+src+')',
backgroundPosition: (-y*pieceWidth)+'px '+(-x*pieceHeight)+'px',
backgroundSize: that.width()
}).draggable({
start: function(e, ui){ $(this).removeData('slot'); },
stack: '.snappuzzle-piece',
containment: o.containment
}).appendTo(pile).data('lastSlot', pile);
$('<div class="snappuzzle-slot '+puzzle_class+'"/>').data('pos', x+'_'+y).css({
width: pieceWidth,
height: pieceHeight,
left: y*pieceWidth,
top: x*pieceHeight
}).appendTo(puzzle).droppable({
accept: '.'+puzzle_class,
hoverClass: 'snappuzzle-slot-hover',
drop: function(e, ui){
var slot_pos = $(this).data('pos');
// prevent dropping multiple pieces on one slot
$('.snappuzzle-piece.'+puzzle_class).each(function(){
if ($(this).data('slot') == slot_pos) slot_pos = false;
});
if (!slot_pos) return false;
ui.draggable.data('lastSlot', $(this)).data('slot', slot_pos);
ui.draggable.position({ of: $(this), my: 'left top', at: 'left top' });
//Here is the click increment code from @Martieva
var clicks = 0;
if(ui.draggable.data('pos')==slot_pos){
clicks++;
if(clicks<5){
return;
}
}
//back to original code
if (ui.draggable.data('pos')==slot_pos) {
ui.draggable.addClass('correct');
// fix piece
// $(this).droppable('disable').fadeIn().fadeOut();
$(this).droppable('disable').css('opacity', 1).fadeOut(1000);
ui.draggable.css({opacity: 0, cursor: 'default'}).draggable('disable');
if ($('.snappuzzle-piece.correct.'+puzzle_class).length == o.rows*o.columns) o.onComplete(that);
}
}
});
}
}
}
return this.each(function(){
if (this.complete) init($(this));
else $(this).load(function(){ init($(this)); });
});
};
}(jQuery));
以下是需要包含的拼图的另一个脚本：
// jQuery UI Touch Punch 0.2.3 - must load after jQuery UI
// enables touch support for jQuery UI
!function(a){
function f(a,b){
if(!(a.originalEvent.touches.length>1)){a.preventDefault();
var c=a.originalEvent.changedTouches[0],
d=document.createEvent("MouseEvents");
d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),
a.target.dispatchEvent(d)
}
}
if(a.support.touch="ontouchend"in document,a.support.touch){
var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;
b._touchStart=function(a){
var b=this;
!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,
f(a,"mouseover"),
f(a,"mousemove"),
f(a,"mousedown"))
},
b._touchMove=function(a){
e&&(this._touchMoved=!0,
f(a,"mousemove"))
},
b._touchEnd=function(a){
e&&(f(a,"mouseup"),
f(a,"mouseout"),
this._touchMoved||f(a,"click"),
e=!1)
},
b._mouseInit=function(){
var b=this;
b.element.bind({
touchstart:a.proxy(b,"_touchStart"),
touchmove:a.proxy(b,"_touchMove"),
touchend:a.proxy(b,"_touchEnd")}),
c.call(b)},
b._mouseDestroy=function(){
var b=this;b.element.unbind({
touchstart:a.proxy(b,"_touchStart"),
touchmove:a.proxy(b,"_touchMove"),
touchend:a.proxy(b,"_touchEnd")}),
d.call(b)
}
}
}(jQuery);
function start_puzzle(x){
$('#puzzle_solved').hide();
$('#source_image').snapPuzzle({
rows: x, columns: x,
pile: '#pile',
containment: '#puzzle-containment',
onComplete: function(){
$('#source_image').fadeOut(150).fadeIn();
$('#puzzle_solved').show();
}
});
}
$(function(){
$('#pile').height($('#source_image').height());
start_puzzle(5);
$('.restart-puzzle').click(function(){
$('#source_image').snapPuzzle('destroy');
start_puzzle($(this).data('grid'));
});
$(window).resize(function(){
$('#pile').height($('#source_image').height());
$('#source_image').snapPuzzle('refresh');
});
});
它不会在很大程度上打破这个难题，但它不会增加最终作品的点击次数。
一种基本方法可能是这样的
var clicks = 0;//Needs to be of a scope that the count isn't reset between clicks.
//...The rest of your code...
if(isLastTile){//If we are dealing with the final tile.
clicks++;
if(clicks < 5){
return; //Do nothing
}
}
normalProcess();