Building Re-Ordering Random Numbers Game

Introduction

In this article, I will explain clearly and briefly how to use HTML, JavaScript, jQuery, and CSS in building a reordering random numbers game (1,2,3,4,5,6,7,8).

Building such games depends on your logic.

You can find all the related files (codes) on the attachment.

The game will look like the following,

Building Re-Ordering Random Numbers Game

First, we should build the structure of the UI, so before doing anything create a table and for every td specify its siblings by using a custom attribute data-sibling,

<table>
<tr>
<td data-sibling="2and4" Id="td1"></td>
<td data-sibling="1and3and5" Id="td2"></td>
<td data-sibling="2and6" Id="td3"></td>
</tr>
<tr>
<td data-sibling="1and5and7" Id="td4"></td>
<td data-sibling="2and4and6and8" Id="td5"></td>
<td data-sibling="3and5and9" Id="td6"></td>
</tr>
<tr>
<td data-sibling="4and8" Id="td7"></td>
<td data-sibling="5and7and9" Id="td8"></td>
<td data-sibling="6and8" Id="td9"></td>
</tr>
</table>

Then move to apply CSS to get the target UI, you can find the full CSS code with attached files.

table {
background-color: #403737;
color: #fffffe;
cursor: pointer;
border-radius: 5px;
width: 100%;
margin: 0px auto;
float: none;
border:10px solid #5a545a;
margin :20px;
}
table tr td {
border: 5px solid #5a545a;
width: 100px;
height: 100px;
text-align: center;
font-size: 20px;
font-weight: bold;
}

The most important part of the game is handling JavaScript. We need to create a function which is resposible for generating 8 random numbers from 1 - 8 and putting them in an array. Thereafter spread these numbers over tds using $.each jQuery and textContent td property,

function shuffleNumbers() {
// Random integer between 1 and 8 (both included)
var allshuffledNumbers = [];
for (var i = 0; i < 8; i++) {
var randomNumber = Math.floor(Math.random() * 8) + 1;
while (allshuffledNumbers.indexOf(randomNumber) != -1) {
randomNumber = Math.floor(Math.random() * 8) + 1;
}
allshuffledNumbers.push(randomNumber);
}
$(allshuffledNumbers).each(function(index, value) {
$("#td" + (index + 1))[0].textContent = value
});
stepCounter=0;
$("#td9")[0].textContent="";
$("#stepcounter").text(stepCounter);
}

After handling each event on td, you need to know the siblings of the clicked td and detect if one of them has empty textContent to swap it with the textContent of the clicked td.

$("table tr td").click(function(event) {
var siblings = $(this).attr('data-sibling');
siblingssiblings = siblings.split("and");
var clickedText = event.currentTarget.textContent;
var emptySibligText = "";
$(siblings).each(function(index, value) {
if ($("#td" + value)[0].textContent == "") {
stepCounter++;
$("#stepcounter").text(stepCounter);
$("#td" + value)[0].textContent = clickedText;
event.currentTarget.textContent = "";
var isOrdered = checkOrdering();
if (isOrdered == true) {
$("#WinnerModal").modal("show");
}
}
});
})

And on every click event on any td, use checkOrdering function to detect if we got the correct ordering.

Then compare the current ordering (tds textContent ) with the target one.

function checkOrdering() {
var targetOrdering = ['1', '2', '3', '4', '5', '6', '7', '8'];
var isOrdered = true;
$(targetOrdering).each(function(index, value) {
if ($("#td" + value)[0].textContent != value) {
isOrdered = false;
return;
}
});
return isOrdered;
}

That was everything you need to build the game, hope you enjoyed it.