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.
Learn cross platform HTML5 game development
Check my Gumroad page for commented source code, games and books.
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.