<!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; /* Other browsers */
width: /**/500px;
height: 520px; /* IE 5.x */
height/* */:/**/500px; /* Other browsers */
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;
}
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 188px;
top: 94px;
}
#Layer2 {
position:absolute;
width:416px;
height:27px;
z-index:2;
top: 60px;
left: 251px;
}
.STYLE1 {color: #003366}
.STYLE2 {color: #339966}
.STYLE3 {
font-size: 36px;
font-weight: bold;
}
</style>
<script type="text/javascript">
var puzzleImages = ['images/cf.jpg','images/SG.jpg'];
var rows = 3;
var cols = 4;
var imageArray = new Array();
var imageInUse = false;
var puzzleContainer;
var activeImageIndicator = false;
var activeSquare = false; // Reference to active puzzle square
var squareArray = new Array(); // Array with references to all the squares
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){ // Moving peice down
currentRow = currentRow-1;
readyToMove = true;
}
if(dir==1 && currentRow<(rows-1) && lastPos!=0){ // Moving peice up
currentRow = currentRow+1;
readyToMove = true;
}
if(dir==2 && currentCol>0 && lastPos!=3){ // Moving peice right
currentCol = currentCol -1;
readyToMove = true;
}
if(dir==3 && currentCol<(cols-1) && lastPos!=2){ // Moving peice right
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)){ // Moving right
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);
p
dreamover个人主页设计
需积分: 9 187 浏览量
2009-12-29
16:45:38
上传
评论 1
收藏 8.41MB RAR 举报
-html.rar （94个子文件） 
选修作业-html images 
w2.gif 112B m5.gif 2KB m2.gif 2KB line.gif 4KB 6_w3.gif 95B
http_imgloa.jpg 50KB bg1.gif 82KB line1.gif 3KB 0000.jpg 39KB 1_p1.gif 3KB cf.jpg 40KB
time1.swf 2KB bg2.gif 20KB 7_p1.jpg 10KB 1_003529_1.jpg 30KB zhu_1280_007.jpg 362KB 2_z1.gif 52B 2_w1.gif 2KB 风景5.jpg 162KB 2_bg2.gif 788B 3_w3.gif 87B 2_p1.jpg 10KB 3_w2.gif 176B 2_w2.gif 143B bg4.gif 8KB wu.jpg 84KB 3_p3.jpg 4KB 4_p2.jpg 4KB bottom.jpg 31KB z2.gif 56B xiaogou03.jpg 7KB cloudsky013.jpg 157KB w3.gif 67B 2_about_05.gif 12KB 6_w1.gif 1KB z1-1.gif 547B 2_bg.gif 12KB 2_line.gif 60B 2_z2.gif 46B 5_w1.gif 2KB 对戒.gif 46KB 6_p1.jpg 10KB 5_w3.gif 93B 3_p1.jpg 9KB 4_w1.gif 2KB m1.gif 2KB bg3.gif 30KB 不放开.jpg 48KB w1.gif 6KB 4_p1.jpg 10KB bg.gif 46B 7_w3.gif 96B 2_w3.gif 83B 4_w3.gif 90B m4.gif 2KB
Thumbs.db 100KB 7_w1.gif 1KB 风景3.jpg 185KB 风景4.jpg 5KB snowhouse001.jpg 250KB huise.jpg 56KB qiujier.jpg 25KB luxun.jpg 43KB z1.gif 485B spacer.gif 43B 风景1.jpg 284KB 2_bg1.gif 3KB m3.gif 2KB 5_go.gif 147B 6_w2.gif 157B w6.gif 69B z3.gif 114B 3_w1.gif 944B w4.gif 70B 5_w2.gif 216B xiaoren.GIF 19KB 1_w1.gif 249B SG.jpg 78KB top.jpg 32KB 3_p2.jpg 4KB w5.gif 69B MM1.jpg 57KB 风景2.jpg 51KB
留言板.html 8KB 主页.html 10KB music 叮当 - 我爱他.mp3 6.49MB 我的收藏.html 11KB pt.html 11KB 相册.html 9KB index-303.html 5KB style.css 1KB 个人信息.html 7KB index-302.html 5KB index-301.html 6KB资源评论
