拼图游戏

a{

color:#FF0000;

text-decoration:none;

}

a:hover{

text-decoration:underline;

}

body{

background-repeat:no-repeat;

font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;

height:100%;

width:100%;

margin:10px;

padding-left:0px;

text-align:left;

}

#puzzle_container{

line-height:500px;

text-align:center;

vertical-align:center;

border:10px outset #CCCCCC;

position:relative;

color: #FFFFFF;

background-color: #707070;

width: 520px;/* IE 5.x */

width/* */:/**/500px;

width: /**/500px;

height: 520px;

height/* */:/**/500px;

height: /**/500px;

}

#puzzle_container .square{

overflow:hidden;

border-left:1px solid #FFF;

border-top:1px solid #FFF;

position:absolute;

}

.activeImageIndicator{

border:1px solid #FF0000;

position:absolute;

z-index:10000;

}

.revealedImage{

position:absolute;

left:0px;

opacity:0;

filter:alpha(opacity=50);

top:0px;

z-index:50000;

}

var puzzleImages = ['http://p1.mb5u.com/texiao/wall1.jpg','http://p1.mb5u.com/texiao/wall2.jpg','http://p1.mb5u.com/texiao/wall3.jpg','http://p1.mb5u.com/texiao/wall4.jpg','http://p1.mb5u.com/texiao/wall5.jpg','http://p1.mb5u.com/texiao/wall6.jpg','http://p1.mb5u.com/texiao/wall7.jpg','http://p1.mb5u.com/texiao/wall8.jpg'];

var rows = 3;

var cols = 4;

var imageArray = new Array();

var imageInUse = false;

var puzzleContainer;

var activeImageIndicator = false;

var activeSquare = false;

var squareArray = new Array();

var emptySquare_x;

var emptySquare_y;

var colWidth;

var rowHeight;

var gameInProgress = false;

var revealedImage = false;

for(var no=0;no

imageArray[no] = new Image();

imageArray[no].src = puzzleImages[no];

}

function initPuzzle()

{

gameInProgress = false;

var tmpInUse = imageInUse;

imageInUse = imageArray[Math.floor(Math.random() * puzzleImages.length)];

if(imageInUse==tmpInUse && puzzleImages.length>1)

initPuzzle();

else{

puzzleContainer = document.getElementById('puzzle_container');

getImageWidth();

}

}

function getImageWidth()

{

if(imageInUse.width>0){

startPuzzle();

}else{

setTimeout('getImageWidth()',100);

}

}

function scramble()

{

gameInProgress = true;

var currentRow = cols-1;

var currentCol = rows-1;

document.getElementById('revealedImage').style.display='none';

for(var no=0;no

for(var no2=0;no2

if(no

var el = document.getElementById('square_' + no2 + '_' + no);

if(el){

el.style.left = (no2 * colWidth) + (no2) + 'px';

el.style.top = (no * rowHeight) + (no) + 'px';

}else{

initPuzzle();

return;

}

}

}

}

var lastPos=false;

var countMoves = 0;

while(countMoves

var dir = Math.floor(Math.random()*4);

var readyToMove = false;

if(dir==0 && currentRow>0 && lastPos!=1){

currentRow = currentRow-1;

readyToMove = true;

}

if(dir==1 && currentRow

currentRow = currentRow+1;

readyToMove = true;

}

if(dir==2 && currentCol>0 && lastPos!=3){

currentCol = currentCol -1;

readyToMove = true;

}

if(dir==3 && currentCol

currentCol = currentCol + 1;

readyToMove = true;

}

if(readyToMove){

activeSquare = document.getElementById('square_' + currentCol + '_' + currentRow);

moveImage(false,true);

lastPos = dir;

countMoves++;

}

}

return;

}

function gameFinished()

{

var string = "";

var squareWidth = colWidth + 1;

var squareHeight = rowHeight + 1;

var squareCounter = 0;

var errorsFound = false;

var correctSquares = 0;

for(var prop in squareArray){

var currentCol = squareCounter % cols;

var currentRow = Math.floor(squareCounter/cols);

var correctLeft = currentCol * squareWidth;

var correctTop = currentRow * squareHeight;

if(squareArray[prop].style.left.replace('px','') != correctLeft || squareArray[prop].style.top.replace('px','') != correctTop){

//return;

}else{

correctSquares++;

}

squareCounter++;

}

if(correctSquares == ((cols * rows) -1)){

document.getElementById('messageDiv').innerHTML = '

Fantastic! You did it!

';

gameInProgress = false;

revealImage();

}else{

document.getElementById('messageDiv').innerHTML = 'Currently, you have ' + correctSquares + ' out of ' + ((cols * rows) -1) + ' pieces placed correctly';

}

}

var currentOpacity = 0;

function revealImage()

{

if(currentOpacity==100)currentOpacity=0;

var obj = document.getElementById('revealedImage');

obj.style.display = 'block';

currentOpacity = currentOpacity +2;

if(document.all){

obj.style.filter = 'alpha(opacity='+currentOpacity+')';

}else{

obj.style.opacity = currentOpacity/100;

}

if(currentOpacity<100)setTimeout('revealImage()',10);

}

function displayActiveImage()

{

if(!gameInProgress)return;

if(!activeImageIndicator){

activeImageIndicator = document.createElement('DIV');

activeImageIndicator.className = 'activeImageIndicator';

puzzleContainer.appendChild(activeImageIndicator);

activeImageIndicator.onclick = moveImage;

}

activeImageIndicator.style.display='block';

activeImageIndicator.style.left = this.offsetLeft + 'px';

activeImageIndicator.style.top = this.offsetTop + 'px';

activeImageIndicator.style.width = this.style.width;

activeImageIndicator.style.height = this.style.height;

activeImageIndicator.innerHTML = '';

activeSquare = this;

}

function moveImage(e,fromShuffleFunction)

{

if(!activeSquare)return;

if(!gameInProgress && !fromShuffleFunction){

alert('You have to shuffle the cards first');

return;

}

var currentLeft = activeSquare.style.left.replace('px','') /1;

var currentTop = activeSquare.style.top.replace('px','') /1;

var diffLeft = Math.round((currentLeft - emptySquare_x) / colWidth);

var diffTop = Math.round((currentTop - emptySquare_y) / rowHeight);

if(((diffLeft==-1 || diffLeft==1) && diffTop==0) || ((diffTop==-1 || diffTop==1) && diffLeft==0)){

activeSquare.style.left = emptySquare_x + 'px';

activeSquare.style.top = emptySquare_y + 'px';

emptySquare_x = currentLeft;

emptySquare_y = currentTop;

activeSquare = false;

if(activeImageIndicator)activeImageIndicator.style.display = 'none';

if(!fromShuffleFunction)gameFinished();

}

}

function startPuzzle()

{

puzzleContainer.innerHTML = '';

var subDivs = puzzleContainer.getElementsByTagName('DIV');

for(var no=0;no

subDivs[no].parentNode.removeChild(subDivs[no]);

}

activeImageIndicator = false;

squareArray.length = 0;

if(document.getElementById('revealedImage')){

var obj = document.getElementById('revealedImage');

obj.parentNode.removeChild(obj);

}

var revealedImage = document.createElement('DIV');

revealedImage.style.display='none';

revealedImage.id='revealedImage';;

revealedImage.className='revealedImage';;

var img = document.createElement('IMG');

img.src = imageInUse.src;

revealedImage.appendChild(img);

puzzleContainer.appendChild(revealedImage);

colWidth = Math.round(imageInUse.width / cols)-1;

rowHeight = Math.round(imageInUse.height / rows)-1;

puzzleContainer.style.width = colWidth * cols + (cols * 1) + 'px';

puzzleContainer.style.height = rowHeight * rows + (rows * 1) + 'px';

if(navigator.appVersion.indexOf('5.')>=0 && navigator.userAgent.indexOf('MSIE')>=0){

puzzleContainer.style.width = colWidth * cols + (cols * 1) + 20 + 'px';

puzzleContainer.style.height = rowHeight * rows + (rows * 1) + 20 + 'px';

}

if(!revealedImage){

revealedImage = document.createElement('DIV');

revealedImage.style.display='none';

revealedImage.innerHTML = '';

}

for(var no=0;no

for(var no2=0;no2

if(no2==cols-1 && no==rows-1){

emptySquare_x = (no2 * colWidth) + (no2);

emptySquare_y = (no * rowHeight) + (no);

break;

}

var newDiv = document.createElement('DIV');

newDiv.id = 'square_' + no2 + '_' + no;

newDiv.onmouseover = displayActiveImage;

newDiv.onclick = moveImage;

newDiv.className = 'square';

newDiv.style.width = colWidth + 'px';

newDiv.style.height = rowHeight + 'px';

newDiv.style.left = (no2 * colWidth) + (no2) + 'px';

newDiv.style.top = (no * rowHeight) + (no) + 'px';

newDiv.setAttribute('initPosition',(no2 * colWidth) + (no2) + '_' + (no * rowHeight) + (no));

var img = new Image();

img.src = imageInUse.src;

img.style.position = 'absolute';

img.style.left = 0 - (no2 * colWidth) + 'px';

img.style.top = 0 - (no * rowHeight) + 'px';

newDiv.appendChild(img);

puzzleContainer.appendChild(newDiv);

squareArray.push(newDiv);

}

}

}

window.onload = initPuzzle;

打乱 | 换一张图

Columns/Rows: ×

打开后请等待加载，因背景图较大，需要一定时间加载，你可以刷新页面试一下。