パ●ドラ風ゲームでバグが発生する

Question

このページを参考にしてパ●ドラ風のマッチ3ゲームを制作しているのですが、ときどき以下のバグが発生します
・絵柄を3つそろえると、通常は次の絵柄が表示されるはずが何も表示されない
・一部の絵柄が移動できなくなる

原因は何でしょうか。ご提示よろしくお願いいたします。

<section id="gamemaincontent">
	<canvas id="main">
	</canvas>
	<script src="main.js"></script>
</section>

// 定数定義
var FPS = 60;
var SCREEN_WIDTH = 420;
var SCREEN_HEIGHT = 580;

//変数定義------------------------------------------------------------
var screenRate = 1;
var gameFrame = 0;
var oldTime = 0;
var delta = 0;
var lastTimeStamp = 0;
var frameTime = 1 / FPS;

var iconArray = {
	x: 20.5,
	y: 54,
	columns: 6,
	rows: 6,
	iconWidth: 54,
	iconHeight: 54,
	iconMargin:11,
	iconColorNum: 10,
	icons: [],
	selectedIcon: { column: -1, row: -1 }
};
var matchs = [];

var buttons = [];

var playBtn;

var mouseX;
var mouseY;
var dragFlg;

var loadCount = 0;
var image = new Array();
var imageSrc = [
	"assets/mainbg.png",
	"assets/icons.png",
	"assets/virus.png"
];
var loadTotal = parseInt(imageSrc.length);

screenRate = Math.min(window.innerWidth/SCREEN_WIDTH, window.innerHeight/SCREEN_HEIGHT);
var canvas = document.getElementById('main');
canvas.width = SCREEN_WIDTH;
canvas.height = SCREEN_HEIGHT;
canvas.style.width = '100%';
canvas.style.height = '100%';
var ctx = canvas.getContext('2d');
requestAnimationFrame = (function() {
	return window.requestAnimationFrame || window.webkitRequestAnimationFrame ||
		window.mozRequestAnimationFrame || window.oRequestAnimationFrame ||
		window.msRequestAnimationFrame || function(callback) {
			window.setTimeout(callback, 1000 / FPS);
		};
})();

var click_touchstart = window.ontouchstart===null?"touchstart":"click";
var click_touchend = window.ontouchend===null?"touchend":"click";

function gameResize() {
	screenRate = Math.min(window.innerWidth/SCREEN_WIDTH, window.innerHeight/SCREEN_HEIGHT);
	canvas.style.width = SCREEN_WIDTH*screenRate+'px';
	canvas.style.height = SCREEN_HEIGHT*screenRate+'px';
}

function gameLoading() {
	for (var i in imageSrc) {
		image[i] = new Image();
		image[i].addEventListener('load', function() {
			gameLoadCount();
		});
		image[i].src = imageSrc[i];
	}
}

function gameLoadCount() {
	if(loadCount < loadTotal){
		loadCount++;
		loadBarDraw();
		if(loadCount == loadTotal){
			//gameMode = "TITLE";
			gameMode = "INIT";
			mainLoop();
		}
	}
}

function loadBarDraw() {
	var barBWidth = 250;
	var barBHeight = 35;
	var barWidth = ((loadCount / loadTotal) * barBWidth);
	var barHeight = barBHeight;
	var barBX = Math.floor(canvas.width - barBWidth) / 2;
	var barBY = Math.floor(canvas.height - barBHeight) / 2;
	var barX = barBX - (barBWidth/2) + (barBWidth/2);
	var barY = barBY;

	ctx.strokeStyle = "#ffffff";
	ctx.lineWidth = 5;
	ctx.strokeRect(barBX, barBY, barBWidth, barBHeight);
	ctx.fillStyle = "#ffffff";
	ctx.fillRect(barX, barY, barWidth, barHeight)
}

function mainLoop() { //メインループ処理
	var t = new Date().getTime();
	if (lastTimeStamp > 0) {
		delta = (t - lastTimeStamp) / 1000;
	}
	lastTimeStamp = t;
	gameFrame++;
	if (delta <= frameTime) {
		requestAnimationFrame(mainLoop);
		return;
	}
	
	switch (gameMode) {
		case "INIT":
			gameLevelSelect();
			break;
		case "MAIN":
			gameMain();
			break;
	}

	requestAnimationFrame(function() {
		mainLoop();
	});
}

function gameInit() {
	fieldInit();
	gameMode = "MAIN";
}

function gameMain() {
	icons.Render();
	for (var i=0; i<iconArray.columns; i++) {
		for (var j=0; j<iconArray.rows; j++) {
			if(i != iconArray.selectedIcon.column || j != iconArray.selectedIcon.row){
				icons.Draw(iconArray.icons[i][j].x, iconArray.icons[i][j].y, i, j);
			}
		}
	}
	
	canvas.addEventListener('mousedown', function(e){iconMouseDown(e);}, false);
	iconMouseMove();
	canvas.addEventListener('mouseup',   function(e){iconMouseUp(e);},   false);
}

var icons = (function () {
	return {
		Render: function() {
			for (var i=0; i<iconArray.columns; i++) {
			    for (var j=0; j<iconArray.rows; j++) {
			        if (iconArray.icons[i][j].color >= 0) {
			            iconArray.icons[i][j].x = ((iconArray.iconWidth+iconArray.iconMargin) * i) + iconArray.x;
			            iconArray.icons[i][j].y = ((iconArray.iconHeight+iconArray.iconMargin) * j) + iconArray.y;
			        }
			    }
			}
		},
		Draw: function(x, y, i, j) {
			var iconImage = iconArray.icons[i][j].virus ? image[2] : image[1];
			ctx.drawImage(iconImage, iconArray.iconWidth * iconArray.icons[i][j].color, 0, iconArray.iconWidth, iconArray.iconHeight, x, y, iconArray.iconWidth, iconArray.iconHeight);
		}
	};
}());

function fieldInit() {
	for (var i=0; i<iconArray.columns; i++) {
	    iconArray.icons[i] = [];
	    for (var j=0; j<iconArray.rows; j++) {
	        iconArray.icons[i][j] = { color: 0, virus:0, x:0, y:0, shift:0}
	        
        	var rand = Math.floor(Math.random() * iconArray.iconColorNum);
        	iconArray.icons[i][j].color = rand;
	        
	        iconArray.icons[i][j].virus = false;
	        
	        if(Math.random()  < (1/2)){
				iconArray.icons[i][j].virus = true;
			}
			
			if(i == iconArray.columns-1 && j == iconArray.rows-1){
				matchResolve();
			}
	    }
	}
}

function matchResolve() {
    iconMatchCheck();
    
    while (matchs.length > 0) {

        iconDelete();

        iconShift();

        iconMatchCheck();
    }
}


function iconMatchCheck(){
    matchs = [];
    var checkFlg = false;
    var lineCnt = 0;
    for (var j = 0; j < iconArray.rows; j++) {
		for (var i = 0; i < iconArray.columns; i++) {
			checkFlg = false;
			
			if (i == iconArray.columns-1) {
				checkFlg = true;
			}else{
				if (iconArray.icons[i][j].color == iconArray.icons[i+1][j].color && iconArray.icons[i][j].color != -1) {
					lineCnt++;
				}else{
					checkFlg = true;
				}
			}
			
			if (checkFlg) {
				if (lineCnt >= 3) {
					matchs.push({ column: i+1-lineCnt, row:j, length: lineCnt, horizontal: true });
				}

				lineCnt = 1;
			}
		}
    }
    for (var i = 0; i < iconArray.columns; i++) {
		for (var j = 0; j < iconArray.rows; j++) {
			checkFlg = false;
			
			if (j == iconArray.rows-1) {
				checkFlg = true;
			}else{
				if (iconArray.icons[i][j].color == iconArray.icons[i][j+1].color && iconArray.icons[i][j].color != -1) {
					lineCnt++;
				}else{
					checkFlg = true;
				}
			}
			
			if (checkFlg) {
				if (lineCnt >= 3) {
 					matchs.push({ column: i, row:j+1-lineCnt, length: lineCnt, horizontal: false });
				}

				lineCnt = 1;
			}
		}
    }
}

function loopMatchs(func) {
    for (var i=0; i<matchs.length; i++) {
        var match = matchs[i];
        var coffset = 0;
        var roffset = 0;
        for (var j=0; j<match.length; j++) {
            func(i, match.column+coffset, match.row+roffset);
            
            if (match.horizontal) {
                coffset++;
            } else {
                roffset++;
            }
        }
    }
}
    
function iconDelete(){
	loopMatchs(function(index, column, row) { 
		iconArray.icons[column][row].color = -1;
		iconArray.icons[column][row].virus = false;
	});
}

function iconShift() {
    for (var i=0; i<iconArray.columns-1; i++) {
        for (var j=iconArray.rows-1; j>=0; j--) {
            if (iconArray.icons[i][j].color == -1) {
                var rand = Math.floor(Math.random() * iconArray.iconColorNum);
                iconArray.icons[i][j].color = rand;
            }
        }
    }
}

function iconSwap(x1, y1, x2, y2) {
    var swapIcon = iconArray.icons[x1][y1];
    iconArray.icons[x1][y1] = [];
    iconArray.icons[x1][y1] = iconArray.icons[x2][y2];
    iconArray.icons[x2][y2] = [];
    iconArray.icons[x2][y2] = swapIcon;
}
    
function iconMouseDown(e) {
	var rect = e.target.getBoundingClientRect();
	if('ontouchend' in document){
		var touch = e.touches[0] || e.changedTouches[0];
		mouseX = (touch.clientX - rect.left)/screenRate;
		mouseY = (touch.clientY - rect.top)/screenRate;
	}else{
		mouseX = (e.clientX - rect.left)/screenRate;
		mouseY = (e.clientY - rect.top)/screenRate;
	}

	var ix = Math.floor((mouseX - iconArray.x) / iconArray.iconWidth);
	var iy = Math.floor((mouseY - iconArray.y) / iconArray.iconHeight);
	if (ix >= 0 && ix < iconArray.columns && iy >= 0 && iy < iconArray.rows){
        
		iconArray.selectedIcon.column = ix;
		iconArray.selectedIcon.row = iy;
		dragFlg = true;
	}
}
function iconMouseMove() {
	canvas.addEventListener("mousemove", function(e){
		var rect = e.target.getBoundingClientRect();
		if('ontouchend' in document){
			var touch = e.touches[0] || e.changedTouches[0];
			mouseX = (touch.clientX - rect.left)/screenRate;
			mouseY = (touch.clientY - rect.top)/screenRate;
		}else{
			mouseX = (e.clientX - rect.left)/screenRate;
			mouseY = (e.clientY - rect.top)/screenRate;
		}
	});
	if (dragFlg) {
		icons.Draw(mouseX, mouseY, iconArray.selectedIcon.column, iconArray.selectedIcon.row);
	}
}
function iconMouseUp(e) {
	var rect = e.target.getBoundingClientRect();
	if('ontouchend' in document){
		var touch = e.touches[0] || e.changedTouches[0];
		mouseX = (touch.clientX - rect.left)/screenRate;
		mouseY = (touch.clientY - rect.top)/screenRate;
	}else{
		mouseX = (e.clientX - rect.left)/screenRate;
		mouseY = (e.clientY - rect.top)/screenRate;
	}

	dragFlg = false;
	var oldIX = iconArray.selectedIcon.column;
	var oldIY = iconArray.selectedIcon.row;
	var nowIX = Math.floor((mouseX - iconArray.x) / iconArray.iconWidth);
	var nowIY = Math.floor((mouseY - iconArray.y) / iconArray.iconHeight);
	
	iconSwap(oldIX, oldIY, nowIX, nowIY);
	matchResolve();
	
	iconArray.selectedIcon.column = -1;
	iconArray.selectedIcon.row = -1;
}
gameLoading();

Comments

[okina]

ときどきというのは、同じことをしてバグが発生するときとしないときがあるということでしょうか？

[nosonosolife]

その通りです

[okina]

規則性はありませんか？
また、エラーが発生したときにコンソール等にエラーが出てたりしませんか？

[nosonosolife]

>規則性はありませんか
必ず一番端の行の絵柄が表示されないような気がします
>コンソール等にエラーが出てたりしませんか
以下のようなエラーが出ます
TypeError: iconArray.icons[x1] is undefined(絵柄のドラッグが終わりマウスのボタンを離したとき)
TypeError: iconArray.icons[(i + 1)][j] is undefined（絵柄が消えるとき）※出るときと出ないときがある

[okina]

そういう情報は極めて重要だったりしますので、今後記載するようにしていただけると助かります。

また、それらのエラーを元に検索かけたりして頭を悩ませるのもコーディングの楽しみの一つです。

[okina]

そのエラーコピーしたものですか？

[nosonosolife]

はい

[okina]

再現環境作って検証しますので少々お待ちください