In this tutorial we will learn how to create the 15 puzzle game with JavaScript.
Click on the play button and start moving the numbers, simply by passing over them, until everything is reordered. When you are done, the victory message will appear.
Implementation of the 15 puzzle game with JavaScript
We will make this game very simply by using stylesheets and JavaScript methods to handle events.
Clearly there are many implementations of this online game with JavaScript, I propose one of them.
We will use the addEventListener method that we will activate at the mouseover event, that is, when we hover the mouse over the piece to be moved.
HTML code
The HTML code for the development of the game will simply be constituted by a container for all the tiles to which we give the tile class and by every single tile that is initially in its place.
Finally I add the play button which is used to start the game.
Style sheet for the 15 puzzle game JavaScript
We build our style sheet by building our tiles wide and 60 pixels high. We give a 10-pixel border of light gray color to better simulate the game. The last piece will be 79 pixels in height and width.
.tiles{
width: 320px;
height: 315px;
display: flex;
flex-wrap: wrap;
}
.tiles .gusset{
border: 10px solid #ddd;
width: 60px;
height: 60px;
color: #ffffff;
background: #5cb1d6;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}
.tiles .last{
width: 79px;
height: 79px;
}
JavaScript code
Let’s build a play function that simply creates random numbers with no repetitions. Swapping the initial elements with those generated using the swap function. Notice that swap is triggered on the style property of the div level.
After we activate the displacement of the box only if the distance dx and dy ta the last piece and the piece under consideration is 0 and 1 or 1 and 0.
Finally, if each element of the array is in its place then we have solved our game.
var last = document.querySelector(".last");
var ar = Array.from(document.querySelectorAll(".gusset"));
ar.forEach(gusset => {
gusset.addEventListener("mouseover", ev => move(gusset));
});
function game(){
var i = 0;
var a, b;
while (i < 30) {
a = Math.random() * 15 >>> 0;
b = Math.random() * 15 >>> 0;
swapGusset(ar[a], ar[b]);
i++;
}
}
function swapGusset({style: a}, {style: b}) {
temp = a.order;
a.order = b.order;
b.order = temp;
}
function swapX({style}) {
return parseInt(style.order)%4;
}
function swapY({style}) {
return parseInt(style.order)/4 >>> 0;
}
function move(gusset) {
var ux = swapX(last);
var x = swapX(gusset);
var uy = swapY(last);
var y = swapY(gusset);
var dx = Math.abs(ux-x), dy = Math.abs(uy-y);
if (dx == 0 && dy == 1 || dx == 1 && dy == 0) {
swapGusset(last, gusset);
if (ar.every((p, i) => i == swapX(p) + swapY(p) * 4)) {
alert("You Won!");
}
}
}
In this lesson we have found a possible solution to the 15 puzzle game in JavaScript, in the next lessons we will have fun developing many other applications.