Skip to content

Instantly share code, notes, and snippets.

@ruthlessfish
Created March 14, 2012 18:31
Show Gist options
  • Save ruthlessfish/2038497 to your computer and use it in GitHub Desktop.
Save ruthlessfish/2038497 to your computer and use it in GitHub Desktop.
Game of 15
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment