Complete JQuery + interact.js Drag and Match game in less than 70 lines thanks to my pure TypeScript class to handle Drag and Match games

Read all posts about "" game

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.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

214 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers