JavaScript网页拼图游戏

2024-09-05 12:20:56

字体：大中小

来源：转载

供稿：网友

JavaSCript网页拼图游戏，貌似功能很强大，可以自动打乱图片，选择不同的图片，设置几行几列，操作也比较方便，学习JS游戏的朋友可以参考哦。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>拼图游戏</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">	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;	}</style><script type="text/javascript">var puzzleImages = ['/jscss/demoimg/wall1.jpg','/jscss/demoimg/wall2.jpg','/jscss/demoimg/wall3.jpg','/jscss/demoimg/wall4.jpg','/jscss/demoimg/wall5.jpg','/jscss/demoimg/wall6.jpg','/jscss/demoimg/wall7.jpg','/jscss/demoimg/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<puzzleImages.length;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<rows;no++){			for(var no2=0;no2<cols;no2++){				if(no<rows.length || no2<cols.length){					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<(50*cols*rows)){			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<(rows-1) && lastPos!=0){				currentRow = currentRow+1;				readyToMove = true;			}				if(dir==2 && currentCol>0 && lastPos!=3){ 				currentCol = currentCol -1;				readyToMove = true;			}				if(dir==3 && currentCol<(cols-1) && lastPos!=2){				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 = '<h2>Fantastic! You did it!</h2>';			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 = '<span></span>';		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.length;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<rows;no++){			for(var no2=0;no2<cols;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;</script></head><body>打乱 | 换一张图<form style="display:inline">Columns/Rows: <input type="text" value="4" onblur="var no = this.value.replace(/[^/d]/g,'');if(no/1<3){ this.value = '3';no=3; };cols=no" maxlength="1" size="2"> × <input type="text" value="3" onblur="var no = this.value.replace(/[^/d]/g,'');if(no/1<2){ this.value = '2';no=2; };rows=no" maxlength="1" size="2"></form><div id="puzzle_container">Please wait - initializing script</div><div id="messageDiv"></div><div style="clear:both;"><script type="text/javascript">var gaJsHost = (("https:" == document.location.protocol) ? "https://www.baidu.com" : "http://www.qq.com");document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript">try {var pageTracker = _gat._getTracker("UA-1334907-4");pageTracker._trackPageview();} catch(err) {}</script></div><br>打开后请等待加载，因背景图较大，需要一定时间加载，你可以刷新页面试一下。</body></html>

上一篇：网页版打字练习游戏，见过没？

下一篇：滚动条控制的图片水平展示效果