我有一个拼图和一块。 5 x 5件覆盖所有拼图。 当客户点击片断,片断禁用时,在片段下方显示部分拼图。我使用画布绘制两层但不起作用。
function init( img ){
if( img == undefined ){
img="http://amitysmiletravel.com/sites/a/am/amity/uploads/ckfinder/images/amitysmile-hotel(10).jpg";
}
_img = new Image();
_img.addEventListener('load',onImage,false);
_img.src = img ;
}
function onImage(e){
_pieceWidth = Math.floor(_img.width / PUZZLE_DIFFICULTY)
_pieceHeight = Math.floor(_img.height / PUZZLE_DIFFICULTY)
_puzzleWidth = _pieceWidth * PUZZLE_DIFFICULTY;
_puzzleHeight = _pieceHeight * PUZZLE_DIFFICULTY;
setCanvas();
initPuzzle();
}
function setCanvas(){
_canvas = $('#game-state');
_stage = _canvas[0].getContext('2d');
_canvas[0].width = _puzzleWidth;
_canvas[0].height = _puzzleHeight;
// _canvas[0].style.border = "1px solid #004D3D";
}
function initPuzzle(){
_pieces = [];
_mouse = {x:0,y:0};
_currentPiece = null;
_currentDropPiece = null;
_stage.drawImage(_img, 0, 0, _puzzleWidth, _puzzleHeight, 0, 0, _puzzleWidth, _puzzleHeight);
initPieces();
}
function initPieces(){
/*if( img == undefined ){
img="<?php echo Yii::app()->theme->baseUrl?>/images/piece_bg.png";
}*/
_imgPiece = new Image();
_imgPiece.addEventListener('load',buildPieces,false);
_imgPiece.src = "<?php echo Yii::app()->theme->baseUrl?>/images/piece_bg.png";
}
var buildPieces = function(){
_stage.clearRect(0,0,_puzzleWidth,_puzzleHeight);
var i;
var piece ;
var xPos = 0;
var yPos = 0;
for(i = 0; i < 25; i++){
piece ={};
piece.xPos = xPos;
piece.yPos = yPos;
_pieces.push(piece);
_stage.drawImage(_imgPiece,piece.xPos,piece.yPos,_pieceWidth,_pieceHeight);
_stage.strokeRect(xPos,yPos,_pieceWidth,_pieceHeight);
xPos += _pieceWidth;
if(xPos >= _puzzleWidth){
xPos = 0;
yPos += _pieceHeight;
}
}
if( !touchSupported ){
$('#game-state').on('mousedown', onPuzzleClick);
}else{
// document.ontouchstart = null;
$('#game-state').on('touchstart',function( e ){
var e = e.originalEvent;
e.preventDefault();
onPuzzleClick( e );
});
}
}
function onPuzzleClick(e){
// alert(e);
if( !Modernizr.touch ){
_mouse.x = e.pageX - _canvas.offset().left;
_mouse.y = e.pageY - _canvas.offset().top;
}else{
_mouse.x = e.touches[0].pageX - _canvas.offset().left;
_mouse.y = e.touches[0].pageY - _canvas.offset().top;
}
// alert("x "+_mouse.x+" y: "+_mouse.y);
_currentPiece = checkPieceClicked();
if(_currentPiece != null){
_stage.clearRect(_currentPiece.xPos,_currentPiece.yPos,_pieceWidth,_pieceHeight);
_stage.save();
}
}
function checkPieceClicked(){
var i;
var piece;
for(i = 0;i < _pieces.length;i++){
piece = _pieces[i];
if(_mouse.x < piece.xPos || _mouse.x > (piece.xPos + _pieceWidth) || _mouse.y < piece.yPos || _mouse.y > (piece.yPos + _pieceHeight)){
//PIECE NOT HIT
}
else{
return piece;
}
}
return null;
}
请帮帮我。谢谢!