Простая игра на HTML5

[Влад Клыков]

Попробовал написать первую игру на js, до этого писал только обработчики событий на сайтах. Выбрал пакмана. Упрощенную версию написать получилось, она здесь. А вот сделать получше не удается. Застрял на добавлении плавной анимации движений. Может, не стоит использовать несколько таймеров, а сделать главный цикл типа такого:

var mainStack = new Array(20),
  mainLoopId = 0;

for(var i = 0; i < mainStack.length; i++){
  mainStack[i] = [];
}
function mainLoop(){
  mainLoopId = setInterval(function(){
    for(var i = 0; i < mainStack[0].length; i++){
      mainStack[0][i]();
    }
    mainStack.shift();
    mainStack.push([]);
  }, 50);
}

А добавлять функции в этот цикл при помощи

mainStack[5].push(functionName);

Или есть другие хорошие варианты построения такой игры? И прошу замечаний по написанному коду.

[Rise]

Влад Клыков, используй requestAnimationFrame и смотри как уровни можно рисовать:

/***********************
' ' - empty
'·' - point
'•' - energy
'#' - obstacle
'$' - special obstacle
'G' - pacman
'Q' - ghost
************************/

var levels = [

/******* level 1 *******/
'·····················' +
'·#·#·#·#·#·#·#·#·#·#·' +
'·•·#·•·#·····#·•·#·•·' +
'·#·#·#·#·#·#·#·#·#·#·' +
'·····················' +
'###·###·#####·###·###' +
'·····················' +
'·####·###·#·###·####·' +
'·#····#       #····#·' +
'···##·  ##$##  ·##···' +
'·###### #QQQ# ######·' +
'···##·  #####  ·##···' +
'·#····#       #····#·' +
'·####·###·#·###·####·' +
'··········G··········' +
'###·###·#####·###·###' +
'·····················' +
'·#·#·#·#·#·#·#·#·#·#·' +
'·•·#·•·#·····#·•·#·•·' + 
'·#·#·#·#·#·#·#·#·#·#·' +
'·····················',

/******* level 2 *******/

];

[Влад Клыков]

Спасибо, я до этого не догадался, и делал намного сложнее. А потом из этого сделать массив с объектами карты?

[Rise]

Влад Клыков, да

var currentLevel = initLevel(levels[0]);

function initLevel(levelMap) {
	
	var levelObj = {};

	var index = 0;
	
	for (var x = 0; x < 21; x++) {
		
		for (var y = 0; y < 21; y++) {

			var symbol = levelMap.charAt(index++);
			
			if (!levelObj[symbol]) {
				
				levelObj[symbol] = [];
			}
			
			levelObj[symbol].push([x,y]);
		}
	}
	
	return levelObj;
}

[xShift]

При нажатии вверх и вниз экран скроллится.

[Влад Клыков]

Да, не продумал это.