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.
Do you like my tutorials?
Then consider supporting me on Ko-fi.
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);
}
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.