Anonymní profil peter – Programujte.com

Chtelo by to neco, co se da spustit :) Je tu moznost treba jsfiddle.net. Takhle fakt nemuzu hadat chybu, kdyz mi konzola hlasi neexistujici htm elementy.
Zkousel jsi cyklus pro cells[i].style.backgroundPosition?
Na to startovani a ukonceni intervalu bych si udelal funkci.
Casovac bys mel nejdriv zastavit a az pak menit promenne, jako treba accelerated.
Co se stane, kdyz na keydown klavesy 40 a keyup se spusti setinterval? Maler, protoze tyto dve udalosti mohou navazovat kratce na sebe a interval nema cas dokoncit prvni funkci.

<div id=log style="height:20em; overflow:auto;"></div>
<script>
function loguj(str)
{
document.getElementById('log').innerHTML+= str + "<br>";
}
</script>


<aside></aside>
<div id=level></div>
<div id=score></div>
<canvas id=canvas></canvas>
<input type=button id=newGame value=newGame>


<script>
function fA() {loguj(1); clearInterval(gameInterval);}
function fB() {loguj(2); gameInterval = setInterval(tetrominoFall, interval);}
var
	x = 0,
	y = 0,
	canvas,
	lines = 0,
	level = 0,
	score = 0,
	run = false,
	levelElement,
	scoreElement,
	gameInterval,
	interval = 900,
	startLevel = 0,
	accelerated = false,
	actualTetromino = 0,
	rowScore = [ 40, 100, 300, 1200 ],
	tetromino =
	[
		[ "", "", "", "", "-24px 0px", "-24px 0px", "-24px 0px", "-24px 0px", "", "", "", "", "", "", "", "" ],
		[ "", "", "", "", "", "-48px 0px", "-48px 0px", "", "", "-48px 0px", "-48px 0px", "", "", "", "", "" ],
		[ "", "", "", "", "", "-72px 0px", "", "", "-72px 0px", "-72px 0px", "-72px 0px", "", "", "", "", "" ],
		[ "", "", "", "", "", "-96px 0px", "-96px 0px", "", "-96px 0px", "-96px 0px", "", "", "", "", "", "" ],
		[ "", "", "", "", "-120px 0px", "-120px 0px", "", "", "", "-120px 0px", "-120px 0px", "", "", "", "", "" ],
		[ "", "", "", "", "-144px 0px", "", "", "", "-144px 0px", "-144px 0px", "-144px 0px", "", "", "", "", "" ],
		[ "", "", "", "", "", "", "-168px 0px", "", "-168px 0px", "-168px 0px", "-168px 0px", "", "", "", "", "" ]
	],
	aside;

window.onload = function()
{
	var aside = document.getElementsByTagName("aside")[0]; //pp
	levelElement = document.getElementById("level");
	scoreElement = document.getElementById("score");
	canvas = document.getElementById("canvas");

	canvas.insertRow = function() {return {insertCell:function(){}};}; //pp
	canvas.rows = [0,1,2,3,4,5,6,7,8,9,10, 11,12,13,14,15,16,17,18,19,20]; //pp

	document.getElementById("newGame").onclick = newGame;

	var pageY = window.innerHeight / 2 - 240; //pp
	var pageX = window.innerWidth / 2 - 170; //pp
	canvas.style.left = pageX + "px";
	canvas.style.top = pageY + "px";
	aside.style.left = (pageX + 240) + "px";
	aside.style.top = pageY + "px";

	canvas.onkeydown = function(event)
	{
		switch((event || window.event).keyCode)
		{
			case 37:

				if(run && displayTetromino(x - 1, y, -1, 0))
					resetTetromino();

			break;

			case 38:

				if(run)
					tetrominoFilp();

			break;

			case 39:

				if(run && displayTetromino(x + 1, y, 1, 0))
					resetTetromino();

			break;

			case 40:

				if(run && !accelerated)
				{
					accelerated = true;
					fA();
loguj(3);
					fB();
				}

			break;
		}
	};
	canvas.onkeyup = function(event)
	{
		switch((event || window.event).keyCode)
		{
			case 40:

				if(run)
				{
					accelerated = false;
					fA();
loguj(4);
					fB();
				}

			break;

			case 113:

				newGame();

			break;
		}
	};

	for(var height = 0; height < 20; height++) //pp
	{
		var row = canvas.insertRow(0); //pp

		for(var width = 0; width < 10; width++)
			row.insertCell(0);
	}


	canvas.focus();
}

function newGame()
{
	fA();
loguj(5);

	score = 0;
	run = true;
	canvas.focus();
	resetTetromino();
	level = startLevel;
	levelElement.innerHTML = level;
	scoreElement.innerHTML = score;
	interval = 900 - startLevel * 30;

	for(height = 0; height < 20; height++)
	{
		cells = canvas.rows[height].cells;

		for(width = 0; width < 10; width++)
			cells[width].style.backgroundPosition = "";
	}

	fB();
}

function resetTetromino()
{
	x = 4;
var	n = -1;
	actualTetromino = Math.floor(Math.random() * 7);

	for(var row = 1; row < 20; row++)
		if(testRow(row))
		{
			removeRow(row);
			lines++;
			n++;
		}

	if(lines > 9)
	{
		level++;
		lines -= 10;
		interval -= 30;
		fA();
loguj(6);
		levelElement.innerHTML = level;
	}

	if(n > -1)
	{
		score += rowScore[n] * level + rowScore[n];
		scoreElement.innerHTML = score;
	}

	for(flip = Math.floor(Math.random() * 4); flip > 0; flip--)
	{
		newTetromino =
		[
			tetromino[actualTetromino][12],
			tetromino[actualTetromino][8],
			tetromino[actualTetromino][4],
			tetromino[actualTetromino][0],
			tetromino[actualTetromino][13],
			tetromino[actualTetromino][9],
			tetromino[actualTetromino][5],
			tetromino[actualTetromino][1],
			tetromino[actualTetromino][14],
			tetromino[actualTetromino][10],
			tetromino[actualTetromino][6],
			tetromino[actualTetromino][2],
			tetromino[actualTetromino][15],
			tetromino[actualTetromino][11],
			tetromino[actualTetromino][7],
			tetromino[actualTetromino][3]
		];
		tetromino[actualTetromino] = newTetromino;
	}

	for(currentY = 3; currentY >= 0; currentY--)
	{
		cells = tetromino[actualTetromino];

		if(cells[0] || cells[1] || cells[2] || cells[3])
		{
			y = currentY * -1;
			break;
		}
	}
}

function displayTetromino(newX, newY, xWay, yWay)
{
	for(currentY = newY, index = 0; currentY < newY + 4; currentY++)
		for(currentX = newX; currentX < newX + 4; currentX++, index++)
			if(tetromino[actualTetromino][index] && currentY >= 0)
			{
				nextIndex = index + xWay + yWay * 4;

				if
				(
					currentX < 0 || currentX > 9 || currentY == 20 ||
					(
						canvas.rows[currentY].cells[currentX].style.backgroundPosition
						&&
						(
							nextIndex > 15
							||
							!tetromino[actualTetromino][nextIndex]
						)
					)
				)
					return yWay;
			}

	clearTetromino();

	x = newX;
	y = newY;

	for(currentY = y, index = 0; currentY < y + 4; currentY++)
		for(currentX = x; currentX < x + 4; currentX++, index++)
			if(tetromino[actualTetromino][index] && currentY >= 0)
				canvas.rows[currentY].cells[currentX].style.backgroundPosition = tetromino[actualTetromino][index];

	return false;
}

function clearTetromino()
{
	for(currentY = y, index = 0; currentY < y + 4; currentY++)
		for(currentX = x; currentX < x + 4; currentX++, index++)
			if(tetromino[actualTetromino][index] && currentY > -1)
				canvas.rows[currentY].cells[currentX].style.backgroundPosition = "";
}

function tetrominoFall()
{
	if(displayTetromino(x, y + 1, 0, 1))
	{
		if(testFirstRow())
		{
			fA();
loguj(7);
			run = false;
		}
		else
			resetTetromino();
	}
}

function tetrominoFilp()
{
	can = true;
	clearTetromino();

	newTetromino =
	[
		tetromino[actualTetromino][12],
		tetromino[actualTetromino][8],
		tetromino[actualTetromino][4],
		tetromino[actualTetromino][0],
		tetromino[actualTetromino][13],
		tetromino[actualTetromino][9],
		tetromino[actualTetromino][5],
		tetromino[actualTetromino][1],
		tetromino[actualTetromino][14],
		tetromino[actualTetromino][10],
		tetromino[actualTetromino][6],
		tetromino[actualTetromino][2],
		tetromino[actualTetromino][15],
		tetromino[actualTetromino][11],
		tetromino[actualTetromino][7],
		tetromino[actualTetromino][3]
	];

	for(currentY = y, index = 0; currentY < y + 4; currentY++)
		for(currentX = x; currentX < x + 4; currentX++, index++)
			if(newTetromino[index])
				if
				(
					currentX < 0 || currentX > 9 || currentY == 20 ||
					canvas.rows[currentY].cells[currentX].style.backgroundPosition
				)
				{
					can = false;
					break;
				}

	if(can)
		tetromino[actualTetromino] = newTetromino;

	displayTetromino(x, y, 0, 0);
}

function testRow(row)
{
	var cells = canvas.rows[row].cells;
	return cells[0].style.backgroundPosition && cells[1].style.backgroundPosition &&
	cells[2].style.backgroundPosition && cells[3].style.backgroundPosition &&
	cells[4].style.backgroundPosition && cells[5].style.backgroundPosition &&
	cells[6].style.backgroundPosition && cells[7].style.backgroundPosition &&
	cells[8].style.backgroundPosition && cells[9].style.backgroundPosition;
}

function testFirstRow()
{
	var cells = canvas.rows[0].cells;
	return cells[0].style.backgroundPosition || cells[1].style.backgroundPosition ||
	cells[2].style.backgroundPosition || cells[3].style.backgroundPosition ||
	cells[4].style.backgroundPosition || cells[5].style.backgroundPosition ||
	cells[6].style.backgroundPosition || cells[7].style.backgroundPosition ||
	cells[8].style.backgroundPosition || cells[9].style.backgroundPosition;
}

function removeRow(rowIndex)
{
	canvas.deleteRow(rowIndex);
	newRow = canvas.insertRow(0);

	for(x = 0; x < 10; x++)
		newRow.insertCell(0);
}


</script>

Vypsalo mi to 1 a 5, pak to skoncilo dalsi chybou v konzoli (uz asi 20, co jsem opravoval, abych se pokusil z toho udelat neco funkcniho) a prestalo mne to bavit.

Mozna se pokousis udelat neco takovehoto, jako vetsina zacatecniku, co nechapou casovace...

start();
setTimeout("kolo",1000)
setTimeout("kolo",1000)
konec();

Tak takhle nee.
 

function classHra()
{
this.start = function() {...}
this.startKolo = function {setTimeout("hra.kolo",1000);}
this.kolo = function() {... if (konec_kola) this.startKolo();}
this.konec = function() {...}
}

var hra = new classHra();
hra.start();

Cili, v casovaci je funkce, ktera ma na konci if-else rozhodovani, co ma delat. Bud ukonci hru a nebo spusti znovu funkci pro nove kolo.

Normalne to funguje tak, ze konec kola zavisi na kliknuti na tlacitko nebo vyprseni casoveho limitu a nebo nejakem kliknuti, treba polozeni posledni kosticku puzzle na spravne misto. Na tu udalost muzes navazat funkci nextLevel();

onclick = "hotovo(); nextLevel();"
onclick = "if (hotovo()==true) {nextLevel();}"
onclick = "hotovoNext();"
function hotovoNext() {if (hotovo()==true) {nextLevel();})
function hotovoNext() {var bool = hotovo(); if (bool==true) {nextLevel();})

Nevim, jak vypada tvuj kod. Takze to zkus popsat tak, aby tomu clovek rozumel, jak to ted vlastne funguje a jak to ma fungovat. Klidne i smyslenym kodem, neco jako:
 

start();
hrac1();
x = vyhral(hrac1);
if (x) {konec(hrac1); start();}
else {hrac2();}
x = vyhral(hrac2);
if (x) {konec(hrac2); start();}
else {hrac1();}
...

A ty bys treba chtel, aby se to opakovalo cyklem, dokud se nezaplni hraci plocha. 
Nebo mas jinou podminku, ktera urcuje, ze hra skoncila?

Mozna hledas httprequest, ajax / jquery. Kdyz by tech dat nebylo mnoho, vytahl bych si to vsechno do jedne textove promene uz pri nacitani a pak rozparsoval pres js. 

<div id="sel0"></div>
<div id="sel1"></div>

<script>
var data, i;
data = "a,b,c;\
A,B,C;\
D,E,F;\
G,H,I".split(';');

function writeSel(m,n)
{
var i, str, el2;
el2 = document.getElementById('sel'+m);
if (el2 && data[n])
  {
  str = '';
  for(i=0;i<data[n].length;i++)
    {str += "\n"+'<option value="'+i+'">'+data[n][i]+'<\/option>';}
  el2.innerHTML = "\n"+'<select onchange="roll(this);">' + str + '<\/select>';
  }
}

function roll(el1)
{
var m,n;
m = el1.parentNode.id;
m = m.replace(/\D+/,'') * 1 + 1;
n = el1.options[el1.selectedIndex].value * 1 + 1;
writeSel(m,n);
}

function init()
{
for(i=0;i<data.length;i++)
  {data[i] = data[i].split(',');}
writeSel(0,0);
writeSel(1,1);
}

init();
</script>

Jo, spoustu radku bys usetril, kdybys pouzil canvas a nesnazil se to prekreslovat rucne..

Rychlost uchovavam, zrychleni nee, to se pocita pokazde z polohy.
Ja to prepsal do js, protoze je to pro mne jednodussi.
Nic proti tvemu reseni, ale stovky radku se mi nechtelo zkoumat. Ale tak treba to udelam a odhalim nejvetsi zahadu vesmiru, proc mi to nejde :)

casovace mas dva. Jeden opakujici, druhy se vykona jednou. setTimeout, setinterval.