Skip to content

Instantly share code, notes, and snippets.

@ruthlessfish

ruthlessfish/gameof15.html

Created March 14, 2012 18:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ruthlessfish/2038497 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ruthlessfish/2038497 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ruthlessfish created this gist Mar 14, 2012.
    193 changes: 193 additions & 0 deletions gameof15.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,193 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>The Game of 15!</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">

    div {
    text-align:center;
    }

    table {
    border:1px solid #000;
    background-color:#CCCCCC;
    margin:0 auto;
    }

    td {
    width:50px;
    height: 50px;
    border:1px solid #000;
    background-color: #FFFF66;
    text-align:center;
    }

    </style>
    </head>
    <body>
    <div>
    <h1>The Game of 15!</h1>
    <table cellspacing=10>
    <tr>
    <td id="00">&nbsp;</td>
    <td id="01">&nbsp;</td>
    <td id="02">&nbsp;</td>
    <td id="03">&nbsp;</td>
    </tr>
    <tr>
    <td id="10">&nbsp;</td>
    <td id="11">&nbsp;</td>
    <td id="12">&nbsp;</td>
    <td id="13">&nbsp;</td>
    </tr>
    <tr>
    <td id="20">&nbsp;</td>
    <td id="21">&nbsp;</td>
    <td id="22">&nbsp;</td>
    <td id="23">&nbsp;</td>
    </tr>
    <tr>
    <td id="30">&nbsp;</td>
    <td id="31">&nbsp;</td>
    <td id="32">&nbsp;</td>
    <td id="33">&nbsp;</td>
    </tr>
    </table>
    </div>

    <script>
    var WTF = WTF || {};

    (function(window) {

    // Constructor
    WTF.Game = function() {
    this.emptyId = "00";
    this.emptyRow = 0;
    this.emptyCol = 0;
    this.chosen = [];
    this.init();
    }

    WTF.Game.prototype = {

    // initialize the game; register click event
    init: function() {
    for(var i=0;i<4;i++) {
    for(var j=0;j<4;j++) {
    var me = this;
    document.getElementById([i,j].join('')).onclick = function() {
    me.move.call(me, this);
    };
    }
    }
    this.setup();
    },

    // get a random number to add to the board
    getRand: function() {
    var found = false, r;
    while(!found) {
    r = Math.floor(Math.random()*16);
    found = true;
    for(i in this.chosen) {
    if(r == this.chosen[i]) {
    found = false;
    break;
    }
    }
    }
    this.chosen.push(r);
    return r;
    },

    // determine if a swap can be made
    move: function(el) {
    var cellId = el.id;
    var cellRow = cellId.substring(0,1);
    var cellCol = cellId.substring(1,2);

    // this is an ugly conditional but it works
    if((cellRow == this.emptyRow
    && (cellCol-this.emptyCol == 1
    || this.emptyCol - cellCol ==1))
    || (cellCol == this.emptyCol
    && (cellRow-this.emptyRow == 1
    || this.emptyRow - cellRow ==1)))
    {
    this.swap(cellId);
    }
    return this;
    },

    // clear the chosen data
    reset: function() {
    this.chosen = [];
    },

    // set up the board with a random arrangement
    setup: function() {
    for(var i=0;i<4;i++) {
    for(var j=0;j<4;j++) {
    cellId = [i,j].join('');
    cellValue = this.getRand();
    if(cellValue == 0){
    cellValue="";
    this.emptyRow=i;
    this.emptyCol=j;
    this.emptyId=cellId;
    }
    document.getElementById(cellId).innerHTML = cellValue;
    }
    }
    return this;
    },

    // swap the clicked cell with its empty neighbor
    swap: function(myId) {
    document.getElementById(this.emptyId).innerHTML = document.getElementById(myId).innerHTML;
    document.getElementById(myId).innerHTML = "";

    this.emptyRow = myId.substring(0,1);
    this.emptyCol = myId.substring(1,2);
    this.emptyId = [this.emptyRow, this.emptyCol].join('');

    if(this.solved()) {
    alert("WAY TO GO! YOU SOLVED IT!\n Click OK to reset the board.");
    this.reset();
    this.setup();
    }
    },

    // is the puzzle solved? 1...15
    solved: function() {
    var counter = 0;

    for(var i=0;i<4;i++) {
    for(var j=0;j<4;j++) {
    counter++;
    if(counter == 16) {
    counter = "";
    }
    cellId = [i,j].join('');
    if(document.getElementById(cellId).innerHTML != counter) {
    return false;
    }
    }
    }

    return true;
    }

    };

    // start the game on window load
    window.onload = function() {
    game = new WTF.Game();
    };

    })(window);
    </script>
    </body>
    </html>