HTML5 Drag and Match engine made with Phaser updated to Phaser 2.5.0

Talking about Drag and Match game, Game development, HTML5, Javascript and Phaser.

One of the things I love about Phaser is it gets updated extremely often, always looking for new features to add and new stuff to optimize. About two years ago I blogged about a Drag and Match engine, and since during these days I am making some experiments with Match 3 engines like the Bejeweled engine I blogged about some days ago, it’s time to update the prototype to Phaser 2.5.0 as I am going to add new features during next days. So here it is:
You should know how to play with it, just select a square and drag horizontally or vertically to move the entire row or column. And this is the source code, still uncommented because I will add full comments to the code when new features will be added, at least to make the prototype a little more playable.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
var game;
var tileSize = 50;
var fieldSize = 6;
var tileTypes = 6
var movingRow;
var movingCol;
var tileArray = [];
var startX;
var startY;
var distX;
var distY;
var dragDirection = "";
var tempTile;
 
window.onload = function() {           
    game = new Phaser.Game(300, 300);
    game.state.add("PlayGame", playGame)
    game.state.start("PlayGame");
}
 
var playGame = function(game){}
playGame.prototype = {
    preload: function(){
          game.load.spritesheet("tiles", "tiles.png", tileSize, tileSize);
          game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
        game.scale.setScreenSize = true;
          game.scale.pageAlignHorizontally = true;
          game.scale.pageAlignVertically = true;
    },
    create: function(){
          for(var i = 0; i < fieldSize; i++){
            tileArray[i] = [];
            for(j = 0; j < fieldSize; j++){
                var randomTile = Math.floor(Math.random() * tileTypes);
                theTile = game.add.sprite(j * tileSize, i * tileSize, "tiles");
                theTile.frame = randomTile;
                theTile.value = randomTile;
                tileArray[i][j] = theTile; 
            }
        }
        tempTile = game.add.sprite(0, 0, "tiles");
        tempTile.visible = false;
        game.input.onDown.add(pickTile, this);
    }
}
 
function pickTile(){
    startX = game.input.worldX;
    startY = game.input.worldY;
    movingRow = Math.floor(startY / tileSize);
    movingCol = Math.floor(startX / tileSize);
    dragging = true;
    game.input.onDown.remove(pickTile, this);
    game.input.onUp.add(releaseTile, this);
     game.input.addMoveCallback(moveTile, this);
}
 
function moveTile(){
    distX = game.input.worldX - startX;
    distY = game.input.worldY - startY;
     switch(dragDirection){
        case "":
            var dist = distX * distX + distY * distY;
            if(dist > 25) {
                var dragAngle = Math.abs(Math.atan2(distY, distX));
                if((dragAngle > Math.PI / 4 && dragAngle < 3 * Math.PI / 4)) {
                    dragDirection = "vertical";
                }
                else {
                    dragDirection = "horizontal";
                }
            }
        break;
        case "horizontal":
            tempTile.visible = false;
            tempTile.y = movingRow * tileSize;
            var deltaX = (Math.floor(distX / tileSize) % fieldSize);
            if (deltaX >= 0) {                                  
                tempTile.frame = tileArray[movingRow][fieldSize - 1 - deltaX].value;
            }
            else{
                deltaX=deltaX * -1 -1;
                tempTile.frame = tileArray[movingRow][deltaX].value;       
            }
            for(var i = 0; i < fieldSize; i++){
                tileArray[movingRow][i].x = (i * tileSize + distX) % (tileSize * fieldSize);
                if (tileArray[movingRow][i].x < 0) {
                    tileArray[movingRow][i].x += tileSize * fieldSize;
                }
                    if(distX % tileSize > 0){
                        tempTile.visible = true;
                         tempTile.x = distX % tileSize - tileSize;
                    }
                    if(distX % tileSize < 0){
                        tempTile.visible = true;
                         tempTile.x = distX % tileSize;
                    }
            }
        break;
        case "vertical":
            tempTile.visible = false;
            tempTile.x = movingCol * tileSize;
            var deltaY = (Math.floor(distY / tileSize) % fieldSize);
            if (deltaY >= 0) {                                  
                tempTile.frame = tileArray[fieldSize - 1 - deltaY][movingCol].value;
            }
            else{
                deltaY = deltaY * -1 -1;
                tempTile.frame = tileArray[deltaY][movingCol].value;       
            }
            for(var i = 0; i < fieldSize; i++){
                tileArray[i][movingCol].y = (i * tileSize + distY) % (tileSize * fieldSize);
                if (tileArray[i][movingCol].y < 0) {
                    tileArray[i][movingCol].y += tileSize * fieldSize;
                }
                    if(distY % tileSize > 0){
                        tempTile.visible = true;
                         tempTile.y = distY % tileSize - tileSize;
                    }
                    if(distY % tileSize < 0){
                        tempTile.visible = true;
                         tempTile.y = distY % tileSize;
                    }  
            }
        break;
    }
}
     
     
function releaseTile(){
    switch(dragDirection){
        case "horizontal":
            var shiftAmount = Math.floor(distX / (tileSize / 2));
            shiftAmount = Math.ceil(shiftAmount / 2) % fieldSize;
            var tempArray = [];
            if(shiftAmount > 0){
                for(var i = 0; i < fieldSize; i++){
                    tempArray[(shiftAmount + i) % fieldSize] = tileArray[movingRow][i].value;
                }
            }
            else{
                shiftAmount *= -1;
                for(var i = 0; i < fieldSize; i++){
                    tempArray[i] = tileArray[movingRow][(shiftAmount + i) % fieldSize].value;
                }
            }
            for(i = 0; i < fieldSize; i++){
                tileArray[movingRow][i].value = tempArray[i];
                tileArray[movingRow][i].frame = tempArray[i];
                tileArray[movingRow][i].x = i * tileSize;
            }
        break;
        case "vertical":
            var shiftAmount = Math.floor(distY / (tileSize / 2));
                shiftAmount = Math.ceil(shiftAmount / 2) % fieldSize;
                var tempArray = [];
                if(shiftAmount > 0){
                    for(var i = 0; i < fieldSize; i++){
                        tempArray[(shiftAmount + i) % fieldSize] = tileArray[i][movingCol].value;
                    }
                }
                else{
                    shiftAmount *= -1;
                    for(var i = 0; i < fieldSize; i++){
                        tempArray[i] = tileArray[(shiftAmount + i) % fieldSize][movingCol].value;
                    }
                }
                for(var i = 0; i < fieldSize; i++){
                    tileArray[i][movingCol].value = tempArray[i];
                    tileArray[i][movingCol].frame = tempArray[i];
                    tileArray[i][movingCol].y= i * tileSize;
            }
        break; 
    }
    dragDirection = "";
    tempTile.visible = false;
    game.input.onUp.remove(releaseTile, this);
     game.input.deleteMoveCallback(moveTile, this); 
    game.input.onDown.add(pickTile, this);
}
While I am turning it into a fully featured prototype you can download the source code and let me know if you manage to make something interesting out of it.