이미지 퍼즐게임 happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > JAVASCRIPT > javascript 소스창고 > 게임 > 이미지 퍼즐게임 상세정보

클라우드태그

Javascript

PHP

asp

CSS

html

mysql

jquery

image

Mobile

API

slide

게시판

메뉴

현재접속자 명

이미지 퍼즐게임

해피팀

네티즌

소스분류

게임

다운로드 횟수

808 회

간단설명

이미지퍼즐 게임 관련 스크립트입니다.

평가하기

<html>
<head>
<title>Image puzzle</title>

}

#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">
/*
(C) www.dhtmlgoodies.com, September 2005

You are free to use this script as long as the copyright message is kept intact

Alf Magne Kalleland

*/

var puzzleImages = ['images/image1.jpg','images/image2.jpg','images/image3.gif','images/image4.gif','images/image5.jpg','images/image6.jpg','images/image7.gif','images/image8.gif','images/image9.jpg']; // Array of images to choose from
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 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>
<a href="#" onclick="scramble();return false">Scramble</a> | <a href="#" onclick="initPuzzle();return false">New image</a> |
<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"> x
<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>
<p><i>Shuffle, then click to move the pieces</i></p>
<p><a href="/scripts/image_puzzle/image_puzzle.zip">Download this script</a></p>

</body>
</html>