27.4 C
Gujarat
HomeJavascriptHow To Make Slide Puzzle Game in HTML CSS and JavaScript

How To Make Slide Puzzle Game in HTML CSS and JavaScript

In this article, we will create a slide puzzle game in HTML CSS and JavaScript. Basically, we will have some random pieces of image spread in a 3×3 puzzle box. We have here the Doraemon image, If you don’t know about Doraemon, so it is a Japanese character. Here we will have 9 pieces of the image, and they are spread randomly in the puzzle box.

The objective of The Game

If you have played such kinds of games, so might know about the logic. But if you haven’t played these kinds of games, then just remember we need to make a perfect image just by sliding the pieces of images.

Pre-requisites to Make Slide Puzzle Game in HTML CSS and JavaScript

  • Basic knowledge of HTML.
  • Good knowledge of CSS.
  • Good knowledge of JavaScript.

Creating HTML and Default Settings

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Slide Puzzle</title>
        <link rel="stylesheet" href="puzzle.css">
        <script src="puzzle.js"></script>
    </head>

    <body>
        <img id="title" src="./logo.png">
        <div id="board">
        </div>
        <h1>Turns: <span id="turns">0</span></h1>
    </body>
</html>
body {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    color: #0c67ae;
}

First of all, we have to build HTML markup and in this we just added link for CSS and JavaScript files. Also, we have here logo image for doraemon and <h1> heading which have turns in it. Then after, in CSS we just have to add font-family of Helvetica, also we used text-align to center, and lastly color to #0c67ae.

Now, we just added some styles to customize our puzzle box, which is pretty easy to do.

#title {
    height: 150px;
    width: 400px;
}

#board {
    width: 360px;
    height: 360px;
    background-color: lightblue;
    border: 10px solid #0c67ae;

    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

#board img {
    width: 118px;
    height: 118px;
    border: 1px solid #0c67ae;
}
Slide Puzzle Game in HTML CSS and JavaScript

Adding Image Pieces to Board

var rows = 3;
var columns = 3;

var currTile;
var otherTile; //blank tile

var turns = 0;

// var imgOrder = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
var imgOrder = ["4", "2", "8", "5", "1", "6", "7", "9", "3"];

window.onload = function() {
    for (let r=0; r < rows; r++) {
        for (let c=0; c < columns; c++) {

            //<img id="0-0" src="1.jpg">
            let tile = document.createElement("img");
            tile.id = r.toString() + "-" + c.toString();
            tile.src = imgOrder.shift() + ".jpg";
            document.getElementById("board").append(tile);

        }
    }
}

Now, we are in our main file. So here we have declared row and column to 3, and we have an array which have random numbers between 1-9. Then we add some onload of the window functionality, in this we have used 2 loops, so we can access each tile of board.

After that, we need to create an element of image, with this line of code tile.id = r.toString() + "-" + c.toString(); we can get each tile id. Now we will access every image in imgOrder array. Lastly, we will append the every image on every tile.

Slide Puzzle Game in HTML CSS and JavaScript

Adding Drag Functionality

tile.addEventListener("dragstart", dragStart); 
tile.addEventListener("dragover", dragOver);
tile.addEventListener("dragenter", dragEnter);
tile.addEventListener("dragleave", dragLeave);
tile.addEventListener("drop", dragDrop);
 tile.addEventListener("dragend", dragEnd);
}
}

function dragStart() {
    currTile = this; //this refers to the img tile being dragged
}

function dragOver(e) {
    e.preventDefault();
}

function dragEnter(e) {
    e.preventDefault();
}

function dragLeave() {

}

function dragDrop() {
    otherTile = this; //this refers to the img tile being dropped on
}

function dragEnd() {
    if (!otherTile.src.includes("3.jpg")) {
        return;
    }

    let currCoords = currTile.id.split("-"); //ex) "0-0" -> ["0", "0"]
    let r = parseInt(currCoords[0]);
    let c = parseInt(currCoords[1]);

    let otherCoords = otherTile.id.split("-");
    let r2 = parseInt(otherCoords[0]);
    let c2 = parseInt(otherCoords[1]);

    let moveLeft = r == r2 && c2 == c-1;
    let moveRight = r == r2 && c2 == c+1;

    let moveUp = c == c2 && r2 == r-1;
    let moveDown = c == c2 && r2 == r+1;

    let isAdjacent = moveLeft || moveRight || moveUp || moveDown;

    if (isAdjacent) {
        let currImg = currTile.src;
        let otherImg = otherTile.src;

        currTile.src = otherImg;
        otherTile.src = currImg;

        turns += 1;
        document.getElementById("turns").innerText = turns;
    }


}

So now lastly, we need to add drag functionality here. We need to add event listeners on every action with callback function. Here we have dragstart, dragover, dragenter, dragleave, drop and dragend. These events we will have when we swap the image pieces. At dragStart function, we’re just referring to the image tile which is going to be dragged, at dragOver, dragEnter, dragLeave functions we don’t need any other operations, so they do nothing here. At dragDrop function, we are referring to the image is dropped on.

Lastly, we need to perform swap in dragEnd function, in this we will spit current and swapping coordinates using ‘-‘, as a result we will get 2 elements in an array, and we will assign in some variable. Now we will add left, right, up and down swapping logic, And any changes are performed then we will swap image and increment counter for turns.

Full Source Code of Slide Puzzle Game in HTML CSS and JavaScript

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Slide Puzzle</title>
        <link rel="stylesheet" href="puzzle.css">
        <script src="puzzle.js"></script>
    </head>

    <body>
        <img id="title" src="./logo.png">
        <div id="board">
        </div>
        <h1>Turns: <span id="turns">0</span></h1>
    </body>
</html>

puzzle.css

body {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    color: #0c67ae;
}

#title {
    height: 150px;
    width: 400px;
}

#board {
    width: 360px;
    height: 360px;
    background-color: lightblue;
    border: 10px solid #0c67ae;

    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

#board img {
    width: 118px;
    height: 118px;
    border: 1px solid #0c67ae;
}

puzzle.js


var rows = 3;
var columns = 3;

var currTile;
var otherTile; //blank tile

var turns = 0;

// var imgOrder = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
var imgOrder = ["4", "2", "8", "5", "1", "6", "7", "9", "3"];

window.onload = function() {
    for (let r=0; r < rows; r++) {
        for (let c=0; c < columns; c++) {

            //<img id="0-0" src="1.jpg">
            let tile = document.createElement("img");
            tile.id = r.toString() + "-" + c.toString();
            tile.src = imgOrder.shift() + ".jpg";

            //DRAG FUNCTIONALITY
            tile.addEventListener("dragstart", dragStart);  //click an image to drag
            tile.addEventListener("dragover", dragOver);    //moving image around while clicked
            tile.addEventListener("dragenter", dragEnter);  //dragging image onto another one
            tile.addEventListener("dragleave", dragLeave);  //dragged image leaving anohter image
            tile.addEventListener("drop", dragDrop);        //drag an image over another image, drop the image
            tile.addEventListener("dragend", dragEnd);      //after drag drop, swap the two tiles

            document.getElementById("board").append(tile);

        }
    }
}

function dragStart() {
    currTile = this; //this refers to the img tile being dragged
}

function dragOver(e) {
    e.preventDefault();
}

function dragEnter(e) {
    e.preventDefault();
}

function dragLeave() {

}

function dragDrop() {
    otherTile = this; //this refers to the img tile being dropped on
}

function dragEnd() {
    if (!otherTile.src.includes("3.jpg")) {
        return;
    }

    let currCoords = currTile.id.split("-"); //ex) "0-0" -> ["0", "0"]
    let r = parseInt(currCoords[0]);
    let c = parseInt(currCoords[1]);

    let otherCoords = otherTile.id.split("-");
    let r2 = parseInt(otherCoords[0]);
    let c2 = parseInt(otherCoords[1]);

    let moveLeft = r == r2 && c2 == c-1;
    let moveRight = r == r2 && c2 == c+1;

    let moveUp = c == c2 && r2 == r-1;
    let moveDown = c == c2 && r2 == r+1;

    let isAdjacent = moveLeft || moveRight || moveUp || moveDown;

    if (isAdjacent) {
        let currImg = currTile.src;
        let otherImg = otherTile.src;

        currTile.src = otherImg;
        otherTile.src = currImg;

        turns += 1;
        document.getElementById("turns").innerText = turns;
    }


}

Output

Slide Puzzle Game in HTML CSS and JavaScript

Video Reference:

You may also like:

Adminhttps://rocoderes.com
Rocoderes is a blog you can learn HTML, CSS, JavaScript, React Js and Python along with creative coding stuff and free source code files.
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

15,000FansLike
5,000FollowersFollow
535FollowersFollow
- Advertisment -spot_img

Subscribe to our newsletter

To be updated with all the latest news, offers and special announcements.

Most Popular