Do you like my tutorials?

Then consider supporting me on Ko-fi

Talking about Drag and Match game, Game development, Html and Javascript.

When I told you would be able to build a complete Drag and Match game in a few lines of code, whatever JavaScript based code, thanks to my pure TypeScript class with no dependencies, I really meant a few lines of code, and that’s why Phaser example was build with about 100 lines of code and now the complete JQuery example is just 69 lines long.

I already showed you the basics of JQuery and interact.js libraries to build a Drag and Match game, and now here I am with the complete example:

Game area is represented in black, and the example is intended to be run on desktop devices.

Try to drag rows and columns and see what happens.

The Drag and Match class has been compiled from TypeScript to Javascript with:

tsc -t es5 dragAndMatch.ts

Then, once I had the JavaScript class, it was easy to build the entire example, which consists in three files:

index.html

The web page, where we import all JavaScript libraries.

<html>
    <head>
        <link rel = 'stylesheet' href = 'style.css'>
        <script>var exports = {};</script>
        <script src = 'dragAndMatch.js'></script>
        <script src = 'jquery.js'></script>
        <script src = 'interact.js'></script>
        <script src = 'game.js'></script>
    </head>
    <body>
        <div id = 'title'>JQuery Drag and Match game</div>
        <div id = 'thegame'></div>
    </body>
</html>

Look at line 12 the element where to play the game.

style.css

The style sheet which defines game board and item elements

body {
    padding : 0;
    margin : 10px 0;
}

#title {
    font : normal 16px arial;
    text-align : center;
}

.item {
    width : 50px;
    height : 50px;
    background : url('items.png');
    position : absolute;
}

#thegame {
    margin : 20px auto;
    width : 400px;
    height : 300px;
    background-color : black;
    position : relative;
    overflow : hidden;
}

Look how thegame element has relative position and hidden overflow to hide everything which is not inside the div, while item class has absolute positioning.

game.js

The game itself, written with jQuery in mind and using interact.js to handle user input on thegame element.

$(document).ready(function() {
    let canMove = true;
    let dragAndMatch = new DragAndMatch({
        tileSize : 50    
    });
    let gameY = $('#thegame').offset().top;
    let gameX = $('#thegame').offset().left;
    dragAndMatch.items.forEach (item => {
        $('#thegame').append('<div class = "item"></div>');
        let addedItem = $('#thegame .item').last();
        item.data = addedItem;
        setItemCss(item, false);
    });
    interact('#thegame').draggable({
        listeners : {
            move : function(event) {               
                if (canMove) {
                    dragAndMatch.handleInputMovement(event.clientX0 - gameX, event.clientY0 - gameY, event.client.x - gameX, event.client.y - gameY).forEach (item => setItemCss(item, true, false));
                }
            },
            end : function(event) {
                if (canMove) {
                    canMove = false;
                    dragAndMatch.handleInputStop(event.clientX0 - gameX, event.clientY0 - gameY, event.client.x - gameX, event.client.y - gameY).forEach (item => setItemCss(item, false, false));
                    resolveMatches();
                }
            }    
        }
    });
    function resolveMatches() {
        if (dragAndMatch.thereAreMatches) {
            dragAndMatch.removeMatches().forEach (item => {
                $(item.data).addClass('fade');
            });
            $('.fade').fadeTo(250, 0, function() {
                $('.fade').removeClass('fade');
                let itemsToMove = 0;
                dragAndMatch.arrangeBoard().forEach (item => {
                    $(item.data).fadeTo(0, 1);
                    itemsToMove ++;
                    setItemCss(item, false, true);
                    $(item.data).animate({
                        'top' : item.movement.endY
                    }, 
                    {
                        duration : 150 * item.movement.deltaRow,
                        complete : function() {
                            itemsToMove --;
                            if (itemsToMove == 0) {
                                resolveMatches();
                            }
                        }
                    });
                });
            });
        }
        else {
            canMove = true;
        }
    }
    function setItemCss(item, showDummy, animate) {
        $(item.data).css({
            'top' : animate ? item.movement.startY : item.posY,
            'left' : animate ? item.movement.startX : item.posX,
            'background-position' : item.value * 50,
            'display' : item.isDummy ? (showDummy ? 'block' : 'none') : 'block',
        });    
    }
});

And in just 69 lines of code we were able to build a complete Drag and Match game thanks to the pure TypeScript class with no dependencies.

Now you can flood the web and the app stores with your takes on Drag and Match games. Download the source code of the entire project.

Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.