パズルゲームのバグ・不具合を修正したい

Question

現在ブラウザ向けに、「キャンディークラッシュ」や「ズーキーパー」のように画面上のピースをスライドさせて、3つ以上そろえて消していくマッチ3パズルゲームを制作しています。

以下のページを参考に（というよりコードをほぼそのまま使って）
How to Create a Candy Crush or Bejeweled Game in Phaser
プログラムを組んでみたのですが、ごく稀に以下のバグ・不具合が発生します。

【発生するバグ・不具合】
・マウスイベントに対しての反応が鈍く、スムーズにピースが動かない
・ピースをスライドさせて3つ揃えて消した後に、別のピースが意図しない位置にスライドしてしまう

実際のプログラムは以下の通りです。
（上記のページでは『Phaser』という海外製のゲームエンジンを使用していましたが、こちらでは『phina.js』という日本産のゲームエンジンを使用しています）

//"use strict";
// 定数定義
var FPS = 60;
var SCREEN_WIDTH = 750;
var SCREEN_HEIGHT = 1106;
var TILE_SIZE = 100;

//変数定義------------------------------------------------------------
var score = 0;
var activeTile1 = null;
var activeTile2 = null;
var canMove = false;
var tileGrid = [
	[null, null, null, null, null, null],
	[null, null, null, null, null, null],
	[null, null, null, null, null, null],
	[null, null, null, null, null, null],
	[null, null, null, null, null, null],
	[null, null, null, null, null, null]
];
var startPosX = 0;

var ASSETS = {
	// 画像
	image: {
		"icons": "assets/img/commons/icons.png",
	},
};

var myscenes = [
	{
		className: 'Main',
		label: 'main',
	},
];

phina.globalize();
phina.define('Main', {
	superClass: 'DisplayScene',

	init: function (options) {
		this.superInit(options);
		MainScene = this;
		var self = this;
		this.glLayer = phina.gl2d.GLLayer(options).addChildTo(this);

		this.initTiles();
	},
	initTiles: function () {
		var self = this;
		for (var i = 0; i < tileGrid.length; i++) {
			for (var j = 0; j < tileGrid.length; j++) {
				var tile = this.addTile(i, j);
				tileGrid[i][j] = tile;
				tile.addChildTo(this.glLayer);
			}
		}
		this.glLayer.tweener.clear().wait(600).call(function () {
			self.checkMatch();
		});
	},
	addTile: function (x, y) {
		var self = this;
		var tileToAdd = Math.floor(Math.random() * 10);
		var tile = Tiles(tileToAdd).setPosition((x * TILE_SIZE) + TILE_SIZE / 2, 0);
		tile.tweener.clear().to({ y: y * TILE_SIZE + (TILE_SIZE / 2) }, 500, "easeInOutElastic")
		tile.setOrigin(0.5, 0.5);
		tile.setInteractive(true);
		tile.tileType = tileToAdd;
		return tile;
	},
	update: function (app) {
		var self = this;
		gameFrame = app.frame;

		if (activeTile1 && !activeTile2) {
			var pos = app.pointer;
			var hoverX = pos.x;
			var hoverY = pos.y;

			var hoverPosX = Math.floor(hoverX / TILE_SIZE);
			var hoverPosY = Math.floor(hoverY / TILE_SIZE);

			var difX = (hoverPosX - startPosX);
			var difY = (hoverPosY - startPosY);

			if (!(hoverPosY > tileGrid[0].length - 1 || hoverPosY < 0) && !(hoverPosX > tileGrid.length - 1 || hoverPosX < 0)) {
				if ((Math.abs(difY) == 1 && difX == 0) || (Math.abs(difX) == 1 && difY == 0)) {
					canMove = false;
					activeTile2 = tileGrid[hoverPosX][hoverPosY];
					this.swapTiles();
					this.glLayer.tweener.clear().wait(500).call(function () {
						self.checkMatch();
					});
				}
			}
		}
	},
	tileUp: function () {
		activeTile1 = null;
		activeTile2 = null;
	},
	swapTiles: function () {
		var self = this;

		if (activeTile1 && activeTile2) {
			var tile1Pos = { x: (activeTile1.x - TILE_SIZE / 2) / TILE_SIZE, y: (activeTile1.y - TILE_SIZE / 2) / TILE_SIZE };
			var tile2Pos = { x: (activeTile2.x - TILE_SIZE / 2) / TILE_SIZE, y: (activeTile2.y - TILE_SIZE / 2) / TILE_SIZE };

			tileGrid[tile1Pos.x][tile1Pos.y] = activeTile2;
			tileGrid[tile2Pos.x][tile2Pos.y] = activeTile1;

			activeTile1.tweener.clear().to({ x: tile2Pos.x * TILE_SIZE + (TILE_SIZE / 2), y: tile2Pos.y * TILE_SIZE + (TILE_SIZE / 2) }, 200, "swing");
			activeTile2.tweener.clear().to({ x: tile1Pos.x * TILE_SIZE + (TILE_SIZE / 2), y: tile1Pos.y * TILE_SIZE + (TILE_SIZE / 2) }, 200, "swing");
			activeTile1 = tileGrid[tile1Pos.x][tile1Pos.y];
			activeTile2 = tileGrid[tile2Pos.x][tile2Pos.y];
		}
	},
	checkMatch: function () {
		var self = this;

		var matches = this.getMatches(tileGrid);
		if (matches.length > 0) {
			this.removeTileGroup(matches);
			this.resetTile();
			this.fillTile();
			this.glLayer.tweener.clear().wait(500).call(function () {
				self.tileUp();
			});
			this.glLayer.tweener.clear().wait(600).call(function () {
				self.checkMatch();
			});
		}
		else {
			this.swapTiles();
			this.glLayer.tweener.clear().wait(500).call(function () {
				self.tileUp();
				canMove = true;
			});
		}
	},
	getMatches: function (tileGrid) {
		var matches = [];
		var groups = [];

		for (var i = 0; i < tileGrid.length; i++) {
			var tempArr = tileGrid[i];
			groups = [];
			for (var j = 0; j < tempArr.length; j++) {
				if (j < tempArr.length - 2)
					if (tileGrid[i][j] && tileGrid[i][j + 1] && tileGrid[i][j + 2]) {
						if (tileGrid[i][j].tileType == tileGrid[i][j + 1].tileType && tileGrid[i][j + 1].tileType == tileGrid[i][j + 2].tileType) {
							if (groups.length > 0) {
								if (groups.indexOf(tileGrid[i][j]) == -1) {
									matches.push(groups);
									groups = [];
								}
							}
							if (groups.indexOf(tileGrid[i][j]) == -1) {
								groups.push(tileGrid[i][j]);
							}
							if (groups.indexOf(tileGrid[i][j + 1]) == -1) {
								groups.push(tileGrid[i][j + 1]);
							}
							if (groups.indexOf(tileGrid[i][j + 2]) == -1) {
								groups.push(tileGrid[i][j + 2]);
							}
						}
					}
			}
			if (groups.length > 0) matches.push(groups);
		}

		for (j = 0; j < tileGrid.length; j++) {
			var tempArr = tileGrid[j];
			groups = [];
			for (i = 0; i < tempArr.length; i++) {
				if (i < tempArr.length - 2)
					if (tileGrid[i][j] && tileGrid[i + 1][j] && tileGrid[i + 2][j]) {
						if (tileGrid[i][j].tileType == tileGrid[i + 1][j].tileType && tileGrid[i + 1][j].tileType == tileGrid[i + 2][j].tileType) {
							if (groups.length > 0) {
								if (groups.indexOf(tileGrid[i][j]) == -1) {
									matches.push(groups);
									groups = [];
								}
							}
							if (groups.indexOf(tileGrid[i][j]) == -1) {
								groups.push(tileGrid[i][j]);
							}
							if (groups.indexOf(tileGrid[i + 1][j]) == -1) {
								groups.push(tileGrid[i + 1][j]);
							}
							if (groups.indexOf(tileGrid[i + 2][j]) == -1) {
								groups.push(tileGrid[i + 2][j]);
							}
						}
					}
			}
			if (groups.length > 0) matches.push(groups);
		}
		return matches;
	},
	removeTileGroup: function (matches) {
		var self = this;
		for (var i = 0; i < matches.length; i++) {
			var tempArr = matches[i];
			for (var j = 0; j < tempArr.length; j++) {
				var tile = tempArr[j];
				var tilePos = this.getTilePos(tileGrid, tile);
				tile.remove();
				if (tilePos.x != -1 && tilePos.y != -1) {
					tileGrid[tilePos.x][tilePos.y] = null;
				}
			}
		}
	},
	getTilePos: function (tileGrid, tile) {
		var pos = { x: -1, y: -1 };
		for (var i = 0; i < tileGrid.length; i++) {
			for (var j = 0; j < tileGrid[i].length; j++) {
				if (tile == tileGrid[i][j]) {
					pos.x = i;
					pos.y = j;
					break;
				}
			}
		}
		return pos;
	},
	resetTile: function () {
		var self = this;

		for (var i = 0; i < tileGrid.length; i++) {
			for (var j = tileGrid[i].length - 1; j > 0; j--) {
				if (tileGrid[i][j] == null && tileGrid[i][j - 1] != null) {
					var tempTile = tileGrid[i][j - 1];
					tileGrid[i][j] = tempTile;
					tileGrid[i][j - 1] = null;
					tempTile.tweener.clear().to({ y: (TILE_SIZE * j) + (TILE_SIZE / 2) }, 200, "swing");
					j = tileGrid[i].length;
				}
			}
		}
	},
	fillTile: function () {
		var self = this;

		for (var i = 0; i < tileGrid.length; i++) {
			for (var j = 0; j < tileGrid.length; j++) {
				if (tileGrid[i][j] == null) {
					var tile = this.addTile(i, j);
					tileGrid[i][j] = tile;
					tile.addChildTo(this.glLayer);
				}
			}
		}
	},
	createScore: function () {
		//var self = this;
		//var scoreFont = "100px Arial";
		//me.scoreLabel = me.game.add.text((Math.floor(me.tileGrid[0].length / 2) * me.tileWidth), me.tileGrid.length * me.tileHeight, "0", {font: scoreFont, fill: "#fff"});
		//me.scoreLabel.anchor.setTo(0.5, 0);
		//me.scoreLabel.align = 'center';
	},
	incrementScore: function () {
		//var self = this;
		//me.score += 10;
		//me.scoreLabel.text = me.score;
	},
	removeTileGroup: function (matches) {
		var self = this;
		for (var i = 0; i < matches.length; i++) {
			var tempArr = matches[i];
			for (var j = 0; j < tempArr.length; j++) {
				var tile = tempArr[j];
				var tilePos = this.getTilePos(tileGrid, tile);
				tile.remove();
				this.incrementScore();
				if (tilePos.x != -1 && tilePos.y != -1) {
					tileGrid[tilePos.x][tilePos.y] = null;
				}
			}
		}
	},
});

phina.define("Tiles", {
	superClass: 'Sprite',
	init: function (tileToAdd) {
		this.superInit("icons");
		this.tileType = null;
		this.setSize(TILE_SIZE, TILE_SIZE);
		this.setFrameIndex(tileToAdd);
		this.on('pointstart', this.tileDown);
		this.on('pointend', this.tileUp);
	},
	tileDown: function () {
		if (canMove) {
			activeTile1 = this;
			startPosX = (this.x - TILE_SIZE / 2) / TILE_SIZE;
			startPosY = (this.y - TILE_SIZE / 2) / TILE_SIZE;
		}
	},
	tileUp: function () {
		activeTile1 = null;
		activeTile2 = null;
	},
});

phina.main(function () {
	var app = phina.game.GameApp({
		startLabel: 'main',
		assets: ASSETS,
		width: SCREEN_WIDTH,
		height: SCREEN_HEIGHT,
		scenes: myscenes,
		domElement: document.getElementById("main"),
	});
	app.fps = FPS;
	app.run();
});

何卒ご教授よろしくお願いいたします。

Answer 1

仮にタイルの種類が４つという前提ならば

-     var tileToAdd = Math.floor(Math.random() * 10);
+     var tileToAdd = Math.floor(Math.random() * 4);

ではないですか？

タイル種類が4つ前提のコードなのに、タイル種類選択のところで0～9にしてしまうと
画面上の表示とプログラム上の論理的な位置が異なってしまうと思います。