Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   Простая игра на HTML5 (https://javascript.ru/forum/project/66187-prostaya-igra-na-html5.html)

Влад Клыков 29.11.2016 22:25

Простая игра на 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 30.11.2016 16:43

Влад Клыков, используй requestAnimationFrame и смотри как уровни можно рисовать:
/***********************
' ' - empty
'·' - point
'•' - energy
'#' - obstacle
'$' - special obstacle
'G' - pacman
'Q' - ghost
************************/

var levels = [

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

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

];

Влад Клыков 30.11.2016 20:00

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

Rise 01.12.2016 02:13

Влад Клыков, да
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 01.12.2016 08:54

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

Влад Клыков 01.12.2016 14:07

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


Часовой пояс GMT +3, время: 05:45.