INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Applications

Javascript Tile Puzzle by mwolf00
Posted: 7 Nov 03 (Edited 18 Dec 03)

WARNING: When run, this code may cause siezures

<title>Javascript Tile Puzzle</title>
<script>
    function makeEm(){
        document.getElementById("spanPlace").innerHTML = ""
        window.tileArr = new Array()
        document.gameForm.action[0].checked ? mouseAct = "onMouseOver" : mouseAct = "onClick"
        for (x=0; x<dLevel*dLevel; x++){
            if (x==0){
                newSpans = "<span class=tile id=t0></span>"
            }
            else{
                newSpans += "<span class=tile id=t" + x + " " + mouseAct + "='moveEm(this)'>" + x + "</span>"
                tileArr.push(x)
            }
        }
        document.getElementById("spanPlace").innerHTML = newSpans
        tileArr.push(0)        //because I put the blank tile at then end...
    }

    function mixEm(){

            window.zeroTile = document.getElementById("t0")
            window.zeroXpos = parseInt(zeroTile.style.left)
            window.zeroYpos = parseInt(zeroTile.style.top)
            window.allMixed = false

            moveArr = new Array()
            if (zeroXpos > 50) moveArr.push("left")              //can move left
            if (zeroYpos < 50 * dLevel) moveArr.push("down")     //can move down
            if (zeroXpos < 50 * dLevel) moveArr.push("right")    //can move right
            if (zeroYpos > 50) moveArr.push("up")            //can move up
            ranNum = Math.floor(Math.random() * moveArr.length)
            switch (moveArr[ranNum]){
                case "left":
                    moveTiles(zeroXpos - 50, zeroYpos)
                    break;
                case "right":
                    moveTiles(zeroXpos + 50, zeroYpos)
                    break;
                case "up":
                    moveTiles(zeroXpos, zeroYpos - 50)
                    break;
                case "down":
                    moveTiles(zeroXpos, zeroYpos + 50)
                    break;
            }

        loopsDone ++
        if ( loopsDone % 5  == 0){
            //window.status = "Preparing Puzzle - " + Math.round(loopsDone/mixNum*100) + "% Complete (" + loopsDone + " / " + mixNum +  ")"
            document.getElementById("progressBar").style.width = 204
            document.getElementById("progressBar").style.border = "solid blue 2px"
            document.getElementById("progress").style.width = Math.round(loopsDone/mixNum*100)*2
            document.getElementById("progress").style.backgroundColor = "blue"
            document.getElementById("progressScore").innerHTML = "<b>" + Math.round(loopsDone/mixNum*100) + "% Complete</b> (" + loopsDone + " / " + mixNum +  ")"
        }
        if (loopsDone  > mixNum){
            window.clearTimeout(mixing)
            document.getElementById("progressBar").style.width = 0
            document.getElementById("progressBar").style.border = "none"
            document.getElementById("progress").style.width = 0
            document.getElementById("progress").style.backgroundColor = "white"
            document.getElementById("progressScore").innerHTML = ""
            window.allMixed = true
            checkEm()
        }
        else{
             mixing = setTimeout("mixEm()",1)
         }
    }



    function moveTiles(inX, inY){
        for (x=dLevel*dLevel-1; x>=0; x--){
            thisNode = document.getElementById("t" + x)
            thisXpos = parseInt(thisNode.style.left)
            thisYpos = parseInt(thisNode.style.top)
            if(thisXpos == inX && thisYpos == inY){
                zeroTile.style.top = inY
                thisNode.style.top = zeroYpos
                zeroTile.style.left = inX
                thisNode.style.left = zeroXpos
                return;
            }
        }
    }

    function showEm(){
        window.solved = false
        mixedUp = false
        allInputs = document.getElementsByTagName("input")
        for (x=0; x<allInputs.length; x++){
            if (allInputs[x].checked){
                window.dLevel = parseInt(allInputs[x].value)
                document.getElementById("formDiv").style.left = parseInt(dLevel) * 50 + 100
                break;
            }
        }

        makeEm()

        window.numClicks = 0
        curRow = 0
        curCol = 0
        for (x=0; x<tileArr.length; x++){
            if ( x % dLevel == 0 ){
                curRow = 1
                curCol ++
            }
            thisTile = document.getElementById("t" + tileArr[x])
            thisTile.style.top = curCol * 50
            thisTile.style.left = curRow * 50
            curRow ++
            if (tileArr[x] > 0){
                tileArr[x] % 2 == 0 ? color = "yellow" : color = "green"
                thisTile.style.backgroundColor = color
            }
        }
        window.loopsDone = 0
        window.mixNum = (tileArr.length * tileArr.length)
        mixEm()
    }

    function moveEm(inObj){
    if (!solved){
            zeroTile = document.getElementById("t0")
            zeroXpos = parseInt(zeroTile.style.left)
            zeroYpos = parseInt(zeroTile.style.top)
            inXpos = parseInt(inObj.style.left)
            inYpos = parseInt(inObj.style.top)
            if (zeroXpos == inXpos){
                if (Math.abs(zeroYpos - inYpos) == 50){
                    zeroTile.style.top = inYpos
                    inObj.style.top = zeroYpos
                    numClicks ++
                }
            }
            else if (zeroYpos == inYpos){
                if (Math.abs(zeroXpos - inXpos) == 50){
                    zeroTile.style.left = inXpos
                    inObj.style.left = zeroXpos
                    numClicks ++
                }
            }
            checkEm()
    }
    }

    function checkEm(){
        if (allMixed){
            curRow = 0
            curCol = 0
            numWrong = 0
            for (x=1; x<tileArr.length; x++){
                if ((x-1) % dLevel == 0 ){
                    curRow = 1
                    curCol ++
                }
                thisTile = document.getElementById("t" + x)
                if (parseInt(thisTile.style.top) == curCol * 50 && parseInt(thisTile.style.left) == curRow * 50){
                    thisTile.style.color = "black"
                }
                else{
                    thisTile.style.color = "red"
                    numWrong ++
                }

                curRow ++
            }
            window.status = numWrong + " wrong -- " + numClicks + " moves."
            if (numWrong == 0){
                window.flashTimes = 0
                flashEm()
                alert("Solved in " + numClicks + " clicks")
                window.solved = true
       }
        }
    }

    function flashEm(){
        flashTimes ++
        if (flashTimes > 20){
             window.clearTimeout(doFlash)
        }
        else{
            for (x=1; x<tileArr.length; x++){
                thisTile = document.getElementById("t" + x)
                thisTile.style.backgroundColor == "yellow" ? thisTile.style.backgroundColor = "green" : thisTile.style.backgroundColor = "yellow"
            }
        doFlash = setTimeout("flashEm()",200)
        }
    }

</script>
<style>
    body {font-family: arial;}
    span {text-align:center;}
    .tile {font-size: 26pt; border: solid blue 3px; width: 50px; height: 50px; position:absolute; }
    #progressScore {width: 300;}
    #formDiv{position: absolute; top: 50; left:400;}
</style>

<body onLoad="showEm()" id="bodyNode">
<div id="spanPlace">
    <span class=tile id=t0></span>
</div>
<div id="formDiv">
    <form name="gameForm">
    <table border=1 cellspacing=0>
        <tr>
            <td><input type=radio name="levelPicker" value=3 onClick="showEm()">  Easy (3x3) </td>
           <td><input type=radio name="levelPicker" value=4 onClick="showEm()" Checked>  Not Bad (4x4)</td>
       </tr>
       <tr>
            <td><input type=radio name="levelPicker" value=5 onClick="showEm()">  Medium (5x5)</td>
            <td><input type=radio name="levelPicker" value=6 onClick="showEm()">  Hard (6x6)</td>
        </tr>
    <tr>
        <td><input type=radio name="levelPicker" value=7 onClick="showEm()">  Harder (7x7)</td>
        <td><input type=radio name="levelPicker" value=8 onClick="showEm()">  Impossible (8x8)</td>
    <tr>
        <td><input type=radio name="levelPicker" value=9 onClick="showEm()">  Impossibler (9x9)</td>
            <td><input type=radio name="levelPicker" value=10 onClick="showEm()">  OMG!!!! (10x10)</td>
        </tr>
        <tr>
            <th colspan=2> <input type=button onClick="showEm()" value="Start Over" style="width: 104;"></th>
        </tr>
            <td colspan=2 style="text-align:center">Move Tile On Mouse Over <input type=radio value="over" checked name="action" onClick="showEm()"></td>
        </tr>
        </tr>
            <td colspan=2 style="text-align:center">Move Tile On Click<input type=radio value="over"  name="action" onClick="showEm()" ></td>
        </tr>

    </table>
   <br>
       <br>

    <br><br>
    <span id="progressBar" style="text-align: left;"><span id="progress"></span></span>
    <br><span id="progressScore" style="text-align: left;"></span>
    </form>
</div>
</body>

Back to Javascript FAQ Index
Back to Javascript Forum

My Archive

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close