Pure TypeScript class to handle Drag and Match games in just a few lines – jQuery + interact.js example in 20 lines of code

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

I know, it seems a clickbait title, like the ones trying to make you click on them just to see there’s nothing related to such title.

But this time is true: thanks to my Pure TypeScript class to handle Drag and Match games I was able to build a Drag and Match game in 20, maybe even less, lines of code, using jQuery to handle animations and interact.js to handle user input.

Even less lines than the ones used to build the Phaser example.

Look at the result:

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 = 'thegame'></div>
    </body>
</html>

style.css

The style sheet which defines game board and item elements

body {
    padding : 0;
    margin : 0
}

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

#thegame {
    margin : 50px auto;
    width : 400px;
    height : 300px;
    background-color : black;
}

game.js

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

As you can see, it consists in only a few lines.

$(document).ready(function() {
    var dragAndMatch = new DragAndMatch({
        startX : $('#thegame').offset().left,
        startY : $('#thegame').offset().top,
        tileSize : 50    
    });
    dragAndMatch.items.forEach (item => {
        $('#thegame').append('<div class = "item"></div>');
        var addedItem = $('#thegame .item').last();
        item.data = addedItem;
        setItemCss(item, false);
    });
    interact('#thegame').draggable({
        listeners : {
            move : function(event) {
                dragAndMatch.handleInputMovement(event.clientX0, event.clientY0, event.client.x, event.client.y).forEach (item => setItemCss(item, true));
            },
            end : function(event) {
                dragAndMatch.handleInputStop(event.clientX0, event.clientY0, event.client.x, event.client.y).forEach (item => setItemCss(item, false));
            }    
        }
    })
});

function setItemCss(item, showDummy) {
    $(item.data).css({
        'top' : item.posY,
        'left' : item.posX,
        'background-position' : item.value * 50,
        'display' : item.isDummy ? (showDummy ? 'block' : 'none') : 'block'
    });    
}

As you can see, everything is managed by the class and you only have to move elements properly.

Now it’s time to let the class able to detect and remove combos, as well as rearrange the board after removing items, and it will be done in next days, meanwhile 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.