// Näitä voi muokata var useAnimations = true var blockMoveDelay = 20 var blockMoveStep = 8 var cellSpacing = 1 var showDebugMessages = false // voi toimia tai olla toimimatta... // Ei-muutettavat muuttujat var totalBlocks = 0 var emptySlot = 0 var puzzleSolved = false var puzzleCols = 3 var puzzleRows = 3 var puzzleBlockWidth = 0 var puzzleBlockHeight = 0 var blockIsMoving = false var blockX = new Array() var blockY = new Array() var slot = new Array() var menuURL = "" var menuCols = 3 var menuRows = 3 var menuZoom = 1 var menuMix = 3 // ------------------------------------------------------------------------------------------ function initializeMenu() { // Alustetaan valikon HTML var menuHTML = "" menuHTML += "" menuHTML += "" menuHTML += "" //menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "
Kuvan osoite:
" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "
Sarakkeita:Rivejä:Zoom:Sekoitus:
   
" menuHTML += "
Valmiit kuvat:
" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "
" menuHTML += "
©2006 Hannu Tyrväinen
" /* vanha menuHTML += "
" menuHTML += "
" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML +="" menuHTML +="" menuHTML +="" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "
Kuvan osoite:
Sarakkeita:Rivejä:Zoom:
Valmiit kuvat:
" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "" menuHTML += "
" menuHTML += "
" menuHTML += "
" */ // Muutetaan HTML document.getElementById('pagecontent').innerHTML=menuHTML } // ------------------------------------------------------------------------------------------ // ------------------------------------------------------------------------------------------ function submitMenuFormData(url,cols,rows,zoom,mix) { try { menuURL = url menuCols = Math.round(cols) menuRows = Math.round(rows) menuZoom = Math.round(zoom) menuMix = Math.round(mix) initializeGame(menuURL,menuCols,menuRows,menuZoom,menuMix) } catch (er0) { alert("Virhe lomaketietojen hakemisessa "+menuURL+menuCols+menuRows+menuZoom) } } // ------------------------------------------------------------------------------------------ // ------------------------------------------------------------------------------------------ function setURL(url) { if (url==1) { document.getElementById('urlfield').value="images/PinkCloud.jpg" } if (url==2) { document.getElementById('urlfield').value="images/SepiaShutter.jpg" } if (url==3) { document.getElementById('urlfield').value="images/Sewer.jpg" } if (url==4) { document.getElementById('urlfield').value="images/GreenRoad.jpg" } if (url==5) { document.getElementById('urlfield').value="images/Kisu.jpg" } if (url==6) { document.getElementById('urlfield').value="images/RedBerry.jpg" } } // ------------------------------------------------------------------------------------------ // ------------------------------------------------------------------------------------------ // Ensin ajetaan initializeGame(), ja sitten kun kuva on saatu ladatuksi, ajetaan initializePuzzle() // Alunperin ajettin pelkkä initializePuzzle(), mutta kuva ei kerennyt siinä latautua ikinä ajoissa. var tempImageURL = "" var tempCols = 0 var tempRows = 0 var tempZoom = 0 var tempMix = 0 function initializeGame(imageURL,cols,rows,zoom,mix) { // Läimäytetään loading-teksti ruutuun document.getElementById('pagecontent').innerHTML="Haetaan kuvan tietoja..." // Ladataan kuva puzzleImage = new Image() puzzleImage.src = imageURL // Siirretään annetut tiedot väliaikaisiin muuttujiin tempImageURL = imageURL tempCols = cols tempRows = rows tempZoom = zoom tempMix = mix // Käynnistetään looppi, joka tarkistaa, onko kuvan tiedot jo saatu startImageCheckLoop() } // ------------------------------------------------------------------------------------------ // ------------------------------------------------------------------------------------------ var c = 0 // laskee sekunnit function startImageCheckLoop() { // Alustetaan muuttuja, joka kertoo onko kuva jo ladattu var imageLoaded = false // _YRITETÄÄN_ ladata kuvan tiedot (ainahan voi sattua kaikenlaista) try { // Haetaan kuvan leveys ja korkeus var puzzleWidth = 0 var puzzleHeight = 0 puzzleWidth = puzzleImage.width puzzleHeight = puzzleImage.height // Jos kuvan leveys edelleen nollassa, viskataan ilmoille virhe if (puzzleWidth<=0 || puzzleHeight<=0) { throw "e0" } // Muuten todetaan kuva löytyneeksi else { imageLoaded = true } } catch (e1) {} // Kun kuva löytyi... if (imageLoaded==true) { // Pysäytetään ajastin clearTimeout(timer1) //debug: Muutetaan sivun teksti //document.getElementById('pagecontent').innerHTML="Kuva löytyi
aikaa kului "+c+" sekuntia
leveys: "+puzzleWidth+"
korkeus: "+puzzleHeight // Pistetään puzzle pystyyn initializePuzzle(tempImageURL,puzzleWidth,puzzleHeight,tempCols,tempRows,tempZoom,tempMix) } // Kun maksimiaika kului umpeen else if (c>=60) { // Pysäytetään ajastin clearTimeout(timer1) // Tulostetaan virheilmoitus document.getElementById('pagecontent').innerHTML="
Virhe kuvan latauksessa.
Maksimihakuaika ylittyi.
" } // Kun kuvaa ei vielä löytynyt else { // Ylikirjoitetaan ajastin var timer1 = setTimeout("startImageCheckLoop()", 500) // Muutetaan lataustekstiä document.getElementById('pagecontent').innerHTML="
Haetaan kuvan tietoja...
" } // Lisätään sekunteja c++ } // ------------------------------------------------------------------------------------------ // ------------------------------------------------------------------------------------------ function initializePuzzle(imageURL,w,h,cols,rows,zoom,mix) { // Tarkistetaan, että jako on vähintään 3x3 if (cols<3) { cols = 3 } if (rows<3) { rows = 3 } // Siirretään annetut tiedot globaaleihin muuttujiin myöhempää käyttöä varten puzzleCols = cols puzzleRows = rows // Merkitään ratkaisemattomaksi puzzleSolved = false // Nollataan taulun HTML var puzzleHTML = "" // Haetaan kuvan leveys ja korkeus var puzzleWidth = w var puzzleHeight = h // Tarkistetaan zoomaus if (zoom==0) { // ½x zoom puzzleWidth = (puzzleWidth-(puzzleWidth%2))/2 puzzleHeight = (puzzleHeight-(puzzleHeight%2))/2 } if (zoom==2) { // 2x zoom puzzleWidth = puzzleWidth * 2 puzzleHeight = puzzleHeight * 2 } // Lasketaan yhden ruudun leveys var blockWidth = (puzzleWidth-(puzzleWidth%cols))/cols var blockHeight = (puzzleHeight-(puzzleHeight%rows))/rows // Siirretään annetut tiedot globaaleihin muuttujiin myöhempää käyttöä varten puzzleBlockWidth = blockWidth puzzleBlockHeight = blockHeight // Lasketaan kuinka paljon reunoilta leikataan ylimääräistä var cropLeft = ((puzzleWidth%cols)-((puzzleWidth%cols)%2))/2 var cropTop = ((puzzleHeight%rows)-((puzzleHeight%rows)%2))/2 // Lasketaan käytössä olevien blokkien kokonaismäärä totalBlocks = (cols*rows)-1 emptySlot = totalBlocks // Lasketaan blokkien koordinaatit valmiiksi taulukkoon var i = 0 var j = 0 var block = 0 for (i=0; i" for (i=0; i" } // Viimeisen tyhjän slotin sisältö else { puzzleHTML += "
" } // seuraava slotti block++ } // Lopetetaan rivi puzzleHTML += "" } // Lopetetaan taulukko puzzleHTML += "" // Sivun jako kahtia - väli //puzzleHTML += "" // Esimerkkikuva //var examplePictureWidth = (puzzleWidth-(puzzleWidth%2))/2 //var examplePictureHeight = (puzzleHeight-(puzzleHeight%2))/2 //puzzleHTML += "
Malli(piilota)
" // Sivun jako kahtia - lopetus //puzzleHTML += "" // Jostain syystä jos puzzleHTML:n syöttää suoraan dokumenttiin, ei kuva // lataudu ensimmäisellä sivun latauskerralla. Kummallista... // Vanha: document.getElementById('pagecontent').innerHTML=puzzleHTML var printPuzzleHTML = puzzleHTML // Muutetaan HTML document.getElementById('pagecontent').innerHTML=printPuzzleHTML // Lasketaan suositellut siirrot sekoitukselle var recommendedMoves = cols * rows * mix // Sekoitetaan taulukko makeRandomMove(recommendedMoves) } // ------------------------------------------------------------------------------------------ // ------------------------------------------------------------------------------------------ function clickOnSlot(slotNumber) { if (!blockIsMoving) { // debug //emptySlot = slotNumber // Kaivetaan tieto siitä, onko tyhjä slotti rivin ensimmäinen tai viimeinen // tai onko se ensimmäisellä tai viimeiselle rivillä. Näin voidaan suoraan // jättää pois tietyt ympäröivät ruudut, jotka saadaan muuten suoraan yhteen- // ja vähennyslaskuilla // Alustetaan muuttuja, joka tutkii missä suunnassa tyhjä on klikattuun nähden // (tai onko missään = 0) // 1 = left // 2 = top // 3 = right // 4 = bottom // 0 = none var blockOrientation = 0 // Lasketaan ympäröivät slotit alustavasti var topSlot = emptySlot-puzzleCols var leftSlot = emptySlot-1 var rightSlot = emptySlot+1 var bottomSlot = emptySlot+puzzleCols // Alustetaan muuttujat, jotka tutkivat slottien olemassaolon var includeTop = true var includeLeft = true var includeRight = true var includeBottom = true // 1. Lasketaan monesko tyhjä slotti on rivillä var emptyXPosition = (emptySlot%puzzleCols)+1 // 1a. Tutkitaan onko tyhjä rivin ensimmäinen if (emptyXPosition==1) { includeLeft = false } // 1b. Tutkitaan onko tyhjä rivin viimeinen if (emptyXPosition==puzzleCols) { includeRight = false } // 2. Lasketaan millä rivillä tyhjä slotti on var emptyYPosition = ((emptySlot-(emptySlot%puzzleCols))/puzzleCols)+1 // 2a. Tutkitaan onko tyhjä ensimmäisellä rivillä if (emptyYPosition==1) { includeTop = false } // 2b. Tutkitaan onko tyhjä viimeisellä rivillä if (emptyYPosition==puzzleRows) { includeBottom = false } // Tutkitaan onko klikattu blokki siirrettävä if (slotNumber==topSlot && includeTop) { blockOrientation = 2 } if (slotNumber==leftSlot && includeLeft) { blockOrientation = 1 } if (slotNumber==rightSlot && includeRight) { blockOrientation = 3 } if (slotNumber==bottomSlot && includeBottom) { blockOrientation = 4 } // Siirretään slotti if (blockOrientation>=1 || blockOrientation<=4) { if (useAnimations) { moveBlock(slotNumber,blockOrientation) } } if (blockOrientation>=1 || blockOrientation<=4) { if (!useAnimations) { switchToEmpty(slotNumber,blockOrientation) } } // debug //document.getElementById('debugdiv').innerHTML="blockOrientation: "+blockOrientation //document.getElementById('debugdiv').innerHTML="Klikkasit slottia numero "+slotNumber+"
Joka on rivin "+emptyXPosition+".
Ja löytyy riviltä numero "+emptyYPosition+"
puzzleCols: "+puzzleCols+"
puzzleRows: "+puzzleRows+"
includeTop: "+includeTop+"
includeLeft: "+includeLeft+"
includeRight: "+includeRight+"
includeBottom: "+includeBottom } } // ------------------------------------------------------------------------------------------ // ------------------------------------------------------------------------------------------ function checkIfSolved() { var puzzleIsSolved = true var i = 0 for (i=0; i<=totalBlocks; i++) { if (slot[i] != i) { puzzleIsSolved = false } } if (puzzleIsSolved && puzzleCanBeSolved) { document.getElementById('result').innerHTML="RATKAISTU!" var w = puzzleImage.width var h = puzzleImage.height document.getElementById('pagecontent').innerHTML="" } else { document.getElementById('result').innerHTML="Ei vielä ratkaistu" } } // ------------------------------------------------------------------------------------------ // ------------------------------------------------------------------------------------------ var moveBlockFrame = 0 function moveBlock(block,from) { if (from>=1 && from<=4) { blockIsMoving = true var moveX = 0 var moveY = 0 if (from==1) { moveX += (moveBlockFrame*blockMoveStep) } if (from==2) { moveY += (moveBlockFrame*blockMoveStep) } if (from==3) { moveX -= (moveBlockFrame*blockMoveStep) } if (from==4) { moveY -= (moveBlockFrame*blockMoveStep) } moveBlockTimer = setTimeout("moveBlock("+block+","+from+")", blockMoveDelay) var xMax = 0+puzzleBlockWidth var yMax = 0+puzzleBlockHeight var xMin = 0-puzzleBlockWidth var yMin = 0-puzzleBlockHeight var endAnimation = false // Jos mennään yli maksimista if (from==1 && moveX>xMax) { endAnimation = true } else if (from==2 && moveY>yMax) { endAnimation = true } else if (from==3 && moveX=1 && from<=4) loppuu } // ------------------------------------------------------------------------------------------ // ------------------------------------------------------------------------------------------ function switchToEmpty(block,from) { if (from>=1 && from<=4) { // debug //document.getElementById('debugdiv').innerHTML="Yritetään vaihtaa..." // Piilotetaan klikattu slotti document.getElementById('slotImage'+block).style.visibility='hidden' // Näytetään piilotettu slotti document.getElementById('slotImage'+emptySlot).style.visibility='visible' // Vaihdetaan blokkien paikkoja sloteissa var x = slot[block] slot[block] = slot[emptySlot] slot[emptySlot] = x // Haetaan slottien bittikartat document.getElementById('slotImage'+block).style.left='-'+blockX[slot[block]] document.getElementById('slotImage'+block).style.top='-'+blockY[slot[block]] document.getElementById('slotImage'+emptySlot).style.left='-'+blockX[slot[emptySlot]] document.getElementById('slotImage'+emptySlot).style.top='-'+blockY[slot[emptySlot]] // debug if (showDebugMessages) { document.getElementById('debugdiv').innerHTML="Sekalaisia:
slot[0]: "+slot[0]+"
slot[4]: "+slot[4]+"
 
 
Klikatun slotin bittikartan
    X: "+blockX[slot[block]]+"
    Y: "+blockY[slot[block]]+"
 
Tyhjän slotin bittikartan
    X: "+blockX[slot[emptySlot]]+"
    Y: "+blockY[slot[emptySlot]] } // Merkitään klikattu tyhjäksi slotiksi emptySlot = block // Tarkistetaan, onko ratkaistu checkIfSolved() } } // ------------------------------------------------------------------------------------------ // ------------------------------------------------------------------------------------------ var lastEmptySlot = 0 var puzzleCanBeSolved = false function makeRandomMove(moves) { var i = 0 for (i=0; i