I am currently in the process of creating a version of "the 15 game" using jQuery in HTML. You can find more information about the game on this page. The objective of the game is to rearrange a table of "boxes" in ascending order from 1 to 15.
Below is the code I have implemented:
// Populating the array with numbers from 1 to arraysize
function insertElements(myArr, arraysize){
for (var i = 1; i < arraysize; i++ ) {
myArr.push(i);
}
}
// Checking if two cells are within range for movement
function canMove(col, row, empty_row, empty_col){
if((row == empty_row+1) && (col == empty_col) ||
(row == empty_row-1) && (col == empty_col) ||
(row == empty_row) && (col == empty_col+1) ||
(row == empty_row) && (col == empty_col-1)){
return true;
}
else
return false;
}
// Swapping elements in the array
function swapElements(myArr, indexA, indexB){
// Check bounds
if((indexA > myArr.length) || (indexA < 0) || (indexB > myArr.length) || (indexB < 0)){
alert("Out of bounds");
}
else{
var temp = myArr[indexA];
myArr[indexA] = myArr[indexB];
myArr[indexB] = temp;
}
}
// Waiting for the page to finish loading
$(document).ready(function(){
// Creating array
var myArr = [];
var arraysize = 17;
var lastelement = arraysize-1;
var empty_row;
var empty_col;
var empty_cell;
var col;
var row;
var nonempty_cell;
// Inserting the elements
insertElements(myArr, arraysize);
// Number of shuffles
var shuffleNum = 10000;
// Shuffling the array
for (var i = 0; i < shuffleNum; i++ ) {
var f = Math.floor((Math.random()*16)+0);
var s = Math.floor((Math.random()*16)+0);
swapElements(myArr, f, s);
}
i = 0;
// For each td element in the table
$(".maincontainer td").each(function() {
// Getting a random value from the array
val = myArr[i];
// If the value is the last element
// assigning this cell as the empty cell and adding the class 'empty'
if(val == lastelement)
{
empty_cell = $(this);
empty_cell.addClass("empty");
empty_row = this.parentNode.rowIndex;
empty_col = this.cellIndex;
}
// Otherwise, assigning the value val to its text and adding the class 'nonempty' to it
else
{
$(this).text(val);
$(this).addClass("nonempty");
}
++i;
});
// When one of the nonempty boxes is clicked
$(".nonempty").click(function(){
// Assigning the cell that has been clicked to the nonempty cell
nonempty_cell = $(this);
row = this.parentNode.rowIndex;
col = this.cellIndex;
// If the cell is in range of the empty cell
if(canMove(col, row, empty_row, empty_col)){
// Swapping the empty cell and the non-empty cell
var temp = empty_cell;
empty_cell = nonempty_cell;
nonempty_cell = temp;
// Swapping coordinates
var temprow = row;
row = empty_row;
empty_row = temprow;
var tempcol = col;
col = empty_col;
empty_col = tempcol;
// Getting text from the old empty cell
var new_value = $(empty_cell).text();
// Assigning the value to the nonempty cell text and changing the class to nonempty
$(nonempty_cell).text(new_value);
$(nonempty_cell).removeClass("empty").addClass("nonempty");
// Clearing the text and changing the class to empty
$(empty_cell).removeClass("nonempty").addClass("empty");
$(empty_cell).text("");
}
else
{
alert("Cannot move!");
}
});
$(".empty").click(function(){
alert("Clicked on an empty cell!");
});
});<!DOCTYPE html>
<html lang='sv'>
<head>
<meta charset="UTF-8" >
<title>The 15 Game</title>
<style>
.maincontainer
{
width: 35%;
border: 10px solid black;
}
.maincontainer td
{
width: 100px;
height: 100px;
text-align: center;
font-size: 100px;
border: 3px solid black;
}
.nonempty
{
background-color: red;
}
.empty
{
background-color: #C0C0C0;
}
.nonempty:hover
{
border: 3px solid white;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- External javascript file containing the game logic -->
<script type="text/javascript" src="javascript/15game.js"></script>
</head>
<body>
<!-- Table serving as the main container for the 16 boxes -->
<table class="maincontainer" >
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>The functionality of the code is mostly working properly. Clicking on a cell that is within range of an empty cell successfully swaps the two cells. However, there seems to be an issue where the cell initially assigned the class "empty" retains this class when trying to change it to "nonempty."
Please forgive any errors or typos, English is not my first language. Any assistance would be greatly appreciated!